From 854fd02fad7749b1b04fa130cd473a7ee5bdd399 Mon Sep 17 00:00:00 2001
From: Rune Olsen <rune@rune.pm>
Date: Wed, 22 Jul 2026 15:21:30 +0200
Subject: [PATCH] Add live search to the Help Book's table of contents

A search box above the Contents list filters TOC entries by each
linked section's full text content (not just the link title), so
e.g. searching "european" surfaces "Slash Commands" via its command
history date-format note. Pure vanilla JS/CSS, no dependencies --
the page is a static file opened directly in the default browser.

Tested interactively in Safari Technology Preview: filtering,
no-results state, reset, and click-through navigation all verified
working, in both the matched and empty-query cases.
---
 .../Contents/Resources/en.lproj/index.html    | 38 ++++++++++++++++++-
 .../Contents/Resources/en.lproj/styles.css    | 26 +++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/oAI/Resources/oAI.help/Contents/Resources/en.lproj/index.html b/oAI/Resources/oAI.help/Contents/Resources/en.lproj/index.html
index 341ce65..1f9bca2 100644
--- a/oAI/Resources/oAI.help/Contents/Resources/en.lproj/index.html
+++ b/oAI/Resources/oAI.help/Contents/Resources/en.lproj/index.html
@@ -20,7 +20,11 @@
 
         <nav class="toc">
             <h2>Contents</h2>
-            <ul>
+            <div class="toc-search">
+                <input type="search" id="tocSearch" placeholder="Search help topics…" aria-label="Search help topics">
+            </div>
+            <p id="tocNoResults" class="toc-no-results" hidden>No topics match your search.</p>
+            <ul id="tocList">
                 <li><a href="#getting-started">Getting Started</a></li>
                 <li><a href="#providers">AI Providers &amp; API Keys</a></li>
                 <li><a href="#models">Selecting Models</a></li>
@@ -1812,5 +1816,37 @@ Whenever the user asks you to translate something, translate it to Norwegian Bok
             <p>© 2026 oAI - Rune Olsen. For support or feedback, visit <a href="https://gitlab.pm/rune/oai-swift">gitlab.pm</a> or <a href="mailto:support@fubar.pm?subject=oAI Support&body=What can I help you with?">Contact Us</a>.</p>
         </footer>
     </div>
+
+    <script>
+        (function () {
+            var searchInput = document.getElementById('tocSearch');
+            var tocList = document.getElementById('tocList');
+            var noResults = document.getElementById('tocNoResults');
+            if (!searchInput || !tocList) return;
+
+            var entries = Array.prototype.map.call(tocList.querySelectorAll('li'), function (li) {
+                var link = li.querySelector('a');
+                var id = link ? link.getAttribute('href').slice(1) : null;
+                var section = id ? document.getElementById(id) : null;
+                return {
+                    li: li,
+                    text: (section ? section.textContent : li.textContent).toLowerCase()
+                };
+            });
+
+            searchInput.addEventListener('input', function () {
+                var query = searchInput.value.trim().toLowerCase();
+                var visibleCount = 0;
+
+                entries.forEach(function (entry) {
+                    var matches = query === '' || entry.text.indexOf(query) !== -1;
+                    entry.li.hidden = !matches;
+                    if (matches) visibleCount++;
+                });
+
+                noResults.hidden = visibleCount > 0;
+            });
+        })();
+    </script>
 </body>
 </html>
diff --git a/oAI/Resources/oAI.help/Contents/Resources/en.lproj/styles.css b/oAI/Resources/oAI.help/Contents/Resources/en.lproj/styles.css
index f7e372a..7518e9c 100644
--- a/oAI/Resources/oAI.help/Contents/Resources/en.lproj/styles.css
+++ b/oAI/Resources/oAI.help/Contents/Resources/en.lproj/styles.css
@@ -101,6 +101,32 @@ nav.toc h2 {
     margin-bottom: 16px;
 }
 
+.toc-search {
+    margin-bottom: 16px;
+}
+
+.toc-search input[type="search"] {
+    width: 100%;
+    font-family: inherit;
+    font-size: 15px;
+    padding: 10px 14px;
+    color: var(--text-primary);
+    background: var(--background);
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    outline: none;
+}
+
+.toc-search input[type="search"]:focus {
+    border-color: var(--primary-color);
+}
+
+.toc-no-results {
+    font-size: 14px;
+    color: var(--text-secondary);
+    margin-bottom: 0;
+}
+
 nav.toc ul {
     list-style: none;
 }