Client-side search with filter persistence

src/routes/entries.rs

@@ -39,6 +39,7 @@ pub struct EntryView {
     pub available_in: Option<String>,
     pub is_available: bool,
     pub visit_count: i64,
+    pub tags: Vec<String>,
 }
 
 /// Entry with visit count for queries that join entries with visits
@@ -266,7 +267,7 @@ async fn fetch_entries_for_user(db: &sqlx::SqlitePool, user_id: &str) -> Vec<(En
     entries.into_iter().map(|e| e.into_entry_and_count()).collect()
 }
 
-pub fn build_entry_view(entry: Entry, visit_count: i64, now: DateTime<Utc>) -> EntryView {
+pub fn build_entry_view(entry: Entry, visit_count: i64, tags: Vec<String>, now: DateTime<Utc>) -> EntryView {
     let (is_available, available_in) = calculate_availability(&entry, now);
     EntryView {
         id: entry.id,
@@ -277,9 +278,31 @@ pub fn build_entry_view(entry: Entry, visit_count: i64, now: DateTime<Utc>) -> E
         available_in,
         is_available,
         visit_count,
+        tags,
     }
 }
 
+async fn fetch_tags_for_entries(db: &sqlx::SqlitePool, entry_ids: &[String]) -> HashMap<String, Vec<String>> {
+    if entry_ids.is_empty() {
+        return HashMap::new();
+    }
+    let placeholders = entry_ids.iter().map(|_| "?").collect::<Vec<_>>().join(",");
+    let query = format!(
+        "SELECT et.entry_id, t.name FROM entry_tags et JOIN tags t ON t.id = et.tag_id WHERE et.entry_id IN ({})",
+        placeholders
+    );
+    let mut q = sqlx::query_as::<_, (String, String)>(&query);
+    for id in entry_ids {
+        q = q.bind(id);
+    }
+    let rows: Vec<(String, String)> = q.fetch_all(db).await.unwrap_or_default();
+    let mut map: HashMap<String, Vec<String>> = HashMap::new();
+    for (entry_id, tag_name) in rows {
+        map.entry(entry_id).or_default().push(tag_name);
+    }
+    map
+}
+
 async fn list_filtered_entries(
     db: &sqlx::SqlitePool,
     user: User,
@@ -288,9 +311,15 @@ async fn list_filtered_entries(
     let entries = fetch_entries_for_user(db, &user.id).await;
     let now = Utc::now();
 
+    let entry_ids: Vec<String> = entries.iter().map(|(e, _)| e.id.clone()).collect();
+    let mut tags_map = fetch_tags_for_entries(db, &entry_ids).await;
+
     let entry_views: Vec<EntryView> = entries
         .into_iter()
-        .map(|(entry, visit_count)| build_entry_view(entry, visit_count, now))
+        .map(|(entry, visit_count)| {
+            let tags = tags_map.remove(&entry.id).unwrap_or_default();
+            build_entry_view(entry, visit_count, tags, now)
+        })
         .filter(|ev| match filter {
             "ready" => ev.is_available,
             "waiting" => !ev.is_available,
@@ -390,19 +419,18 @@ async fn visit_entry(
         .await?;
 
     let now_dt = Utc::now();
-    let (is_available, available_in) = calculate_availability(&entry, now_dt);
+
+    let tags: Vec<(String,)> = sqlx::query_as(
+        "SELECT t.name FROM tags t JOIN entry_tags et ON et.tag_id = t.id WHERE et.entry_id = ?"
+    )
+    .bind(&entry.id)
+    .fetch_all(&state.db)
+    .await
+    .unwrap_or_default();
+    let tags: Vec<String> = tags.into_iter().map(|(name,)| name).collect();
 
     let template = EntryTemplate {
-        entry: EntryView {
-            id: entry.id,
-            url: entry.url,
-            title: entry.title,
-            description: entry.description,
-            last_viewed: format_last_viewed(&entry.dismissed_at, now_dt),
-            available_in,
-            is_available,
-            visit_count: visit_count.0,
-        },
+        entry: build_entry_view(entry, visit_count.0, tags, now_dt),
     };
     Ok(Html(template.render()?))
 }

src/routes/tags.rs

@@ -164,7 +164,7 @@ async fn show_tag(
         .into_iter()
         .map(|r| {
             let (entry, count) = r.into_entry_and_count();
-            build_entry_view(entry, count, now)
+            build_entry_view(entry, count, vec![name.clone()], now)
         })
         .collect();
 

static/style.css

@@ -106,10 +106,89 @@ header nav a.active {
 
 .header-actions {
     display: flex;
+    justify-content: space-between;
+    align-items: baseline;
     gap: 1rem;
     margin-top: 0.75rem;
 }
 
+/* Search trigger */
+.search-trigger {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    cursor: pointer;
+}
+
+.search-icon {
+    color: var(--gray-400);
+    flex-shrink: 0;
+    transition: color 0.15s ease;
+}
+
+.search-trigger:hover .search-icon,
+.search-trigger.active .search-icon {
+    color: var(--gray-600);
+}
+
+.search-swap {
+    display: grid;
+    min-width: 10rem;
+    justify-items: end;
+}
+
+.search-swap > * {
+    grid-row: 1;
+    grid-column: 1;
+    transition: opacity 0.15s ease;
+}
+
+.search-trigger:hover .search-swap .date,
+.search-trigger.active .search-swap .date {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.search-swap .search-field {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 100%;
+    opacity: 0;
+    pointer-events: none;
+    font-size: 0.8125rem;
+    font-family: inherit;
+    color: var(--black);
+    background: transparent;
+    border: none;
+    border-bottom: 1px solid transparent;
+    border-radius: 0;
+    padding: 0 0 1px 0;
+    text-align: right;
+    box-shadow: none;
+}
+
+.search-swap .search-field:focus {
+    outline: none;
+    box-shadow: none;
+}
+
+.search-swap .search-field::placeholder {
+    color: var(--gray-400);
+}
+
+.search-swap .search-field::-webkit-search-cancel-button,
+.search-swap .search-field::-webkit-search-decoration {
+    -webkit-appearance: none;
+    display: none;
+}
+
+.search-trigger:hover .search-swap .search-field,
+.search-trigger.active .search-swap .search-field {
+    opacity: 1;
+    pointer-events: auto;
+    border-bottom-color: var(--gray-200);
+}
+
 .header-actions a {
     font-size: 0.8125rem;
     color: var(--gray-600);
@@ -124,6 +203,9 @@ header nav a.active {
     .date {
         display: none;
     }
+    .search-trigger {
+        display: none;
+    }
 }
 
 /* Main */

templates/base.html

@@ -21,7 +21,9 @@
                     <a href="/tags">Tags</a>
                     <a href="/collections">Collections</a>
                     {% endif %}
+                    {% block nav_end %}
                     <span class="date" id="clock"></span>
+                    {% endblock %}
                 </nav>
             </div>
             {% block header_actions %}{% endblock %}

templates/entries/entry.html

@@ -1,4 +1,4 @@
-<div class="entry {% if !entry.is_available %}unavailable{% endif %}" id="entry-{{ entry.id }}">
+<div class="entry {% if !entry.is_available %}unavailable{% endif %}" id="entry-{{ entry.id }}" data-search="{{ entry.title }} {{ entry.url }} {{ entry.description.as_deref().unwrap_or("") }} {{ entry.tags.join(" ") }}">
     <div class="entry-header">
         <div class="entry-title">
             <a href="{{ entry.url }}" target="_blank" rel="noopener noreferrer"

templates/entries/list.html

@@ -2,20 +2,27 @@
 
 {% block title %}Interne{% endblock %}
 
-{% block header_left %}
-<div id="view-filter" class="view-filter">
-    <a href="/" class="view-filter-link{% if filter == "ready" %} active{% endif %}" hx-get="/" hx-target="#entry-list" hx-select="#entry-list" hx-select-oob="#view-filter" hx-swap="outerHTML" hx-push-url="true">Ready</a>
-    /
-    <a href="/waiting" class="view-filter-link{% if filter == "waiting" %} active{% endif %}" hx-get="/waiting" hx-target="#entry-list" hx-select="#entry-list" hx-select-oob="#view-filter" hx-swap="outerHTML" hx-push-url="true">Waiting</a>
-    /
-    <a href="/unseen" class="view-filter-link{% if filter == "unseen" %} active{% endif %}" hx-get="/unseen" hx-target="#entry-list" hx-select="#entry-list" hx-select-oob="#view-filter" hx-swap="outerHTML" hx-push-url="true">Unseen</a>
-    /
-    <a href="/all" class="view-filter-link{% if filter == "all" %} active{% endif %}" hx-get="/all" hx-target="#entry-list" hx-select="#entry-list" hx-select-oob="#view-filter" hx-swap="outerHTML" hx-push-url="true">All</a>
+{% block nav_end %}
+<div class="search-trigger" id="search-trigger">
+    <svg class="search-icon" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+    <div class="search-swap">
+        <span class="date" id="clock"></span>
+        <input type="search" class="search-field" id="search-input" placeholder="Search..." autocomplete="off" spellcheck="false">
+    </div>
 </div>
 {% endblock %}
 
 {% block header_actions %}
 <div class="header-actions">
+    <div id="view-filter" class="view-filter">
+        <a href="/" class="view-filter-link{% if filter == "ready" %} active{% endif %}" hx-get="/" hx-target="#entry-list" hx-select="#entry-list" hx-swap="outerHTML" hx-push-url="true">Ready</a>
+        /
+        <a href="/waiting" class="view-filter-link{% if filter == "waiting" %} active{% endif %}" hx-get="/waiting" hx-target="#entry-list" hx-select="#entry-list" hx-swap="outerHTML" hx-push-url="true">Waiting</a>
+        /
+        <a href="/unseen" class="view-filter-link{% if filter == "unseen" %} active{% endif %}" hx-get="/unseen" hx-target="#entry-list" hx-select="#entry-list" hx-swap="outerHTML" hx-push-url="true">Unseen</a>
+        /
+        <a href="/all" class="view-filter-link{% if filter == "all" %} active{% endif %}" hx-get="/all" hx-target="#entry-list" hx-select="#entry-list" hx-swap="outerHTML" hx-push-url="true">All</a>
+    </div>
     <a href="/entries/new">+ New Link</a>
 </div>
 {% endblock %}
@@ -40,5 +47,74 @@
         {% endfor %}
     {% endif %}
 </div>
+
+<script>
+(function() {
+    var trigger = document.getElementById('search-trigger');
+    var input = document.getElementById('search-input');
+    var hovering = false;
+    var timer;
+
+    function activate() { trigger.classList.add('active'); }
+    function deactivate() {
+        if (!hovering && !input.value) trigger.classList.remove('active');
+    }
+
+    function filterEntries() {
+        var q = input.value.toLowerCase();
+        var entries = document.getElementById('entry-list').querySelectorAll('.entry');
+        for (var i = 0; i < entries.length; i++) {
+            var haystack = entries[i].getAttribute('data-search').toLowerCase();
+            entries[i].style.display = (!q || haystack.indexOf(q) !== -1) ? '' : 'none';
+        }
+    }
+
+    trigger.addEventListener('mouseenter', function() {
+        hovering = true;
+        activate();
+        input.focus();
+    });
+    trigger.addEventListener('mouseleave', function() {
+        hovering = false;
+        if (document.activeElement !== input) deactivate();
+    });
+    input.addEventListener('focus', activate);
+    input.addEventListener('blur', deactivate);
+
+    // filter entries
+    input.addEventListener('input', function() {
+        clearTimeout(timer);
+        timer = setTimeout(filterEntries, 150);
+    });
+
+    // re-apply search filter after htmx loads new content
+    document.body.addEventListener('htmx:load', function() {
+        if (input.value) filterEntries();
+    });
+
+    // update active filter link (no OOB swap, so we handle it client-side)
+    document.getElementById('view-filter').addEventListener('click', function(e) {
+        var link = e.target.closest('.view-filter-link');
+        if (!link) return;
+        var links = document.querySelectorAll('.view-filter-link');
+        for (var i = 0; i < links.length; i++) links[i].classList.remove('active');
+        link.classList.add('active');
+    });
+
+    // keyboard shortcut: / to focus, Escape to clear
+    document.addEventListener('keydown', function(e) {
+        if (e.key === '/' && document.activeElement.tagName !== 'INPUT' && document.activeElement.tagName !== 'TEXTAREA') {
+            e.preventDefault();
+            activate();
+            input.focus();
+        }
+        if (e.key === 'Escape' && document.activeElement === input) {
+            input.value = '';
+            input.dispatchEvent(new Event('input'));
+            input.blur();
+        }
+    });
+})();
+</script>
 {% endblock %}