ui: the kind filter heads the list — moved below the search (owner round 8b)

It scopes what the list shows, so it sits directly above it as a
caption row; search stays the top muscle-memory target. Column now
reads: LH band → New Teaching/Practice (stacked) → Sessions+search →
Teaching · Practice · All → list.
This commit is contained in:
amosblomqvist
2026-10-05 06:14:54 +03:00
parent 450e0f78f0
commit 1cac08117a
+26 -23
View File
@@ -723,29 +723,6 @@ function SessionsSidebar() {
</button>
</div>
{/* The three-way filter (owner, 2026-10-04; order owner round 8,
2026-10-05): Teaching / Practice / All — the two real modes
first, "All" as the escape hatch on the right, mirroring the
stacked create-buttons above. Persisted client-side. */}
<div className="mx-3 mb-1.5 flex items-center gap-0.5 rounded-md border border-border/60 bg-background p-0.5" data-testid="session-kind-filter">
{(["teach", "practice", "all"] as const).map((f) => (
<button
key={f}
type="button"
data-testid={`kind-filter-${f}`}
onClick={() => setFilter(f)}
className={cn(
"flex-1 rounded-sm px-2 py-1 text-[11px] uppercase tracking-wider transition-colors",
kindFilter === f
? "bg-accent text-foreground"
: "text-muted-foreground hover:text-foreground",
)}
>
{f === "teach" ? "Teaching" : f === "all" ? "All" : "Practice"}
</button>
))}
</div>
<div className="mx-3 mb-1 flex items-center gap-2">
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
<Hint label="Search sessions" action="sessions-search" side="bottom">
@@ -773,6 +750,32 @@ function SessionsSidebar() {
</Hint>
</div>
{/* The three-way filter, HEADING THE LIST (owner round 8b,
2026-10-05 — moved below the search): it scopes what the
list shows, so it sits directly above it as a caption row;
search stays the top muscle-memory target. Order: Teaching /
Practice / All — the real modes first, "All" as the escape
hatch on the right, mirroring the create-buttons above.
Persisted client-side. */}
<div className="mx-3 mb-1.5 flex items-center gap-0.5 rounded-md border border-border/60 bg-background p-0.5" data-testid="session-kind-filter">
{(["teach", "practice", "all"] as const).map((f) => (
<button
key={f}
type="button"
data-testid={`kind-filter-${f}`}
onClick={() => setFilter(f)}
className={cn(
"flex-1 rounded-sm px-2 py-1 text-[11px] uppercase tracking-wider transition-colors",
kindFilter === f
? "bg-accent text-foreground"
: "text-muted-foreground hover:text-foreground",
)}
>
{f === "teach" ? "Teaching" : f === "all" ? "All" : "Practice"}
</button>
))}
</div>
<div ref={listRef} className="flex-1 overflow-y-auto p-2">
{shown === null ? (
<div className="px-2 py-4 text-xs text-muted-foreground">Loading…</div>