feat: init

apps/web/app/(all)/profile/activity/page.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState } from "react";
+import { observer } from "mobx-react";
+// plane imports
+import { useTranslation } from "@plane/i18n";
+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";
+import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
+import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
+// hooks
+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 (
+      <DetailedEmptyState
+        title={t("profile.empty_state.activity.title")}
+        description={t("profile.empty_state.activity.description")}
+        assetPath={resolvedPath}
+      />
+    );
+  }
+
+  return (
+    <>
+      <PageHead title="Profile - Activity" />
+      <ProfileSettingContentWrapper>
+        <ProfileSettingContentHeader title={t("activity")} />
+        {activityPages}
+        {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>
+        )}
+      </ProfileSettingContentWrapper>
+    </>
+  );
+});
+
+export default ProfileActivityPage;

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;

apps/web/app/(all)/profile/layout.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import type { ReactNode } from "react";
+// components
+import { CommandPalette } from "@/components/command-palette";
+// wrappers
+import { AuthenticationWrapper } from "@/lib/wrappers/authentication-wrapper";
+// layout
+import { ProfileLayoutSidebar } from "./sidebar";
+
+type Props = {
+  children: ReactNode;
+};
+
+export default function ProfileSettingsLayout(props: Props) {
+  const { children } = props;
+
+  return (
+    <>
+      <CommandPalette />
+      <AuthenticationWrapper>
+        <div className="relative flex h-full w-full overflow-hidden rounded-lg border border-custom-border-200">
+          <ProfileLayoutSidebar />
+          <main className="relative flex h-full w-full flex-col overflow-hidden bg-custom-background-100">
+            <div className="h-full w-full overflow-hidden">{children}</div>
+          </main>
+        </div>
+      </AuthenticationWrapper>
+    </>
+  );
+}

apps/web/app/(all)/profile/notifications/page.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import useSWR from "swr";
+// components
+import { useTranslation } from "@plane/i18n";
+import { PageHead } from "@/components/core/page-title";
+import { EmailNotificationForm } from "@/components/profile/notification/email-notification-form";
+import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
+import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
+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")}`} />
+      <ProfileSettingContentWrapper>
+        <ProfileSettingContentHeader
+          title={t("email_notifications")}
+          description={t("stay_in_the_loop_on_issues_you_are_subscribed_to_enable_this_to_get_notified")}
+        />
+        <EmailNotificationForm data={data} />
+      </ProfileSettingContentWrapper>
+    </>
+  );
+}

apps/web/app/(all)/profile/page.tsx

@@ -0,0 +1,36 @@
+"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 { ProfileForm } from "@/components/profile/form";
+import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
+// 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")}`} />
+      <ProfileSettingContentWrapper>
+        <ProfileForm user={currentUser} profile={userProfile.data} />
+      </ProfileSettingContentWrapper>
+    </>
+  );
+});
+
+export default ProfileSettingsPage;

apps/web/app/(all)/profile/security/page.tsx

@@ -0,0 +1,259 @@
+"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";
+// components
+import { getPasswordStrength } from "@plane/utils";
+import { PageHead } from "@/components/core/page-title";
+import { ProfileSettingContentHeader } from "@/components/profile/profile-setting-content-header";
+import { ProfileSettingContentWrapper } from "@/components/profile/profile-setting-content-wrapper";
+// 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) {
+      const err = error as Error & { error_code?: string };
+      const code = err.error_code?.toString();
+      const 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" />
+      <ProfileSettingContentWrapper>
+        <ProfileSettingContentHeader title={t("auth.common.password.change_password.label.default")} />
+        <form onSubmit={handleSubmit(handleChangePassword)} className="flex flex-col gap-8 py-6">
+          <div className="flex flex-col gap-10 w-full max-w-96">
+            {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>
+      </ProfileSettingContentWrapper>
+    </>
+  );
+});
+
+export default SecurityPage;

apps/web/app/(all)/profile/sidebar.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { observer } from "mobx-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+// icons
+import {
+  ChevronLeft,
+  LogOut,
+  MoveLeft,
+  Activity,
+  Bell,
+  CircleUser,
+  KeyRound,
+  Settings2,
+  CirclePlus,
+  Mails,
+} from "lucide-react";
+// plane imports
+import { PROFILE_ACTION_LINKS } from "@plane/constants";
+import { useOutsideClickDetector } from "@plane/hooks";
+import { useTranslation } from "@plane/i18n";
+import { TOAST_TYPE, setToast } from "@plane/propel/toast";
+import { Tooltip } from "@plane/propel/tooltip";
+import { cn, getFileURL } from "@plane/utils";
+// components
+import { SidebarNavItem } from "@/components/sidebar/sidebar-navigation";
+// hooks
+import { useAppTheme } from "@/hooks/store/use-app-theme";
+import { useWorkspace } from "@/hooks/store/use-workspace";
+import { useUser, useUserSettings } from "@/hooks/store/user";
+import { usePlatformOS } from "@/hooks/use-platform-os";
+
+const WORKSPACE_ACTION_LINKS = [
+  {
+    key: "create_workspace",
+    Icon: CirclePlus,
+    i18n_label: "create_workspace",
+    href: "/create-workspace",
+  },
+  {
+    key: "invitations",
+    Icon: Mails,
+    i18n_label: "workspace_invites",
+    href: "/invitations",
+  },
+];
+
+const ProjectActionIcons = ({ type, size, className = "" }: { type: string; size?: number; className?: string }) => {
+  const icons = {
+    profile: CircleUser,
+    security: KeyRound,
+    activity: Activity,
+    preferences: Settings2,
+    notifications: Bell,
+    "api-tokens": KeyRound,
+  };
+
+  if (type === undefined) return null;
+  const Icon = icons[type as keyof typeof icons];
+  if (!Icon) return null;
+  return <Icon size={size} className={className} />;
+};
+export const ProfileLayoutSidebar = observer(() => {
+  // states
+  const [isSigningOut, setIsSigningOut] = useState(false);
+  // router
+  const pathname = usePathname();
+  // store hooks
+  const { sidebarCollapsed, toggleSidebar } = useAppTheme();
+  const { data: currentUser, signOut } = useUser();
+  const { data: currentUserSettings } = useUserSettings();
+  const { workspaces } = useWorkspace();
+  const { isMobile } = usePlatformOS();
+  const { t } = useTranslation();
+
+  const workspacesList = Object.values(workspaces ?? {});
+
+  // redirect url for normal mode
+  const redirectWorkspaceSlug =
+    currentUserSettings?.workspace?.last_workspace_slug ||
+    currentUserSettings?.workspace?.fallback_workspace_slug ||
+    "";
+
+  const ref = useRef<HTMLDivElement>(null);
+
+  useOutsideClickDetector(ref, () => {
+    if (sidebarCollapsed === false) {
+      if (window.innerWidth < 768) {
+        toggleSidebar();
+      }
+    }
+  });
+
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth <= 768) {
+        toggleSidebar(true);
+      }
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [toggleSidebar]);
+
+  const handleItemClick = () => {
+    if (window.innerWidth < 768) {
+      toggleSidebar();
+    }
+  };
+
+  const handleSignOut = async () => {
+    setIsSigningOut(true);
+    await signOut()
+      .catch(() =>
+        setToast({
+          type: TOAST_TYPE.ERROR,
+          title: t("sign_out.toast.error.title"),
+          message: t("sign_out.toast.error.message"),
+        })
+      )
+      .finally(() => setIsSigningOut(false));
+  };
+
+  return (
+    <div
+      className={`fixed inset-y-0 z-20 flex h-full flex-shrink-0 flex-grow-0 flex-col border-r border-custom-sidebar-border-200 bg-custom-sidebar-background-100 duration-300 md:relative 
+        ${sidebarCollapsed ? "-ml-[250px]" : ""}
+        sm:${sidebarCollapsed ? "-ml-[250px]" : ""}
+        md:ml-0 ${sidebarCollapsed ? "w-[70px]" : "w-[250px]"}
+      `}
+    >
+      <div ref={ref} className="flex h-full w-full flex-col gap-y-4">
+        <Link href={`/${redirectWorkspaceSlug}`} onClick={handleItemClick}>
+          <div
+            className={`flex flex-shrink-0 items-center gap-2 truncate px-4 pt-4 ${
+              sidebarCollapsed ? "justify-center" : ""
+            }`}
+          >
+            <span className="grid h-5 w-5 flex-shrink-0 place-items-center">
+              <ChevronLeft className="h-5 w-5" strokeWidth={1} />
+            </span>
+            {!sidebarCollapsed && (
+              <h4 className="truncate text-lg font-semibold text-custom-text-200">{t("profile_settings")}</h4>
+            )}
+          </div>
+        </Link>
+        <div className="flex flex-shrink-0 flex-col overflow-x-hidden">
+          {!sidebarCollapsed && (
+            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">{t("your_account")}</h6>
+          )}
+          <div className="vertical-scrollbar scrollbar-sm mt-2 px-4 h-full space-y-1 overflow-y-auto">
+            {PROFILE_ACTION_LINKS.map((link) => {
+              if (link.key === "change-password" && currentUser?.is_password_autoset) return null;
+
+              return (
+                <Link key={link.key} href={link.href} className="block w-full" onClick={handleItemClick}>
+                  <Tooltip
+                    tooltipContent={t(link.key)}
+                    position="right"
+                    className="ml-2"
+                    disabled={!sidebarCollapsed}
+                    isMobile={isMobile}
+                  >
+                    <SidebarNavItem
+                      key={link.key}
+                      className={`${sidebarCollapsed ? "p-0 size-8 aspect-square justify-center mx-auto" : ""}`}
+                      isActive={link.highlight(pathname)}
+                    >
+                      <div className="flex items-center gap-1.5 py-[1px]">
+                        <ProjectActionIcons type={link.key} size={16} />
+
+                        {!sidebarCollapsed && <p className="text-sm leading-5 font-medium">{t(link.i18n_label)}</p>}
+                      </div>
+                    </SidebarNavItem>
+                  </Tooltip>
+                </Link>
+              );
+            })}
+          </div>
+        </div>
+        <div className="flex flex-col overflow-x-hidden">
+          {!sidebarCollapsed && (
+            <h6 className="rounded px-6 text-sm font-semibold text-custom-sidebar-text-400">{t("workspaces")}</h6>
+          )}
+          {workspacesList && workspacesList.length > 0 && (
+            <div
+              className={cn("vertical-scrollbar scrollbar-xs mt-2 px-4 h-full space-y-1.5 overflow-y-auto", {
+                "scrollbar-sm": !sidebarCollapsed,
+                "ml-2.5 px-1": sidebarCollapsed,
+              })}
+            >
+              {workspacesList.map((workspace) => (
+                <Link
+                  key={workspace.id}
+                  href={`/${workspace.slug}`}
+                  className={`flex flex-grow cursor-pointer select-none items-center truncate text-left text-sm font-medium ${
+                    sidebarCollapsed ? "justify-center" : `justify-between`
+                  }`}
+                  onClick={handleItemClick}
+                >
+                  <span
+                    className={`flex w-full flex-grow items-center gap-x-2 truncate rounded-md px-3 py-1 hover:bg-custom-sidebar-background-80 ${
+                      sidebarCollapsed ? "justify-center" : ""
+                    }`}
+                  >
+                    <span
+                      className={`relative flex h-6 w-6 flex-shrink-0 items-center  justify-center p-2 text-xs uppercase ${
+                        !workspace?.logo_url && "rounded bg-custom-primary-500 text-white"
+                      }`}
+                    >
+                      {workspace?.logo_url && workspace.logo_url !== "" ? (
+                        <img
+                          src={getFileURL(workspace.logo_url)}
+                          className="absolute left-0 top-0 h-full w-full rounded object-cover"
+                          alt="Workspace Logo"
+                        />
+                      ) : (
+                        (workspace?.name?.charAt(0) ?? "...")
+                      )}
+                    </span>
+                    {!sidebarCollapsed && (
+                      <p className="truncate text-sm text-custom-sidebar-text-200">{workspace.name}</p>
+                    )}
+                  </span>
+                </Link>
+              ))}
+            </div>
+          )}
+          <div className="mt-1.5 px-4">
+            {WORKSPACE_ACTION_LINKS.map((link) => (
+              <Link className="block w-full" key={link.key} href={link.href} onClick={handleItemClick}>
+                <Tooltip
+                  tooltipContent={t(link.key)}
+                  position="right"
+                  className="ml-2"
+                  disabled={!sidebarCollapsed}
+                  isMobile={isMobile}
+                >
+                  <div
+                    className={`group flex w-full items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium text-custom-sidebar-text-200 outline-none hover:bg-custom-sidebar-background-80 focus:bg-custom-sidebar-background-80 ${
+                      sidebarCollapsed ? "justify-center" : ""
+                    }`}
+                  >
+                    {<link.Icon className="flex-shrink-0 size-4" />}
+                    {!sidebarCollapsed && t(link.i18n_label)}
+                  </div>
+                </Tooltip>
+              </Link>
+            ))}
+          </div>
+        </div>
+        <div className="flex flex-shrink-0 flex-grow items-end px-6 py-2">
+          <div
+            className={`flex w-full ${
+              sidebarCollapsed ? "flex-col justify-center gap-2" : "items-center justify-between gap-2"
+            }`}
+          >
+            <button
+              type="button"
+              onClick={handleSignOut}
+              className="flex items-center justify-center gap-2 text-sm font-medium text-red-500"
+              disabled={isSigningOut}
+            >
+              <LogOut className="h-3.5 w-3.5" />
+              {!sidebarCollapsed && <span>{isSigningOut ? `${t("signing_out")}...` : t("sign_out")}</span>}
+            </button>
+            <button
+              type="button"
+              className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden"
+              onClick={() => toggleSidebar()}
+            >
+              <MoveLeft className="h-3.5 w-3.5" />
+            </button>
+            <button
+              type="button"
+              className={`ml-auto hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${
+                sidebarCollapsed ? "w-full" : ""
+              }`}
+              onClick={() => toggleSidebar()}
+            >
+              <MoveLeft className={`h-3.5 w-3.5 duration-300 ${sidebarCollapsed ? "rotate-180" : ""}`} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});