Update templates/index.html

templates/index.html

@@ -139,6 +139,24 @@
       gap: 8px;
     }
 
+    .word-filter-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .word-input {
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      padding: 9px 12px;
+      background: #0e1528;
+      color: var(--text);
+      width: 80px;
+    }
+
+    .word-input::placeholder { color: #7381a6; }
+
     .pill {
       border: 1px solid var(--line);
       background: #18233d;
@@ -457,6 +475,8 @@
       .btn, .pill { width: 100%; text-align: center; }
       .pager-actions { width: 100%; }
       .pager-actions .btn { flex: 1; }
+      .word-filter-row { flex-direction: column; align-items: stretch; }
+      .word-input { width: 100%; }
     }
   </style>
 </head>
@@ -485,6 +505,15 @@
               <div class="meta-line" id="listSummary"></div>
             </div>
             <div class="filters" id="statusFilters"></div>
+            <div class="filters" id="sortFilters"></div>
+            <div class="word-filter-row">
+              <span class="muted" style="align-self:center;white-space:nowrap">Question words:</span>
+              <input id="minWordsInput" type="number" class="word-input" placeholder="Min" min="0" />
+              <span class="muted" style="align-self:center">–</span>
+              <input id="maxWordsInput" type="number" class="word-input" placeholder="Max" min="0" />
+              <button class="btn" type="button" id="applyWordsBtn">Apply</button>
+              <button class="btn" type="button" id="clearWordsBtn">Clear</button>
+            </div>
             <form id="searchForm" class="search-form">
               <input id="searchInput" type="search" placeholder="Search questions, answers, or versions" />
               <button class="btn primary" type="submit">Search</button>
@@ -545,7 +574,7 @@
     (() => {
       const S = {
         clientId: null,
-        filters: { status: "unanswered", q: "", page: 1, page_size: 20 },
+        filters: { status: "unanswered", q: "", page: 1, page_size: 20, sort: "newest", min_words: 0, max_words: 0 },
         list: null,
         detail: null,
       };
@@ -597,12 +626,18 @@
           status: S.filters.status,
           q: S.filters.q,
           page: S.filters.page,
+          sort: S.filters.sort,
+          min_words: S.filters.min_words,
+          max_words: S.filters.max_words,
           ...extra,
         };
         if (merged.status) params.set("status", merged.status);
         if (merged.q) params.set("q", merged.q);
         if (merged.page && Number(merged.page) > 1) params.set("page", String(merged.page));
         if (merged.conversation_id) params.set("conversation_id", merged.conversation_id);
+        if (merged.sort && merged.sort !== "newest") params.set("sort", merged.sort);
+        if (Number(merged.min_words) > 0) params.set("min_words", String(merged.min_words));
+        if (Number(merged.max_words) > 0) params.set("max_words", String(merged.max_words));
         return params.toString();
       }
 
@@ -669,10 +704,33 @@
         });
       }
 
+      function renderSortFilters() {
+        const sorts = [
+          ["newest", "Newest"],
+          ["oldest", "Oldest"],
+          ["most_votes", "Most Votes"],
+          ["most_answers", "Most Answers"],
+          ["longest_answer", "Longest Answer"],
+          ["shortest_answer", "Shortest Answer"],
+        ];
+        $("sortFilters").innerHTML = sorts.map(([value, label]) => `
+          <button class="pill ${S.filters.sort === value ? "active" : ""}" type="button" data-sort="${value}">${label}</button>
+        `).join("");
+        document.querySelectorAll("[data-sort]").forEach((button) => {
+          button.onclick = () => {
+            S.filters.sort = button.getAttribute("data-sort");
+            S.filters.page = 1;
+            loadList();
+          };
+        });
+      }
+
       function renderList() {
         const list = S.list || { items: [], total: 0, page: 1, page_size: 20, has_next: false, has_prev: false };
         $("listSummary").textContent = `${list.total} question${list.total === 1 ? "" : "s"} in queue`;
         $("searchInput").value = S.filters.q || "";
+        $("minWordsInput").value = S.filters.min_words > 0 ? S.filters.min_words : "";
+        $("maxWordsInput").value = S.filters.max_words > 0 ? S.filters.max_words : "";
 
         const items = Array.isArray(list.items) ? list.items : [];
         $("queueList").innerHTML = items.map((item) => {
@@ -809,6 +867,9 @@
           status: S.filters.status,
           q: S.filters.q,
           page: S.filters.page,
+          sort: S.filters.sort,
+          min_words: S.filters.min_words || 0,
+          max_words: S.filters.max_words || 0,
         });
         if (!res.ok) {
           showToast(res.error || "Could not load question list");
@@ -816,6 +877,7 @@
         }
         S.list = res;
         renderStatusFilters();
+        renderSortFilters();
         renderList();
         showView("list");
         pushListUrl();
@@ -853,6 +915,22 @@
           await loadList();
         };
 
+        $("applyWordsBtn").onclick = async () => {
+          S.filters.min_words = Number($("minWordsInput").value) || 0;
+          S.filters.max_words = Number($("maxWordsInput").value) || 0;
+          S.filters.page = 1;
+          await loadList();
+        };
+
+        $("clearWordsBtn").onclick = async () => {
+          $("minWordsInput").value = "";
+          $("maxWordsInput").value = "";
+          S.filters.min_words = 0;
+          S.filters.max_words = 0;
+          S.filters.page = 1;
+          await loadList();
+        };
+
         $("prevPageBtn").onclick = async () => {
           if (!S.list?.has_prev) return;
           S.filters.page = Math.max(1, Number(S.filters.page || 1) - 1);
@@ -940,11 +1018,15 @@
         S.filters = {
           ...S.filters,
           ...(init.filters || {}),
+          sort: (init.filters || {}).sort || "newest",
+          min_words: Number((init.filters || {}).min_words || 0),
+          max_words: Number((init.filters || {}).max_words || 0),
         };
         S.list = init.list || null;
         S.detail = init.detail || null;
 
         renderStatusFilters();
+        renderSortFilters();
         renderList();
         bindListHandlers();
 
@@ -961,6 +1043,9 @@
         S.filters.status = params.get("status") || "unanswered";
         S.filters.q = params.get("q") || "";
         S.filters.page = Number(params.get("page") || 1);
+        S.filters.sort = params.get("sort") || "newest";
+        S.filters.min_words = Number(params.get("min_words") || 0);
+        S.filters.max_words = Number(params.get("max_words") || 0);
         const conversationId = params.get("conversation_id");
         await loadList();
         if (conversationId) {