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)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/activity/page.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// ui
+import { Button } from "@plane/propel/button";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { ProfileActivityListPage } from "@/components/profile/activity/profile-activity-list";
+// hooks
+import { SettingsHeading } from "@/components/settings/heading";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+const PER_PAGE = 100;
+
+const ProfileActivityPage = observer(() => {
+  // states
+  const [pageCount, setPageCount] = useState(1);
+  const [totalPages, setTotalPages] = useState(0);
+  const [resultsCount, setResultsCount] = useState(0);
+  const [isEmpty, setIsEmpty] = useState(false);
+  // plane hooks
+  const { t } = useTranslation();
+  // derived values
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/profile/activity" });
+
+  const updateTotalPages = (count: number) => setTotalPages(count);
+
+  const updateResultsCount = (count: number) => setResultsCount(count);
+
+  const updateEmptyState = (isEmpty: boolean) => setIsEmpty(isEmpty);
+
+  const handleLoadMore = () => setPageCount((prev) => prev + 1);
+
+  const activityPages: React.ReactNode[] = [];
+  for (let i = 0; i < pageCount; i++)
+    activityPages.push(
+      <ProfileActivityListPage
+        key={i}
+        cursor={`${PER_PAGE}:${i}:0`}
+        perPage={PER_PAGE}
+        updateResultsCount={updateResultsCount}
+        updateTotalPages={updateTotalPages}
+        updateEmptyState={updateEmptyState}
+      />
+    );
+
+  const isLoadMoreVisible = pageCount < totalPages && resultsCount !== 0;
+
+  if (isEmpty) {
+    return (
+      <div className="flex h-full w-full flex-col">
+        <SettingsHeading
+          title={t("account_settings.activity.heading")}
+          description={t("account_settings.activity.description")}
+        />
+        <DetailedEmptyState
+          title={""}
+          description={""}
+          assetPath={resolvedPath}
+          className="w-full !p-0 justify-center mx-auto min-h-fit"
+          size="md"
+        />
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <PageHead title="Profile - Activity" />
+      <SettingsHeading
+        title={t("account_settings.activity.heading")}
+        description={t("account_settings.activity.description")}
+      />
+      <div className="w-full">{activityPages}</div>
+      {isLoadMoreVisible && (
+        <div className="flex w-full items-center justify-center text-xs">
+          <Button variant="accent-primary" size="sm" onClick={handleLoadMore}>
+            {t("load_more")}
+          </Button>
+        </div>
+      )}
+    </>
+  );
+});
+
+export default ProfileActivityPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/api-tokens/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/api-tokens/page.tsx
@@ -0,0 +1,112 @@
+"use client";
+
+import React, { useState } from "react";
+import { observer } from "mobx-react";
+import useSWR from "swr";
+// plane imports
+import { PROFILE_SETTINGS_TRACKER_ELEMENTS } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+// component
+import { APITokenService } from "@plane/services";
+import { CreateApiTokenModal } from "@/components/api-token/modal/create-token-modal";
+import { ApiTokenListItem } from "@/components/api-token/token-list-item";
+import { PageHead } from "@/components/core/page-title";
+import { DetailedEmptyState } from "@/components/empty-state/detailed-empty-state-root";
+import { SettingsHeading } from "@/components/settings/heading";
+import { APITokenSettingsLoader } from "@/components/ui/loader/settings/api-token";
+import { API_TOKENS_LIST } from "@/constants/fetch-keys";
+// store hooks
+import { captureClick } from "@/helpers/event-tracker.helper";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useResolvedAssetPath } from "@/hooks/use-resolved-asset-path";
+
+const apiTokenService = new APITokenService();
+
+const ApiTokensPage = observer(() => {
+  // states
+  const [isCreateTokenModalOpen, setIsCreateTokenModalOpen] = useState(false);
+  // router
+  // plane hooks
+  const { t } = useTranslation();
+  // store hooks
+  const { currentWorkspace } = useWorkspace();
+  // derived values
+  const resolvedPath = useResolvedAssetPath({ basePath: "/empty-state/workspace-settings/api-tokens" });
+
+  const { data: tokens } = useSWR(API_TOKENS_LIST, () => apiTokenService.list());
+
+  const pageTitle = currentWorkspace?.name
+    ? `${currentWorkspace.name} - ${t("workspace_settings.settings.api_tokens.title")}`
+    : undefined;
+
+  if (!tokens) {
+    return <APITokenSettingsLoader />;
+  }
+
+  return (
+    <div className="w-full">
+      <PageHead title={pageTitle} />
+      <CreateApiTokenModal isOpen={isCreateTokenModalOpen} onClose={() => setIsCreateTokenModalOpen(false)} />
+      <section className="w-full">
+        {tokens.length > 0 ? (
+          <>
+            <SettingsHeading
+              title={t("account_settings.api_tokens.heading")}
+              description={t("account_settings.api_tokens.description")}
+              button={{
+                label: t("workspace_settings.settings.api_tokens.add_token"),
+                onClick: () => {
+                  captureClick({
+                    elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.HEADER_ADD_PAT_BUTTON,
+                  });
+                  setIsCreateTokenModalOpen(true);
+                },
+              }}
+            />
+            <div>
+              {tokens.map((token) => (
+                <ApiTokenListItem key={token.id} token={token} />
+              ))}
+            </div>
+          </>
+        ) : (
+          <div className="flex h-full w-full flex-col">
+            <SettingsHeading
+              title={t("account_settings.api_tokens.heading")}
+              description={t("account_settings.api_tokens.description")}
+              button={{
+                label: t("workspace_settings.settings.api_tokens.add_token"),
+                onClick: () => {
+                  captureClick({
+                    elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.HEADER_ADD_PAT_BUTTON,
+                  });
+                  setIsCreateTokenModalOpen(true);
+                },
+              }}
+            />
+            <div className="h-full w-full flex items-center justify-center">
+              <DetailedEmptyState
+                title=""
+                description=""
+                assetPath={resolvedPath}
+                className="w-full !p-0 justify-center mx-auto"
+                size="md"
+                primaryButton={{
+                  text: t("workspace_settings.settings.api_tokens.add_token"),
+                  onClick: () => {
+                    captureClick({
+                      elementName: PROFILE_SETTINGS_TRACKER_ELEMENTS.EMPTY_STATE_ADD_PAT_BUTTON,
+                    });
+                    setIsCreateTokenModalOpen(true);
+                  },
+                }}
+              />
+            </div>
+          </div>
+        )}
+      </section>
+    </div>
+  );
+});
+
+export default ApiTokensPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/layout.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { observer } from "mobx-react";
+import { usePathname } from "next/navigation";
+// components
+import { SettingsContentWrapper } from "@/components/settings/content-wrapper";
+import { getProfileActivePath } from "@/components/settings/helper";
+import { SettingsMobileNav } from "@/components/settings/mobile";
+// local imports
+import { ProfileSidebar } from "./sidebar";
+
+type Props = {
+  children: ReactNode;
+};
+
+const ProfileSettingsLayout = observer((props: Props) => {
+  const { children } = props;
+  // router
+  const pathname = usePathname();
+
+  return (
+    <>
+      <SettingsMobileNav hamburgerContent={ProfileSidebar} activePath={getProfileActivePath(pathname) || ""} />
+      <div className="relative flex h-full w-full">
+        <div className="hidden md:block">
+          <ProfileSidebar />
+        </div>
+        <div className="w-full h-full overflow-y-scroll md:pt-page-y">
+          <SettingsContentWrapper>{children}</SettingsContentWrapper>
+        </div>
+      </div>
+    </>
+  );
+});
+
+export default ProfileSettingsLayout;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/notifications/page.tsx
@@ -0,0 +1,38 @@
+"use client";
+
+import useSWR from "swr";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { EmailNotificationForm } from "@/components/profile/notification/email-notification-form";
+import { SettingsHeading } from "@/components/settings/heading";
+import { EmailSettingsLoader } from "@/components/ui/loader/settings/email";
+// services
+import { UserService } from "@/services/user.service";
+
+const userService = new UserService();
+
+export default function ProfileNotificationPage() {
+  const { t } = useTranslation();
+  // fetching user email notification settings
+  const { data, isLoading } = useSWR("CURRENT_USER_EMAIL_NOTIFICATION_SETTINGS", () =>
+    userService.currentUserEmailNotificationSettings()
+  );
+
+  if (!data || isLoading) {
+    return <EmailSettingsLoader />;
+  }
+
+  return (
+    <>
+      <PageHead title={`${t("profile.label")} - ${t("notifications")}`} />
+
+      <SettingsHeading
+        title={t("account_settings.notifications.heading")}
+        description={t("account_settings.notifications.description")}
+      />
+      <EmailNotificationForm data={data} />
+    </>
+  );
+}
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/page.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { observer } from "mobx-react";
+import { useTranslation } from "@plane/i18n";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PageHead } from "@/components/core/page-title";
+import { ProfileForm } from "@/components/profile/form";
+// hooks
+import { useUser } from "@/hooks/store/user";
+
+const ProfileSettingsPage = observer(() => {
+  const { t } = useTranslation();
+  // store hooks
+  const { data: currentUser, userProfile } = useUser();
+
+  if (!currentUser)
+    return (
+      <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+        <LogoSpinner />
+      </div>
+    );
+
+  return (
+    <>
+      <PageHead title={`${t("profile.label")} - ${t("general_settings")}`} />
+      <ProfileForm user={currentUser} profile={userProfile.data} />
+    </>
+  );
+});
+
+export default ProfileSettingsPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/preferences/page.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+// components
+import { LogoSpinner } from "@/components/common/logo-spinner";
+import { PageHead } from "@/components/core/page-title";
+import { PreferencesList } from "@/components/preferences/list";
+import { LanguageTimezone } from "@/components/profile/preferences/language-timezone";
+import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
+import { SettingsHeading } from "@/components/settings/heading";
+// hooks
+import { useUserProfile } from "@/hooks/store/user";
+
+const ProfileAppearancePage = observer(() => {
+  const { t } = useTranslation();
+  // hooks
+  const { data: userProfile } = useUserProfile();
+
+  return (
+    <>
+      <PageHead title={`${t("profile.label")} - ${t("preferences")}`} />
+      {userProfile ? (
+        <>
+          <div className="flex flex-col gap-4 w-full">
+            <div>
+              <SettingsHeading
+                title={t("account_settings.preferences.heading")}
+                description={t("account_settings.preferences.description")}
+              />
+              <PreferencesList />
+            </div>
+            <div>
+              <ProfileSettingContentHeader title={t("language_and_time")} />
+              <LanguageTimezone />
+            </div>
+          </div>
+        </>
+      ) : (
+        <div className="grid h-full w-full place-items-center px-4 sm:px-0">
+          <LogoSpinner />
+        </div>
+      )}
+    </>
+  );
+});
+
+export default ProfileAppearancePage;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/security/page.tsx
@@ -0,0 +1,260 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+import { Controller, useForm } from "react-hook-form";
+import { Eye, EyeOff } from "lucide-react";
+// plane imports
+import { E_PASSWORD_STRENGTH } from "@plane/constants";
+import { useTranslation } from "@plane/i18n";
+import { Button } from "@plane/propel/button";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Input, PasswordStrengthIndicator } from "@plane/ui";
+import { getPasswordStrength } from "@plane/utils";
+// components
+import { PageHead } from "@/components/core/page-title";
+import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
+// helpers
+import { authErrorHandler } from "@/helpers/authentication.helper";
+import type { EAuthenticationErrorCodes } from "@/helpers/authentication.helper";
+// hooks
+import { useUser } from "@/hooks/store/user";
+// services
+import { AuthService } from "@/services/auth.service";
+
+export interface FormValues {
+  old_password: string;
+  new_password: string;
+  confirm_password: string;
+}
+
+const defaultValues: FormValues = {
+  old_password: "",
+  new_password: "",
+  confirm_password: "",
+};
+
+const authService = new AuthService();
+
+const defaultShowPassword = {
+  oldPassword: false,
+  password: false,
+  confirmPassword: false,
+};
+
+const SecurityPage = observer(() => {
+  // store
+  const { data: currentUser, changePassword } = useUser();
+  // states
+  const [showPassword, setShowPassword] = useState(defaultShowPassword);
+  const [isPasswordInputFocused, setIsPasswordInputFocused] = useState(false);
+  const [isRetryPasswordInputFocused, setIsRetryPasswordInputFocused] = useState(false);
+
+  // use form
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: { errors, isSubmitting },
+    reset,
+  } = useForm<FormValues>({ defaultValues });
+  // derived values
+  const oldPassword = watch("old_password");
+  const password = watch("new_password");
+  const confirmPassword = watch("confirm_password");
+  const oldPasswordRequired = !currentUser?.is_password_autoset;
+  // i18n
+  const { t } = useTranslation();
+
+  const isNewPasswordSameAsOldPassword = oldPassword !== "" && password !== "" && password === oldPassword;
+
+  const handleShowPassword = (key: keyof typeof showPassword) =>
+    setShowPassword((prev) => ({ ...prev, [key]: !prev[key] }));
+
+  const handleChangePassword = async (formData: FormValues) => {
+    const { old_password, new_password } = formData;
+    try {
+      const csrfToken = await authService.requestCSRFToken().then((data) => data?.csrf_token);
+      if (!csrfToken) throw new Error("csrf token not found");
+
+      await changePassword(csrfToken, {
+        ...(oldPasswordRequired && { old_password }),
+        new_password,
+      });
+
+      reset(defaultValues);
+      setShowPassword(defaultShowPassword);
+      setToast({
+        type: TOAST_TYPE.SUCCESS,
+        title: t("auth.common.password.toast.change_password.success.title"),
+        message: t("auth.common.password.toast.change_password.success.message"),
+      });
+    } catch (error: unknown) {
+      let errorInfo = undefined;
+      if (error instanceof Error) {
+        const err = error as Error & { error_code?: string };
+        const code = err.error_code?.toString();
+        errorInfo = code ? authErrorHandler(code as EAuthenticationErrorCodes) : undefined;
+      }
+
+      setToast({
+        type: TOAST_TYPE.ERROR,
+        title: errorInfo?.title ?? t("auth.common.password.toast.error.title"),
+        message:
+          typeof errorInfo?.message === "string" ? errorInfo.message : t("auth.common.password.toast.error.message"),
+      });
+    }
+  };
+
+  const isButtonDisabled =
+    getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID ||
+    (oldPasswordRequired && oldPassword.trim() === "") ||
+    password.trim() === "" ||
+    confirmPassword.trim() === "" ||
+    password !== confirmPassword ||
+    password === oldPassword;
+
+  const passwordSupport = password.length > 0 &&
+    getPasswordStrength(password) != E_PASSWORD_STRENGTH.STRENGTH_VALID && (
+      <PasswordStrengthIndicator password={password} isFocused={isPasswordInputFocused} />
+    );
+
+  const renderPasswordMatchError = !isRetryPasswordInputFocused || confirmPassword.length >= password.length;
+
+  return (
+    <>
+      <PageHead title="Profile - Security" />
+      <ProfileSettingContentHeader title={t("auth.common.password.change_password.label.default")} />
+      <form onSubmit={handleSubmit(handleChangePassword)} className="flex flex-col gap-8 w-full mt-8">
+        <div className="flex flex-col gap-10 w-full">
+          {oldPasswordRequired && (
+            <div className="space-y-1">
+              <h4 className="text-sm">{t("auth.common.password.current_password.label")}</h4>
+              <div className="relative flex items-center rounded-md">
+                <Controller
+                  control={control}
+                  name="old_password"
+                  rules={{
+                    required: t("common.errors.required"),
+                  }}
+                  render={({ field: { value, onChange } }) => (
+                    <Input
+                      id="old_password"
+                      type={showPassword?.oldPassword ? "text" : "password"}
+                      value={value}
+                      onChange={onChange}
+                      placeholder={t("old_password")}
+                      className="w-full"
+                      hasError={Boolean(errors.old_password)}
+                    />
+                  )}
+                />
+                {showPassword?.oldPassword ? (
+                  <EyeOff
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => handleShowPassword("oldPassword")}
+                  />
+                ) : (
+                  <Eye
+                    className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                    onClick={() => handleShowPassword("oldPassword")}
+                  />
+                )}
+              </div>
+              {errors.old_password && <span className="text-xs text-red-500">{errors.old_password.message}</span>}
+            </div>
+          )}
+          <div className="space-y-1">
+            <h4 className="text-sm">{t("auth.common.password.new_password.label")}</h4>
+            <div className="relative flex items-center rounded-md">
+              <Controller
+                control={control}
+                name="new_password"
+                rules={{
+                  required: t("common.errors.required"),
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Input
+                    id="new_password"
+                    type={showPassword?.password ? "text" : "password"}
+                    value={value}
+                    placeholder={t("auth.common.password.new_password.placeholder")}
+                    onChange={onChange}
+                    className="w-full"
+                    hasError={Boolean(errors.new_password)}
+                    onFocus={() => setIsPasswordInputFocused(true)}
+                    onBlur={() => setIsPasswordInputFocused(false)}
+                  />
+                )}
+              />
+              {showPassword?.password ? (
+                <EyeOff
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => handleShowPassword("password")}
+                />
+              ) : (
+                <Eye
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => handleShowPassword("password")}
+                />
+              )}
+            </div>
+            {passwordSupport}
+            {isNewPasswordSameAsOldPassword && !isPasswordInputFocused && (
+              <span className="text-xs text-red-500">{t("new_password_must_be_different_from_old_password")}</span>
+            )}
+          </div>
+          <div className="space-y-1">
+            <h4 className="text-sm">{t("auth.common.password.confirm_password.label")}</h4>
+            <div className="relative flex items-center rounded-md">
+              <Controller
+                control={control}
+                name="confirm_password"
+                rules={{
+                  required: t("common.errors.required"),
+                }}
+                render={({ field: { value, onChange } }) => (
+                  <Input
+                    id="confirm_password"
+                    type={showPassword?.confirmPassword ? "text" : "password"}
+                    placeholder={t("auth.common.password.confirm_password.placeholder")}
+                    value={value}
+                    onChange={onChange}
+                    className="w-full"
+                    hasError={Boolean(errors.confirm_password)}
+                    onFocus={() => setIsRetryPasswordInputFocused(true)}
+                    onBlur={() => setIsRetryPasswordInputFocused(false)}
+                  />
+                )}
+              />
+              {showPassword?.confirmPassword ? (
+                <EyeOff
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => handleShowPassword("confirmPassword")}
+                />
+              ) : (
+                <Eye
+                  className="absolute right-3 h-5 w-5 stroke-custom-text-400 hover:cursor-pointer"
+                  onClick={() => handleShowPassword("confirmPassword")}
+                />
+              )}
+            </div>
+            {!!confirmPassword && password !== confirmPassword && renderPasswordMatchError && (
+              <span className="text-sm text-red-500">{t("auth.common.password.errors.match")}</span>
+            )}
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between py-2">
+          <Button variant="primary" type="submit" loading={isSubmitting} disabled={isButtonDisabled}>
+            {isSubmitting
+              ? `${t("auth.common.password.change_password.label.submitting")}`
+              : t("auth.common.password.change_password.label.default")}
+          </Button>
+        </div>
+      </form>
+    </>
+  );
+});
+
+export default SecurityPage;
--- a/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
+++ b/apps/web/app/(all)/[workspaceSlug]/(settings)/settings/account/sidebar.tsx
@@ -0,0 +1,75 @@
+import { observer } from "mobx-react";
+import { useParams, usePathname } from "next/navigation";
+import { CircleUser, Activity, Bell, CircleUserRound, KeyRound, Settings2, Blocks, Lock } from "lucide-react";
+// plane imports
+import { GROUPED_PROFILE_SETTINGS, PROFILE_SETTINGS_CATEGORIES } from "@plane/constants";
+import { getFileURL } from "@plane/utils";
+// components
+import { SettingsSidebar } from "@/components/settings/sidebar";
+// hooks
+import { useUser } from "@/hooks/store/user";
+
+const ICONS = {
+  profile: CircleUser,
+  security: Lock,
+  activity: Activity,
+  preferences: Settings2,
+  notifications: Bell,
+  "api-tokens": KeyRound,
+  connections: Blocks,
+};
+
+export const ProjectActionIcons = ({ type, size, className }: { type: string; size?: number; className?: string }) => {
+  if (type === undefined) return null;
+  const Icon = ICONS[type as keyof typeof ICONS];
+  if (!Icon) return null;
+  return <Icon size={size} className={className} strokeWidth={2} />;
+};
+
+type TProfileSidebarProps = {
+  isMobile?: boolean;
+};
+
+export const ProfileSidebar = observer((props: TProfileSidebarProps) => {
+  const { isMobile = false } = props;
+  // router
+  const pathname = usePathname();
+  const { workspaceSlug } = useParams();
+  // store hooks
+  const { data: currentUser } = useUser();
+
+  return (
+    <SettingsSidebar
+      isMobile={isMobile}
+      categories={PROFILE_SETTINGS_CATEGORIES}
+      groupedSettings={GROUPED_PROFILE_SETTINGS}
+      workspaceSlug={workspaceSlug?.toString() ?? ""}
+      isActive={(data: { href: string }) => pathname === `/${workspaceSlug}${data.href}/`}
+      customHeader={
+        <div className="flex items-center gap-2">
+          <div className="flex-shrink-0">
+            {!currentUser?.avatar_url || currentUser?.avatar_url === "" ? (
+              <div className="h-8 w-8 rounded-full">
+                <CircleUserRound className="h-full w-full text-custom-text-200" />
+              </div>
+            ) : (
+              <div className="relative h-8 w-8 overflow-hidden">
+                <img
+                  src={getFileURL(currentUser?.avatar_url)}
+                  className="absolute left-0 top-0 h-full w-full rounded-lg object-cover"
+                  alt={currentUser?.display_name}
+                />
+              </div>
+            )}
+          </div>
+          <div className="w-full overflow-hidden">
+            <div className="text-base font-medium text-custom-text-200 truncate">{currentUser?.display_name}</div>
+            <div className="text-sm text-custom-text-300 truncate">{currentUser?.email}</div>
+          </div>
+        </div>
+      }
+      actionIcons={ProjectActionIcons}
+      shouldRender
+    />
+  );
+});