Theme plugins (#231)

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() };
+    },
+  });
 }