feat(settings): add shortcut search bar in Shortcuts section (#419)

Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>

Author: bilalbayram

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "codex-monitor",
   "private": true,
-  "version": "0.7.51",
+  "version": "0.7.52",
   "type": "module",
   "scripts": {
     "sync:material-icons": "node scripts/sync-material-icons.mjs",

package.json

@@ -1,6 +1,6 @@
 [package]
 name = "codex-monitor"
-version = "0.7.51"
+version = "0.7.52"
 description = "A Tauri App"
 authors = ["you"]
 edition = "2021"

src-tauri/Cargo.lock

@@ -15,9 +15,9 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>0.7.51</string>
+	<string>0.7.52</string>
 	<key>CFBundleVersion</key>
-	<string>0.7.51</string>
+	<string>0.7.52</string>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>UILaunchStoryboardName</key>

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Codex Monitor",
-  "version": "0.7.51",
+  "version": "0.7.52",
   "identifier": "com.dimillian.codexmonitor",
   "build": {
     "beforeDevCommand": "npm run dev",

src-tauri/gen/apple/codex-monitor_iOS/Info.plist

@@ -1820,4 +1820,82 @@ describe("SettingsView Shortcuts", () => {
       expect(onClose).toHaveBeenCalledTimes(1);
     });
   });
+
+  it("filters shortcuts by search query", async () => {
+    render(
+      <SettingsView
+        workspaceGroups={[]}
+        groupedWorkspaces={[]}
+        ungroupedLabel="Ungrouped"
+        onClose={vi.fn()}
+        onMoveWorkspace={vi.fn()}
+        onDeleteWorkspace={vi.fn()}
+        onCreateWorkspaceGroup={vi.fn().mockResolvedValue(null)}
+        onRenameWorkspaceGroup={vi.fn().mockResolvedValue(null)}
+        onMoveWorkspaceGroup={vi.fn().mockResolvedValue(null)}
+        onDeleteWorkspaceGroup={vi.fn().mockResolvedValue(null)}
+        onAssignWorkspaceGroup={vi.fn().mockResolvedValue(null)}
+        reduceTransparency={false}
+        onToggleTransparency={vi.fn()}
+        appSettings={baseSettings}
+        openAppIconById={{}}
+        onUpdateAppSettings={vi.fn().mockResolvedValue(undefined)}
+        onRunDoctor={vi.fn().mockResolvedValue(createDoctorResult())}
+        onUpdateWorkspaceCodexBin={vi.fn().mockResolvedValue(undefined)}
+        onUpdateWorkspaceSettings={vi.fn().mockResolvedValue(undefined)}
+        scaleShortcutTitle="Scale shortcut"
+        scaleShortcutText="Use Command +/-"
+        onTestNotificationSound={vi.fn()}
+        onTestSystemNotification={vi.fn()}
+        dictationModelStatus={null}
+        onDownloadDictationModel={vi.fn()}
+        onCancelDictationDownload={vi.fn()}
+        onRemoveDictationModel={vi.fn()}
+        initialSection="shortcuts"
+      />,
+    );
+
+    const searchInput = screen.getByLabelText("Search shortcuts");
+    expect(screen.getByText("Toggle terminal panel")).toBeTruthy();
+    expect(screen.getByText("Cycle model")).toBeTruthy();
+
+    await act(async () => {
+      fireEvent.change(searchInput, { target: { value: "navigation" } });
+    });
+    await waitFor(() => {
+      expect(screen.getByText("Next workspace")).toBeTruthy();
+      expect(screen.queryByText("Toggle terminal panel")).toBeNull();
+    });
+
+    await act(async () => {
+      fireEvent.change(searchInput, { target: { value: "sidebars" } });
+    });
+    await waitFor(() => {
+      expect(screen.getByText("Toggle projects sidebar")).toBeTruthy();
+      expect(screen.queryByText("Next workspace")).toBeNull();
+    });
+
+    await act(async () => {
+      fireEvent.change(searchInput, { target: { value: "new shortcut while focused" } });
+    });
+    await waitFor(() => {
+      expect(screen.getByText("Cycle model")).toBeTruthy();
+      expect(screen.queryByText("Toggle terminal panel")).toBeNull();
+    });
+
+    await act(async () => {
+      fireEvent.change(searchInput, { target: { value: "no-such-shortcut" } });
+    });
+    await waitFor(() => {
+      expect(screen.getByText('No shortcuts match "no-such-shortcut".')).toBeTruthy();
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: "Clear" }));
+    });
+    await waitFor(() => {
+      expect(screen.getByText("Toggle terminal panel")).toBeTruthy();
+      expect(screen.queryByText('No shortcuts match "no-such-shortcut".')).toBeNull();
+    });
+  });
 });

src-tauri/tauri.conf.json

@@ -1,4 +1,4 @@
-import type { KeyboardEvent } from "react";
+import { useMemo, useState, type KeyboardEvent } from "react";
 import { formatShortcut, getDefaultInterruptShortcut } from "@utils/shortcuts";
 import { isMacPlatform } from "@utils/platformPaths";
 import type {
@@ -73,6 +73,7 @@ export function SettingsShortcutsSection({
   onClearShortcut,
 }: SettingsShortcutsSectionProps) {
   const isMac = isMacPlatform();
+  const [searchQuery, setSearchQuery] = useState("");
 
   const groups: ShortcutGroup[] = [
     {
@@ -209,13 +210,53 @@ export function SettingsShortcutsSection({
     },
   ];
 
+  const normalizedSearchQuery = searchQuery.trim().toLowerCase();
+  const filteredGroups = useMemo(() => {
+    if (!normalizedSearchQuery) {
+      return groups;
+    }
+    return groups
+      .map((group) => ({
+        ...group,
+        items: group.items.filter((item) => {
+          const searchValue = `${group.title} ${group.subtitle} ${item.label} ${item.help}`.toLowerCase();
+          return searchValue.includes(normalizedSearchQuery);
+        }),
+      }))
+      .filter((group) => group.items.length > 0);
+  }, [groups, normalizedSearchQuery]);
+
   return (
     <section className="settings-section">
       <div className="settings-section-title">Shortcuts</div>
       <div className="settings-section-subtitle">
         Customize keyboard shortcuts for file actions, composer, panels, and navigation.
       </div>
-      {groups.map((group, index) => (
+      <div className="settings-field settings-shortcuts-search">
+        <label className="settings-field-label" htmlFor="settings-shortcuts-search">
+          Search shortcuts
+        </label>
+        <div className="settings-field-row">
+          <input
+            id="settings-shortcuts-search"
+            className="settings-input"
+            placeholder="Search shortcuts"
+            value={searchQuery}
+            onChange={(event) => setSearchQuery(event.target.value)}
+          />
+          {searchQuery && (
+            <button
+              type="button"
+              className="ghost settings-button-compact"
+              onClick={() => setSearchQuery("")}
+            >
+              Clear
+            </button>
+          )}
+        </div>
+        <div className="settings-help">Filter by section name, action, or default shortcut.</div>
+      </div>
+      {filteredGroups.map((group, index) => (
         <div key={group.title}>
           {index > 0 && <div className="settings-divider" />}
           <div className="settings-subsection-title">{group.title}</div>
@@ -231,6 +272,11 @@ export function SettingsShortcutsSection({
           ))}
         </div>
       ))}
+      {filteredGroups.length === 0 && (
+        <div className="settings-empty">
+          No shortcuts match {normalizedSearchQuery ? `"${searchQuery.trim()}"` : "your search"}.
+        </div>
+      )}
     </section>
   );
 }

src/features/settings/components/SettingsView.test.tsx

@@ -177,6 +177,10 @@
   margin-right: 4px;
 }
 
+.settings-shortcuts-search {
+  margin-bottom: 20px;
+}
+
 .settings-command-preview {
   margin: 0;
   padding: 10px 12px;