From a56f41cf03391eda4fcb513595f6f515c0cf3644 Mon Sep 17 00:00:00 2001
From: Bohan Jiang <52446949+Bohan-J@users.noreply.github.com>
Date: Mon, 20 Jul 2026 16:37:30 +0800
Subject: [PATCH] feat(projects): switch project list view control to a
 dropdown menu (MUL-5030) (#5677)

Align the project list view control with the issue list: instead of a
button that flips table <-> cards on click, the trigger now opens a
dropdown menu with a 'View' header and a radio group of view modes
(Table / Cards). Using DropdownMenuRadioGroup keeps it trivial to add
future view modes as new menu items.

Co-authored-by: Bohan-J <bohan@devv.ai>
Co-authored-by: multica-agent <github@multica.ai>
---
 .../components/projects-page.test.tsx         |  6 ++
 .../projects/components/projects-page.tsx     | 78 ++++++++++++-------
 2 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/packages/views/projects/components/projects-page.test.tsx b/packages/views/projects/components/projects-page.test.tsx
index 1530fd2ad..614a4a289 100644
--- a/packages/views/projects/components/projects-page.test.tsx
+++ b/packages/views/projects/components/projects-page.test.tsx
@@ -112,6 +112,12 @@ vi.mock("@multica/ui/components/ui/dropdown-menu", () => ({
   DropdownMenuContent: ({ children }: { children: React.ReactNode }) => (
     <div>{children}</div>
   ),
+  DropdownMenuGroup: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
+  DropdownMenuLabel: ({ children }: { children: React.ReactNode }) => (
+    <div>{children}</div>
+  ),
   DropdownMenuItem: ({
     children,
     onClick,
diff --git a/packages/views/projects/components/projects-page.tsx b/packages/views/projects/components/projects-page.tsx
index 2e5ecd283..b18c4fc08 100644
--- a/packages/views/projects/components/projects-page.tsx
+++ b/packages/views/projects/components/projects-page.tsx
@@ -27,6 +27,7 @@ import {
   type ProjectColumnKey,
   type ProjectListFilters,
   type ProjectSortField,
+  type ProjectViewMode,
 } from "@multica/core/projects";
 import {
   pinListOptions,
@@ -58,7 +59,9 @@ import {
   DropdownMenu,
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
+  DropdownMenuGroup,
   DropdownMenuItem,
+  DropdownMenuLabel,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
@@ -1150,32 +1153,55 @@ export function ProjectsPage() {
                   </PopoverContent>
                 </Popover>
 
-              {/* View toggle — a single button that flips table ⇄ cards.
-                  Pure presentation; coupled to nothing else. */}
-              <Tooltip>
-                <TooltipTrigger
-                  render={
-                    <Button
-                      variant="outline"
-                      size="sm"
-                      className="h-8 w-8 gap-1 px-0 text-muted-foreground md:w-auto md:px-2.5"
-                      onClick={() => setViewMode(isCompact ? "comfortable" : "compact")}
-                    >
-                      {isCompact ? (
-                        <Rows3 className="size-3.5" />
-                      ) : (
-                        <LayoutGrid className="size-3.5" />
-                      )}
-                      <span className="hidden md:inline">
-                        {isCompact ? t(($) => $.page.view_table) : t(($) => $.page.view_cards)}
-                      </span>
-                    </Button>
-                  }
-                />
-                <TooltipContent side="bottom">
-                  {isCompact ? t(($) => $.page.view_cards) : t(($) => $.page.view_table)}
-                </TooltipContent>
-              </Tooltip>
+              {/* View selector — a dropdown menu to pick the list view,
+                  aligned with the issue list's view menu. The trigger shows
+                  the active view; the menu carries every mode so new views
+                  can be added as menu items. Pure presentation. */}
+              <DropdownMenu>
+                <Tooltip>
+                  <DropdownMenuTrigger
+                    render={
+                      <TooltipTrigger
+                        render={
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            className="h-8 w-8 gap-1 px-0 text-muted-foreground md:w-auto md:px-2.5"
+                          >
+                            {isCompact ? (
+                              <Rows3 className="size-3.5" />
+                            ) : (
+                              <LayoutGrid className="size-3.5" />
+                            )}
+                            <span className="hidden md:inline">
+                              {isCompact ? t(($) => $.page.view_table) : t(($) => $.page.view_cards)}
+                            </span>
+                          </Button>
+                        }
+                      />
+                    }
+                  />
+                  <TooltipContent side="bottom">{t(($) => $.toolbar.view)}</TooltipContent>
+                </Tooltip>
+                <DropdownMenuContent align="end" className="w-auto">
+                  <DropdownMenuGroup>
+                    <DropdownMenuLabel>{t(($) => $.toolbar.view)}</DropdownMenuLabel>
+                  </DropdownMenuGroup>
+                  <DropdownMenuRadioGroup
+                    value={viewMode}
+                    onValueChange={(v) => setViewMode(v as ProjectViewMode)}
+                  >
+                    <DropdownMenuRadioItem value="compact">
+                      <Rows3 />
+                      {t(($) => $.page.view_table)}
+                    </DropdownMenuRadioItem>
+                    <DropdownMenuRadioItem value="comfortable">
+                      <LayoutGrid />
+                      {t(($) => $.page.view_cards)}
+                    </DropdownMenuRadioItem>
+                  </DropdownMenuRadioGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
             </div>
           </div>