From 7fa23b042aeacc8dfab687cc15a476ac3dddf36b Mon Sep 17 00:00:00 2001
From: osmarks <me@osmarks.net>
Date: Mon, 31 Mar 2025 11:04:14 +0100
Subject: [PATCH] improve search overlay

---
 src/page.js    | 24 +++++++++++++++++++-----
 src/style.sass |  5 ++++-
 2 files changed, 23 insertions(+), 6 deletions(-)

diff --git a/src/page.js b/src/page.js
index f9ba8a2..4d8b449 100644
--- a/src/page.js
+++ b/src/page.js
@@ -661,10 +661,10 @@ const closeOverlay = () => {
 }
 
 // this is actually now labelled properly as the search button
-const loginButton = document.querySelector("nav a:last-of-type")
-loginButton.href = "#"
-loginButton.innerText = "Search"
-loginButton.onclick = async ev => {
+const searchButton = document.querySelector("nav a:last-of-type")
+searchButton.href = "#"
+searchButton.innerText = "Search"
+searchButton.onclick = async ev => {
     ev.preventDefault()
     const query = (await import("/assets/js/fts_client.js")).default
     const overlay = document.createElement("div")
@@ -675,13 +675,18 @@ loginButton.onclick = async ev => {
     input.type = "text"
     input.placeholder = "Search"
     let resultsEl
+    let topResult
     input.oninput = () => {
         if (resultsEl) {
             resultsEl.remove()
         }
         resultsEl = document.createElement("div")
         resultsEl.classList.add("search-results")
-        for (const result of query(input.value)) {
+        const results = query(input.value)
+        if (results.length > 0) {
+            topResult = results[0].url
+        }
+        for (const result of results) {
             const item = e("search-result", resultsEl)
             const titleLine = nameMappings[result.sourceType] + " / " + (result.title ?? result.timestamp)
             const link = e("search-result-link", item, titleLine, "a")
@@ -702,6 +707,12 @@ loginButton.onclick = async ev => {
             if (input.value === "") {
                 // quit search mode
                 closeOverlay()
+                return
+            }
+        }
+        if (ev.key === "Enter") {
+            if (topResult) {
+                window.location.href = topResult
             }
         }
     }
@@ -713,6 +724,9 @@ window.addEventListener("keydown", ev => {
     if (ev.key === "Escape") {
         closeOverlay()
     }
+    if (ev.key === "/" && ev.ctrlKey) {
+        searchButton.click()
+    }
 })
 
 const citeButton = document.getElementById("citebutton")
diff --git a/src/style.sass b/src/style.sass
index 8c5155a..d8661fb 100644
--- a/src/style.sass
+++ b/src/style.sass
@@ -10,6 +10,7 @@ $navbar-width: 20rem
     --autocol-lightness: 65%
     --autocol-saturation: 85%
     --autocol-border: 0%
+    --block-lightness: 85%
 
 @font-face
     font-family: 'osmarks-primary'
@@ -249,7 +250,7 @@ blockquote
         overflow-x: scroll
 
     .footnote-item.hl1, .footnote-item.hl2, .footnote-item.hl3
-        background: hsl(0, 0%, var(--autocol-lightness))
+        background: hsl(0, 0%, var(--block-lightness))
         padding: 0.5em
         box-sizing: border-box
         list-style-type: none
@@ -318,6 +319,7 @@ $hl-border: 3px
         --autocol-lightness: 10%
         --autocol-saturation: 50%
         --autocol-border: 35%
+        --block-lightness: 10%
 
     nav .logocont
         color: white
@@ -401,6 +403,7 @@ table
     bottom: 0
     right: 0
     background: rgba(0, 0, 0, 0.9)
+    backdrop-filter: blur(10px)
     padding: 2em
     color: white
     z-index: 1000