Use toggle buttons for exif filters

backend/app.py

@@ -501,15 +501,18 @@ def exif_items(post_ids, scanned, exif_types=None):
     items = []
     for pid in post_ids:
         s = scanned.get(pid)
-        if not s or not s.get("exif_type"):
+        if not s:
             continue
-        if allowed is not None and s.get("exif_type") not in allowed:
+        exif_type = s.get("exif_type")
+        if exif_type is None and (allowed is None or 0 not in allowed):
+            continue
+        if exif_type is not None and allowed is not None and exif_type not in allowed:
             continue
         items.append(
             {
                 "post_id": pid,
                 "url": s.get("url"),
-                "exif_type": s.get("exif_type"),
+                "exif_type": exif_type,
                 "scanned": True,
                 **image_links(pid, s.get("url")),
             }
@@ -882,7 +885,7 @@ async def get_results(search_id: str, page: int = 1, exif_types: str = ""):
     allowed = [
         int(x)
         for x in exif_types.split(",")
-        if x.isdigit() and int(x) in EXIF_TYPE_TO_CODE.values()
+        if x.isdigit() and int(x) in (*EXIF_TYPE_TO_CODE.values(), 0)
     ]
     source = exif_items(post_ids, scanned, allowed if exif_types != "" else None)
     page = max(page, 1)

frontend/app.js

@@ -2,6 +2,8 @@ const $ = s => document.querySelector(s)
 const $$ = s => document.querySelectorAll(s)
 const EXIF_NAMES = { 1: "novelai", 2: "sd", 3: "comfy", 4: "mj", 5: "celsys", 6: "photoshop", 7: "stealth" }
 const EXIF_CODES = Object.keys(EXIF_NAMES).map(Number)
+const NO_EXIF_CODE = 0
+const FILTER_CODES = [...EXIF_CODES, NO_EXIF_CODE]
 const EXIF_FILTER_KEY = "pixif2-exif-types"
 const LONG_DIGITS_RE = /\d{6,}/g
 const PAGE_SIZE = 60
@@ -175,13 +177,13 @@ function renderSearchPager(data) {
 function getExifTypes() {
   const raw = localStorage.getItem(EXIF_FILTER_KEY)
   if (raw === null) return [...EXIF_CODES]
-  const types = raw.split(",").map(Number).filter(n => EXIF_CODES.includes(n))
+  const types = raw.split(",").map(Number).filter(n => FILTER_CODES.includes(n))
   return types
 }
 
 function setExifTypes(types) {
-  const sorted = [...new Set(types)].filter(n => EXIF_CODES.includes(n)).sort((a, b) => a - b)
-  if (sorted.length === EXIF_CODES.length) {
+  const sorted = [...new Set(types)].filter(n => FILTER_CODES.includes(n)).sort((a, b) => a - b)
+  if (sorted.length === EXIF_CODES.length && sorted.every(n => EXIF_CODES.includes(n))) {
     localStorage.removeItem(EXIF_FILTER_KEY)
   } else {
     localStorage.setItem(EXIF_FILTER_KEY, sorted.join(","))
@@ -191,12 +193,25 @@ function setExifTypes(types) {
 
 function renderExifFilters(id) {
   const active = new Set(getExifTypes())
-  $("#exif-filters").innerHTML = EXIF_CODES.map(code => `<label class="check-row">
-    <input type="checkbox" value="${code}" ${active.has(code) ? "checked" : ""}> ${esc(EXIF_NAMES[code])}
-  </label>`).join("")
-  $$("#exif-filters input").forEach(input => {
-    input.onchange = () => {
-      const types = [...$$("#exif-filters input:checked")].map(el => Number(el.value))
+  const buttons = FILTER_CODES.map(code => {
+    const name = code === NO_EXIF_CODE ? "None" : EXIF_NAMES[code]
+    return `<button class="filter-btn${active.has(code) ? " active" : ""}" data-code="${code}">${esc(name)}</button>`
+  }).join("")
+  $("#exif-filters").innerHTML = `${buttons}
+    <button class="filter-action" data-action="all">Select all</button>
+    <button class="filter-action" data-action="none">Select none</button>
+    <button class="filter-action update" data-action="update">Update</button>`
+  $$("#exif-filters .filter-btn").forEach(btn => {
+    btn.onclick = () => btn.classList.toggle("active")
+  })
+  $$("#exif-filters .filter-action").forEach(btn => {
+    btn.onclick = () => {
+      const action = btn.dataset.action
+      const filters = [...$$("#exif-filters .filter-btn")]
+      if (action === "all") filters.forEach(el => el.classList.add("active"))
+      if (action === "none") filters.forEach(el => el.classList.remove("active"))
+      if (action !== "update") return
+      const types = filters.filter(el => el.classList.contains("active")).map(el => Number(el.dataset.code))
       setExifTypes(types)
       const hash = explorerHash(id, 1)
       if (location.hash === hash) openSearch(id, 1)

frontend/style.css

@@ -242,25 +242,47 @@ input:focus, select:focus { outline: none; border-color: var(--accent); backgrou
   color: var(--muted);
   font-size: .82rem;
 }
-.check-row {
-  display: flex;
-  align-items: center;
-  gap: .45rem;
-  color: var(--muted);
-  font-size: .85rem;
-  white-space: nowrap;
-}
-.check-row input {
-  width: 16px;
-  height: 16px;
-  accent-color: var(--accent);
-}
 .exif-filters {
   display: flex;
   flex-wrap: wrap;
   justify-content: end;
-  gap: .45rem .75rem;
-  max-width: 31rem;
+  gap: .4rem;
+  max-width: 39rem;
+}
+.filter-btn, .filter-action {
+  height: 32px;
+  padding: 0 .65rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: .72rem;
+  font-weight: 800;
+  letter-spacing: .04rem;
+  text-transform: uppercase;
+  transition: background .15s, border-color .15s, color .15s;
+}
+.filter-btn {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  color: var(--muted);
+}
+.filter-btn:hover, .filter-action:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.filter-btn.active, .filter-action.update {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: #00131c;
+}
+.filter-btn.active:hover, .filter-action.update:hover {
+  background: var(--accent-2);
+  border-color: var(--accent-2);
+  color: #00131c;
+}
+.filter-action {
+  background: transparent;
+  border: 1px solid var(--line);
+  color: var(--muted);
 }
 #results-grid {
   display: grid;