feat(styles): remember style selection per sfw or nsfw category, instead of single board

src/components/board-buttons/board-buttons.tsx

@@ -172,6 +172,24 @@ export const TimeFilter = ({ isInAllView, isInCatalogView, isInSubscriptionsView
   );
 };
 
+const AdButton = () => {
+  return (
+    <div className={styles.adButton}>
+      [
+      <Link
+        to='/boards'
+        onClick={(e) => {
+          e.preventDefault();
+          alert('work in progress');
+        }}
+      >
+        Plebbit Leaderboard
+      </Link>
+      ]
+    </div>
+  );
+};
+
 export const MobileBoardButtons = () => {
   const params = useParams();
   const location = useLocation();
@@ -186,19 +204,7 @@ export const MobileBoardButtons = () => {
 
   return (
     <div className={`${styles.mobileBoardButtons} ${!isInCatalogView ? styles.addMargin : ''}`}>
-      <div className={styles.adButton}>
-        [
-        <Link
-          to='/boards'
-          onClick={(e) => {
-            e.preventDefault();
-            alert('work in progress');
-          }}
-        >
-          Vote for Boards
-        </Link>
-        ]
-      </div>
+      <AdButton />
       <hr />
       {isInPostView || isInPendingPostPage ? (
         <>
@@ -248,19 +254,7 @@ export const DesktopBoardButtons = () => {
   return (
     <>
       <hr />
-      <div className={styles.adButton}>
-        [
-        <Link
-          to='/boards'
-          onClick={(e) => {
-            e.preventDefault();
-            alert('work in progress');
-          }}
-        >
-          Vote for Boards
-        </Link>
-        ]
-      </div>
+      <AdButton />
       <hr />
       <div className={styles.desktopBoardButtons}>
         {isInPostView || isInPendingPostPage ? (

src/hooks/use-initial-theme.ts

@@ -15,21 +15,18 @@ const useInitialTheme = () => {
   const isInAllView = isAllView(location.pathname, params);
   const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
 
-  if (isInAllView || isInSubscriptionsView) {
-    const userTheme = getTheme(isInAllView ? 'all' : 'subscriptions');
-    return userTheme || 'yotsuba-b';
+  if (isInAllView) {
+    return getTheme('all') || 'yotsuba-b';
+  } else if (isInSubscriptionsView) {
+    return getTheme('subscriptions') || 'yotsuba-b';
   } else if (isInHomeView || isInNotFoundView) {
     return 'yotsuba';
   } else if (subplebbitAddress) {
-    const userTheme = getTheme(subplebbitAddress);
-    if (userTheme) {
-      return userTheme;
-    }
     const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
     if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
-      return 'yotsuba';
+      return getTheme('nsfw') || 'yotsuba';
     }
-    return 'yotsuba-b';
+    return getTheme('sfw') || 'yotsuba-b';
   }
   return 'yotsuba';
 };

src/hooks/use-theme.ts

@@ -2,7 +2,9 @@ import { useState, useEffect } from 'react';
 import { useLocation, useParams } from 'react-router-dom';
 import { isAllView, isSubscriptionsView } from '../lib/utils/view-utils';
 import useThemeStore from '../stores/use-theme-store';
+import useDefaultSubplebbits from './use-default-subplebbits';
 import useInitialTheme from './use-initial-theme';
+import { nsfwTags } from '../views/home/home';
 
 const themeClasses = ['yotsuba', 'yotsuba-b', 'futaba', 'burichan', 'tomorrow', 'photon'];
 
@@ -15,10 +17,11 @@ const updateThemeClass = (newTheme: string) => {
 
 const useTheme = (): [string, (theme: string) => void] => {
   const location = useLocation();
-  const params = useParams();
+  const params = useParams<{ subplebbitAddress: string }>();
   const setThemeStore = useThemeStore((state) => state.setTheme);
   const getTheme = useThemeStore((state) => state.getTheme);
   const loadThemes = useThemeStore((state) => state.loadThemes);
+  const subplebbits = useDefaultSubplebbits();
 
   const initialTheme = useInitialTheme();
   const [theme, setLocalTheme] = useState<string>(() => initialTheme);
@@ -41,30 +44,40 @@ const useTheme = (): [string, (theme: string) => void] => {
     const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
 
     let storedTheme = null;
-    if (subplebbitAddress) {
-      storedTheme = getTheme(subplebbitAddress);
-    } else if (isInAllView) {
+    if (isInAllView) {
       storedTheme = getTheme('all');
     } else if (isInSubscriptionsView) {
       storedTheme = getTheme('subscriptions');
+    } else if (subplebbitAddress) {
+      const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
+      if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
+        storedTheme = getTheme('nsfw');
+      } else {
+        storedTheme = getTheme('sfw');
+      }
     }
 
     const themeToSet = storedTheme || initialTheme;
     setLocalTheme(themeToSet);
     updateThemeClass(themeToSet);
-  }, [initialTheme, location.pathname, params, getTheme, themesLoaded]);
+  }, [initialTheme, location.pathname, params, getTheme, themesLoaded, subplebbits]);
 
   const setSubplebbitTheme = async (newTheme: string) => {
     const subplebbitAddress = params?.subplebbitAddress;
     const isInAllView = isAllView(location.pathname, params);
     const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
 
-    if (subplebbitAddress) {
-      await setThemeStore(subplebbitAddress, newTheme);
-    } else if (isInAllView) {
+    if (isInAllView) {
       await setThemeStore('all', newTheme);
     } else if (isInSubscriptionsView) {
       await setThemeStore('subscriptions', newTheme);
+    } else if (subplebbitAddress) {
+      const subplebbit = subplebbits.find((s) => s.address === subplebbitAddress);
+      if (subplebbit && subplebbit.tags && subplebbit.tags.some((tag) => nsfwTags.includes(tag))) {
+        await setThemeStore('nsfw', newTheme);
+      } else {
+        await setThemeStore('sfw', newTheme);
+      }
     }
 
     setLocalTheme(newTheme);

src/stores/use-theme-store.ts

@@ -2,9 +2,14 @@ import { create, StoreApi } from 'zustand';
 import localForageLru from '@plebbit/plebbit-react-hooks/dist/lib/localforage-lru/index.js';
 
 interface ThemeState {
-  themes: Record<string, string>;
-  setTheme: (subplebbitAddress: string, theme: string) => void;
-  getTheme: (subplebbitAddress: string) => string | null;
+  themes: {
+    nsfw: string;
+    sfw: string;
+    all: string;
+    subscriptions: string;
+  };
+  setTheme: (category: keyof ThemeState['themes'], theme: string) => void;
+  getTheme: (category: keyof ThemeState['themes']) => string | null;
   loadThemes: () => Promise<void>;
 }
 
@@ -14,20 +19,30 @@ const themeStore = localForageLru.createInstance({
 });
 
 const useThemeStore = create<ThemeState>((set: StoreApi<ThemeState>['setState'], get: StoreApi<ThemeState>['getState']) => ({
-  themes: {},
-  setTheme: async (subplebbitAddress: string, theme: string) => {
+  themes: {
+    nsfw: 'yotsuba',
+    sfw: 'yotsuba-b',
+    all: 'yotsuba-b',
+    subscriptions: 'yotsuba-b',
+  },
+  setTheme: async (category, theme) => {
     const currentThemes = get().themes;
-    const updatedThemes = { ...currentThemes, [subplebbitAddress]: theme };
-    await themeStore.setItem(subplebbitAddress, theme);
+    const updatedThemes = { ...currentThemes, [category]: theme };
+    await themeStore.setItem(category, theme);
     set({ themes: updatedThemes });
   },
-  getTheme: (subplebbitAddress: string) => {
+  getTheme: (category) => {
     const currentThemes = get().themes;
-    return currentThemes[subplebbitAddress] || null;
+    return currentThemes[category] || null;
   },
   loadThemes: async () => {
-    const entries: [string, string][] = await themeStore.entries();
-    const themes: Record<string, string> = {};
+    const entries: [keyof ThemeState['themes'], string][] = await themeStore.entries();
+    const themes: Record<keyof ThemeState['themes'], string> = {
+      nsfw: 'yotsuba',
+      sfw: 'yotsuba-b',
+      all: 'yotsuba-b',
+      subscriptions: 'yotsuba-b',
+    };
     entries.forEach(([key, value]) => {
       themes[key] = value;
     });