Workspaces in Workspaces all around

src/apps/officer-web/state/types/user-settings.ts

@@ -15,7 +15,7 @@ export type UserSettings = {
     defaultModel: string | null;
   };
   appearance: {
-    theme: string;
+    colorMode: 'light' | 'dark';
     colorTheme: string;
   };
   languages: {
@@ -44,7 +44,7 @@ export const DEFAULT_SETTINGS: UserSettings = {
     defaultModel: null,
   },
   appearance: {
-    theme: 'light',
+    colorMode: 'light',
     colorTheme: 'DuckPond',
   },
   languages: {

src/apps/officer-web/state/useInitialData.ts

@@ -1,13 +1,13 @@
 import { useChatSessions } from '@/state/useChatSessions';
 import { usePlans } from './usePlans';
 import { useSettings } from './useSettings';
-import { useThemeSync } from './useThemeSync';
+import { useColorModeSync } from './useThemeSync';
 
 export const useInitialData = () => {
   const { sessions } = useChatSessions();
   const { plans } = usePlans();
   const { settings } = useSettings();
-  useThemeSync();
+  useColorModeSync();
 
   return { sessions, plans, settings };
 };

src/apps/officer-web/state/useThemeSync.ts

@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
-import { useTheme } from '@/components/ui/ThemeProvider';
+import { useColorMode } from '@/components/ui/ThemeProvider';
 import { useSettings } from './useSettings';
 
-export const useThemeSync = () => {
+export const useColorModeSync = () => {
   const { settings } = useSettings();
-  const { setTheme } = useTheme();
+  const { setColorMode } = useColorMode();
 
   useEffect(() => {
     if (!settings) return;
-    setTheme('light');
-  }, [settings?.appearance?.colorTheme]);
+    setColorMode(settings.appearance.colorMode);
+  }, [settings?.appearance?.colorMode]);
 };

src/apps/officer-web/state/useUserState.ts

@@ -6,14 +6,14 @@ import type { UserState } from './types/user-settings';
 
 const QUERY_KEY = ['USER_STATE'];
 
-export function useUserState<T>(key: string, defaultValue: T): [T, (value: T | ((prev: T) => T)) => void] {
+export function useUserState<T>(key: string, defaultValue: T): [T, (value: T | ((prev: T) => T)) => void, boolean] {
   const client = useClient();
   const { isAuthenticated } = useAuth();
   const queryClient = useQueryClient();
   const clientRef = useRef(client);
   clientRef.current = client;
 
-  const { data: state = {} } = useQuery<UserState>({
+  const { data: state = {}, isSuccess } = useQuery<UserState>({
     queryKey: QUERY_KEY,
     enabled: isAuthenticated,
     queryFn: () => client.get<UserState>('/user/state'),
@@ -36,5 +36,5 @@ export function useUserState<T>(key: string, defaultValue: T): [T, (value: T | (
     [key, defaultValue, queryClient],
   );
 
-  return [value, setValue];
+  return [value, setValue, isSuccess];
 }