Clean up preview code

src/pages/Settings.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { useAsyncFn } from "react-use";
 
@@ -101,12 +101,10 @@ export function AccountSettings(props: {
 
 export function SettingsPage() {
   const { t } = useTranslation();
-  const activeTheme = useThemeStore((s) => s.theme) ?? "default";
+  const activeTheme = useThemeStore((s) => s.theme);
   const setTheme = useThemeStore((s) => s.setTheme);
-  const previewTheme = usePreviewThemeStore((s) => s.previewTheme) ?? "default";
+  const previewTheme = usePreviewThemeStore((s) => s.previewTheme);
   const setPreviewTheme = usePreviewThemeStore((s) => s.setPreviewTheme);
-  const activeThemeRef = useRef(activeTheme);
-  activeThemeRef.current = activeTheme;
 
   const appLanguage = useLanguageStore((s) => s.language);
   const setAppLanguage = useLanguageStore((s) => s.setLanguage);
@@ -147,19 +145,21 @@ export function SettingsPage() {
     enableThumbnails,
   );
 
-  useEffect(
-    () => () => {
-      setPreviewTheme(
-        activeThemeRef.current === "default" ? null : activeThemeRef.current,
-      );
-    },
-    [setPreviewTheme],
-  );
+  useEffect(() => {
+    setPreviewTheme(activeTheme ?? "default");
+  }, [setPreviewTheme, activeTheme]);
+
+  useEffect(() => {
+    // Clear preview theme on unmount
+    return () => {
+      setPreviewTheme(null);
+    };
+  }, [setPreviewTheme]);
 
   const setThemeWithPreview = useCallback(
-    (v: string | null) => {
-      state.theme.set(v === "default" ? null : v);
-      setPreviewTheme(v);
+    (theme: string) => {
+      state.theme.set(theme === "default" ? null : theme);
+      setPreviewTheme(theme);
     },
     [state.theme, setPreviewTheme],
   );
@@ -263,8 +263,8 @@ export function SettingsPage() {
         </div>
         <div id="settings-appearance" className="mt-48">
           <ThemePart
-            active={previewTheme}
-            inUse={activeTheme}
+            active={previewTheme ?? "default"}
+            inUse={activeTheme ?? "default"}
             setTheme={setThemeWithPreview}
           />
         </div>

src/pages/parts/settings/ThemePart.tsx

@@ -121,9 +121,9 @@ function ThemePreview(props: {
 }
 
 export function ThemePart(props: {
-  active: string | null;
-  inUse: string | null;
-  setTheme: (theme: string | null) => void;
+  active: string;
+  inUse: string;
+  setTheme: (theme: string) => void;
 }) {
   const { t } = useTranslation();
 
@@ -131,7 +131,6 @@ export function ThemePart(props: {
     <div>
       <Heading1 border>{t("settings.appearance.title")}</Heading1>
       <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-6 max-w-[700px]">
-        {/* default theme */}
         {availableThemes.map((v) => (
           <ThemePreview
             selector={`theme-${v.id}`}