From 49c32fccf15275f48efe8fcc3fa087218a3bdaf0 Mon Sep 17 00:00:00 2001
From: DCCONSTRUCTIONS <dcconstructions@MacBook-Pro-DCCONSTRUCTIONS-2.local>
Date: Wed, 22 Apr 2026 22:37:26 +0300
Subject: [PATCH] =?UTF-8?q?UI=20-=20=D0=9C=D0=95=D0=96=D0=9F=D0=A0=D0=9E?=
 =?UTF-8?q?=D0=95=D0=9A=D0=A2=D0=9D=D0=90=D0=AF=20=D0=9A=D0=9E=D0=9C=D0=9C?=
 =?UTF-8?q?=D0=A3=D0=9D=D0=98=D0=9A=D0=90=D0=A6=D0=98=D0=AF:=20CTA=20?=
 =?UTF-8?q?=D1=81=D0=BE=D0=B7=D0=B4=D0=B0=D0=BD=D0=B8=D1=8F=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=BE=D0=B5=D0=BA=D1=82=D0=B0=20=D0=B8=20=D0=BF=D0=BE=D0=BB?=
 =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=BA=D0=B0=20project-menu=20=D0=B8=20?=
 =?UTF-8?q?cover-header?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../(projects)/project-shell-top-toolbar.tsx  |  13 +++
 .../apps/web/core/components/project/form.tsx |  90 ++++++++--------
 .../workspace/sidebar/projects-list-item.tsx  | 100 ++++++++++--------
 3 files changed, 115 insertions(+), 88 deletions(-)

diff --git a/plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/project-shell-top-toolbar.tsx b/plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/project-shell-top-toolbar.tsx
index 8b7513d..84eb506 100644
--- a/plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/project-shell-top-toolbar.tsx
+++ b/plane-src/apps/web/app/(all)/[workspaceSlug]/(projects)/project-shell-top-toolbar.tsx
@@ -96,6 +96,7 @@ const ProjectsToolbarMenu = observer(function ProjectsToolbarMenu() {
   const pathname = usePathname();
   const { workspaceSlug } = useParams();
   const { joinedProjectIds } = useProject();
+  const { toggleCreateProjectModal } = useCommandPalette();
 
   const handleCopyText = (projectId: string) =>
     copyUrlToClipboard(`${workspaceSlug}/projects/${projectId}/issues`).then(() => {
@@ -139,6 +140,18 @@ const ProjectsToolbarMenu = observer(function ProjectsToolbarMenu() {
               />
             ))}
           </div>
+          <div className="mt-2 border-t border-white/8 px-1 pt-2">
+            <Menu.Item>
+              <button
+                type="button"
+                className="nodedc-toolbar-primary nodedc-toolbar-primary-wide flex w-full items-center justify-center gap-2 text-13 font-medium"
+                onClick={() => toggleCreateProjectModal(true)}
+              >
+                <PlusIcon className="size-4" />
+                <span>{t("create_project")}</span>
+              </button>
+            </Menu.Item>
+          </div>
         </div>
       </Menu.Items>
     </Menu>
diff --git a/plane-src/apps/web/core/components/project/form.tsx b/plane-src/apps/web/core/components/project/form.tsx
index 9d39519..10b4626 100644
--- a/plane-src/apps/web/core/components/project/form.tsx
+++ b/plane-src/apps/web/core/components/project/form.tsx
@@ -197,52 +197,54 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
         <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent" />
         <CoverImage src={coverImage} alt="Project cover image" className="h-44 w-full rounded-md" />
         <div className="absolute bottom-4 z-5 flex w-full items-end justify-between gap-3 px-4">
-          <div className="flex flex-grow gap-3 truncate">
-            <Controller
-              control={control}
-              name="logo_props"
-              render={({ field: { value, onChange } }) => (
-                <EmojiPicker
-                  iconType="material"
-                  closeOnSelect={false}
-                  isOpen={isOpen}
-                  handleToggle={(val: boolean) => setIsOpen(val)}
-                  className="flex items-center justify-center"
-                  buttonClassName="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-white/10"
-                  label={<Logo logo={value} size={28} />}
-                  // TODO: fix types
-                  onChange={(val: any) => {
-                    let logoValue = {};
+          <div className="flex min-w-0 flex-grow gap-3 truncate">
+            <div className="flex min-w-0 flex-1 items-center gap-3 rounded-[1.2rem] bg-white/10 px-2.5 py-2.5 backdrop-blur-2xl">
+              <Controller
+                control={control}
+                name="logo_props"
+                render={({ field: { value, onChange } }) => (
+                  <EmojiPicker
+                    iconType="material"
+                    closeOnSelect={false}
+                    isOpen={isOpen}
+                    handleToggle={(val: boolean) => setIsOpen(val)}
+                    className="flex items-center justify-center"
+                    buttonClassName="flex h-[52px] w-[52px] flex-shrink-0 items-center justify-center rounded-lg bg-white/[0.06]"
+                    label={<Logo logo={value} size={28} />}
+                    // TODO: fix types
+                    onChange={(val: any) => {
+                      let logoValue = {};
 
-                    if (val?.type === "emoji")
-                      logoValue = {
-                        value: val.value,
-                      };
-                    else if (val?.type === "icon") logoValue = val.value;
+                      if (val?.type === "emoji")
+                        logoValue = {
+                          value: val.value,
+                        };
+                      else if (val?.type === "icon") logoValue = val.value;
 
-                    onChange({
-                      in_use: val?.type,
-                      [val?.type]: logoValue,
-                    });
-                    setIsOpen(false);
-                  }}
-                  defaultIconColor={value?.in_use && value.in_use === "icon" ? value?.icon?.color : undefined}
-                  defaultOpen={
-                    value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
-                  }
-                  disabled={!isAdmin}
-                />
-              )}
-            />
-            <div className="flex flex-col gap-1 truncate text-on-color">
-              <span className="truncate text-16 font-semibold">{watch("name")}</span>
-              <span className="flex items-center gap-2 text-13">
-                <span>{watch("identifier")} .</span>
-                <span className="flex items-center gap-1.5">
-                  {project.network === 0 && <LockIcon className="h-2.5 w-2.5 text-on-color" />}
-                  {currentNetwork && t(currentNetwork?.i18n_label)}
+                      onChange({
+                        in_use: val?.type,
+                        [val?.type]: logoValue,
+                      });
+                      setIsOpen(false);
+                    }}
+                    defaultIconColor={value?.in_use && value.in_use === "icon" ? value?.icon?.color : undefined}
+                    defaultOpen={
+                      value.in_use && value.in_use === "emoji" ? EmojiIconPickerTypes.EMOJI : EmojiIconPickerTypes.ICON
+                    }
+                    disabled={!isAdmin}
+                  />
+                )}
+              />
+              <div className="flex flex-col gap-1 truncate text-on-color">
+                <span className="truncate text-16 font-semibold">{watch("name")}</span>
+                <span className="flex items-center gap-2 text-13">
+                  <span>{watch("identifier")} .</span>
+                  <span className="flex items-center gap-1.5">
+                    {project.network === 0 && <LockIcon className="h-2.5 w-2.5 text-on-color" />}
+                    {currentNetwork && t(currentNetwork?.i18n_label)}
+                  </span>
                 </span>
-              </span>
+              </div>
             </div>
           </div>
           <div className="flex flex-shrink-0 justify-center">
@@ -397,7 +399,7 @@ export function ProjectDetailsForm(props: IProjectDetailsForm) {
                         )}
                       </div>
                     }
-                    menuButtonWrapperClassName="nodedc-settings-select !h-12 font-medium"
+                    menuButtonWrapperClassName="nodedc-settings-select !h-12 min-w-[12.75rem] px-4 font-medium"
                     disabled={!isAdmin}
                   />
                 );
diff --git a/plane-src/apps/web/core/components/workspace/sidebar/projects-list-item.tsx b/plane-src/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
index 5f71d6a..c295ec9 100644
--- a/plane-src/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
+++ b/plane-src/apps/web/core/components/workspace/sidebar/projects-list-item.tsx
@@ -392,35 +392,66 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                 </button>
               </Tooltip>
             )}
-            <>
-              <ControlLink href={defaultTabUrl} className="flex flex-grow truncate" onClick={handleItemClick}>
-                {isAccordionMode ? (
-                  <Disclosure.Button
-                    as="button"
-                    type="button"
-                    className={cn("flex w-full flex-grow items-center gap-1.5 text-left select-none", {})}
-                    aria-label={
-                      isProjectListOpen
-                        ? t("aria_labels.projects_sidebar.close_project_menu")
-                        : t("aria_labels.projects_sidebar.open_project_menu")
+            {isAccordionMode ? (
+              <div className="flex w-full items-center gap-1">
+                <button
+                  type="button"
+                  className="flex min-w-0 flex-1 items-center gap-3 text-left select-none"
+                  onClick={() => setIsProjectListOpen(!isProjectListOpen)}
+                  aria-label={
+                    isProjectListOpen
+                      ? t("aria_labels.projects_sidebar.close_project_menu")
+                      : t("aria_labels.projects_sidebar.open_project_menu")
+                  }
+                >
+                  <div className="grid size-8 flex-shrink-0 place-items-center rounded-full border border-white/8 bg-white/[0.04]">
+                    <WorkItemsIcon className="size-4 text-tertiary" />
+                  </div>
+                  <p className="truncate text-13 font-medium text-secondary">{project.name}</p>
+                  <span className="ml-auto grid size-7 flex-shrink-0 place-items-center rounded-full text-placeholder transition-colors group-hover/project-item:bg-layer-transparent-hover">
+                    <ChevronRightIcon
+                      className={cn("size-4 transition-transform", {
+                        "rotate-90": isProjectListOpen,
+                      })}
+                    />
+                  </span>
+                </button>
+                {!renderInToolbarMenu && (
+                  <ActionDropdown
+                    button={
+                      <span className="grid place-items-center">
+                        <MoreHorizontal className="h-3.5 w-3.5 text-placeholder" />
+                      </span>
                     }
-                  >
-                    <div className="grid size-8 flex-shrink-0 place-items-center rounded-full border border-white/8 bg-white/[0.04]">
-                      <WorkItemsIcon className="size-4 text-tertiary" />
-                    </div>
-                    <p className="truncate text-13 font-medium text-secondary">{project.name}</p>
-                  </Disclosure.Button>
-                ) : (
+                    className={cn(
+                      "pointer-events-none flex-shrink-0 opacity-0 group-hover/project-item:pointer-events-auto group-hover/project-item:opacity-100",
+                      {
+                        "pointer-events-auto opacity-100": isMenuActive,
+                      }
+                    )}
+                    buttonClassName={cn(
+                      "grid size-7 place-items-center rounded-full text-placeholder transition-colors hover:bg-layer-transparent-hover",
+                      {
+                        "bg-layer-transparent-hover": isMenuActive,
+                      }
+                    )}
+                    placement="bottom-start"
+                    onOpenChange={setIsMenuActive}
+                    items={projectActionMenuItems}
+                  />
+                )}
+              </div>
+            ) : (
+              <>
+                <ControlLink href={defaultTabUrl} className="flex flex-grow truncate" onClick={handleItemClick}>
                   <div className="flex w-full flex-grow items-center gap-3 text-left select-none">
                     <div className="grid size-8 flex-shrink-0 place-items-center rounded-full border border-white/8 bg-white/[0.04]">
                       <WorkItemsIcon className="size-4 text-tertiary" />
                     </div>
                     <p className="truncate text-13 font-medium text-secondary">{project.name}</p>
                   </div>
-                )}
-              </ControlLink>
-              <div className="flex items-center gap-1">
-                {!renderInToolbarMenu && (
+                </ControlLink>
+                <div className="flex items-center gap-1">
                   <ActionDropdown
                     button={
                       <span className="grid place-items-center">
@@ -444,28 +475,9 @@ export const SidebarProjectsListItem = observer(function SidebarProjectsListItem
                     onOpenChange={setIsMenuActive}
                     items={projectActionMenuItems}
                   />
-                )}
-                {isAccordionMode && (
-                  <IconButton
-                    variant="ghost"
-                    size="sm"
-                    icon={ChevronRightIcon}
-                    onClick={() => setIsProjectListOpen(!isProjectListOpen)}
-                    className={cn("hidden text-placeholder group-hover/project-item:inline-flex", {
-                      "inline-flex": isMenuActive,
-                    })}
-                    iconClassName={cn("transition-transform", {
-                      "rotate-90": isProjectListOpen,
-                    })}
-                    aria-label={t(
-                      isProjectListOpen
-                        ? "aria_labels.projects_sidebar.close_project_menu"
-                        : "aria_labels.projects_sidebar.open_project_menu"
-                    )}
-                  />
-                )}
-              </div>
-            </>
+                </div>
+              </>
+            )}
           </div>
           {isAccordionMode && (
             <Transition