chore: refactor theme and layout

Author: PatrickDinh

src/App.tsx

@@ -1,24 +1,18 @@
 import './App.css'
 import { routes } from './App.routes'
 import { RouterProvider, createBrowserRouter } from 'react-router-dom'
-import { ThemeProvider } from './features/theme/context/theme-provider'
-import { LayoutProvider } from './features/layout/context/layout-provider'
 import { TooltipProvider } from './features/common/components/tooltip'
 import { SettingsProvider } from './features/settings/components/settings-provider'
 
 const router = createBrowserRouter(routes)
 
 function App() {
   return (
-    <ThemeProvider defaultTheme="system" storageKey="vite-ui-theme">
+    <SettingsProvider>
       <TooltipProvider>
-        <SettingsProvider>
-          <LayoutProvider>
-            <RouterProvider router={router} />
-          </LayoutProvider>
-        </SettingsProvider>
+        <RouterProvider router={router} />
       </TooltipProvider>
-    </ThemeProvider>
+    </SettingsProvider>
   )
 }
 

src/features/layout/components/header.tsx

@@ -1,5 +1,5 @@
 import { cn } from '@/features/common/utils'
-import { ThemeToggle } from '@/features/theme/components/theme-toggle'
+import { ThemeToggle } from '@/features/settings/components/theme-toggle'
 import { ConnectWallet } from './connect-wallet'
 import { Search } from '@/features/search/components/search'
 import { useNetworkConfig } from '@/features/settings/data'

src/features/layout/components/left-side-bar-menu.tsx

@@ -8,9 +8,9 @@ import SvgHome from '@/features/common/components/icons/home'
 import { Button } from '@/features/common/components/button'
 import SvgChevronLeft from '@/features/common/components/icons/chevron-left'
 import { useCallback } from 'react'
-import { useLayout } from '../hooks/use-layout'
 import SvgChevronRight from '@/features/common/components/icons/chevron-right'
 import SvgCog from '@/features/common/components/icons/cog'
+import { useLayout } from '@/features/settings/data'
 
 type Props = {
   className?: string
@@ -23,19 +23,21 @@ export function LeftSideBarMenu({ className }: Props) {
     { urlTemplate: Urls.AppStudio, icon: <SvgCodeBlock />, text: 'App Studio' },
     { urlTemplate: Urls.Settings, icon: <SvgCog />, text: 'Settings' },
   ]
-  const { isLeftSideBarExpanded, setIsLeftSideBarExpanded } = useLayout()
+  const [layout, setLayout] = useLayout()
 
   const toggleLeftSideBar = useCallback(
-    () => setIsLeftSideBarExpanded(!isLeftSideBarExpanded),
-    [isLeftSideBarExpanded, setIsLeftSideBarExpanded]
+    () => setLayout((prev) => ({ ...prev, isLeftSideBarExpanded: !prev.isLeftSideBarExpanded })),
+    [setLayout]
   )
 
   return (
-    <NavigationMenu className={cn('bg-card transition-all duration-300 min-h-screen', className, isLeftSideBarExpanded ? 'w-52' : 'w-10')}>
+    <NavigationMenu
+      className={cn('bg-card transition-all duration-300 min-h-screen', className, layout.isLeftSideBarExpanded ? 'w-52' : 'w-10')}
+    >
       <NavigationMenuList className={cn('flex-col items-start')}>
         <NavigationMenuItem className={cn('flex justify-end')}>
           <Button variant="outline" size="icon" className={cn('text-primary')} onClick={toggleLeftSideBar}>
-            {isLeftSideBarExpanded ? <SvgChevronLeft /> : <SvgChevronRight />}
+            {layout.isLeftSideBarExpanded ? <SvgChevronLeft /> : <SvgChevronRight />}
           </Button>
         </NavigationMenuItem>
         {menuItems.map((menuItem, index) => (
@@ -46,7 +48,7 @@ export function LeftSideBarMenu({ className }: Props) {
                 className={cn('[&.active]:text-primary flex items-center p-2 gap-2 min-h-10 pl-3 whitespace-nowrap')}
               >
                 <div className={cn('text-primary')}>{menuItem.icon}</div>
-                <div className={cn(isLeftSideBarExpanded ? 'visible delay-100' : 'invisible delay-100')}>{menuItem.text}</div>
+                <div className={cn(layout.isLeftSideBarExpanded ? 'visible delay-100' : 'invisible delay-100')}>{menuItem.text}</div>
               </TemplatedNavLink>
             </NavigationMenuLink>
           </NavigationMenuItem>

src/features/layout/context/layout-provider.tsx

@@ -2,6 +2,7 @@ import { Provider, createStore } from 'jotai'
 import { useNetworkConfig } from '../data/network'
 import { useEffect } from 'react'
 import { setNetwork } from '../../common/data'
+import { useTheme } from '../data'
 
 type Props = {
   children: React.ReactNode
@@ -11,12 +12,28 @@ export let dataStore = createStore()
 
 export function SettingsProvider({ children }: Props) {
   const networkConfig = useNetworkConfig()
+  const [theme] = useTheme()
 
   useEffect(() => {
     setNetwork(networkConfig)
     dataStore = createStore()
   }, [networkConfig])
 
+  useEffect(() => {
+    const root = window.document.documentElement
+
+    root.classList.remove('light', 'dark')
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+
+      root.classList.add(systemTheme)
+      return
+    }
+
+    root.classList.add(theme)
+  }, [theme])
+
   return (
     <Provider key={networkConfig.id} store={dataStore}>
       {children}

src/features/layout/hooks/use-layout.tsx

@@ -1,4 +1,4 @@
-import { NetworkSelect } from '@/features/layout/components/network-select'
+import { NetworkSelect } from '@/features/settings/components/network-select'
 
 export function Settings() {
   return <NetworkSelect />

src/features/layout/components/network-select.tsx renamed to src/features/settings/components/network-select.tsx

@@ -1,6 +1,6 @@
 import { describe, it, expect } from 'vitest'
 import { render, waitFor } from '@/tests/testing-library'
-import { ThemeToggle, themeTogglelabel } from '@/features/theme/components/theme-toggle'
+import { ThemeToggle, themeTogglelabel } from '@/features/settings/components/theme-toggle'
 import { executeComponentTest } from '@/tests/test-component'
 
 describe('when the theme is toggled to dark', () => {