A bunch more theme stuff

src-web/hooks/useAppInfo.ts

@@ -16,5 +16,5 @@ export function useAppInfo() {
       const metadata = await invoke('cmd_metadata');
       return metadata as AppInfo;
     },
-  });
+  }).data;
 }

src-web/hooks/useCommandPalette.tsx

@@ -8,7 +8,7 @@ export function useCommandPalette() {
   const appInfo = useAppInfo();
   useHotKey('command_palette.toggle', () => {
     // Disabled in production for now
-    if (!appInfo.data?.isDev) {
+    if (!appInfo?.isDev) {
       return;
     }
 

src-web/hooks/useResolvedAppearance.ts

@@ -1,35 +1,23 @@
 import { useEffect, useState } from 'react';
 import type { Appearance } from '../lib/theme/window';
-import {
-  setAppearanceOnDocument,
-  getPreferredAppearance,
-  subscribeToPreferredAppearanceChange,
-} from '../lib/theme/window';
+import { getPreferredAppearance, subscribeToPreferredAppearanceChange } from '../lib/theme/window';
 import { useSettings } from './useSettings';
 
-export function useSyncAppearance() {
+export function useResolvedAppearance() {
   const [preferredAppearance, setPreferredAppearance] = useState<Appearance>(
     getPreferredAppearance(),
   );
 
-  const settings = useSettings();
-
   // Set appearance when preferred theme changes
   useEffect(() => {
     return subscribeToPreferredAppearanceChange(setPreferredAppearance);
   }, []);
 
+  const settings = useSettings();
   const appearance =
     settings == null || settings?.appearance === 'system'
       ? preferredAppearance
       : settings.appearance;
 
-  useEffect(() => {
-    if (settings == null) {
-      return;
-    }
-    setAppearanceOnDocument(settings.appearance as Appearance);
-  }, [appearance, settings]);
-
-  return { appearance };
+  return appearance;
 }

src-web/hooks/useResolvedTheme.ts

@@ -0,0 +1,20 @@
+import { isThemeDark } from '../lib/theme/window';
+import { useResolvedAppearance } from './useResolvedAppearance';
+import { useSettings } from './useSettings';
+import { useThemes } from './useThemes';
+
+export function useResolvedTheme() {
+  const appearance = useResolvedAppearance();
+  const settings = useSettings();
+  const { themes, fallback } = useThemes();
+
+  const darkThemes = themes.filter((t) => isThemeDark(t));
+  const lightThemes = themes.filter((t) => !isThemeDark(t));
+
+  const dark = darkThemes.find((t) => t.id === settings?.themeDark) ?? fallback.dark;
+  const light = lightThemes.find((t) => t.id === settings?.themeLight) ?? fallback.light;
+
+  const active = appearance === 'dark' ? dark : light;
+
+  return { dark, light, active };
+}

src-web/hooks/useSyncThemeToDocument.ts

@@ -0,0 +1,23 @@
+import { emit } from '@tauri-apps/api/event';
+import { useEffect } from 'react';
+import type { YaakTheme } from '../lib/theme/window';
+import { addThemeStylesToDocument, setThemeOnDocument } from '../lib/theme/window';
+import { useResolvedTheme } from './useResolvedTheme';
+
+export function useSyncThemeToDocument() {
+  const theme = useResolvedTheme();
+
+  useEffect(() => {
+    setThemeOnDocument(theme.active);
+    emitBgChange(theme.active);
+  }, [theme.active]);
+
+  useEffect(() => {
+    addThemeStylesToDocument(theme.active);
+  }, [theme.active]);
+}
+
+function emitBgChange(t: YaakTheme) {
+  if (t.background == null) return;
+  emit('yaak_bg_changed', t.background.hex()).catch(console.error);
+}

src-web/hooks/useSyncWindowTitle.ts

@@ -1,23 +1,24 @@
-// import { useEffect } from 'react';
-// import { fallbackRequestName } from '../lib/fallbackRequestName';
-// import { useActiveEnvironment } from './useActiveEnvironment';
-// import { useActiveRequest } from './useActiveRequest';
-// import { useActiveWorkspace } from './useActiveWorkspace';
+import { useEffect } from 'react';
+import { fallbackRequestName } from '../lib/fallbackRequestName';
+import { useActiveEnvironment } from './useActiveEnvironment';
+import { useActiveRequest } from './useActiveRequest';
+import { useActiveWorkspace } from './useActiveWorkspace';
 
 export function useSyncWindowTitle() {
-  // const activeRequest = useActiveRequest();
-  // const activeWorkspace = useActiveWorkspace();
-  // const activeEnvironment = useActiveEnvironment();
-  // useEffect(() => {
-  //   let newTitle = activeWorkspace ? activeWorkspace.name : 'Yaak';
-  //   if (activeEnvironment) {
-  //     newTitle += ` [${activeEnvironment.name}]`;
-  //   }
-  //   if (activeRequest) {
-  //     newTitle += ` – ${fallbackRequestName(activeRequest)}`;
-  //   }
-  //
-  //   // TODO: This resets the stoplight position so we can't use it yet
-  //   // getCurrent().setTitle(newTitle).catch(console.error);
-  // }, [activeEnvironment, activeRequest, activeWorkspace]);
+  const activeRequest = useActiveRequest();
+  const activeWorkspace = useActiveWorkspace();
+  const activeEnvironment = useActiveEnvironment();
+  useEffect(() => {
+    let newTitle = activeWorkspace ? activeWorkspace.name : 'Yaak';
+    if (activeEnvironment) {
+      newTitle += ` [${activeEnvironment.name}]`;
+    }
+    if (activeRequest) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      newTitle += ` – ${fallbackRequestName(activeRequest)}`;
+    }
+
+    // TODO: This resets the stoplight position so we can't use it yet
+    // invoke('cmd_set_title', { title: newTitle }).catch(console.error);
+  }, [activeEnvironment, activeRequest, activeWorkspace]);
 }

src-web/hooks/useThemes.ts

@@ -0,0 +1,13 @@
+import { yaakDark, yaakLight, yaakThemes } from '../lib/theme/themes';
+
+export function useThemes() {
+  const dark = yaakDark;
+  const light = yaakLight;
+
+  const otherThemes = yaakThemes
+    .filter((t) => t.id !== dark.id && t.id !== light.id)
+    .sort((a, b) => a.name.localeCompare(b.name));
+
+  const themes = [dark, light, ...otherThemes];
+  return { themes, fallback: { dark, light } };
+}