add search bar for secrets view list

src/translations/en.js

@@ -148,6 +148,7 @@ module.exports = {
   kv_view_new_btn: "New",
   kv_view_delete_btn: "Delete",
   kv_view_none_here_text: "You seem to have no secrets here, would you like to create one?",
+  kv_view_search_input_text: "Search",
 
   // TOTP View Page
   totp_view_title: "TOTP",

src/ui/pages/Secrets/KeyValue/KeyValueView.tsx

@@ -1,4 +1,4 @@
-import { Component, JSX, render } from "preact";
+import { Component, createRef, JSX, render } from "preact";
 import { DoesNotExistError } from "../../../../types/internalErrors";
 import { Page } from "../../../../types/Page";
 import { SecretTitleElement } from "../SecretTitleElement";
@@ -17,14 +17,36 @@ export type KVKeysListProps = {
 type KVKeysListState = {
   dataLoaded: boolean;
   keys: string[];
+  searchQuery: string;
 };
 
+function SecretsList(secrets: string[], page: Page): JSX.Element[] {
+  return secrets.map((secret) => (
+    <li>
+      <a
+        onClick={async () => {
+          if (secret.endsWith("/")) {
+            page.state.pushSecretPath(secret);
+            await page.router.changePage("KEY_VALUE_VIEW");
+          } else {
+            page.state.secretItem = secret;
+            await page.router.changePage("KEY_VALUE_SECRET");
+          }
+        }}
+      >
+        {secret}
+      </a>
+    </li>
+  ));
+}
+
 export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> {
   constructor() {
     super();
     this.state = {
       dataLoaded: false,
       keys: [],
+      searchQuery: "",
     };
   }
 
@@ -76,6 +98,8 @@ export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> {
     void this.loadData();
   }
 
+  searchBarRef = createRef();
+
   render(): JSX.Element {
     if (!this.state.dataLoaded) {
       return <p>{i18next.t("content_loading")}</p>;
@@ -86,27 +110,31 @@ export class KVKeysList extends Component<KVKeysListProps, KVKeysListState> {
     }
 
     return (
-      <ul class="uk-nav uk-nav-default">
-        {...this.state.keys.map((secret) => (
-          <li>
-            <a
-              onClick={async () => {
-                const page = this.props.page;
+      <>
+        <input
+          ref={this.searchBarRef}
+          class="uk-input uk-form-width-medium uk-margin-bottom"
+          name="path"
+          placeholder={i18next.t("kv_view_search_input_text")}
+          onInput={async () => {
+            this.setState({
+              searchQuery: (this.searchBarRef.current as unknown as HTMLInputElement).value,
+            });
+            console.log("meow");
+          }}
+        />
+        <br />
 
-                if (secret.endsWith("/")) {
-                  page.state.pushSecretPath(secret);
-                  await page.router.changePage("KEY_VALUE_VIEW");
-                } else {
-                  page.state.secretItem = secret;
-                  await page.router.changePage("KEY_VALUE_SECRET");
-                }
-              }}
-            >
-              {secret}
-            </a>
-          </li>
-        ))}
-      </ul>
+        <ul class="uk-nav uk-nav-default">
+          {...((): JSX.Element[] => {
+            let secrets: string[] = this.state.keys;
+            if (this.state.searchQuery.length > 0) {
+              secrets = secrets.filter((secret) => secret.includes(this.state.searchQuery));
+            }
+            return SecretsList(secrets, this.props.page);
+          })()}
+        </ul>
+      </>
     );
   }
 }
@@ -173,4 +201,4 @@ export class KeyValueViewPage extends Page {
   get name(): string {
     return i18next.t("kv_view_title");
   }
-}
+}