Update web/templates/search.html

web/templates/search.html

@@ -61,6 +61,123 @@
     </div>
   {% endif %}
 </div>
+<!-- ===== User controls: font size + history + recent views ===== -->
+<div class="card" style="padding:12px; margin:12px 0;">
+  <div class="meta-label">Font size</div>
+  <div style="display:flex; gap:8px; margin-top:8px;">
+    <button class="nav-btn" data-font-choice="small"   type="button">Small</button>
+    <button class="nav-btn" data-font-choice="default" type="button">Default</button>
+    <button class="nav-btn" data-font-choice="large"   type="button">Large</button>
+    <button class="nav-btn" data-font-choice="xlarge"  type="button">Extra-Large</button>
+  </div>
+</div>
+
+<div class="card" style="padding:12px; margin:12px 0;">
+  <div class="meta-label">Your Recent Searches</div>
+  <ul id="searchHistoryList" class="small" style="margin:8px 0 0; padding-left:18px;"></ul>
+  <div id="searchHistoryEmpty" class="muted small" style="display:none;">No history yet.</div>
+</div>
+
+<div class="card" style="padding:12px; margin:12px 0;">
+  <div class="meta-label">Recently Viewed</div>
+  <ul id="recentViewsList" class="small" style="margin:8px 0 0; padding-left:18px;"></ul>
+  <div id="recentViewsEmpty" class="muted small" style="display:none;">Nothing yet—open an illustration and linger 10s.</div>
+</div>
+
+<script>
+(function(){
+  // --- 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');
+
+  // --- Font prefs: fetch + apply + persist ---
+  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: fetch + render ---
+  const histList = document.getElementById('searchHistoryList');
+  const histEmpty = document.getElementById('searchHistoryEmpty');
+  function renderHistory(items){
+    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>
+        <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: fetch + render ---
+  const rvList = document.getElementById('recentViewsList');
+  const rvEmpty = document.getElementById('recentViewsEmpty');
+  function renderRecent(items){
+    rvList.innerHTML = '';
+    if (!items || !items.length){ rvEmpty.style.display='block'; return; }
+    rvEmpty.style.display = 'none';
+    items.forEach(it=>{
+      const li = document.createElement('li');
+      const when = new Date(it.viewed_at);
+      li.innerHTML = `<a href="{% url 'entry_view' 0 %}".replace('0', it.entry_id)>#${it.entry_id}</a>
+        <span class="muted"> — ${when.toLocaleString()}</span>`;
+      rvList.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());
+        // selected checkboxes (match your field names)
+        ['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 -->
 <style>