fix(themes): inherit selected theme in pending post page

src/hooks/use-initial-theme.ts

@@ -1,21 +1,25 @@
 import { useLocation, useParams } from 'react-router-dom';
 import useThemeStore from '../stores/use-theme-store';
 import useDefaultSubplebbits from './use-default-subplebbits';
-import { isAllView, isHomeView, isNotFoundView, isSubscriptionsView } from '../lib/utils/view-utils';
+import { isAllView, isHomeView, isNotFoundView, isPendingPostView, isSubscriptionsView } from '../lib/utils/view-utils';
 import { nsfwTags } from '../views/home/home';
 
 const useInitialTheme = () => {
   const location = useLocation();
   const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
   const getTheme = useThemeStore((state) => state.getTheme);
+  const currentTheme = useThemeStore((state) => state.currentTheme);
   const subplebbits = useDefaultSubplebbits();
   const params = useParams();
   const isInHomeView = isHomeView(location.pathname);
   const isInNotFoundView = isNotFoundView(location.pathname, params);
   const isInAllView = isAllView(location.pathname, params);
   const isInSubscriptionsView = isSubscriptionsView(location.pathname, params);
+  const isInPendingPostView = isPendingPostView(location.pathname, params);
 
-  if (isInAllView) {
+  if (isInPendingPostView) {
+    return currentTheme || 'yotsuba';
+  } else if (isInAllView) {
     return getTheme('all') || 'yotsuba-b';
   } else if (isInSubscriptionsView) {
     return getTheme('subscriptions') || 'yotsuba-b';

src/stores/use-theme-store.ts

@@ -8,6 +8,7 @@ interface ThemeState {
     all: string;
     subscriptions: string;
   };
+  currentTheme: string | null;
   setTheme: (category: keyof ThemeState['themes'], theme: string) => void;
   getTheme: (category: keyof ThemeState['themes']) => string | null;
   loadThemes: () => Promise<void>;
@@ -25,15 +26,18 @@ const useThemeStore = create<ThemeState>((set: StoreApi<ThemeState>['setState'],
     all: 'yotsuba-b',
     subscriptions: 'yotsuba-b',
   },
+  currentTheme: null,
   setTheme: async (category, theme) => {
     const currentThemes = get().themes;
     const updatedThemes = { ...currentThemes, [category]: theme };
     await themeStore.setItem(category, theme);
-    set({ themes: updatedThemes });
+    set({ themes: updatedThemes, currentTheme: theme });
   },
   getTheme: (category) => {
     const currentThemes = get().themes;
-    return currentThemes[category] || null;
+    const theme = currentThemes[category] || null;
+    set({ currentTheme: theme });
+    return theme;
   },
   loadThemes: async () => {
     const entries: [keyof ThemeState['themes'], string][] = await themeStore.entries();
@@ -46,7 +50,7 @@ const useThemeStore = create<ThemeState>((set: StoreApi<ThemeState>['setState'],
     entries.forEach(([key, value]) => {
       themes[key] = value;
     });
-    set({ themes });
+    set({ themes, currentTheme: null });
   },
 }));