From d8f5c20254e070c5f4dffa13886f9d0689e722eb Mon Sep 17 00:00:00 2001
From: sillyangel <sillyangel3@gmail.com>
Date: Wed, 25 Jun 2025 20:32:27 -0500
Subject: [PATCH] feat: refactor Menu component layout and improve
 accessibility features

---
 app/components/menu.tsx | 362 +++++++++++++++++++++-------------------
 1 file changed, 186 insertions(+), 176 deletions(-)

diff --git a/app/components/menu.tsx b/app/components/menu.tsx
index 45eeda1..46e7435 100644
--- a/app/components/menu.tsx
+++ b/app/components/menu.tsx
@@ -82,184 +82,194 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
 
     return (
       <>
-      <Menubar className="rounded-none border-b border-none px-2 lg:px-4">
-        <MenubarMenu>
-          <MenubarTrigger className="font-bold">mice</MenubarTrigger>
-          <MenubarContent>
-            <MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem onClick={() => router.push('/settings')}>
-              Preferences <MenubarShortcut>⌘,</MenubarShortcut>
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem>
-              Hide Music <MenubarShortcut>⌘H</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem>
-              Hide Others <MenubarShortcut>⇧⌘H</MenubarShortcut>
-            </MenubarItem>
-            <MenubarShortcut />
-            <MenubarItem>
-              Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
-            </MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-        <div className="border-r-4 w-0"><p className="invisible">j</p></div>
-        <MenubarMenu>
-          <MenubarTrigger className="relative">File</MenubarTrigger>
-          <MenubarContent>
-            <MenubarSub>
-              <MenubarSubTrigger>New</MenubarSubTrigger>
-              <MenubarSubContent className="w-[230px]">
-                <MenubarItem>
-                  Playlist <MenubarShortcut>⌘N</MenubarShortcut>
-                </MenubarItem>
-                <MenubarItem disabled>
-                  Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
-                </MenubarItem>
-                <MenubarItem>
-                  Smart Playlist <MenubarShortcut>⌥⌘N</MenubarShortcut>
-                </MenubarItem>
-                <MenubarItem>Playlist Folder</MenubarItem>
-                <MenubarItem disabled>Genius Playlist</MenubarItem>
-              </MenubarSubContent>
-            </MenubarSub>
-            <MenubarItem>
-              Open Stream URL <MenubarShortcut>⌘U</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem>
-              Close Window <MenubarShortcut>⌘W</MenubarShortcut>
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarSub>
-              <MenubarSubTrigger>Library</MenubarSubTrigger>
-              <MenubarSubContent>
-                <MenubarItem>Update Cloud Library</MenubarItem>
-                <MenubarItem>Update Genius</MenubarItem>
-                <MenubarSeparator />
-                <MenubarItem>Organize Library</MenubarItem>
-                <MenubarItem>Export Library</MenubarItem>
-                <MenubarSeparator />
-                <MenubarItem>Import Playlist</MenubarItem>
-                <MenubarItem disabled>Export Playlist</MenubarItem>
-                <MenubarItem>Show Duplicate Items</MenubarItem>
-                <MenubarSeparator />
-                <MenubarItem>Get Album Artwork</MenubarItem>
-                <MenubarItem disabled>Get Track Names</MenubarItem>
-              </MenubarSubContent>
-            </MenubarSub>
-            <MenubarItem>
-              Import <MenubarShortcut>⌘O</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem disabled>Burn Playlist to Disc</MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem>
-              Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
-            </MenubarItem>
-            <MenubarItem>Convert</MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem>Page Setup</MenubarItem>
-            <MenubarItem disabled>
-              Print <MenubarShortcut>⌘P</MenubarShortcut>
-            </MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-        <MenubarMenu>
-          <MenubarTrigger>Edit</MenubarTrigger>
-          <MenubarContent>
-            <MenubarItem disabled>
-              Undo <MenubarShortcut>⌘Z</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem disabled>
-              Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem disabled>
-              Cut <MenubarShortcut>⌘X</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem disabled>
-              Copy <MenubarShortcut>⌘C</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem disabled>
-              Paste <MenubarShortcut>⌘V</MenubarShortcut>
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem>
-              Select All <MenubarShortcut>⌘A</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem disabled>
-              Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem>
-              Smart Dictation{" "}
-              <MenubarShortcut>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  className="h-4 w-4"
-                  viewBox="0 0 24 24"
-                >
-                  <path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
-                  <circle cx="17" cy="7" r="5" />
-                </svg>
-              </MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem>
-              Emoji & Symbols{" "}
-              <MenubarShortcut>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth="2"
-                  className="h-4 w-4"
-                  viewBox="0 0 24 24"
-                >
-                  <circle cx="12" cy="12" r="10" />
-                  <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10z" />
-                </svg>
-              </MenubarShortcut>
-            </MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-        <MenubarMenu>
-          <MenubarTrigger>View</MenubarTrigger>
-          <MenubarContent>
-            <MenubarCheckboxItem disabled>Show Playing Next</MenubarCheckboxItem>
-            <MenubarCheckboxItem disabled>Show Lyrics</MenubarCheckboxItem>
-            <MenubarSeparator />
-            <MenubarItem inset onClick={toggleStatusBar}>
-              {isStatusBarVisible ? "Hide Status Bar" : "Show Status Bar"}
-            </MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem inset onClick={toggleSidebar}>
-              {isSidebarVisible ? "Hide Sidebar" : "Show Sidebar"}
-              <MenubarShortcut>⌘S</MenubarShortcut>
-            </MenubarItem>
-            <MenubarItem inset onClick={handleFullScreen}>
+      <div className="flex items-center justify-between w-full">
+        <div className="flex items-center gap-2 mx-2">
+          <span
+        className={`h-2 w-2 rounded-full ${isConnected ? "bg-green-500" : "bg-red-400"}`}
+          />
+        </div>
+          <div style={{ marginRight: '0.24rem' }} className="border-r-4 w-0"><p className="invisible">j</p></div>
+
+        <Menubar className="rounded-none border-b border-none px-0 lg:px-0 flex-1" style={{ minWidth: 0 }}>
+          <MenubarMenu>
+        <MenubarTrigger className="font-bold">mice</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem onClick={() => router.push('/settings')}>
+            Preferences <MenubarShortcut>⌘,</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Hide Music <MenubarShortcut>⌘H</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Hide Others <MenubarShortcut>⇧⌘H</MenubarShortcut>
+          </MenubarItem>
+          <MenubarShortcut />
+          <MenubarItem>
+            Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+          </MenubarMenu>
+          <div className="border-r-4 w-0"><p className="invisible">j</p></div>
+          <MenubarMenu>
+        <MenubarTrigger className="relative">File</MenubarTrigger>
+        <MenubarContent>
+          <MenubarSub>
+            <MenubarSubTrigger>New</MenubarSubTrigger>
+            <MenubarSubContent className="w-[230px]">
+          <MenubarItem>
+            Playlist <MenubarShortcut>⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>
+            Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Smart Playlist <MenubarShortcut>⌥⌘N</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>Playlist Folder</MenubarItem>
+          <MenubarItem disabled>Genius Playlist</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarItem>
+            Open Stream URL <MenubarShortcut>⌘U</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Close Window <MenubarShortcut>⌘W</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarSub>
+            <MenubarSubTrigger>Library</MenubarSubTrigger>
+            <MenubarSubContent>
+          <MenubarItem>Update Cloud Library</MenubarItem>
+          <MenubarItem>Update Genius</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Organize Library</MenubarItem>
+          <MenubarItem>Export Library</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Import Playlist</MenubarItem>
+          <MenubarItem disabled>Export Playlist</MenubarItem>
+          <MenubarItem>Show Duplicate Items</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Get Album Artwork</MenubarItem>
+          <MenubarItem disabled>Get Track Names</MenubarItem>
+            </MenubarSubContent>
+          </MenubarSub>
+          <MenubarItem>
+            Import <MenubarShortcut>⌘O</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>Burn Playlist to Disc</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Show in Finder <MenubarShortcut>⇧⌘R</MenubarShortcut>{" "}
+          </MenubarItem>
+          <MenubarItem>Convert</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>Page Setup</MenubarItem>
+          <MenubarItem disabled>
+            Print <MenubarShortcut>⌘P</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+        <MenubarTrigger>Edit</MenubarTrigger>
+        <MenubarContent>
+          <MenubarItem disabled>
+            Undo <MenubarShortcut>⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>
+            Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem disabled>
+            Cut <MenubarShortcut>⌘X</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>
+            Copy <MenubarShortcut>⌘C</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>
+            Paste <MenubarShortcut>⌘V</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Select All <MenubarShortcut>⌘A</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem disabled>
+            Deselect All <MenubarShortcut>⇧⌘A</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>
+            Smart Dictation{" "}
+            <MenubarShortcut>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            className="h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <path d="m12 8-9.04 9.06a2.82 2.82 0 1 0 3.98 3.98L16 12" />
+            <circle cx="17" cy="7" r="5" />
+          </svg>
+            </MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>
+            Emoji & Symbols{" "}
+            <MenubarShortcut>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            stroke="currentColor"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            className="h-4 w-4"
+            viewBox="0 0 24 24"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M2 12h20M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10z" />
+          </svg>
+            </MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+        <MenubarTrigger>View</MenubarTrigger>
+        <MenubarContent>
+          <MenubarCheckboxItem disabled>Show Playing Next</MenubarCheckboxItem>
+          <MenubarCheckboxItem disabled>Show Lyrics</MenubarCheckboxItem>
+          <MenubarSeparator />
+          <MenubarItem inset onClick={toggleStatusBar}>
+            {isStatusBarVisible ? "Hide Status Bar" : "Show Status Bar"}
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem inset onClick={toggleSidebar}>
+            {isSidebarVisible ? "Hide Sidebar" : "Show Sidebar"}
+            <MenubarShortcut>⌘S</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem inset onClick={handleFullScreen}>
             {isFullScreen ? "Exit Full Screen" : "Enter Full Screen"}
           </MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-        <MenubarMenu>
-          <MenubarTrigger className="hidden md:block">Account</MenubarTrigger>
-          <MenubarContent forceMount>
-            <MenubarLabel>Server Status</MenubarLabel>
-            <MenubarItem>{connectionStatus}</MenubarItem>
-            <MenubarSeparator />
-            <MenubarItem onClick={() => router.push('/settings')}>
-              Settings
-            </MenubarItem>
-          </MenubarContent>
-        </MenubarMenu>
-      </Menubar>
+        </MenubarContent>
+          </MenubarMenu>
+          <MenubarMenu>
+        <MenubarTrigger className="hidden md:block">Account</MenubarTrigger>
+        <MenubarContent forceMount>
+          <MenubarLabel>Server Status</MenubarLabel>
+          <MenubarItem>{connectionStatus}</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem onClick={() => router.push('/settings')}>
+            Settings
+          </MenubarItem>
+        </MenubarContent>
+          </MenubarMenu>
+        </Menubar>
+        
+      </div>
 
       <Dialog open={open} onOpenChange={setOpen}>
         <DialogContent className="sm:max-w-[400px] p-0 overflow-hidden">