add shortcuts in tray for quit and settings item

client/ui/frontend/src/components/DropdownMenu.tsx

@@ -208,7 +208,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => (
     <span
-        className={cn("ml-auto text-xs tracking-widest text-nb-gray-400 opacity-60", className)}
+        className={cn("ml-auto text-xs tracking-widest text-nb-gray-100 opacity-60", className)}
         {...props}
     />
 );

client/ui/frontend/src/layouts/Header.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { useTranslation } from "react-i18next";
 import {
     ArrowUpCircleIcon,
@@ -15,24 +15,34 @@ import {
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuSeparator,
+    DropdownMenuShortcut,
     DropdownMenuTrigger,
 } from "@/components/DropdownMenu";
 import { IconButton } from "@/components/IconButton";
 import { ProfileDropdown } from "@/components/ProfileDropdown";
 import { useClientVersion } from "@/modules/auto-update/ClientVersionContext";
 import { cn } from "@/lib/cn";
+import { formatShortcut, useKeyboardShortcut } from "@/lib/useKeyboardShortcut";
 import { useViewMode, type ViewMode } from "@/lib/viewMode";
 
+const SETTINGS_SHORTCUT = { key: ",", cmd: true } as const;
+
 export const Header = () => {
     const { t } = useTranslation();
     const [menuOpen, setMenuOpen] = useState(false);
     const { viewMode, setViewMode } = useViewMode();
     const { updateAvailable } = useClientVersion();
 
-    const openSettings = () => {
+    const openSettings = useCallback(() => {
         setMenuOpen(false);
         void WindowManager.OpenSettings("").catch(() => {});
-    };
+    }, []);
+
+    // Mirror the tray's Settings accelerator so the keystroke works while
+    // the main window has focus too. The tray's SetAccelerator paints the
+    // glyph on macOS/Linux but only fires the menu item — it can't reach the
+    // webview's input loop, hence the parallel React-side listener.
+    useKeyboardShortcut(SETTINGS_SHORTCUT, openSettings);
 
     const openAbout = () => {
         setMenuOpen(false);
@@ -79,9 +89,12 @@ export const Header = () => {
                         </>
                     )}
                     <DropdownMenuItem onClick={openSettings}>
-                        <div className="flex items-center gap-2">
+                        <div className="flex items-center gap-2 w-full">
                             <Settings size={14} />
-                            {t("header.menu.settings")}
+                            <span className="flex-1">{t("header.menu.settings")}</span>
+                            <DropdownMenuShortcut>
+                                {formatShortcut(SETTINGS_SHORTCUT)}
+                            </DropdownMenuShortcut>
                         </div>
                     </DropdownMenuItem>
                     <DropdownMenuSeparator />