refactor: spa theme (#10340)

packages/app/src/components/DashboardBody.tsx

@@ -0,0 +1,22 @@
+import { memo } from 'react'
+
+export interface DashboardBodyProps {
+    borderless?: boolean
+    children?: React.ReactNode
+}
+
+export const DashboardBody = memo<DashboardBodyProps>(({ children, borderless = false }) => {
+    if (borderless) {
+    }
+    return (
+        <div className="bg-white dark:bg-black p-5 pt-0">
+            {borderless ? (
+                children
+            ) : (
+                <div className="border rounded-lg border-line-light dark:border-neutral-800 overflow-hidden">
+                    {children}
+                </div>
+            )}
+        </div>
+    )
+})

packages/app/src/components/DashboardContainer.tsx

@@ -1,11 +1,13 @@
+import { useDeferredValue, useLayoutEffect, useState } from 'react'
 import { Bars3Icon } from '@heroicons/react/20/solid'
-import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
 import { EmptyStatus, SearchResultInspector } from '@masknet/shared'
 import { DisableShadowRootContext, ShadowRootIsolation } from '@masknet/theme'
 import { useLookupAddress } from '@masknet/web3-hooks-base'
-import { useCallback, useDeferredValue, useEffect, useState } from 'react'
 import { DashboardContext } from '../contexts/DashboardContext.js'
 import { useSetThemeMode, useThemeMode } from '../helpers/setThemeMode.js'
+import { DashboardBody } from './DashboardBody.js'
+import { DashboardHeader } from './DashboardHeader.js'
+import { SearchBox } from './SearchBox.js'
 
 export interface DashboardContainerProps {
     children: React.ReactNode
@@ -16,65 +18,43 @@ export function DashboardContainer(props: DashboardContainerProps) {
     const [search, setSearch] = useState('')
     const { value: registeredAddress = '' } = useLookupAddress(undefined, useDeferredValue(search))
     const keyword = registeredAddress || search
+
     const { setSidebarOpen } = DashboardContext.useContainer()
-    const onChange = useCallback(
-        (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => setSearch(e.target.value),
-        [],
-    )
     const setThemeMode = useSetThemeMode()
     const mode = useThemeMode()
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         setThemeMode(mode)
     }, [setThemeMode, mode])
 
     return (
         <div className="xl:pl-72 ">
-            <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-6 border-b border-line-light dark:border-neutral-800 px-4 sm:px-6 lg:px-8">
+            <div className="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-6 border-b border-line-light dark:border-neutral-800 px-4 sm:px-6 lg:px-8 bg-white dark:bg-black">
                 <button
                     type="button"
                     className="-m-2.5 p-2.5 dark:text-white text-black xl:hidden"
                     onClick={() => setSidebarOpen(true)}>
                     <span className="sr-only">Open sidebar</span>
                     <Bars3Icon className="h-5 w-5" aria-hidden="true" />
                 </button>
-                <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
-                    <label htmlFor="search-field" className="sr-only">
-                        Search
-                    </label>
-                    <div className="relative w-full">
-                        <MagnifyingGlassIcon
-                            className="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-black dark:text-white"
-                            aria-hidden="true"
-                        />
-                        <input
-                            id="search-field"
-                            className="dark:bg-black bg-white block h-full w-full border-0 bg-transparent py-0 pl-8 pr-0 dark:text-white text-black focus:ring-0 sm:text-sm"
-                            placeholder="eg: Twitter accounts, Persona public keys, wallet addresses or ENS"
-                            type="search"
-                            name="search"
-                            onChange={onChange}
-                        />
-                    </div>
-                </div>
+                <SearchBox onChange={(keyword) => setSearch(keyword)} />
             </div>
             {keyword ? (
-                <div className=" lg:px-8">
-                    <div className="bg-white dark:bg-black p-5 pt-0">
-                        <div className="border rounded-lg overflow-hidden dark:border-line-dark border-line-light">
-                            <DisableShadowRootContext.Provider value={false}>
-                                <ShadowRootIsolation>
-                                    <SearchResultInspector
-                                        keyword={keyword}
-                                        empty={<EmptyStatus>No results</EmptyStatus>}
-                                    />
-                                </ShadowRootIsolation>
-                            </DisableShadowRootContext.Provider>
-                        </div>
-                    </div>
+                <div className="h-[calc(100vh_-_64px)] overflow-auto lg:px-8">
+                    <DashboardHeader title="DSearch" />
+                    <DashboardBody>
+                        <DisableShadowRootContext.Provider value={false}>
+                            <ShadowRootIsolation>
+                                <SearchResultInspector
+                                    keyword={keyword}
+                                    empty={<EmptyStatus>No results</EmptyStatus>}
+                                />
+                            </ShadowRootIsolation>
+                        </DisableShadowRootContext.Provider>
+                    </DashboardBody>
                 </div>
             ) : (
-                <div className="lg:px-8">{children}</div>
+                <div className="h-[calc(100vh_-_64px)] overflow-auto lg:px-8">{children}</div>
             )}
         </div>
     )

packages/app/src/components/DashboardMobile.tsx

@@ -50,12 +50,12 @@ export function DashboardForMobile(props: DashboardForMobileProps) {
                                         className="-m-2.5 p-2.5"
                                         onClick={() => setSidebarOpen(false)}>
                                         <span className="sr-only">Close sidebar</span>
-                                        <XMarkIcon className="h-6 w-6 dark:text-white text-black" aria-hidden="true" />
+                                        <XMarkIcon className="h-6 w-6 text-white" aria-hidden="true" />
                                     </button>
                                 </div>
                             </Transition.Child>
                             {/* Sidebar component, swap this element with another sidebar if you like */}
-                            <div className="flex grow flex-col gap-y-5 overflow-y-auto dark:bg-black bg-white px-6 ring-1 ring-line-light dark:ring-line-dark">
+                            <div className="flex grow flex-col gap-y-5 overflow-y-auto dark:bg-black bg-white px-6">
                                 <div className="flex h-16 shrink-0 items-center">
                                     <WalletItem />
                                 </div>

packages/app/src/components/Navigation.tsx

@@ -34,8 +34,8 @@ function NavigationLink(props: (typeof navigation)[0]) {
                 to={to}
                 className={classNames(
                     matched
-                        ? 'dark:bg-menu-dark bg-menu-light dark:text-link-dark bg-menu text-link-light'
-                        : ' text-item-light dark:text-item-dark dark:hover:text-white dark:hover:bg-menu-dark hover:text-indigo-600 hover:bg-menu-light',
+                        ? 'dark:bg-menu-dark bg-menu-light dark:text-link-dark bg-menu text-blue-600'
+                        : 'text-item-light dark:text-item-dark hover:bg-gray-100 dark:hover:text-white dark:hover:bg-gray-900',
                     'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold',
                 )}>
                 <props.icon className="h-6 w-6 shrink-0" aria-hidden="true" />

packages/app/src/components/PageContainer.tsx

@@ -1,7 +1,8 @@
-import { DisableShadowRootContext, ShadowRootIsolation } from '@masknet/theme'
 import { memo } from 'react'
+import { DisableShadowRootContext, ShadowRootIsolation } from '@masknet/theme'
 import { DashboardHeader } from './DashboardHeader.js'
 import { DashboardContainer } from './DashboardContainer.js'
+import { DashboardBody } from './DashboardBody.js'
 
 interface PageContainerProps {
     children?: React.ReactNode
@@ -13,14 +14,11 @@ export const PageContainer = memo<PageContainerProps>(({ children, title = '' })
         <DashboardContainer>
             <main>
                 <DashboardHeader title={title} />
-
-                <div className="bg-white dark:bg-black p-5 pt-0">
-                    <div className="border rounded-lg border-line-light dark:border-neutral-800 overflow-hidden">
-                        <DisableShadowRootContext.Provider value={false}>
-                            <ShadowRootIsolation>{children}</ShadowRootIsolation>
-                        </DisableShadowRootContext.Provider>
-                    </div>
-                </div>
+                <DashboardBody>
+                    <DisableShadowRootContext.Provider value={false}>
+                        <ShadowRootIsolation>{children}</ShadowRootIsolation>
+                    </DisableShadowRootContext.Provider>
+                </DashboardBody>
             </main>
         </DashboardContainer>
     )

packages/app/src/components/SearchBox.tsx

@@ -0,0 +1,49 @@
+import { useCallback, useState } from 'react'
+import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'
+
+export interface SearchBoxProps {
+    onChange: (keyword: string) => void
+}
+
+export function SearchBox(props: SearchBoxProps) {
+    const { onChange } = props
+    const [keyword, setKeyword] = useState('')
+
+    const onFocus = useCallback((e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        e.target.select()
+    }, [])
+
+    const handleKeywordChange = useCallback(
+        (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+            const newKeyword = e.target.value
+            setKeyword(newKeyword)
+            onChange(newKeyword) // Invoke the onChange prop when the keyword changes
+        },
+        [onChange],
+    )
+
+    return (
+        <div className="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
+            <label htmlFor="search-field" className="sr-only">
+                Search
+            </label>
+            <div className="relative w-full">
+                <MagnifyingGlassIcon
+                    className="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-black dark:text-white"
+                    aria-hidden="true"
+                />
+                <input
+                    id="search-field"
+                    className="dark:bg-black bg-white block h-full w-full border-0 bg-transparent py-0 pl-8 pr-0 dark:text-white text-black focus:ring-0 sm:text-sm"
+                    placeholder="eg: Twitter accounts, Persona public keys, wallet addresses or ENS"
+                    type="search"
+                    name="search"
+                    onFocus={onFocus}
+                    onChange={handleKeywordChange}
+                    value={keyword}
+                    autoComplete="off"
+                />
+            </div>
+        </div>
+    )
+}

packages/app/src/main/index.tsx

@@ -37,13 +37,13 @@ function DecryptMessageWorker(props: { text: string; version: string }) {
 
     return (
         <RegistryContext.Provider value={registry.getTypedMessageRender}>
-            <TypedMessageRender message={message} />
+            <div className="p-5">
+                <TypedMessageRender message={message} />
 
-            <Suspense fallback={<Typography>Plugin is loading...</Typography>}>
-                <div className="border mt-3 pt-3 rounded-lg">
+                <Suspense fallback={<Typography>Plugin is loading...</Typography>}>
                     <PluginRender message={message} />
-                </div>
-            </Suspense>
+                </Suspense>
+            </div>
         </RegistryContext.Provider>
     )
 }

packages/app/src/pages/ExplorePage.tsx

@@ -4,6 +4,7 @@ import { DashboardContainer } from '../components/DashboardContainer.js'
 import { DashboardHeader } from '../components/DashboardHeader.js'
 import { createPostInfoContext } from '../helpers/createPostInfoContext.js'
 import { DecryptMessage } from '../main/index.js'
+import { DashboardBody } from '../components/DashboardBody.js'
 
 export interface ExplorePageProps {}
 
@@ -14,10 +15,10 @@ export default function ExplorePage(props: ExplorePageProps) {
         <PostInfoContext.Provider value={context}>
             <DashboardContainer>
                 <main id="explore">
-                    <DashboardHeader title="Deployments" />
-                    <div className="bg-white dark:bg-black p-5 pt-0">
+                    <DashboardHeader title="Encrypted Post" />
+                    <DashboardBody>
                         <DecryptMessage />
-                    </div>
+                    </DashboardBody>
                 </main>
             </DashboardContainer>
         </PostInfoContext.Provider>