From 1cac08117aa61f4f64cb9862a567f4f288a8dd56 Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Mon, 5 Oct 2026 06:14:54 +0300
Subject: [PATCH] =?UTF-8?q?ui:=20the=20kind=20filter=20heads=20the=20list?=
 =?UTF-8?q?=20=E2=80=94=20moved=20below=20the=20search=20(owner=20round=20?=
 =?UTF-8?q?8b)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 components/sidebar.tsx | 49 ++++++++++++++++++++++--------------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/components/sidebar.tsx b/components/sidebar.tsx
index 575213e..7c1fd00 100644
--- a/components/sidebar.tsx
+++ b/components/sidebar.tsx
@@ -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>