refactor: remove legacy theme switcher component and update import paths in profile settings

apps/web/ce/components/preferences/theme-switcher.tsx

@@ -1,102 +0,0 @@
-/**
- * Copyright (c) 2023-present Plane Software, Inc. and contributors
- * SPDX-License-Identifier: AGPL-3.0-only
- * See the LICENSE file for details.
- */
-
-import { useCallback, useMemo } from "react";
-import { observer } from "mobx-react";
-import { useTheme } from "next-themes";
-// plane imports
-import type { I_THEME_OPTION } from "@plane/constants";
-import { THEME_OPTIONS } from "@plane/constants";
-import { useTranslation } from "@plane/i18n";
-import { setPromiseToast } from "@plane/propel/toast";
-import { applyCustomTheme } from "@plane/utils";
-// components
-import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
-import { ThemeSwitch } from "@/components/core/theme/theme-switch";
-import { SettingsControlItem } from "@/components/settings/control-item";
-// hooks
-import { useUserProfile } from "@/hooks/store/user";
-
-export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
-  option: {
-    id: string;
-    title: string;
-    description: string;
-  };
-}) {
-  // store hooks
-  const { data: userProfile, updateUserTheme } = useUserProfile();
-  // theme
-  const { setTheme } = useTheme();
-  // translation
-  const { t } = useTranslation();
-  // derived values
-  const currentTheme = useMemo(() => {
-    const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile?.theme?.theme);
-    return userThemeOption || null;
-  }, [userProfile?.theme?.theme]);
-
-  const handleThemeChange = useCallback(
-    async (themeOption: I_THEME_OPTION) => {
-      try {
-        setTheme(themeOption.value);
-
-        // If switching to custom theme and user has saved custom colors, apply them immediately
-        if (
-          themeOption.value === "custom" &&
-          userProfile?.theme?.primary &&
-          userProfile?.theme?.background &&
-          userProfile?.theme?.darkPalette !== undefined
-        ) {
-          applyCustomTheme(
-            userProfile.theme.primary,
-            userProfile.theme.background,
-            userProfile.theme.darkPalette ? "dark" : "light"
-          );
-        }
-
-        const updatePromise = updateUserTheme({ theme: themeOption.value });
-        setPromiseToast(updatePromise, {
-          loading: "Updating theme...",
-          success: {
-            title: "Theme updated",
-            message: () => "Reloading to apply changes...",
-          },
-          error: {
-            title: "Error!",
-            message: () => "Failed to update theme. Please try again.",
-          },
-        });
-        // Wait for the promise to resolve, then reload after showing toast
-        await updatePromise;
-        window.location.reload();
-      } catch (error) {
-        console.error("Error updating theme:", error);
-      }
-    },
-    [setTheme, updateUserTheme, userProfile]
-  );
-
-  if (!userProfile) return null;
-
-  return (
-    <>
-      <SettingsControlItem
-        title={t(props.option.title)}
-        description={t(props.option.description)}
-        control={
-          <ThemeSwitch
-            value={currentTheme}
-            onChange={(themeOption) => {
-              void handleThemeChange(themeOption);
-            }}
-          />
-        }
-      />
-      {userProfile.theme?.theme === "custom" && <CustomThemeSelector />}
-    </>
-  );
-});

apps/web/core/components/appearance/theme-switcher.tsx

@@ -12,6 +12,7 @@ import type { I_THEME_OPTION } from "@plane/constants";
 import { THEME_OPTIONS } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 import { setPromiseToast } from "@plane/propel/toast";
+import { applyCustomTheme } from "@plane/utils";
 // components
 import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
 import { ThemeSwitch } from "@/components/core/theme/theme-switch";
@@ -34,31 +35,50 @@ export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
   const { t } = useTranslation();
   // derived values
   const currentTheme = useMemo(() => {
+    // oxlint-disable-next-line no-shadow
     const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile?.theme?.theme);
     return userThemeOption || null;
   }, [userProfile?.theme?.theme]);
 
   const handleThemeChange = useCallback(
-    (themeOption: I_THEME_OPTION) => {
+    async (themeOption: I_THEME_OPTION) => {
       try {
         setTheme(themeOption.value);
+
+        // If switching to custom theme and user has saved custom colors, apply them immediately
+        if (
+          themeOption.value === "custom" &&
+          userProfile?.theme?.primary &&
+          userProfile?.theme?.background &&
+          userProfile?.theme?.darkPalette !== undefined
+        ) {
+          applyCustomTheme(
+            userProfile.theme.primary,
+            userProfile.theme.background,
+            userProfile.theme.darkPalette ? "dark" : "light"
+          );
+        }
+
         const updatePromise = updateUserTheme({ theme: themeOption.value });
         setPromiseToast(updatePromise, {
           loading: "Updating theme...",
           success: {
-            title: "Success!",
-            message: () => "Theme updated successfully!",
+            title: "Theme updated",
+            message: () => "Reloading to apply changes...",
           },
           error: {
             title: "Error!",
-            message: () => "Failed to update the theme",
+            message: () => "Failed to update theme. Please try again.",
           },
         });
+        // Wait for the promise to resolve, then reload after showing toast
+        await updatePromise;
+        window.location.reload();
       } catch (error) {
         console.error("Error updating theme:", error);
       }
     },
-    [updateUserTheme]
+    [setTheme, updateUserTheme, userProfile]
   );
 
   if (!userProfile) return null;
@@ -68,7 +88,14 @@ export const ThemeSwitcher = observer(function ThemeSwitcher(props: {
       <SettingsControlItem
         title={t(props.option.title)}
         description={t(props.option.description)}
-        control={<ThemeSwitch value={currentTheme} onChange={handleThemeChange} />}
+        control={
+          <ThemeSwitch
+            value={currentTheme}
+            onChange={(themeOption) => {
+              void handleThemeChange(themeOption);
+            }}
+          />
+        }
       />
       {userProfile.theme?.theme === "custom" && <CustomThemeSelector />}
     </>

apps/web/core/components/settings/profile/content/pages/preferences/default-list.tsx

@@ -6,7 +6,7 @@
 
 import { observer } from "mobx-react";
 // components
-import { ThemeSwitcher } from "@/plane-web/components/preferences/theme-switcher";
+import { ThemeSwitcher } from "@/components/appearance";
 
 export const ProfileSettingsDefaultPreferencesList = observer(function ProfileSettingsDefaultPreferencesList() {
   return (