From 04e4bde1186c28e1276870d9bf6e255ed018867d Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sat, 16 Aug 2025 22:15:07 +0000
Subject: [PATCH] Update web/templates/search.html

---
 web/templates/search.html | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/web/templates/search.html b/web/templates/search.html
index e5e6e6a..4ad52f5 100644
--- a/web/templates/search.html
+++ b/web/templates/search.html
@@ -65,7 +65,8 @@
   <!-- ===== History (single card) — now inside .container so width matches ===== -->
   <div class="card" style="padding:12px; margin:16px 0 12px;">
      <h1 class="page-title">Search History</h1>
-<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 0;">
+
     <!-- Recent Searches -->
     <div style="margin-top:6px;">
       <div class="small muted" style="margin-bottom:6px;">Your Recent Searches</div>
@@ -93,7 +94,23 @@
   }
   const csrftoken = getCookie('csrftoken');
 
-  // --- Font prefs: fetch + apply + persist ---
+  // Helper: build entry view URL from a known-good template
+  // We grab a real URL like /entry/1/ and swap the trailing number with the actual id.
+  const ENTRY_URL_TEMPLATE = "{% url 'entry_view' 1 %}";
+  function entryUrlFor(id){
+    return ENTRY_URL_TEMPLATE.replace(/\/\d+\/?$/, '/' + id + '/');
+  }
+
+  // Helper: first N words with ellipsis
+  function firstWords(text, n){
+    const clean = (text || '').replace(/\s+/g, ' ').trim();
+    if (!clean) return '';
+    const words = clean.split(' ');
+    if (words.length <= n) return clean;
+    return words.slice(0, n).join(' ') + '…';
+  }
+
+  // --- Font prefs: fetch + apply + persist (unchanged) ---
   function applyFont(size){
     const root = document.documentElement;
     root.classList.remove('fs-small','fs-default','fs-large','fs-xlarge');
@@ -117,7 +134,7 @@
     });
   });
 
-  // --- Search history: fetch + render ---
+  // --- Search history: fetch + render (unchanged) ---
   const histList = document.getElementById('searchHistoryList');
   const histEmpty = document.getElementById('searchHistoryEmpty');
   function renderHistory(items){
@@ -139,7 +156,7 @@
     if (j.ok) renderHistory(j.items);
   }).catch(()=>{});
 
-  // --- Recently viewed: fetch + render ---
+  // --- Recently viewed: fetch + render (FIXED link + 20-word snippet) ---
   const rvList = document.getElementById('recentViewsList');
   const rvEmpty = document.getElementById('recentViewsEmpty');
   function renderRecent(items){
@@ -147,9 +164,11 @@
     if (!items || !items.length){ rvEmpty.style.display='block'; return; }
     rvEmpty.style.display = 'none';
     items.forEach(it=>{
-      const li = document.createElement('li');
+      const url = entryUrlFor(it.entry_id);
+      const snippet = firstWords(it.illustration || '', 20) || `Entry #${it.entry_id}`;
       const when = new Date(it.viewed_at);
-      li.innerHTML = `<a href="{% url 'entry_view' 0 %}".replace('0', it.entry_id)>#${it.entry_id}</a>
+      const li = document.createElement('li');
+      li.innerHTML = `<a href="${url}">${snippet}</a>
         <span class="muted"> — ${when.toLocaleString()}</span>`;
       rvList.appendChild(li);
     });
@@ -158,7 +177,7 @@
     if (j.ok) renderRecent(j.items);
   }).catch(()=>{});
 
-  // --- Log searches reliably using Beacon on submit ---
+  // --- Log searches reliably using Beacon on submit (unchanged) ---
   const searchForm = document.querySelector('form.search-form');
   if (searchForm){
     searchForm.addEventListener('submit', ()=>{