From 95679bc27f7bf964935b0236a76573893409d975 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Mon, 6 May 2024 02:17:24 +0530
Subject: [PATCH 1/3] chore: add email security dropdown and remove SMTP
 username and password validation.

---
 admin/app/ai/components/ai-config-form.tsx    |   2 +-
 .../email/components/email-config-form.tsx    | 145 +++++++++++++-----
 admin/components/common/controller-input.tsx  |   8 +-
 admin/package.json                            |   1 +
 packages/ui/src/dropdowns/custom-select.tsx   |  19 ++-
 yarn.lock                                     |   4 +-
 6 files changed, 125 insertions(+), 54 deletions(-)

diff --git a/admin/app/ai/components/ai-config-form.tsx b/admin/app/ai/components/ai-config-form.tsx
index 5290ed1e2..d61eb9ed9 100644
--- a/admin/app/ai/components/ai-config-form.tsx
+++ b/admin/app/ai/components/ai-config-form.tsx
@@ -96,7 +96,7 @@ export const InstanceAIForm: FC<IInstanceAIForm> = (props) => {
           <div className="pb-1 text-xl font-medium text-custom-text-100">OpenAI</div>
           <div className="text-sm font-normal text-custom-text-300">If you use ChatGPT, this is for you.</div>
         </div>
-        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-16 gap-y-8 lg:grid-cols-3">
+        <div className="grid-col grid w-full grid-cols-1 items-center justify-between gap-x-12 gap-y-8 lg:grid-cols-3">
           {aiFormFields.map((field) => (
             <ControllerInput
               key={field.key}
diff --git a/admin/app/email/components/email-config-form.tsx b/admin/app/email/components/email-config-form.tsx
index 8bcf9346e..38b50d50f 100644
--- a/admin/app/email/components/email-config-form.tsx
+++ b/admin/app/email/components/email-config-form.tsx
@@ -1,9 +1,9 @@
-import { FC, useState } from "react";
-import { Controller, useForm } from "react-hook-form";
+import React, { FC, useMemo, useState } from "react";
+import { useForm } from "react-hook-form";
 // hooks
 import { useInstance } from "@/hooks";
 // ui
-import { Button, TOAST_TYPE, ToggleSwitch, setToast } from "@plane/ui";
+import { Button, CustomSelect, TOAST_TYPE, setToast } from "@plane/ui";
 // components
 import { ControllerInput, TControllerInputFormField } from "components/common";
 import { SendTestEmailModal } from "./test-email-modal";
@@ -16,6 +16,14 @@ type IInstanceEmailForm = {
 
 type EmailFormValues = Record<TInstanceEmailConfigurationKeys, string>;
 
+type TEmailSecurityKeys = "EMAIL_USE_TLS" | "EMAIL_USE_SSL" | "NONE";
+
+const EMAIL_SECURITY_OPTIONS: { [key in TEmailSecurityKeys]: string } = {
+  EMAIL_USE_TLS: "TLS",
+  EMAIL_USE_SSL: "SSL",
+  NONE: "No email security",
+};
+
 export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
   const { config } = props;
   // states
@@ -26,8 +34,9 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
   const {
     handleSubmit,
     watch,
+    setValue,
     control,
-    formState: { errors, isSubmitting },
+    formState: { errors, isValid, isDirty, isSubmitting },
   } = useForm<EmailFormValues>({
     defaultValues: {
       EMAIL_HOST: config["EMAIL_HOST"],
@@ -35,7 +44,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
       EMAIL_HOST_USER: config["EMAIL_HOST_USER"],
       EMAIL_HOST_PASSWORD: config["EMAIL_HOST_PASSWORD"],
       EMAIL_USE_TLS: config["EMAIL_USE_TLS"],
-      // EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
+      EMAIL_USE_SSL: config["EMAIL_USE_SSL"],
       EMAIL_FROM: config["EMAIL_FROM"],
     },
   });
@@ -57,13 +66,26 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
       error: Boolean(errors.EMAIL_PORT),
       required: true,
     },
+    {
+      key: "EMAIL_FROM",
+      type: "text",
+      label: "Sender email address",
+      description:
+        "This is the email address your users will see when getting emails from this instance. You will need to verify this address.",
+      placeholder: "no-reply@projectplane.so",
+      error: Boolean(errors.EMAIL_FROM),
+      required: true,
+    },
+  ];
+
+  const OptionalEmailFormFields: TControllerInputFormField[] = [
     {
       key: "EMAIL_HOST_USER",
       type: "text",
       label: "Username",
       placeholder: "getitdone@projectplane.so",
       error: Boolean(errors.EMAIL_HOST_USER),
-      required: true,
+      required: false,
     },
     {
       key: "EMAIL_HOST_PASSWORD",
@@ -71,17 +93,7 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
       label: "Password",
       placeholder: "Password",
       error: Boolean(errors.EMAIL_HOST_PASSWORD),
-      required: true,
-    },
-    {
-      key: "EMAIL_FROM",
-      type: "text",
-      label: "From address",
-      description:
-        "This is the email address your users will see when getting emails from this instance. You will need to verify this address.",
-      placeholder: "no-reply@projectplane.so",
-      error: Boolean(errors.EMAIL_FROM),
-      required: true,
+      required: false,
     },
   ];
 
@@ -99,11 +111,34 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
       .catch((err) => console.error(err));
   };
 
+  const useTLSValue = watch("EMAIL_USE_TLS");
+  const useSSLValue = watch("EMAIL_USE_SSL");
+  const emailSecurityKey: TEmailSecurityKeys = useMemo(() => {
+    if (useTLSValue === "1") return "EMAIL_USE_TLS";
+    if (useSSLValue === "1") return "EMAIL_USE_SSL";
+    return "NONE";
+  }, [useTLSValue, useSSLValue]);
+
+  const handleEmailSecurityChange = (key: TEmailSecurityKeys) => {
+    if (key === "EMAIL_USE_SSL") {
+      setValue("EMAIL_USE_TLS", "0");
+      setValue("EMAIL_USE_SSL", "1");
+    }
+    if (key === "EMAIL_USE_TLS") {
+      setValue("EMAIL_USE_TLS", "1");
+      setValue("EMAIL_USE_SSL", "0");
+    }
+    if (key === "NONE") {
+      setValue("EMAIL_USE_TLS", "0");
+      setValue("EMAIL_USE_SSL", "0");
+    }
+  };
+
   return (
     <div className="space-y-8">
       <div>
         <SendTestEmailModal isOpen={isSendTestEmailModalOpen} handleClose={() => setIsSendTestEmailModalOpen(false)} />
-        <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-x-20 gap-y-10 lg:grid-cols-2">
+        <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-start justify-between gap-10 lg:grid-cols-2">
           {emailFormFields.map((field) => (
             <ControllerInput
               key={field.key}
@@ -117,41 +152,67 @@ export const InstanceEmailForm: FC<IInstanceEmailForm> = (props) => {
               required={field.required}
             />
           ))}
+          <div className="flex flex-col gap-1">
+            <h4 className="text-sm text-custom-text-300">Email security</h4>
+            <CustomSelect
+              value={emailSecurityKey}
+              label={EMAIL_SECURITY_OPTIONS[emailSecurityKey]}
+              onChange={handleEmailSecurityChange}
+              buttonClassName="rounded-md border-custom-border-200"
+              optionsClassName="w-full"
+              input
+            >
+              {Object.entries(EMAIL_SECURITY_OPTIONS).map(([key, value]) => (
+                <CustomSelect.Option key={key} value={key} className="w-full">
+                  {value}
+                </CustomSelect.Option>
+              ))}
+            </CustomSelect>
+          </div>
         </div>
-        <div className="flex w-full max-w-md flex-col gap-y-10 px-1">
-          <div className="mr-8 flex items-center gap-10 pt-4">
-            <div className="grow">
-              <div className="text-sm font-medium text-custom-text-100">
-                Turn TLS {Boolean(parseInt(watch("EMAIL_USE_TLS"))) ? "off" : "on"}
-              </div>
-              <div className="text-xs font-normal text-custom-text-300">
-                Use this if your email domain supports TLS.
+        <div className="flex flex-col gap-6 my-6 pt-4 border-t border-custom-border-100">
+          <div className="flex w-full max-w-md flex-col gap-y-10 px-1">
+            <div className="mr-8 flex items-center gap-10 pt-4">
+              <div className="grow">
+                <div className="text-sm font-medium text-custom-text-100">Authentication (optional)</div>
+                <div className="text-xs font-normal text-custom-text-300">
+                  We recommend setting up a username password for your SMTP server
+                </div>
               </div>
             </div>
-            <div className="shrink-0">
-              <Controller
+          </div>
+          <div className="grid-col grid w-full max-w-4xl grid-cols-1 items-center justify-between gap-10 lg:grid-cols-2">
+            {OptionalEmailFormFields.map((field) => (
+              <ControllerInput
+                key={field.key}
                 control={control}
-                name="EMAIL_USE_TLS"
-                render={({ field: { value, onChange } }) => (
-                  <ToggleSwitch
-                    value={Boolean(parseInt(value))}
-                    onChange={() => {
-                      Boolean(parseInt(value)) === true ? onChange("0") : onChange("1");
-                    }}
-                    size="sm"
-                  />
-                )}
+                type={field.type}
+                name={field.key}
+                label={field.label}
+                description={field.description}
+                placeholder={field.placeholder}
+                error={field.error}
+                required={field.required}
               />
-            </div>
+            ))}
           </div>
         </div>
       </div>
-
       <div className="flex max-w-4xl items-center py-1 gap-4">
-        <Button variant="primary" onClick={handleSubmit(onSubmit)} loading={isSubmitting}>
+        <Button
+          variant="primary"
+          onClick={handleSubmit(onSubmit)}
+          loading={isSubmitting}
+          disabled={!isValid || !isDirty}
+        >
           {isSubmitting ? "Saving..." : "Save changes"}
         </Button>
-        <Button variant="outline-primary" onClick={() => setIsSendTestEmailModalOpen(true)} loading={isSubmitting}>
+        <Button
+          variant="outline-primary"
+          onClick={() => setIsSendTestEmailModalOpen(true)}
+          loading={isSubmitting}
+          disabled={!isValid}
+        >
           Send test email
         </Button>
       </div>
diff --git a/admin/components/common/controller-input.tsx b/admin/components/common/controller-input.tsx
index c386e7374..d47fe43f9 100644
--- a/admin/components/common/controller-input.tsx
+++ b/admin/components/common/controller-input.tsx
@@ -6,6 +6,8 @@ import { Controller, Control } from "react-hook-form";
 import { Input } from "@plane/ui";
 // icons
 import { Eye, EyeOff } from "lucide-react";
+// helpers
+import { cn } from "@/helpers/common.helper";
 
 type Props = {
   control: Control<any>;
@@ -51,7 +53,9 @@ export const ControllerInput: React.FC<Props> = (props) => {
               ref={ref}
               hasError={error}
               placeholder={placeholder}
-              className="w-full rounded-md font-medium"
+              className={cn("w-full rounded-md font-medium", {
+                "pr-10": type === "password",
+              })}
             />
           )}
         />
@@ -72,7 +76,7 @@ export const ControllerInput: React.FC<Props> = (props) => {
             </button>
           ))}
       </div>
-      {description && <p className="text-xs text-custom-text-400">{description}</p>}
+      {description && <p className="text-xs text-custom-text-300">{description}</p>}
     </div>
   );
 };
diff --git a/admin/package.json b/admin/package.json
index e0913d094..956d39c1a 100644
--- a/admin/package.json
+++ b/admin/package.json
@@ -11,6 +11,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@headlessui/react": "^1.7.19",
     "@plane/types": "*",
     "@plane/ui": "*",
     "@tailwindcss/typography": "^0.5.9",
diff --git a/packages/ui/src/dropdowns/custom-select.tsx b/packages/ui/src/dropdowns/custom-select.tsx
index 2d669cc05..17933da42 100644
--- a/packages/ui/src/dropdowns/custom-select.tsx
+++ b/packages/ui/src/dropdowns/custom-select.tsx
@@ -67,7 +67,7 @@ const CustomSelect = (props: ICustomSelectProps) => {
               className={`flex items-center justify-between gap-1 text-xs ${
                 disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
               } ${customButtonClassName}`}
-              onClick={openDropdown}
+              onClick={isOpen ? closeDropdown : openDropdown}
             >
               {customButton}
             </button>
@@ -77,12 +77,17 @@ const CustomSelect = (props: ICustomSelectProps) => {
             <button
               ref={setReferenceElement}
               type="button"
-              className={`flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300 ${
-                input ? "px-3 py-2 text-sm" : "px-2 py-1 text-xs"
-              } ${
-                disabled ? "cursor-not-allowed text-custom-text-200" : "cursor-pointer hover:bg-custom-background-80"
-              } ${buttonClassName}`}
-              onClick={openDropdown}
+              className={cn(
+                "flex w-full items-center justify-between gap-1 rounded border-[0.5px] border-custom-border-300",
+                {
+                  "px-3 py-2 text-sm": input,
+                  "px-2 py-1 text-xs": !input,
+                  "cursor-not-allowed text-custom-text-200": disabled,
+                  "cursor-pointer hover:bg-custom-background-80": !disabled,
+                },
+                buttonClassName
+              )}
+              onClick={isOpen ? closeDropdown : openDropdown}
             >
               {label}
               {!noChevron && !disabled && <ChevronDown className="h-3 w-3" aria-hidden="true" />}
diff --git a/yarn.lock b/yarn.lock
index 32f8dfae0..f8ed88233 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1370,7 +1370,7 @@
   resolved "https://registry.yarnpkg.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
   integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
 
-"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.17", "@headlessui/react@^1.7.3":
+"@headlessui/react@^1.7.13", "@headlessui/react@^1.7.17", "@headlessui/react@^1.7.19", "@headlessui/react@^1.7.3":
   version "1.7.19"
   resolved "https://registry.yarnpkg.com/@headlessui/react/-/react-1.7.19.tgz#91c78cf5fcb254f4a0ebe96936d48421caf75f40"
   integrity sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==
@@ -2759,7 +2759,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@18.2.48", "@types/react@^18.2.42", "@types/react@^18.2.48":
+"@types/react@*", "@types/react@^18.2.42", "@types/react@^18.2.48":
   version "18.2.48"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.48.tgz#11df5664642d0bd879c1f58bc1d37205b064e8f1"
   integrity sha512-qboRCl6Ie70DQQG9hhNREz81jqC1cs9EVNcjQ1AU+jH6NFfSAhVVbrrY/+nSF+Bsk4AOwm9Qa61InvMCyV+H3w==

From 385038fb22c6551b9e6af82f82bac37fdbdc4bad Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Mon, 6 May 2024 02:19:39 +0530
Subject: [PATCH 2/3] chore: add tooltip to admin sidebar help-section.

---
 .../components/admin-sidebar/help-section.tsx | 66 +++++++++----------
 1 file changed, 32 insertions(+), 34 deletions(-)

diff --git a/admin/components/admin-sidebar/help-section.tsx b/admin/components/admin-sidebar/help-section.tsx
index 1903b20fc..606d1bd89 100644
--- a/admin/components/admin-sidebar/help-section.tsx
+++ b/admin/components/admin-sidebar/help-section.tsx
@@ -4,7 +4,7 @@ import { FC, useState, useRef } from "react";
 import { Transition } from "@headlessui/react";
 import Link from "next/link";
 import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
-import { DiscordIcon, GithubIcon } from "@plane/ui";
+import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
 // hooks
 import { useTheme } from "@/hooks";
 // assets
@@ -45,39 +45,37 @@ export const HelpSection: FC = () => {
       }`}
     >
       <div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
-        <a
-          href={redirectionLink}
-          className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
-        >
-          <ExternalLink size={14} />
-          {!isSidebarCollapsed && "Redirect to plane"}
-        </a>
-
-        <button
-          type="button"
-          className={`ml-auto 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 ${
-            isSidebarCollapsed ? "w-full" : ""
-          }`}
-          onClick={() => setIsNeedHelpOpen((prev) => !prev)}
-        >
-          <HelpCircle className="h-3.5 w-3.5" />
-        </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(!isSidebarCollapsed)}
-        >
-          <MoveLeft className="h-3.5 w-3.5" />
-        </button>
-        <button
-          type="button"
-          className={`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 ${
-            isSidebarCollapsed ? "w-full" : ""
-          }`}
-          onClick={() => toggleSidebar(!isSidebarCollapsed)}
-        >
-          <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
-        </button>
+        <Tooltip tooltipContent="Redirect to plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
+          <a
+            href={redirectionLink}
+            className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
+          >
+            <ExternalLink size={14} />
+            {!isSidebarCollapsed && "Redirect to plane"}
+          </a>
+        </Tooltip>
+        <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
+          <button
+            type="button"
+            className={`ml-auto 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 ${
+              isSidebarCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => setIsNeedHelpOpen((prev) => !prev)}
+          >
+            <HelpCircle className="h-3.5 w-3.5" />
+          </button>
+        </Tooltip>
+        <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
+          <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 ${
+              isSidebarCollapsed ? "w-full" : ""
+            }`}
+            onClick={() => toggleSidebar(!isSidebarCollapsed)}
+          >
+            <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
+          </button>
+        </Tooltip>
       </div>
 
       <div className="relative">

From b9422bc94a4fd5f3ab4a4cd54751507efcac45ea Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Mon, 6 May 2024 02:27:08 +0530
Subject: [PATCH 3/3] chore: add dropdown to collapsed admin sidebar.

---
 .../admin-sidebar/sidebar-dropdown.tsx        | 101 +++++++++++-------
 1 file changed, 65 insertions(+), 36 deletions(-)

diff --git a/admin/components/admin-sidebar/sidebar-dropdown.tsx b/admin/components/admin-sidebar/sidebar-dropdown.tsx
index e2328d576..68212464e 100644
--- a/admin/components/admin-sidebar/sidebar-dropdown.tsx
+++ b/admin/components/admin-sidebar/sidebar-dropdown.tsx
@@ -9,7 +9,7 @@ import { Avatar } from "@plane/ui";
 // hooks
 import { useTheme, useUser } from "@/hooks";
 // helpers
-import { API_BASE_URL } from "@/helpers/common.helper";
+import { API_BASE_URL, cn } from "@/helpers/common.helper";
 // services
 import { AuthService } from "@/services";
 
@@ -32,6 +32,45 @@ export const SidebarDropdown = observer(() => {
 
   const handleSignOut = () => signOut();
 
+  const getSidebarMenuItems = () => (
+    <Menu.Items
+      className={cn(
+        "absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none",
+        {
+          "left-4": isSidebarCollapsed,
+        }
+      )}
+    >
+      <div className="flex flex-col gap-2.5 pb-2">
+        <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
+      </div>
+      <div className="py-2">
+        <Menu.Item
+          as="button"
+          type="button"
+          className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+          onClick={handleThemeSwitch}
+        >
+          <Palette className="h-4 w-4 stroke-[1.5]" />
+          Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
+        </Menu.Item>
+      </div>
+      <div className="py-2">
+        <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`} onSubmit={handleSignOut}>
+          <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
+          <Menu.Item
+            as="button"
+            type="submit"
+            className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
+          >
+            <LogOut className="h-4 w-4 stroke-[1.5]" />
+            Sign out
+          </Menu.Item>
+        </form>
+      </div>
+    </Menu.Items>
+  );
+
   useEffect(() => {
     if (csrfToken === undefined)
       authService.requestCSRFToken().then((data) => data?.csrf_token && setCsrfToken(data.csrf_token));
@@ -45,9 +84,30 @@ export const SidebarDropdown = observer(() => {
             isSidebarCollapsed ? "justify-center" : ""
           }`}
         >
-          <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
-            <UserCog2 className="h-5 w-5 text-custom-text-200" />
-          </div>
+          <Menu as="div" className="flex-shrink-0">
+            <Menu.Button
+              className={cn("grid place-items-center outline-none", {
+                "cursor-default": !isSidebarCollapsed,
+              })}
+            >
+              <div className="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded bg-custom-sidebar-background-80">
+                <UserCog2 className="h-5 w-5 text-custom-text-200" />
+              </div>
+            </Menu.Button>
+            {isSidebarCollapsed && (
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
+              >
+                {getSidebarMenuItems()}
+              </Transition>
+            )}
+          </Menu>
 
           {!isSidebarCollapsed && (
             <div className="flex w-full gap-2">
@@ -78,38 +138,7 @@ export const SidebarDropdown = observer(() => {
             leaveFrom="transform opacity-100 scale-100"
             leaveTo="transform opacity-0 scale-95"
           >
-            <Menu.Items
-              className="absolute left-0 z-20 mt-1.5 flex w-52 flex-col divide-y
-          divide-custom-sidebar-border-100 rounded-md border border-custom-sidebar-border-200 bg-custom-sidebar-background-100 px-1 py-2 text-xs shadow-lg outline-none"
-            >
-              <div className="flex flex-col gap-2.5 pb-2">
-                <span className="px-2 text-custom-sidebar-text-200">{currentUser?.email}</span>
-              </div>
-              <div className="py-2">
-                <Menu.Item
-                  as="button"
-                  type="button"
-                  className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-                  onClick={handleThemeSwitch}
-                >
-                  <Palette className="h-4 w-4 stroke-[1.5]" />
-                  Switch to {resolvedTheme === "dark" ? "light" : "dark"} mode
-                </Menu.Item>
-              </div>
-              <div className="py-2">
-                <form method="POST" action={`${API_BASE_URL}/api/instances/admins/sign-out/`} onSubmit={handleSignOut}>
-                  <input type="hidden" name="csrfmiddlewaretoken" value={csrfToken} />
-                  <Menu.Item
-                    as="button"
-                    type="submit"
-                    className="flex w-full items-center gap-2 rounded px-2 py-1 hover:bg-custom-sidebar-background-80"
-                  >
-                    <LogOut className="h-4 w-4 stroke-[1.5]" />
-                    Sign out
-                  </Menu.Item>
-                </form>
-              </div>
-            </Menu.Items>
+            {getSidebarMenuItems()}
           </Transition>
         </Menu>
       )}