From d93cec2bfd9c15e3f1494240986ed5b8feb7b647 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Wed, 11 Feb 2026 20:19:53 +0200
Subject: [PATCH] feat(options/shortcuts): add no results

---
 .../src/translations/en/translation.json      |  3 ++-
 .../type_widgets/options/shortcuts.css        |  9 +++++++++
 .../type_widgets/options/shortcuts.tsx        | 20 +++++++++++++++----
 3 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index c8242986b5..f434ffeddd 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1591,7 +1591,8 @@
     "description": "Description",
     "reload_app": "Reload app to apply changes",
     "set_all_to_default": "Set all shortcuts to the default",
-    "confirm_reset": "Do you really want to reset all keyboard shortcuts to the default?"
+    "confirm_reset": "Do you really want to reset all keyboard shortcuts to the default?",
+    "no_results": "No shortcuts found matching '{{filter}}'"
   },
   "spellcheck": {
     "title": "Spell Check",
diff --git a/apps/client/src/widgets/type_widgets/options/shortcuts.css b/apps/client/src/widgets/type_widgets/options/shortcuts.css
index 007071c63c..6ff326ddc3 100644
--- a/apps/client/src/widgets/type_widgets/options/shortcuts.css
+++ b/apps/client/src/widgets/type_widgets/options/shortcuts.css
@@ -27,5 +27,14 @@
         th {
             width: 25%;
         }
+
+        .separator {
+            background-color: var(--accented-background-color);
+            font-weight: bold;
+
+            &:first-of-type {
+                padding-top: 1em;
+            }
+        }
     }
 }
diff --git a/apps/client/src/widgets/type_widgets/options/shortcuts.tsx b/apps/client/src/widgets/type_widgets/options/shortcuts.tsx
index 204eaa6ecf..953efcfebb 100644
--- a/apps/client/src/widgets/type_widgets/options/shortcuts.tsx
+++ b/apps/client/src/widgets/type_widgets/options/shortcuts.tsx
@@ -12,6 +12,7 @@ import options from "../../../services/options";
 import dialog from "../../../services/dialog";
 import { useTriliumEvent } from "../../react/hooks";
 import "./shortcuts.css";
+import NoItems from "../../react/NoItems";
 
 export default function ShortcutSettings() {
     const [ keyboardShortcuts, setKeyboardShortcuts ] = useState<KeyboardShortcut[]>([]);
@@ -89,7 +90,7 @@ export default function ShortcutSettings() {
                 />
             </header>
 
-            <KeyboardShortcutTable filteredKeyboardActions={filteredKeyboardShortcuts} />
+            <KeyboardShortcutTable filteredKeyboardActions={filteredKeyboardShortcuts} filter={filter} />
 
             <footer>
                 <Button
@@ -119,7 +120,7 @@ function filterKeyboardAction(action: KeyboardShortcut, filter: string) {
         (action.description && action.description.toLowerCase().includes(filter));
 }
 
-function KeyboardShortcutTable({ filteredKeyboardActions }: { filteredKeyboardActions: KeyboardShortcut[] }) {
+function KeyboardShortcutTable({ filteredKeyboardActions, filter }: { filteredKeyboardActions: KeyboardShortcut[], filter: string | undefined }) {
     return (
         <table class="keyboard-shortcut-table" cellPadding="10">
             <thead>
@@ -131,7 +132,8 @@ function KeyboardShortcutTable({ filteredKeyboardActions }: { filteredKeyboardAc
                 </tr>
             </thead>
             <tbody>
-                {filteredKeyboardActions.map(action => (
+                {filteredKeyboardActions.length > 0
+                 ? filteredKeyboardActions.map(action => (
                     <tr>
                         {"separator" in action ?
                             <td class="separator" colspan={4} style={{
@@ -151,7 +153,17 @@ function KeyboardShortcutTable({ filteredKeyboardActions }: { filteredKeyboardAc
                             </>
                         )}
                     </tr>
-                ))}
+                ))
+                : (
+                    <tr>
+                        <td colspan={4} class="text-center">
+                            <NoItems
+                                icon="bx bx-filter-alt"
+                                text={t("shortcuts.no_results", { filter })}
+                            />
+                        </td>
+                    </tr>
+                )}
             </tbody>
         </table>
     );