feat: add keyboard shortcuts and command menu

Adds keyboard shortcuts for logout (vim styled `:q` to logout), command
menu (`CTRL / CMD + K`), search on active page (vim styled `/`, if there
is a valid search input) and switching servers (`CTRL / CMD + {{N}}` and
vim styled `:{{N}}` to switch servers, where {{N}} is the server index).

Also adds a command menu for quick navigation to user profiles,
searching users, and executing commands like rebuilding packages or
viewing build logs for a specific package.

Revamped existing shortcut listeners to use a generic hook, instead of
specific listeners for logout and find shortcuts.

Fix sidebar item icons not visible when the sidebar is collapsed.

Signed-off-by: SoulHarsh007 <[email protected]>

Author: SoulHarsh007

CachyOS Builder Dashboard.code-workspace

@@ -8,15 +8,18 @@
 		"cSpell.words": [
 			"Cachy",
 			"cachyos",
+			"cmdk",
 			"headlessui",
 			"marsidev",
+			"nums",
 			"pkgbase",
 			"pkgname",
 			"QPKG",
 			"remixicon",
 			"rxdb",
 			"scrollback",
 			"sonner",
+			"tabler",
 			"toastify",
 			"Upsert",
 			"vercel",

src/app/dashboard/audit-logs/page.tsx

@@ -182,6 +182,7 @@ export default function AuditLogsPage() {
       {
         icon: Search,
         id: 'description',
+        isPrimary: true,
         placeholder: 'Search description...',
       },
     ],

src/app/dashboard/layout.tsx

@@ -1,4 +1,5 @@
 import {AppSidebar} from '@/components/app-sidebar';
+import {CommandMenu} from '@/components/command-menu';
 import {HeaderBreadcrumbs} from '@/components/header-breadcrumbs';
 import {Separator} from '@/components/ui/separator';
 import {
@@ -26,7 +27,10 @@ export default function RootLayout({
             <HeaderBreadcrumbs />
           </div>
         </header>
-        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">{children}</div>
+        <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+          <CommandMenu />
+          {children}
+        </div>
       </SidebarInset>
     </SidebarProvider>
   );

src/app/dashboard/package-list/page.tsx

@@ -3,7 +3,14 @@
 import {ColumnDef} from '@tanstack/react-table';
 import {Ellipsis, Logs, RotateCcw, Search, SquareTerminal} from 'lucide-react';
 import Link from 'next/link';
-import {Fragment, useCallback, useEffect, useMemo, useState} from 'react';
+import {
+  Fragment,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {toast} from 'sonner';
 import {useDebounce} from 'use-debounce';
 
@@ -27,6 +34,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import {Input} from '@/components/ui/input';
 import {useSidebar} from '@/components/ui/sidebar';
+import {useGenericShortcutListener} from '@/hooks/use-keyboard-shortcut-listener';
 import {
   BasePackageWithIDList,
   ListPackageResponse,
@@ -64,6 +72,14 @@ export default function PackageListPage() {
     }
     setShowRebuildModal(state);
   }, []);
+  const primarySearchFilterInputRef = useRef<HTMLInputElement>(null);
+  const primarySearchFilterShortcutCallback = useCallback(() => {
+    if (primarySearchFilterInputRef.current) {
+      primarySearchFilterInputRef.current.focus();
+    }
+  }, []);
+
+  useGenericShortcutListener('/', primarySearchFilterShortcutCallback, true);
 
   const columns: ColumnDef<Package>[] = useMemo(
     () => [
@@ -427,6 +443,7 @@ export default function PackageListPage() {
                   id="package-search"
                   onChange={e => setSearchQuery(e.target.value)}
                   placeholder="Search packages..."
+                  ref={primarySearchFilterInputRef}
                   type="text"
                   value={searchQuery}
                 />

src/app/dashboard/rebuild-queue/page.tsx

@@ -361,6 +361,7 @@ export default function RebuildQueuePackageListPage() {
       {
         icon: Search,
         id: 'pkgbase',
+        isPrimary: true,
         placeholder: 'Search packages...',
       },
     ],

src/components/app-sidebar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {Activity, Package, PieChart, Repeat2} from 'lucide-react';
+import {Activity, Logs, Package, PieChart, Repeat2} from 'lucide-react';
 import * as React from 'react';
 import {toast} from 'sonner';
 
@@ -31,7 +31,7 @@ const items = [
     url: '/dashboard/rebuild-queue',
   },
   {
-    icon: Activity,
+    icon: Logs,
     name: 'Audit Logs',
     url: '/dashboard/audit-logs',
   },