1 files changed, 49 insertions, 11 deletions

diff --git a/frontend/ui.ts b/frontend/ui.ts
index 4096204..6a254c7 100644
--- a/frontend/ui.ts
+++ b/frontend/ui.ts
@@ -1,15 +1,16 @@
 import { bangs, process_query } from "./query.ts";
 
 export function add_page_content(engine?: string) {
-    document.getElementById("content")?.remove()
+    //@ts-ignore HTMLCollectionOf is an iterator
+    for (const e of [...document.getElementsByTagName("section")]) e.remove()
     if (engine) {
-        document.body.append(create_search_bar(engine), create_search_info())
+        document.body.append(section_search(engine), section_info_search())
     } else {
-        document.body.append(create_start_page())
+        document.body.append(section_info_start(), section_engine_select())
     }
 }
 
-function create_search_bar(engine: string) {
+function section_search(engine: string) {
     const section = document.createElement("section")
     section.classList.add("search")
 
@@ -27,7 +28,7 @@ function create_search_bar(engine: string) {
 
     const heading = document.createElement("h1")
     heading.textContent = engine
-    bangs.then(bangs => heading.textContent = bangs[engine].name)
+    bangs.then(bangs => heading.textContent = bangs[engine]?.name ?? engine)
 
     const input = document.createElement("input")
     input.type = "input"
@@ -49,7 +50,47 @@ function create_search_bar(engine: string) {
     return section
 }
 
-function create_search_info() {
+function section_engine_select() {
+    const section = document.createElement("section")
+    section.classList.add("engine-select")
+
+    const select = async (e: string) => {
+        if (!(await bangs)[e]) return status("error", `Engine ${JSON.stringify(e)} does not exist.`)
+        window.location.hash = `#${e}`
+    }
+
+    const heading = document.createElement("h2")
+    heading.textContent = "Select a search engine"
+
+    const listing = document.createElement("ul")
+    bangs.then(bangs => {
+        for (const key in bangs) if (bangs[key]!.pinned) {
+            const li = document.createElement("li")
+            li.classList.add("pinned")
+            li.textContent = bangs[key]!.name ?? key
+            li.onclick = () => select(key)
+            listing.prepend(li)
+        }
+    })
+    const other = document.createElement("li")
+    const label = document.createElement("label")
+    label.textContent = "Select other engine by bang:"
+    const input = document.createElement("input")
+    input.type = "input"
+    input.addEventListener("keydown", ev => {
+        if (ev.code == "Enter") select(input.value)
+    })
+    const submit = document.createElement("button")
+    submit.textContent = "Select"
+    submit.addEventListener("click", () => select(input.value))
+    other.append(label, input, submit)
+    listing.append(other)
+
+    section.append(heading, listing)
+    return section
+}
+
+function section_info_search() {
     const section = document.createElement("section")
     section.classList.add("info")
 
@@ -63,10 +104,9 @@ function create_search_info() {
     return section
 }
 
-
-function create_start_page() {
+function section_info_start() {
     const section = document.createElement("section")
-    section.id = "content"
+    section.classList.add("info")
 
     const heading = document.createElement("h1")
     heading.textContent = "Projectname"
@@ -78,8 +118,6 @@ function create_start_page() {
     return section
 }
 
-
-
 let status_el: HTMLElement
 export function status(level: "error" | "info" | "success", text: string) {
     if (!status_el) {