#34

frontend/src/App.tsx

@@ -10,9 +10,14 @@ import DevModeWatermark from '@/components/DevModeWatermark'
 import RouteBlockerOverlay from '@/components/RouteBlockerOverlay'
 import TopNav from '@/components/TopNav'
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
-import { UserSettingsProvider } from '@/components/users/UserSettingsProvider'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
+import {
+    applyClientAppearance,
+    fetchUserSettings,
+    getClientThemeMode,
+    seedClientThemeMode,
+} from '@/lib/settings'
 import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
 import MaterialBasePage from '@/pages/materials/MaterialBasePage'
 import MaterialDetailPage from '@/pages/materials/MaterialDetailPage'
@@ -105,6 +110,19 @@ const App: FC = () => {
   const [user, setUser] = useState<User | null> (null)
   const [status, setStatus] = useState (200)
 
+  useEffect (() => {
+    applyClientAppearance ()
+
+    const mediaQuery = window.matchMedia ('(prefers-color-scheme: dark)')
+    const handleThemeChange = () => {
+      if (getClientThemeMode () === 'system')
+	applyClientAppearance ()
+    }
+
+    mediaQuery.addEventListener ('change', handleThemeChange)
+    return () => mediaQuery.removeEventListener ('change', handleThemeChange)
+  }, [])
+
   useEffect (() => {
     const createUser = async () => {
       const data = await apiPost<{ code: string; user: User }> ('/users')
@@ -138,6 +156,23 @@ const App: FC = () => {
       createUser ()
   }, [])
 
+  useEffect (() => {
+    if (!(user))
+      return
+
+    void (async () => {
+      try
+      {
+	const settings = await fetchUserSettings ()
+	seedClientThemeMode (settings.theme)
+	applyClientAppearance ()
+      }
+      catch
+      {
+      }
+    }) ()
+  }, [user])
+
   switch (status)
   {
   case 503:
@@ -146,26 +181,24 @@ const App: FC = () => {
 
   return (
       <>
-	<UserSettingsProvider user={user}>
-	  <RouteBlockerOverlay/>
-	  {import.meta.env.DEV && <DevModeWatermark/>}
+	<RouteBlockerOverlay/>
+	{import.meta.env.DEV && <DevModeWatermark/>}
 
-	  <BrowserRouter>
-	    <DialogueProvider>
-	      <LayoutGroup>
-		<motion.div
-		    layout="position"
-		    transition={{ layout: { duration: .2, ease: 'easeOut' } }}
-		    className="relative flex flex-col h-dvh w-full overflow-y-hidden">
-		  <TopNav user={user}/>
-		  <RouteTransitionWrapper user={user} setUser={setUser}/>
-		</motion.div>
-	      </LayoutGroup>
+	<BrowserRouter>
+	  <DialogueProvider>
+	    <LayoutGroup>
+	      <motion.div
+		  layout="position"
+		  transition={{ layout: { duration: .2, ease: 'easeOut' } }}
+		  className="relative flex flex-col h-dvh w-full overflow-y-hidden">
+		<TopNav user={user}/>
+		<RouteTransitionWrapper user={user} setUser={setUser}/>
+	      </motion.div>
+	    </LayoutGroup>
 
-	      <Toaster/>
-	    </DialogueProvider>
-	  </BrowserRouter>
-	</UserSettingsProvider>
+	    <Toaster/>
+	  </DialogueProvider>
+	</BrowserRouter>
       </>)
 }