From 331a0c60ced888e82041500cbc52e759b223ebc8 Mon Sep 17 00:00:00 2001
From: Moheeb Zara <hackbuildvideo@gmail.com>
Date: Sun, 17 May 2026 02:02:31 -0700
Subject: [PATCH] feat(ux/a11y): visible, labeled command-palette trigger in
 the sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A ⌘K palette with no visible entry point is itself a discoverability +
a11y gap (keyboard/SR users can't find it). Added a labeled 'Jump to…'
button (aria-label spells out the shortcut) that dispatches a
'commandpalette:open' event the palette now also listens for. Verified
the other top a11y items are already satisfied here (sonner Toaster
provides the aria-live region; sidebar icon buttons are aria-labeled;
skip-link + drawer focus mgmt already present).
---
 components/app-sidebar.tsx     | 12 ++++++++++++
 components/command-palette.tsx |  7 ++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/components/app-sidebar.tsx b/components/app-sidebar.tsx
index d544751..8a2c96e 100644
--- a/components/app-sidebar.tsx
+++ b/components/app-sidebar.tsx
@@ -166,6 +166,18 @@ export function AppSidebar({ member, roleName, taskBadge = 0, commsBadge = 0, pa
         <p className="text-[var(--sidebar-foreground)]/60 text-xs mt-1.5 font-mono truncate">{space?.name || 'My Space'}</p>
       </div>
 
+      <div className="px-3 pt-3">
+        <button
+          type="button"
+          onClick={() => window.dispatchEvent(new Event('commandpalette:open'))}
+          aria-label="Open command palette (Control or Command + K)"
+          className="w-full flex items-center justify-between gap-2 rounded-md border border-[var(--sidebar-border)] bg-[var(--sidebar-accent)]/40 px-3 py-2 text-xs text-[var(--sidebar-foreground)]/60 hover:text-[var(--sidebar-foreground)] hover:bg-[var(--sidebar-accent)] transition"
+        >
+          <span>Jump to…</span>
+          <kbd className="font-mono text-[10px] border border-[var(--sidebar-border)] rounded px-1.5 py-0.5">⌘K</kbd>
+        </button>
+      </div>
+
       {/* Nav */}
       <nav aria-label="Primary" className="flex-1 py-4 overflow-y-auto">
         <NavSection id="workspace" title="Workspace">
diff --git a/components/command-palette.tsx b/components/command-palette.tsx
index 4bcdad3..f37ab55 100644
--- a/components/command-palette.tsx
+++ b/components/command-palette.tsx
@@ -96,8 +96,13 @@ export function CommandPalette({
         setOpen(o => !o)
       }
     }
+    const onOpen = () => setOpen(true)
     document.addEventListener('keydown', onKey)
-    return () => document.removeEventListener('keydown', onKey)
+    window.addEventListener('commandpalette:open', onOpen)
+    return () => {
+      document.removeEventListener('keydown', onKey)
+      window.removeEventListener('commandpalette:open', onOpen)
+    }
   }, [])
 
   const allowed = useCallback(