From 4bbafdd460945eb506ddb07b9068731245708812 Mon Sep 17 00:00:00 2001
From: Tyler Hoang <tyler@tylerhoang.xyz>
Date: Wed, 6 May 2026 17:12:46 -0700
Subject: Add search, filter, and sort functionality to film shelves

- Add _SORT_COLUMNS dict to routers/films.py with 8 sort options
- Extend _get_shelf_query to accept q (search) and sort parameters
- Update /films/partial endpoint to accept q/sort query params and pass
  search_active to template to suppress month grouping when searching
- Add filter bar (search input + sort select) to templates/index.html
- Add data-shelf attribute to #film-feed for JS to read current shelf
- Rewrite infinite scroll JS to support debounced search (300ms),
  feed reset on filter/sort change, and pass params on all fetches

Filters text search by title OR director (case-insensitive ilike).
Sort options: date watched (newest/oldest), title (A-Z/Z-A), year,
stars. Month grouping disabled when search is active.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 templates/index.html | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

(limited to 'templates/index.html')

diff --git a/templates/index.html b/templates/index.html
index cb0e1fc..dc76e5d 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -13,6 +13,26 @@
     </div>
   </section>
 
+  <div class="search-row" style="margin-bottom: 20px;">
+    <input
+      type="search"
+      id="film-search"
+      placeholder="Search by title or director…"
+      autocomplete="off"
+    >
+    <select id="film-sort">
+      <option value="">Default order</option>
+      <option value="date_watched_desc">Date watched — newest</option>
+      <option value="date_watched_asc">Date watched — oldest</option>
+      <option value="title_asc">Title — A → Z</option>
+      <option value="title_desc">Title — Z → A</option>
+      <option value="year_desc">Year — newest</option>
+      <option value="year_asc">Year — oldest</option>
+      <option value="stars_desc">Stars — highest</option>
+      <option value="stars_asc">Stars — lowest</option>
+    </select>
+  </div>
+
   {% if imported is not none %}
     <div class="notice">{{ imported }} entries imported.</div>
   {% endif %}
@@ -38,7 +58,7 @@
   {% endif %}
 
   {% if films %}
-    <section class="diary-feed" id="film-feed" aria-label="Diary entries">
+    <section class="diary-feed" id="film-feed" data-shelf="{{ active_shelf }}" aria-label="Diary entries">
       {% if active_shelf == 'diary' and grouped_films %}
         {% for group in grouped_films %}
           <div class="month-group" data-month="{{ group.month }}">
-- 
cgit v1.3-2-g0d8e