remove search button from nav bar

Signed-off-by: Tobias Erbshäußer <tobias@tesoft.dev>

frontend/src/components/nav.njk

@@ -20,7 +20,7 @@
             border-radius: 0.5rem;
             display: grid;
             gap: 1rem;
-            grid-template-columns: auto 1fr auto;
+            grid-template-columns: auto 1fr;
             grid-template-rows: auto;
             padding: var(--small-padding) var(--medium-padding) var(--small-padding) var(--medium-padding);
         }
@@ -70,14 +70,14 @@
             width: 100%;
         }
 
-        dialog.search {
+        dialog.exec {
             position: absolute;
             top: 30%;
             left: 50%;
             transform: translate(-50%, -50%);
         }
 
-        dialog.search > div {
+        dialog.exec > div {
             color: var(--light-gray);
             display: grid;
             gap: var(--medium-padding);
@@ -102,7 +102,7 @@
         }
 
         @media (min-width: 860px) {
-            dialog.search > div {
+            dialog.exec > div {
                 width: 80rem;
             }
         }
@@ -116,15 +116,10 @@
             <tesoft-button class="small-menu">
                 <span></span>
 
-                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+                <svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="2.4rem">
                     <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
                 </svg>
             </tesoft-button>
-            <tesoft-button class="search">
-                <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
-                    <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
-                </svg>
-            </tesoft-button>
         </div>
     </nav>
 
@@ -132,15 +127,15 @@
         <div></div>
     </dialog>
 
-    <dialog class="search" closedby="any">
+    <dialog class="exec" closedby="any">
         <div>
             <tesoft-input>
-                <svg slot="left" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px">
+                <svg slot="left" xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960"
-                    <path d="M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/>
+                     width="2.4rem">
+                    <path d="M504-480 320-664l56-56 240 240-240 240-56-56 184-184Z"/>
                 </svg>
             </tesoft-input>
             <div class="results">
-                <!-- TODO -->
             </div>
         </div>
     </dialog>

frontend/src/components/nav.ts

@@ -1,4 +1,4 @@
-import {Debouncer, sendApiPost, TesoftComponent} from "../scripts/main.ts";
+import {sendApiPost, TesoftComponent} from "../scripts/main.ts";
 import {TesoftButton} from "./button.ts";
 import {TesoftInput} from "./input.ts";
 
@@ -7,11 +7,9 @@ export class TesoftNav extends TesoftComponent {
     private readonly smallMenuButtonSpan: HTMLSpanElement;
     private readonly smallMenuDialog: HTMLDialogElement;
     private readonly smallMenuDiv: HTMLDivElement;
-    private readonly searchButton: TesoftButton;
+    private readonly execDialog: HTMLDialogElement;
-    private readonly searchDialog: HTMLDialogElement;
+    private readonly execInput: TesoftInput;
-    private readonly searchInput: TesoftInput;
+    private readonly execResultsDiv: HTMLDivElement;
-    private readonly searchResultsDiv: HTMLDivElement;
-    private readonly debouncedSearch: Debouncer<[string, boolean]>;
     private readonly commands: Map<string, (text: string) => Promise<void>>;
 
     constructor() {
@@ -27,11 +25,9 @@ export class TesoftNav extends TesoftComponent {
         this.smallMenuButtonSpan = shadowRoot.querySelector<HTMLSpanElement>("tesoft-button.small-menu span")!;
         this.smallMenuDialog = shadowRoot.querySelector<HTMLDialogElement>("dialog.small-menu")!;
         this.smallMenuDiv = shadowRoot.querySelector<HTMLDivElement>("dialog.small-menu > div")!;
-        this.searchButton = shadowRoot.querySelector<TesoftButton>("tesoft-button.search")!;
+        this.execDialog = shadowRoot.querySelector<HTMLDialogElement>("dialog.exec")!;
-        this.searchDialog = shadowRoot.querySelector<HTMLDialogElement>("dialog.search")!;
+        this.execInput = shadowRoot.querySelector<TesoftInput>("dialog.exec tesoft-input")!;
-        this.searchInput = shadowRoot.querySelector<TesoftInput>("dialog.search tesoft-input")!;
+        this.execResultsDiv = shadowRoot.querySelector<HTMLDivElement>("dialog.exec .results")!;
-        this.searchResultsDiv = shadowRoot.querySelector<HTMLDivElement>("dialog.search .results")!;
-        this.debouncedSearch = new Debouncer(this.applySearch.bind(this));
         this.commands = new Map<string, (text: string) => Promise<void>>([
             ["login", this.login.bind(this)],
             ["logout", this.logout.bind(this)],
@@ -45,20 +41,9 @@ export class TesoftNav extends TesoftComponent {
             this.smallMenuDialog.style.width = `${this.smallMenuButton.offsetWidth}px`;
         });
 
-        this.searchButton.addEventListener("click", async () => {
+        this.execInput.addEventListener("keyup", async (event) => {
-            await this.applySearch("", false);
-            this.searchDialog.showModal();
-            this.searchInput.value = "";
-            this.searchInput.focus();
-        });
-
-        this.searchInput.addEventListener("input", () => {
-            this.debouncedSearch.run(this.searchInput.value, false);
-        });
-
-        this.searchInput.addEventListener("keyup", async (event) => {
             if (event.key === "Enter") {
-                await this.applySearch(this.searchInput.value, true);
+                await this.exec(this.execInput.value);
             }
         });
 
@@ -68,6 +53,17 @@ export class TesoftNav extends TesoftComponent {
                 this.smallMenuButtonSpan.textContent = selected.textContent;
             }
         });
+
+        document.addEventListener("keyup", async (event) => {
+            if (event.ctrlKey && event.key === "p") {
+                event.preventDefault();
+
+                await this.exec("");
+                this.execDialog.showModal();
+                this.execInput.value = "";
+                this.execInput.focus();
+            }
+        });
     }
 
     private updateSmallMenu() {
@@ -85,26 +81,10 @@ export class TesoftNav extends TesoftComponent {
         }
     }
 
-    private async applySearch(text: string, confirmed: boolean) {
+    private async exec(text: string) {
-        if (confirmed) {
-            this.debouncedSearch.stop();
-        }
-
-        this.setResultText("");
-
-        if (text.startsWith(">")) {
-            if (confirmed) {
-                await this.applyCommand(text.substring(1).trimStart());
-            } else {
         this.setResultText("Press enter to send command.");
-            }
-        } else {
-            console.log(text);
-            // TODO
-        }
-    }
 
-    private async applyCommand(text: string) {
+        if (text) {
             const spaceIndex = text.indexOf(" ");
             const prefix = spaceIndex === -1 ? text : text.substring(0, spaceIndex);
 
@@ -115,6 +95,7 @@ export class TesoftNav extends TesoftComponent {
             }
             await command(text.substring(prefix.length).trimStart());
         }
+    }
 
     private async login(text: string) {
         const response = await sendApiPost("login", {
@@ -141,12 +122,12 @@ export class TesoftNav extends TesoftComponent {
     }
 
     private setResultText(text: string) {
-        this.searchResultsDiv.innerHTML = "";
+        this.execResultsDiv.innerHTML = "";
 
         if (text) {
             const div = document.createElement("div");
             div.textContent = text;
-            this.searchResultsDiv.appendChild(div);
+            this.execResultsDiv.appendChild(div);
         }
     }
 }