feat: add search to hotkeys list

Author: ycnmhd

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "lineage",
 	"name": "Lineage",
-	"version": "0.1.1-dev",
+	"version": "0.2.0-dev",
 	"minAppVersion": "0.15.0",
 	"description": "Gingko-like writing experience.",
 	"author": "ycnmhd",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "lineage",
-    "version": "0.1.1-dev",
+    "version": "0.2.0-dev",
     "description": "",
     "scripts": {
         "dev": "node esbuild.config.mjs",

src/view/components/container/hotkeys/hotkeys.svelte

@@ -1,22 +1,69 @@
 <script lang="ts">
-    import { createCommands } from '../../../actions/keyboard-shortcuts/helpers/create-commands'; // Import the PluginCommand type
+    import {
+        createCommands,
+        hotkeysLang,
+        LineageCommandName
+    } from '../../../actions/keyboard-shortcuts/helpers/create-commands'; // Import the PluginCommand type
     import Hotkey from './components/command.svelte';
     import { getPlugin, getView } from 'src/view/components/container/context';
     import {
         detectConflictingHotkeys
     } from 'src/view/actions/keyboard-shortcuts/helpers/keyboard-events/detect-conflicting-hotkeys';
 
-    const plugin = getPlugin()
-	const commands = createCommands(plugin);
-    const view = getView()
-    const usedHotkeys = detectConflictingHotkeys(plugin, Object.values(commands), view.containerEl)
+    const plugin = getPlugin();
+    const commands = createCommands(plugin);
+    const view = getView();
+    const usedHotkeys = detectConflictingHotkeys(
+        plugin,
+        Object.values(commands),
+        view.containerEl,
+    );
+    let searchTerm = '';
+
+    const entries = Object.keys(commands).map((k) => [
+        hotkeysLang[k as LineageCommandName].toLowerCase(),
+        k,
+    ]);
+    let matches = new Set();
+    $: {
+        matches = new Set();
+        if (searchTerm) {
+            const search_term = searchTerm.toLowerCase();
+            for (const [name, key] of entries) {
+                if (name.includes(search_term)) {
+                    matches.add(key);
+                }
+            }
+        }
+    }
 </script>
 
 <div class="sidebar">
-    <span class="title">Keyboard shortcuts</span>
+    <div class="front">
+        <span class="title">Keyboard shortcuts </span>
+        <div class="search-input-container">
+            <input
+                bind:value={searchTerm}
+                class="search-input"
+                enterkeyhint="search"
+                placeholder={'Filter'}
+                spellcheck="false"
+                type="search"
+            />
+            <div
+                aria-label={'Clear'}
+                class="search-input-clear-button"
+                on:click={() => {
+                    searchTerm = '';
+                }}
+            ></div>
+        </div>
+    </div>
     <div class="hotkeys-list">
         {#each Object.entries(commands) as [key, command]}
-            <Hotkey {key} {command} {usedHotkeys}/>
+            {#if !matches.size || matches.has(key)}
+                <Hotkey {key} {command} {usedHotkeys} />
+            {/if}
         {/each}
     </div>
     <div class="note">
@@ -44,10 +91,19 @@
         padding: var(--size-4-2);
     }
 
+    .front {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        padding: 12px var(--size-4-2);
+    }
     .title {
         font-size: 16px;
         color: var(--color-base-70);
-        padding: 12px var(--size-4-2);
+    }
+    .search-input-container {
+        width: 150px;
     }
     .note {
         font-size: 12px;