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

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

diff --git a/web/templates/search.html b/web/templates/search.html
index 98d2dbd..f6e1672 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 -->
+      <!-- Help button stays inline with Search -->
       <button
         class="btn btn-secondary help-toggle"
         type="button"
@@ -20,7 +20,7 @@
       </button>
     </div>
 
-    <!-- Help panel -->
+    <!-- Help panel sits below the row -->
     <div id="search-help-panel" class="help-panel">
       <h3>How to Use Search Operators</h3>
       <ul>
@@ -28,15 +28,17 @@
             <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).<br>
+        <li><strong>OR search</strong> — use <code>OR</code> (uppercase) to match any of several terms.<br>
             <em>Example:</em> <code>love OR kindness</code></li>
-        <li><strong>Exclude terms</strong> — use <code>-</code> to remove.<br>
+        <li><strong>Exclude terms</strong> — use a minus sign to remove results containing a word.<br>
             <em>Example:</em> <code>hope -future</code></li>
-        <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>
+        <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>
             <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">
@@ -56,26 +58,29 @@
     </div>
   {% endif %}
 
-  <!-- ===== History Dropdown ===== -->
+  <!-- ===== Collapsible History card (kept same IDs) ===== -->
   <div class="card" style="padding:0; margin:16px 0 12px;">
-    <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;">
+    <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>
 
+    <div id="historyBody" class="collapse-body" hidden>
       <!-- Recent Searches -->
-      <div style="margin-top:6px;">
+      <div style="padding:12px 12px 0;">
         <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 0;">
+      <hr style="border:none; border-top:1px solid var(--border); margin:12px;">
 
       <!-- Recently Viewed -->
-      <div>
+      <div style="padding:0 12px 12px;">
         <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>
@@ -86,20 +91,20 @@
 
 <script>
 (function(){
-  // --- CSRF helper ---
+  // --- CSRF helper for fetch (not used by beacon) ---
   function getCookie(name){
     const m = document.cookie.match('(^|;)\\s*'+name+'\\s*=\\s*([^;]+)');
     return m ? m.pop() : '';
   }
   const csrftoken = getCookie('csrftoken');
 
-  // Build entry view URL
+  // Helper: build entry view URL from a known-good template
   const ENTRY_URL_TEMPLATE = "{% url 'entry_view' 1 %}";
   function entryUrlFor(id){
     return ENTRY_URL_TEMPLATE.replace(/\/\d+\/?$/, '/' + id + '/');
   }
 
-  // First N words
+  // Helper: first N words with ellipsis
   function firstWords(text, n){
     const clean = (text || '').replace(/\s+/g, ' ').trim();
     if (!clean) return '';
@@ -108,44 +113,72 @@
     return words.slice(0, n).join(' ') + '…';
   }
 
-  // Font prefs
+  // --- Font prefs: fetch + apply + persist (unchanged) ---
   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(()=>{});
+    });
   });
 
-  // Search history
+  // --- 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');
   function renderHistory(items){
-    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';
+    histList.innerHTML = '';
+    if (!items || !items.length){ histEmpty.style.display='block'; return; }
+    histEmpty.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>`;
-      list.appendChild(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);
     });
   }
   fetch("{% url 'api_get_search_history' %}").then(r=>r.json()).then(j=>{
     if (j.ok) renderHistory(j.items);
-  });
+  }).catch(()=>{});
 
-  // Recently viewed
+  // --- Recently viewed: fetch + render (keeps snippet + fixed link) ---
+  const rvList = document.getElementById('recentViewsList');
+  const rvEmpty = document.getElementById('recentViewsEmpty');
   function renderRecent(items){
-    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';
+    rvList.innerHTML = '';
+    if (!items || !items.length){ rvEmpty.style.display='block'; return; }
+    rvEmpty.style.display = 'none';
     items.forEach(it=>{
       const url = entryUrlFor(it.entry_id);
       const snippet = (it.snippet && it.snippet.trim())
@@ -155,28 +188,35 @@
       const li = document.createElement('li');
       li.innerHTML = `<a href="${url}">${snippet}</a>
         <span class="muted"> — ${when.toLocaleString()}</span>`;
-      list.appendChild(li);
+      rvList.appendChild(li);
     });
   }
   fetch("{% url 'api_get_recent_views' %}").then(r=>r.json()).then(j=>{
     if (j.ok) renderRecent(j.items);
-  });
+  }).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');
-      }
+  // --- 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(_){}
     });
-  });
+  }
 })();
 </script>
 
+<!-- Styles for the help panel + collapsible -->
 <style>
-  /* Help panel */
   .help-panel{
     display:none;
     margin-top:10px;
@@ -186,22 +226,51 @@
     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; }
 
-  /* 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;
+  /* 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;
   }
-  .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