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:
+26
-23
@@ -723,29 +723,6 @@ function SessionsSidebar() {
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</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">
|
<div className="mx-3 mb-1 flex items-center gap-2">
|
||||||
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
|
<span className="text-xs uppercase tracking-widest text-muted-foreground/70">Sessions</span>
|
||||||
<Hint label="Search sessions" action="sessions-search" side="bottom">
|
<Hint label="Search sessions" action="sessions-search" side="bottom">
|
||||||
@@ -773,6 +750,32 @@ function SessionsSidebar() {
|
|||||||
</Hint>
|
</Hint>
|
||||||
</div>
|
</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">
|
<div ref={listRef} className="flex-1 overflow-y-auto p-2">
|
||||||
{shown === null ? (
|
{shown === null ? (
|
||||||
<div className="px-2 py-4 text-xs text-muted-foreground">Loading…</div>
|
<div className="px-2 py-4 text-xs text-muted-foreground">Loading…</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user