feat: init

2025-11-11 01:56:44 +08:00
commit bba4bb40c8
4638 changed files with 447437 additions and 0 deletions
--- a/apps/web/app/(all)/profile/appearance/page.tsx
+++ b/apps/web/app/(all)/profile/appearance/page.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { useEffect, useState } 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 type { IUserTheme } from "@plane/types";
+// components
+import { applyTheme, unsetCustomCssVariables } from "@plane/utils";
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PageHead } from "@/components/core/page-title";
+import { CustomThemeSelector } from "@/components/core/theme/custom-theme-selector";
+import { ThemeSwitch } from "@/components/core/theme/theme-switch";
+import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
+import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+
+const ProfileAppearancePage = observer(() => {
+  const { t } = useTranslation();
+  const { setTheme } = useTheme();
+  // states
+  const [currentTheme, setCurrentTheme] = useState<I_THEME_OPTION | null>(null);
+  // hooks
+  const { data: userProfile, updateUserTheme } = useUserProfile();
+
+  useEffect(() => {
+    if (userProfile?.theme?.theme) {
+      const userThemeOption = THEME_OPTIONS.find((t) => t.value === userProfile?.theme?.theme);
+      if (userThemeOption) {
+        setCurrentTheme(userThemeOption);
+      }
+    }
+  }, [userProfile?.theme?.theme]);
+
+  const handleThemeChange = (themeOption: I_THEME_OPTION) => {
+    applyThemeChange({ theme: themeOption.value });
+
+    const updateCurrentUserThemePromise = updateUserTheme({ theme: themeOption.value });
+    setPromiseToast(updateCurrentUserThemePromise, {
+      loading: "Updating theme...",
+      success: {
+        title: "Success!",
+        message: () => "Theme updated successfully!",
+      },
+      error: {
+        title: "Error!",
+        message: () => "Failed to Update the theme",
+      },
+    });
+  };
+
+  const applyThemeChange = (theme: Partial<IUserTheme>) => {
+    setTheme(theme?.theme || "system");
+
+    if (theme?.theme === "custom" && theme?.palette) {
+      applyTheme(theme?.palette !== ",,,," ? theme?.palette : "#0d101b,#c5c5c5,#3f76ff,#0d101b,#c5c5c5", false);
+    } else unsetCustomCssVariables();
+  };
+
+  return (
+    <>
+      <PageHead title="Profile - Appearance" />
+      {userProfile ? (
+        <ProfileSettingContentWrapper>
+          <ProfileSettingContentHeader title={t("appearance")} />
+          <div className="grid grid-cols-12 gap-4 py-6 sm:gap-16">
+            <div className="col-span-12 sm:col-span-6">
+              <h4 className="text-lg font-semibold text-custom-text-100">{t("theme")}</h4>
+              <p className="text-sm text-custom-text-200">{t("select_or_customize_your_interface_color_scheme")}</p>
+            </div>
+            <div className="col-span-12 sm:col-span-6">
+              <ThemeSwitch value={currentTheme} onChange={handleThemeChange} />
+            </div>
+          </div>
+          {userProfile?.theme?.theme === "custom" && <CustomThemeSelector applyThemeChange={applyThemeChange} />}
+        </ProfileSettingContentWrapper>
+      ) : (
+        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+          <LogoSpinner />
+        </div>
+      )}
+    </>
+  );
+});
+
+export default ProfileAppearancePage;