From 8e19776577cc33b21ec2659fcaa7baf24bb069e7 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sun, 17 Aug 2025 03:05:54 +0000
Subject: [PATCH] Update web/templates/search.html

---
 web/templates/search.html | 191 ++++++++++++--------------------------
 1 file changed, 61 insertions(+), 130 deletions(-)

diff --git a/web/templates/search.html b/web/templates/search.html
index f6e1672..98d2dbd 100644
--- a/web/templates/search.html
+++ b/web/templates/search.html
@@ -10,7 +10,7 @@
       <input type="text" name="q" value="{{ q }}" placeholder="Type to search…" class="search-input" autofocus>
       <button class="btn btn-primary">Search</button>
 
-      <!-- Help button stays inline with Search -->
+      <!-- Help button -->
       <button
         class="btn btn-secondary help-toggle"
         type="button"
@@ -20,7 +20,7 @@
       </button>
     </div>
 
-    <!-- Help panel sits below the row -->
+    <!-- Help panel -->
     <div id="search-help-panel" class="help-panel">
       <h3>How to Use Search Operators</h3>
       <ul>
@@ -28,17 +28,15 @@
             <em>Example:</em> <code>faith</code></li>
         <li><strong>Phrase search</strong> — put quotes around a phrase to match it exactly.<br>
             <em>Example:</em> <code>"Jehovah is my shepherd"</code></li>
-        <li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br>
+        <li><strong>OR search</strong> — use <code>OR</code> (uppercase).<br>
             <em>Example:</em> <code>love OR kindness</code></li>
-        <li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br>
+        <li><strong>Exclude terms</strong> — use <code>-</code> to remove.<br>
             <em>Example:</em> <code>hope -future</code></li>
-        <li><strong>Wildcard search</strong> — use <code>*</code> to replace part of a word.<br>
-            <em>Example:</em> <code>lov*</code> finds <code>love</code>, <code>loved</code>, <code>loving</code></li>
-        <li><strong>Scripture search</strong> — type a Bible book or abbreviation to find entries that reference it.<br>
+        <li><strong>Wildcard search</strong> — use <code>*</code>.<br>
+            <em>Example:</em> <code>lov*</code></li>
+        <li><strong>Scripture search</strong> — type a Bible book.<br>
             <em>Example:</em> <code>John 3:16</code></li>
       </ul>
-      <p><strong>Tip:</strong> Combine operators:<br>
-         <em>Example:</em> <code>"good shepherd" OR "faithful servant" -parable</code></p>
     </div>
 
     <div class="filter-row">
@@ -58,29 +56,26 @@
     </div>
   {% endif %}
 
-  <!-- ===== Collapsible History card (kept same IDs) ===== -->
+  <!-- ===== History Dropdown ===== -->
   <div class="card" style="padding:0; margin:16px 0 12px;">
-    <button id="historyToggle"
-            class="collapse-bar"
-            type="button"
-            aria-expanded="false"
-            aria-controls="historyBody">
-      <h1 class="page-title">History</h1>
-      <span class="chev" aria-hidden="true">▸</span>
-    </button>
+    <h1 class="page-title dropdown-toggle" data-target="#history-panel">
+      Search History
+      <span class="chevron">▾</span>
+    </h1>
+    <div id="history-panel" class="dropdown-panel">
+      <hr style="border:none; border-top:1px solid var(--border); margin:12px 0;">
 
-    <div id="historyBody" class="collapse-body" hidden>
       <!-- Recent Searches -->
-      <div style="padding:12px 12px 0;">
+      <div style="margin-top:6px;">
         <div class="small muted" style="margin-bottom:6px;">Your Recent Searches</div>
         <ul id="searchHistoryList" class="small" style="margin:0; padding-left:18px;"></ul>
         <div id="searchHistoryEmpty" class="muted small" style="display:none;">No history yet.</div>
       </div>
 
-      <hr style="border:none; border-top:1px solid var(--border); margin:12px;">
+      <hr style="border:none; border-top:1px solid var(--border); margin:12px 0;">
 
       <!-- Recently Viewed -->
-      <div style="padding:0 12px 12px;">
+      <div>
         <div class="small muted" style="margin-bottom:6px;">Recently Viewed Illustrations</div>
         <ul id="recentViewsList" class="small" style="margin:0; padding-left:18px;"></ul>
         <div id="recentViewsEmpty" class="muted small" style="display:none;">Nothing yet—open an illustration and linger 10s.</div>
@@ -91,20 +86,20 @@
 
 <script>
 (function(){
-  // --- CSRF helper for fetch (not used by beacon) ---
+  // --- CSRF helper ---
   function getCookie(name){
     const m = document.cookie.match('(^|;)\\s*'+name+'\\s*=\\s*([^;]+)');
     return m ? m.pop() : '';
   }
   const csrftoken = getCookie('csrftoken');
 
-  // Helper: build entry view URL from a known-good template
+  // Build entry view URL
   const ENTRY_URL_TEMPLATE = "{% url 'entry_view' 1 %}";
   function entryUrlFor(id){
     return ENTRY_URL_TEMPLATE.replace(/\/\d+\/?$/, '/' + id + '/');
   }
 
-  // Helper: first N words with ellipsis
+  // First N words
   function firstWords(text, n){
     const clean = (text || '').replace(/\s+/g, ' ').trim();
     if (!clean) return '';
@@ -113,72 +108,44 @@
     return words.slice(0, n).join(' ') + '…';
   }
 
-  // --- Font prefs: fetch + apply + persist (unchanged) ---
+  // Font prefs
   function applyFont(size){
     const root = document.documentElement;
     root.classList.remove('fs-small','fs-default','fs-large','fs-xlarge');
     root.classList.add('fs-'+size);
-    document.querySelectorAll('[data-font-choice]').forEach(b=>{
-      b.classList.toggle('primary', b.getAttribute('data-font-choice')===size);
-    });
   }
   fetch("{% url 'api_get_prefs' %}").then(r=>r.json()).then(j=>{
     if (j.ok) applyFont(j.font_size || 'default');
-  }).catch(()=>{});
-
-  document.querySelectorAll('[data-font-choice]').forEach(btn=>{
-    btn.addEventListener('click', ()=>{
-      const size = btn.getAttribute('data-font-choice');
-      applyFont(size);
-      const fd = new FormData(); fd.append('size', size);
-      fetch("{% url 'api_set_font_size' %}", {
-        method:'POST', body:fd, headers:{'X-CSRFToken': csrftoken}
-      }).catch(()=>{});
-    });
   });
 
-  // --- Collapsible History toggle ---
-  const toggle = document.getElementById('historyToggle');
-  const body = document.getElementById('historyBody');
-  if (toggle && body){
-    toggle.addEventListener('click', ()=>{
-      const isOpen = !body.hidden;
-      body.hidden = isOpen;
-      toggle.setAttribute('aria-expanded', String(!isOpen));
-      const chev = toggle.querySelector('.chev');
-      if (chev) chev.textContent = isOpen ? '▸' : '▾';
-    });
-  }
-
-  // --- Search history: fetch + render ---
-  const histList = document.getElementById('searchHistoryList');
-  const histEmpty = document.getElementById('searchHistoryEmpty');
+  // Search history
   function renderHistory(items){
-    histList.innerHTML = '';
-    if (!items || !items.length){ histEmpty.style.display='block'; return; }
-    histEmpty.style.display = 'none';
+    const list = document.getElementById('searchHistoryList');
+    const empty = document.getElementById('searchHistoryEmpty');
+    list.innerHTML = '';
+    if (!items || !items.length){ empty.style.display='block'; return; }
+    empty.style.display='none';
     items.forEach(it=>{
       const params = new URLSearchParams();
       if (it.q) params.set('q', it.q);
       const sel = it.selected || {};
       Object.keys(sel).forEach(k=>{ if (sel[k]) params.set(k, 'on'); });
       const li = document.createElement('li');
-      li.innerHTML = `<a href="{% url 'search' %}?${params.toString()}"><strong>${it.q || '(blank)'}</strong></a>
-        <span class="muted">— ${Object.keys(sel).filter(k=>sel[k]).join(', ')}</span>`;
-      histList.appendChild(li);
+      li.innerHTML = `<a href="{% url 'search' %}?${params.toString()}"><strong>${it.q || '(blank)'}</strong></a>`;
+      list.appendChild(li);
     });
   }
   fetch("{% url 'api_get_search_history' %}").then(r=>r.json()).then(j=>{
     if (j.ok) renderHistory(j.items);
-  }).catch(()=>{});
+  });
 
-  // --- Recently viewed: fetch + render (keeps snippet + fixed link) ---
-  const rvList = document.getElementById('recentViewsList');
-  const rvEmpty = document.getElementById('recentViewsEmpty');
+  // Recently viewed
   function renderRecent(items){
-    rvList.innerHTML = '';
-    if (!items || !items.length){ rvEmpty.style.display='block'; return; }
-    rvEmpty.style.display = 'none';
+    const list = document.getElementById('recentViewsList');
+    const empty = document.getElementById('recentViewsEmpty');
+    list.innerHTML = '';
+    if (!items || !items.length){ empty.style.display='block'; return; }
+    empty.style.display='none';
     items.forEach(it=>{
       const url = entryUrlFor(it.entry_id);
       const snippet = (it.snippet && it.snippet.trim())
@@ -188,35 +155,28 @@
       const li = document.createElement('li');
       li.innerHTML = `<a href="${url}">${snippet}</a>
         <span class="muted"> — ${when.toLocaleString()}</span>`;
-      rvList.appendChild(li);
+      list.appendChild(li);
     });
   }
   fetch("{% url 'api_get_recent_views' %}").then(r=>r.json()).then(j=>{
     if (j.ok) renderRecent(j.items);
-  }).catch(()=>{});
+  });
 
-  // --- Log searches reliably using Beacon on submit ---
-  const searchForm = document.querySelector('form.search-form');
-  if (searchForm){
-    searchForm.addEventListener('submit', ()=>{
-      try{
-        const fd = new FormData(searchForm);
-        const data = new URLSearchParams();
-        data.append('q', (fd.get('q') || '').trim());
-        ['subject','illustration','application','scripture_raw','source','talk_title','talk_number','entry_code']
-          .forEach(k=>{
-            if (fd.get(k)) data.append(`sel[${k}]`, 'on');
-          });
-        const blob = new Blob([data.toString()], {type:'application/x-www-form-urlencoded'});
-        navigator.sendBeacon("{% url 'api_log_search' %}", blob);
-      }catch(_){}
+  // Dropdown toggle for History
+  document.querySelectorAll('.dropdown-toggle').forEach(btn=>{
+    btn.addEventListener('click', ()=>{
+      const target = document.querySelector(btn.dataset.target);
+      if (target){
+        target.classList.toggle('open');
+        btn.classList.toggle('open');
+      }
     });
-  }
+  });
 })();
 </script>
 
-<!-- Styles for the help panel + collapsible -->
 <style>
+  /* Help panel */
   .help-panel{
     display:none;
     margin-top:10px;
@@ -226,51 +186,22 @@
     padding:14px;
     box-shadow:0 4px 16px rgba(0,0,0,.06);
     font-size:14px;
-    line-height:1.6;
   }
   .help-panel.open{ display:block; }
-  .help-panel code{ background:#f3f4f6; padding:2px 4px; border-radius:4px; font-size:90%; }
-  .help-panel h3{ margin:0 0 8px; font-size:16px; }
-  .help-panel ul{ margin:0 0 8px 18px; }
 
-  /* Collapsible History bar */
-  .collapse-bar{
-    width:100%;
-    display:flex;
-    align-items:center;
-    justify-content:space-between;
-    gap:10px;
-    padding:12px 14px;
-    background:#fff;
-    border:0;
-    border-bottom:1px solid var(--border);
-    border-radius:12px 12px 0 0;
-    cursor:pointer;
-    font-weight:600;
-    text-align:left;
-  }
-  .collapse-bar:focus{ outline:2px solid #c7d2fe; outline-offset:2px; }
-  .collapse-body{
-    background:#fff;
-    border-radius:0 0 12px 12px;
+  /* Dropdown panel */
+  .dropdown-panel { display:none; padding:12px; }
+  .dropdown-panel.open { display:block; }
+
+  /* Chevron style */
+  .page-title .chevron {
+    font-size: 0.8em;     /* proportional to heading */
+    margin-left: 8px;
+    vertical-align: middle;
+    transition: transform 0.2s ease;
+    display:inline-block;
   }
+  .page-title.open .chevron { transform: rotate(180deg); }
+  .dropdown-toggle { cursor:pointer; }
 </style>
-
-<!-- Inline JS to toggle the Help panel (unchanged) -->
-<script>
-  document.addEventListener('click', function(e){
-    const btn = e.target.closest('.help-toggle');
-    if (btn) {
-      const panel = document.querySelector(btn.dataset.target || '#search-help-panel');
-      if (panel) panel.classList.toggle('open');
-      return;
-    }
-    const panel = document.querySelector('#search-help-panel');
-    if (!panel) return;
-    if (panel.classList.contains('open')) {
-      const clickedInside = panel.contains(e.target) || e.target.closest('.help-toggle');
-      if (!clickedInside) panel.classList.remove('open');
-    }
-  });
-</script>
 {% endblock %}
\ No newline at end of file