#34

frontend/src/App.tsx

@@ -13,13 +13,11 @@ import DialogueProvider from '@/components/dialogues/DialogueProvider'
 import { Toaster } from '@/components/ui/toaster'
 import { apiPost, isApiError } from '@/lib/api'
 import { applyClientAppearance,
-	 CLIENT_SETTINGS_EVENT,
 	 fetchUserSettings,
-	 getClientAnimationMode,
 	 getClientThemeMode,
 	 seedClientThemeMode } from '@/lib/settings'
+import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
 
-import type { ClientAnimationMode } from '@/lib/settings'
 import { KeyboardShortcutsProvider } from '@/lib/useKeyboardShortcuts'
 import DeerjikistDetailPage from '@/pages/deerjikists/DeerjikistDetailPage'
 import MaterialBasePage from '@/pages/materials/MaterialBasePage'
@@ -112,8 +110,8 @@ 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 behaviourSettings = useClientBehaviourSettings ()
+  const animationMode = behaviourSettings.animation ?? 'normal'
 
   const appLayoutTransition = useMemo (
       () => (
@@ -139,16 +137,6 @@ 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')