web/user: add auto-focus search for applications

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/package-lock.json

@@ -45,6 +45,7 @@
                 "eslint-plugin-custom-elements": "0.0.2",
                 "eslint-plugin-lit": "^1.5.1",
                 "flowchart.js": "^1.15.0",
+                "fuse.js": "^6.4.6",
                 "lit-element": "^2.5.1",
                 "lit-html": "^1.4.1",
                 "moment": "^2.29.1",
@@ -4625,6 +4626,14 @@
             "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
             "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
         },
+        "node_modules/fuse.js": {
+            "version": "6.4.6",
+            "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.4.6.tgz",
+            "integrity": "sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw==",
+            "engines": {
+                "node": ">=10"
+            }
+        },
         "node_modules/fuzzaldrin": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/fuzzaldrin/-/fuzzaldrin-2.1.0.tgz",
@@ -11816,6 +11825,11 @@
             "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
             "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc="
         },
+        "fuse.js": {
+            "version": "6.4.6",
+            "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-6.4.6.tgz",
+            "integrity": "sha512-/gYxR/0VpXmWSfZOIPS3rWwU8SHgsRTwWuXhyb2O6s7aRuVtHtxCkR33bNYu3wyLyNx/Wpv0vU7FZy8Vj53VNw=="
+        },
         "fuzzaldrin": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/fuzzaldrin/-/fuzzaldrin-2.1.0.tgz",

web/package.json

@@ -77,6 +77,7 @@
         "eslint-plugin-custom-elements": "0.0.2",
         "eslint-plugin-lit": "^1.5.1",
         "flowchart.js": "^1.15.0",
+        "fuse.js": "^6.4.6",
         "lit-element": "^2.5.1",
         "lit-html": "^1.4.1",
         "moment": "^2.29.1",

web/src/locales/en.po

@@ -3594,6 +3594,7 @@ msgid "Score"
 msgstr "Score"
 
 #: src/elements/table/TableSearch.ts
+#: src/user/LibraryPage.ts
 msgid "Search..."
 msgstr "Search..."
 

web/src/locales/pseudo-LOCALE.po

@@ -3586,6 +3586,7 @@ msgid "Score"
 msgstr ""
 
 #: src/elements/table/TableSearch.ts
+#: src/user/LibraryPage.ts
 msgid "Search..."
 msgstr ""
 

web/src/user/LibraryPage.ts

@@ -8,6 +8,7 @@ import {
     property,
     TemplateResult,
 } from "lit-element";
+import Fuse from "fuse.js";
 import { Application, CoreApi } from "@goauthentik/api";
 import { AKResponse } from "../api/Client";
 import { DEFAULT_CONFIG } from "../api/Config";
@@ -25,10 +26,18 @@ export class LibraryPage extends LitElement {
     @property({ attribute: false })
     apps?: AKResponse<Application>;
 
+    @property({ attribute: false })
+    selectedApp?: Application;
+
+    fuse?: Fuse<Application>;
+
     constructor() {
         super();
         new CoreApi(DEFAULT_CONFIG).coreApplicationsList({}).then((apps) => {
             this.apps = apps;
+            this.fuse = new Fuse(apps.results, {
+                keys: ["slug", "name"],
+            });
         });
     }
 
@@ -43,6 +52,23 @@ export class LibraryPage extends LitElement {
                 height: 100%;
                 padding: 3% 5%;
             }
+            .header {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+            }
+            .header input {
+                width: 30ch;
+                box-sizing: border-box;
+                border: 0;
+                border-bottom: 1px solid;
+                border-bottom-color: #fd4b2d;
+                background-color: transparent;
+                font-size: 1.5rem;
+            }
+            .header input:focus {
+                outline: 0;
+            }
         `);
     }
 
@@ -62,14 +88,40 @@ export class LibraryPage extends LitElement {
         return html`<div class="pf-l-gallery pf-m-gutter">
             ${this.apps?.results
                 .filter((app) => app.launchUrl)
-                .map((app) => html`<ak-library-app .application=${app}></ak-library-app>`)}
+                .map(
+                    (app) =>
+                        html`<ak-library-app
+                            .application=${app}
+                            ?selected=${app.slug === this.selectedApp?.slug}
+                        ></ak-library-app>`,
+                )}
         </div>`;
     }
 
     render(): TemplateResult {
         return html`<main role="main" class="pf-c-page__main" tabindex="-1" id="main-content">
-            <div class="pf-c-content">
+            <div class="pf-c-content header">
                 <h1>${t`My applications`}</h1>
+                <input
+                    @input=${(ev: InputEvent) => {
+                        const query = (ev.target as HTMLInputElement).value;
+                        if (!this.fuse) return;
+                        const apps = this.fuse.search(query);
+                        if (apps.length < 1) return;
+                        this.selectedApp = apps[0].item;
+                    }}
+                    @keydown=${(ev: KeyboardEvent) => {
+                        if (ev.key === "Enter" && this.selectedApp?.launchUrl) {
+                            window.location.assign(this.selectedApp.launchUrl);
+                        } else if (ev.key === "Escape") {
+                            (ev.target as HTMLInputElement).value = "";
+                            this.selectedApp = undefined;
+                        }
+                    }}
+                    type="text"
+                    autofocus
+                    placeholder=${t`Search...`}
+                />
             </div>
             <section class="pf-c-page__main-section">
                 ${loading(