Status Filter — Layout Options

Five takes on solving the redundancy of paired Watched/Unwatched + Rated/No Rating filters, plus housing for No Collection / No Tags. Goal: zero contradictory states, easy to extend with new axes (Year, Resolution, etc.), keeps the filter bar slim.

Option A — Tabbed status popover (mirrors "Filter by")

Same shape as the entity filter. Each axis is a tab; inside the tab is a tri-state radio (All / X / not X). Future axes (Year, Resolution, Has Notes) drop in as new tabs at zero design cost.

Bar: All · Filter by ▾ · Status ▾ · search · sort
All ⛓ Filter by ▾ ⊘ Status 2 ▾
👁 Watched 1 ⭐ Rated 1 📁 Collection 🏷 Tags
Watched
All Watched Unwatched
tap to set · only one option per tab
Pros
  • Endlessly extensible — new axis = new tab
  • Visually consistent with Filter by
  • No contradictions possible
Cons
  • Two clicks to change a different axis
  • Tabs hide other axes' state until clicked

Option B — Single popover, all axes visible (sectioned tri-states)

Keep one popover, but show every axis at once with a tri-state segmented control per axis. No tabs — everything's a click away. Becomes taller as axes are added.

All status axes visible at once
All ⛓ Filter by ▾ ⊘ Status 3 ▾
Watched
All Watched Unwatched
Rated
All Rated No Rating
Collection
All Has No Collection
Tags
All Has No Tags
Pros
  • All state visible — no hidden tabs
  • Tri-state radios prevent contradictions
  • One click to toggle any axis
Cons
  • Grows tall when more axes are added (Year, Resolution, etc.)
  • Less directly extensible than tabs

Option C — One chip per axis in the bar

Each status dimension is its own chip in the filter bar with its own dropdown. Clicking shows just that axis's options. Most decluttered axis-by-axis, but the bar grows wide as axes are added.

Bar: All · Filter by ▾ · Watched ▾ · Rated ▾ · Collection ▾ · Tags ▾ · search · sort
All ⛓ Filter by ▾ 👁 Watched : Watched ▾
All
Watched✓
Unwatched
 ⭐ Rated ▾ 📁 Collection ▾ 🏷 Tags ▾
Pros
  • Each axis label visible without opening
  • Active selection shows on the chip itself ("Watched: Watched")
  • One click to a specific axis
Cons
  • Bar grows wide — each new axis adds a chip
  • Less consolidation; reverts to the "many chips" problem

Option D — Master/detail popover (axis list left, options right)

Opens to a two-column layout: axis list on the left (with active value), options for the selected axis on the right. Only one click to switch axes; current selection visible at all times in the left column. Scales to many axes.

Two-pane popover with permanent axis sidebar
All ⛓ Filter by ▾ ⊘ Status 2 ▾
👁 Watched Watched
⭐ Rated Rated
📁 Collection
🏷 Tags
All
Watched
Unwatched
Pros
  • Active value visible per axis without opening anything
  • Switch axes in one click — no tab clicks lost
  • Cleanest scaling for many axes (just longer left column)
  • Scans like a settings panel — predictable
Cons
  • Wider popover (~460px+)
  • More implementation work than a flat tabbed layout

Option E — Inline accordion (collapsed sections, click to expand)

All axes listed; current selection shown inline; click an axis to expand its options. Closed axes show only their value. Compact when most axes are on default, expands as needed.

Sections collapse when not active; current value always visible
All ⛓ Filter by ▾ ⊘ Status 2 ▾
👁 Watched : Watched ▾
All Watched Unwatched
⭐ Rated : Rated ▸
📁 Collection : All ▸
🏷 Tags : All ▸
Pros
  • Compact when nothing's set; details on demand
  • Active values visible inline without opening anything
  • Stays narrow — easy to fit on tablets
Cons
  • Two clicks to change an axis (open + select)
  • Animations / disclosure indicators add UI complexity

All five solve contradictions via tri-state radios and house Collection/Tags as proper axes. Pick based on your taste: A scales most cleanly; D shows the most info at once; B is simplest to implement; C wears state on the bar; E is the most space-efficient.