#34

frontend/src/App.tsx

@@ -1,5 +1,5 @@
-import { AnimatePresence, LayoutGroup, motion } from 'framer-motion'
-import { useEffect, useState } from 'react'
+import { AnimatePresence, LayoutGroup, MotionConfig, motion } from 'framer-motion'
+import { useEffect, useMemo, useState } from 'react'
 import { BrowserRouter,
 	 Navigate,
 	 Route,
@@ -12,12 +12,14 @@ import TopNav from '@/components/TopNav'
 import DialogueProvider from '@/components/dialogues/DialogueProvider'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
-import {
-    applyClientAppearance,
-    fetchUserSettings,
-    getClientThemeMode,
-    seedClientThemeMode,
-} from '@/lib/settings'
+import { applyClientAppearance,
+	 CLIENT_SETTINGS_EVENT,
+	 fetchUserSettings,
+	 getClientAnimationMode,
+	 getClientThemeMode,
+	 seedClientThemeMode } from '@/lib/settings'
+
+import type { ClientAnimationMode } from '@/lib/settings'
 import { KeyboardShortcutsProvider } from '@/lib/useKeyboardShortcuts'
 import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
 import MaterialBasePage from '@/pages/materials/MaterialBasePage'
@@ -110,6 +112,19 @@ const PostDetailRoute = ({ user }: { user: User | null }) => {
 const App: FC = () => {
   const [user, setUser] = useState<User | null> (null)
   const [status, setStatus] = useState (200)
+  const [animationMode, setAnimationMode] =
+      useState<ClientAnimationMode> (() => getClientAnimationMode ())
+
+  const appLayoutTransition = useMemo (
+      () => (
+	  animationMode === 'off'
+	  ? { duration: 0 }
+	  : animationMode === 'reduced'
+	    ? { duration: .08, ease: 'linear' as const }
+	    : { duration: .2, ease: 'easeOut' as const }
+      ),
+      [animationMode],
+  )
 
   useEffect (() => {
     applyClientAppearance ()
@@ -124,6 +139,16 @@ const App: FC = () => {
     return () => mediaQuery.removeEventListener ('change', handleThemeChange)
   }, [])
 
+  useEffect (() => {
+    const handleClientSettingsChange = () => {
+      setAnimationMode (getClientAnimationMode ())
+    }
+
+    window.addEventListener (CLIENT_SETTINGS_EVENT, handleClientSettingsChange)
+    return () =>
+	window.removeEventListener (CLIENT_SETTINGS_EVENT, handleClientSettingsChange)
+  }, [])
+
   useEffect (() => {
     const createUser = async () => {
       const data = await apiPost<{ code: string; user: User }> ('/users')
@@ -170,6 +195,7 @@ const App: FC = () => {
       }
       catch
       {
+	return
       }
     }) ()
   }, [user])
@@ -188,15 +214,24 @@ const App: FC = () => {
 	<BrowserRouter>
 	  <KeyboardShortcutsProvider>
 	    <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>
+	      <MotionConfig
+		  reducedMotion={
+		      animationMode === 'normal'
+		      ? 'never'
+		      : animationMode === 'reduced'
+			? 'user'
+			: 'always'
+		  }>
+		<LayoutGroup>
+		  <motion.div
+		      layout={animationMode === 'off' ? false : 'position'}
+		      transition={{ layout: appLayoutTransition }}
+		      className="relative flex flex-col h-dvh w-full overflow-y-hidden">
+		    <TopNav user={user}/>
+		    <RouteTransitionWrapper user={user} setUser={setUser}/>
+		  </motion.div>
+		</LayoutGroup>
+	      </MotionConfig>
 
 	      <Toaster/>
 	    </DialogueProvider>