Clean up preview code

src/hooks/useSettingsState.ts

@@ -9,6 +9,7 @@ import {
 } from "react";
 
 import { SubtitleStyling } from "@/stores/subtitles";
+import { usePreviewThemeStore } from "@/stores/theme";
 
 export function useDerived<T>(
   initial: T,
@@ -56,6 +57,11 @@ export function useSettingsState(
   const [backendUrlState, setBackendUrl, resetBackendUrl, backendUrlChanged] =
     useDerived(backendUrl);
   const [themeState, setTheme, resetTheme, themeChanged] = useDerived(theme);
+  const setPreviewTheme = usePreviewThemeStore((s) => s.setPreviewTheme);
+  const resetPreviewTheme = useCallback(
+    () => setPreviewTheme(theme),
+    [setPreviewTheme, theme],
+  );
   const [
     appLanguageState,
     setAppLanguage,
@@ -81,6 +87,7 @@ export function useSettingsState(
 
   function reset() {
     resetTheme();
+    resetPreviewTheme();
     resetAppLanguage();
     resetSubStyling();
     resetProxyUrls();

src/pages/Settings.tsx

@@ -33,7 +33,7 @@ import { AccountWithToken, useAuthStore } from "@/stores/auth";
 import { useLanguageStore } from "@/stores/language";
 import { usePreferencesStore } from "@/stores/preferences";
 import { useSubtitleStore } from "@/stores/subtitles";
-import { useThemeStore } from "@/stores/theme";
+import { usePreviewThemeStore, useThemeStore } from "@/stores/theme";
 
 import { SubPageLayout } from "./layouts/SubPageLayout";
 import { PreferencesPart } from "./parts/settings/PreferencesPart";
@@ -103,6 +103,8 @@ export function SettingsPage() {
   const { t } = useTranslation();
   const activeTheme = useThemeStore((s) => s.theme);
   const setTheme = useThemeStore((s) => s.setTheme);
+  const previewTheme = usePreviewThemeStore((s) => s.previewTheme);
+  const setPreviewTheme = usePreviewThemeStore((s) => s.setPreviewTheme);
 
   const appLanguage = useLanguageStore((s) => s.language);
   const setAppLanguage = useLanguageStore((s) => s.setLanguage);
@@ -143,6 +145,25 @@ export function SettingsPage() {
     enableThumbnails,
   );
 
+  useEffect(() => {
+    setPreviewTheme(activeTheme ?? "default");
+  }, [setPreviewTheme, activeTheme]);
+
+  useEffect(() => {
+    // Clear preview theme on unmount
+    return () => {
+      setPreviewTheme(null);
+    };
+  }, [setPreviewTheme]);
+
+  const setThemeWithPreview = useCallback(
+    (theme: string) => {
+      state.theme.set(theme === "default" ? null : theme);
+      setPreviewTheme(theme);
+    },
+    [state.theme, setPreviewTheme],
+  );
+
   const saveChanges = useCallback(async () => {
     if (account) {
       if (
@@ -241,7 +262,11 @@ export function SettingsPage() {
           />
         </div>
         <div id="settings-appearance" className="mt-48">
-          <ThemePart active={state.theme.state} setTheme={state.theme.set} />
+          <ThemePart
+            active={previewTheme ?? "default"}
+            inUse={activeTheme ?? "default"}
+            setTheme={setThemeWithPreview}
+          />
         </div>
         <div id="settings-captions" className="mt-48">
           <CaptionsPart

src/pages/layouts/SubPageLayout.tsx

@@ -10,13 +10,13 @@ export function BlurEllipsis(props: { positionClass?: string }) {
       <div
         className={classNames(
           props.positionClass ?? "fixed",
-          "top-0 -right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentA blur-[100px] pointer-events-none opacity-25",
+          "top-0 -right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentA blur-[100px] pointer-events-none opacity-25 transition-colors duration-75",
         )}
       />
       <div
         className={classNames(
           props.positionClass ?? "fixed",
-          "top-0 right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentB blur-[100px] pointer-events-none opacity-25",
+          "top-0 right-48 rotate-[32deg] w-[50rem] h-[15rem] rounded-[70rem] bg-background-accentB blur-[100px] pointer-events-none opacity-25 transition-colors duration-75",
         )}
       />
     </>

src/pages/parts/settings/ThemePart.tsx

@@ -5,6 +5,10 @@ import { Icon, Icons } from "@/components/Icon";
 import { Heading1 } from "@/components/utils/Text";
 
 const availableThemes = [
+  {
+    id: "default",
+    key: "settings.appearance.themes.default",
+  },
   {
     id: "blue",
     key: "settings.appearance.themes.blue",
@@ -26,6 +30,7 @@ const availableThemes = [
 function ThemePreview(props: {
   selector?: string;
   active?: boolean;
+  inUse?: boolean;
   name: string;
   onClick?: () => void;
 }) {
@@ -105,7 +110,7 @@ function ThemePreview(props: {
         <span
           className={classNames(
             "inline-block px-3 py-1 leading-tight text-sm transition-opacity duration-150 rounded-full bg-pill-activeBackground text-white/85",
-            props.active ? "opacity-100" : "opacity-0 pointer-events-none",
+            props.inUse ? "opacity-100" : "opacity-0 pointer-events-none",
           )}
         >
           {t("settings.appearance.activeTheme")}
@@ -116,8 +121,9 @@ function ThemePreview(props: {
 }
 
 export function ThemePart(props: {
-  active: string | null;
-  setTheme: (theme: string | null) => void;
+  active: string;
+  inUse: string;
+  setTheme: (theme: string) => void;
 }) {
   const { t } = useTranslation();
 
@@ -125,17 +131,11 @@ 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 */}
-        <ThemePreview
-          name={t("settings.appearance.themes.default")}
-          selector="theme-default"
-          active={props.active === null}
-          onClick={() => props.setTheme(null)}
-        />
         {availableThemes.map((v) => (
           <ThemePreview
             selector={`theme-${v.id}`}
             active={props.active === v.id}
+            inUse={props.inUse === v.id}
             name={t(v.key)}
             key={v.id}
             onClick={() => props.setTheme(v.id)}

src/stores/theme/index.tsx

@@ -25,12 +25,31 @@ export const useThemeStore = create(
   ),
 );
 
+export interface PreviewThemeStore {
+  previewTheme: string | null;
+  setPreviewTheme(v: string | null): void;
+}
+
+export const usePreviewThemeStore = create(
+  immer<PreviewThemeStore>((set) => ({
+    previewTheme: null,
+    setPreviewTheme(v) {
+      set((s) => {
+        s.previewTheme = v;
+      });
+    },
+  })),
+);
+
 export function ThemeProvider(props: {
   children?: ReactNode;
   applyGlobal?: boolean;
 }) {
+  const previewTheme = usePreviewThemeStore((s) => s.previewTheme);
   const theme = useThemeStore((s) => s.theme);
-  const themeSelector = theme ? `theme-${theme}` : undefined;
+
+  const themeToDisplay = previewTheme ?? theme;
+  const themeSelector = themeToDisplay ? `theme-${themeToDisplay}` : undefined;
 
   return (
     <div className={themeSelector}>