feat(subplebbit): add automatic theme based on nsfw or sfw tags

src/stores/use-theme-store.ts

@@ -1,16 +1,40 @@
 import { create, StoreApi } from 'zustand';
+import localForageLru from '@plebbit/plebbit-react-hooks/dist/lib/localforage-lru/index.js';
 
 interface ThemeState {
-  theme: string;
-  setTheme: (theme: string) => void;
+  themes: Record<string, string>;
+  setTheme: (subplebbitAddress: string, theme: string) => void;
+  getTheme: (subplebbitAddress: string) => string;
+  loadThemes: () => void;
 }
 
-const useThemeStore = create<ThemeState>((set: StoreApi<ThemeState>['setState']) => ({
-  theme: localStorage.getItem('theme') || 'yotsuba',
-  setTheme: (theme: string) => {
-    localStorage.setItem('theme', theme);
-    set({ theme });
+const themeStore = localForageLru.createInstance({
+  name: 'themeStore',
+  size: 1000,
+});
+
+const useThemeStore = create<ThemeState>((set: StoreApi<ThemeState>['setState'], get: StoreApi<ThemeState>['getState']) => ({
+  themes: {},
+  setTheme: async (subplebbitAddress: string, theme: string) => {
+    const currentThemes = get().themes;
+    const updatedThemes = { ...currentThemes, [subplebbitAddress]: theme };
+    await themeStore.setItem(subplebbitAddress, theme);
+    set({ themes: updatedThemes });
+  },
+  getTheme: (subplebbitAddress: string) => {
+    const currentThemes = get().themes;
+    return currentThemes[subplebbitAddress] || 'yotsuba-b';
+  },
+  loadThemes: async () => {
+    const entries: [string, string][] = await themeStore.entries();
+    const themes: Record<string, string> = {};
+    entries.forEach(([key, value]) => {
+      themes[key] = value;
+    });
+    set({ themes });
   },
 }));
 
+useThemeStore.getState().loadThemes();
+
 export default useThemeStore;