feat(ux): add clear button to filter input in shortcuts dialog

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

src/components/studio/shortcuts-dialog.test.tsx

@@ -27,7 +27,7 @@ vi.mock('@/lib/studio/use-reduced-motion', () => ({
 }))
 
 vi.mock('@/components/studio/ui/shared-primitives', () => ({
-  Overlay: ({ children, open, onClose, 'aria-label': ariaLabel }: {
+  Overlay: ({ children, open, 'aria-label': ariaLabel }: {
     children: ReactNode
     open: boolean
     onClose: () => void
@@ -38,7 +38,7 @@ vi.mock('@/components/studio/ui/shared-primitives', () => ({
     className?: string
   }) =>
     open ? (
-      <div data-testid="overlay" role="dialog" aria-label={ariaLabel} onClick={onClose}>
+      <div data-testid="overlay" role="dialog" aria-label={ariaLabel}>
         {children}
       </div>
     ) : null,
@@ -62,7 +62,43 @@ vi.mock('@/lib/studio/store', () => ({
   ),
 }))
 
-import { ShortcutsTrigger } from './shortcuts-dialog'
+import { ShortcutsDialog, ShortcutsTrigger } from './shortcuts-dialog'
+
+describe('ShortcutsDialog', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  it('renders filter search clear button when text is entered and clears input on click', () => {
+    render(
+      <>
+        <ShortcutsTrigger />
+        <ShortcutsDialog />
+      </>,
+    )
+
+    // Open the dialog
+    fireEvent.click(screen.getByLabelText('Show keyboard shortcuts'))
+
+    const filterInput = screen.getByLabelText('Filter shortcuts') as HTMLInputElement
+    expect(filterInput.value).toBe('')
+    expect(screen.queryByLabelText('Clear filter search')).toBeNull()
+
+    // Type filter text
+    fireEvent.change(filterInput, { target: { value: 'Bold' } })
+    expect(filterInput.value).toBe('Bold')
+
+    // Clear button should now be visible
+    const clearBtn = screen.getByLabelText('Clear filter search')
+    expect(clearBtn).toBeDefined()
+    expect(clearBtn.getAttribute('title')).toBe('Clear filter search')
+
+    // Click clear button (prevent default / click handlers on buttons contained inside mocked Overlay)
+    fireEvent.click(clearBtn)
+    expect(filterInput.value).toBe('')
+    expect(screen.queryByLabelText('Clear filter search')).toBeNull()
+  })
+})
 
 describe('ShortcutsTrigger', () => {
   beforeEach(() => {

src/components/studio/shortcuts-dialog.tsx

@@ -274,9 +274,26 @@ export function ShortcutsDialog() {
               value={filter}
               onChange={(e) => { setFilter(e.target.value); }}
               placeholder="Filter shortcuts..."
-              className="w-full rounded-md border border-border bg-background py-1.5 pl-8 pr-3 text-body-sm text-ink placeholder:text-ink-faint focus:border-saffron focus:outline-none focus:ring-1 focus:ring-saffron/30"
+              className={cn(
+                'w-full rounded-md border border-border bg-background py-1.5 pl-8 text-body-sm text-ink placeholder:text-ink-faint focus:border-saffron focus:outline-none focus:ring-1 focus:ring-saffron/30',
+                filter ? 'pr-8' : 'pr-3',
+              )}
               aria-label="Filter shortcuts"
             />
+            {filter && (
+              <button
+                type="button"
+                onClick={() => {
+                  setFilter('')
+                  filterInputRef.current?.focus()
+                }}
+                aria-label="Clear filter search"
+                title="Clear filter search"
+                className="absolute right-2.5 top-1/2 -translate-y-1/2 rounded p-0.5 text-ink-mute transition-colors hover:bg-muted hover:text-ink focus-ring"
+              >
+                <X className="h-3.5 w-3.5" />
+              </button>
+            )}
           </div>
         </div>