From 28ab84fb7e1382a91b03603a3641ecfff5f4db45 Mon Sep 17 00:00:00 2001 From: Atul Tameshwari Date: Tue, 16 Jun 2026 22:05:41 +0530 Subject: [PATCH] refactor: remove legacy theme switcher component and update import paths in profile settings --- .../components/preferences/theme-switcher.tsx | 102 ------------------ .../components/appearance/theme-switcher.tsx | 39 +++++-- .../pages/preferences/default-list.tsx | 2 +- 3 files changed, 34 insertions(+), 109 deletions(-) delete mode 100644 apps/web/ce/components/preferences/theme-switcher.tsx diff --git a/apps/web/ce/components/preferences/theme-switcher.tsx b/apps/web/ce/components/preferences/theme-switcher.tsx deleted file mode 100644 index b335b99b34..0000000000 --- a/apps/web/ce/components/preferences/theme-switcher.tsx +++ /dev/null @@ -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 ( - <> - { - void handleThemeChange(themeOption); - }} - /> - } - /> - {userProfile.theme?.theme === "custom" && } - - ); -}); diff --git a/apps/web/core/components/appearance/theme-switcher.tsx b/apps/web/core/components/appearance/theme-switcher.tsx index 4ec2eba432..38cecb644e 100644 --- a/apps/web/core/components/appearance/theme-switcher.tsx +++ b/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: { } + control={ + { + void handleThemeChange(themeOption); + }} + /> + } /> {userProfile.theme?.theme === "custom" && } diff --git a/apps/web/core/components/settings/profile/content/pages/preferences/default-list.tsx b/apps/web/core/components/settings/profile/content/pages/preferences/default-list.tsx index 8b3b010fca..e5a248dbbe 100644 --- a/apps/web/core/components/settings/profile/content/pages/preferences/default-list.tsx +++ b/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 (