angel/mice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refactor Menu component layout and improve accessibility features

Browse Source
This commit is contained in:
angel
2025-06-25 20:32:27 -05:00
parent 7bb477bb55
commit d8f5c20254
1 changed files with 186 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files

362
app/components/menu.tsx
View File

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