[WEB-3998] feat: settings page revamp (#6959)

* chore: return workspace name and logo in profile settings api * chore: remove unwanted fields * fix: backend * feat: workspace settings * feat: workspce settings + layouting * feat: profile + workspace settings ui * chore: project settings + refactoring * routes * fix: handled no project * fix: css + build * feat: profile settings internal screens upgrade * fix: workspace settings internal screens * fix: external scrolling allowed * fix: css * fix: css * fix: css * fix: preferences settings * fix: css * fix: mobile interface * fix: profile redirections * fix: dark theme * fix: css * fix: css * feat: scroll * fix: refactor * fix: bug fixes * fix: refactor * fix: css * fix: routes * fix: first day of the week * fix: scrolling * fix: refactoring * fix: project -> projects * fix: refactoring * fix: refactor * fix: no authorized view consistency * fix: folder structure * fix: revert * fix: handled redirections * fix: scroll * fix: deleted old routes * fix: empty states * fix: headings * fix: settings description * fix: build --------- Co-authored-by: gakshita <akshitagoyal1516@gmail.com> Co-authored-by: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
2025-05-30 18:47:33 +05:30 · 2025-05-30 18:47:33 +05:30 · 41c2aefad4
commit 41c2aefad4
parent 445c819fbd
112 changed files with 2789 additions and 975 deletions
--- a/web/ce/components/preferences/theme-switcher.tsx
+++ b/web/ce/components/preferences/theme-switcher.tsx
@ -0,0 +1,105 @@
+"use client";
+
+import { useEffect, useState, useCallback } from "react";
+import { observer } from "mobx-react";
+import { useTheme } from "next-themes";
+import { I_THEME_OPTION, THEME_OPTIONS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { IUserTheme } from "@plane/types";
+import { setPromiseToast } from "@plane/ui";
+
+// components
+import { CustomThemeSelector, ThemeSwitch } from "@/components/core";
+// helpers
+import { PreferencesSection } from "@/components/preferences/section";
+import { applyTheme, unsetCustomCssVariables } from "@/helpers/theme.helper";
+// hooks
+import { useUserProfile } from "@/hooks/store";
+
+export const ThemeSwitcher = observer(
+  (props: {
+    option: {
+      id: string;
+      title: string;
+      description: string;
+    };
+  }) => {
+    // hooks
+    const { setTheme } = useTheme();
+    const { data: userProfile, updateUserTheme } = useUserProfile();
+
+    // states
+    const [currentTheme, setCurrentTheme] = useState<I_THEME_OPTION | null>(null);
+
+    const { t } = useTranslation();
+
+    // initialize theme
+    useEffect(() => {
+      if (!userProfile?.theme?.theme) return;
+
+      const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile.theme.theme);
+
+      if (userThemeOption) {
+        setCurrentTheme(userThemeOption);
+      }
+    }, [userProfile?.theme?.theme]);
+
+    // handlers
+    const applyThemeChange = useCallback(
+      (theme: Partial<IUserTheme>) => {
+        const themeValue = theme?.theme || "system";
+        setTheme(themeValue);
+
+        if (theme?.theme === "custom" && theme?.palette) {
+          const defaultPalette = "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5";
+          const palette = theme.palette !== ",,,," ? theme.palette : defaultPalette;
+          applyTheme(palette, false);
+        } else {
+          unsetCustomCssVariables();
+        }
+      },
+      [setTheme]
+    );
+
+    const handleThemeChange = useCallback(
+      async (themeOption: I_THEME_OPTION) => {
+        try {
+          applyThemeChange({ theme: themeOption.value });
+
+          const updatePromise = updateUserTheme({ theme: themeOption.value });
+          setPromiseToast(updatePromise, {
+            loading: "Updating theme...",
+            success: {
+              title: "Success!",
+              message: () => "Theme updated successfully!",
+            },
+            error: {
+              title: "Error!",
+              message: () => "Failed to update the theme",
+            },
+          });
+        } catch (error) {
+          console.error("Error updating theme:", error);
+        }
+      },
+      [applyThemeChange, updateUserTheme]
+    );
+
+    if (!userProfile) return null;
+
+    return (
+      <>
+        <PreferencesSection
+          title={t(props.option.title)}
+          description={t(props.option.description)}
+          control={
+            <div className="">
+              <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
+            </div>
+          }
+        />
+        {userProfile.theme?.theme === "custom" && <CustomThemeSelector applyThemeChange={applyThemeChange} />}
+      </>
+    );
+  }
+);