feat(options/shortcuts): add no results

This commit is contained in:
Elian Doran 2026-02-11 20:19:53 +02:00
parent 9eb87a39cd
commit d93cec2bfd
No known key found for this signature in database
3 changed files with 27 additions and 5 deletions

View File

@ -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",

View File

@ -27,5 +27,14 @@
th {
width: 25%;
}
.separator {
background-color: var(--accented-background-color);
font-weight: bold;
&:first-of-type {
padding-top: 1em;
}
}
}
}

View File

@ -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>
);