Theme plugins (#231)

src-web/hooks/useGenerateThemeCss.ts

@@ -1,27 +1,12 @@
 import { copyToClipboard } from '../lib/copy';
-import { catppuccinMacchiato } from '../lib/theme/themes/catppuccin';
-import { githubLight } from '../lib/theme/themes/github';
-import { gruvboxDefault } from '../lib/theme/themes/gruvbox';
-import { hotdogStandDefault } from '../lib/theme/themes/hotdog-stand';
-import { monokaiProDefault } from '../lib/theme/themes/monokai-pro';
-import { rosePineDefault } from '../lib/theme/themes/rose-pine';
-import { yaakDark } from '../lib/theme/themes/yaak';
+import { getThemes } from '../lib/theme/themes';
 import { getThemeCSS } from '../lib/theme/window';
 import { useListenToTauriEvent } from './useListenToTauriEvent';
 
 export function useGenerateThemeCss() {
-  useListenToTauriEvent('generate_theme_css', () => {
-    const themesCss = [
-      yaakDark,
-      monokaiProDefault,
-      rosePineDefault,
-      catppuccinMacchiato,
-      githubLight,
-      gruvboxDefault,
-      hotdogStandDefault,
-    ]
-      .map(getThemeCSS)
-      .join('\n\n');
+  useListenToTauriEvent('generate_theme_css', async () => {
+    const themes = await getThemes();
+    const themesCss = themes.themes.map(getThemeCSS).join('\n\n');
     copyToClipboard(themesCss);
   });
 }

src-web/hooks/useResolvedTheme.ts

@@ -1,15 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
 import { settingsAtom } from '@yaakapp-internal/models';
 import { useAtomValue } from 'jotai';
-import { getResolvedTheme } from '../lib/theme/themes';
+import { getResolvedTheme, getThemes } from '../lib/theme/themes';
+import { usePluginsKey } from './usePlugins';
 import { usePreferredAppearance } from './usePreferredAppearance';
 
 export function useResolvedTheme() {
   const preferredAppearance = usePreferredAppearance();
   const settings = useAtomValue(settingsAtom);
-  return getResolvedTheme(
-    preferredAppearance,
-    settings.appearance,
-    settings.themeLight,
-    settings.themeDark,
-  );
+  const pluginKey = usePluginsKey();
+  return useQuery({
+    placeholderData: (prev) => prev,
+    queryKey: ['resolved_theme', preferredAppearance, settings.updatedAt, pluginKey],
+    queryFn: async () => {
+      const data = await getResolvedTheme(
+        preferredAppearance,
+        settings.appearance,
+        settings.themeLight,
+        settings.themeDark,
+      );
+      return { ...data, ...await getThemes() };
+    },
+  });
 }