From abc855f34e5d6edfecb9df49302278679f87aaa5 Mon Sep 17 00:00:00 2001
From: Jeff Emmett <jeffemmett@gmail.com>
Date: Sat, 28 Mar 2026 16:43:21 -0700
Subject: [PATCH] fix(rnotes): position sidebar collapse button at right edge,
 vertically centered

Move < button from inside search header to absolute-positioned on the
sidebar border at vertical midpoint. Matches the > reopen tab style.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 modules/rnotes/components/folk-notes-app.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/modules/rnotes/components/folk-notes-app.ts b/modules/rnotes/components/folk-notes-app.ts
index 6328a5a..991067f 100644
--- a/modules/rnotes/components/folk-notes-app.ts
+++ b/modules/rnotes/components/folk-notes-app.ts
@@ -2859,9 +2859,9 @@ Gear:          EUR  400 (10%)</code></pre><p><em>Maya is tracking expenses in rF
 
 		this.navZone.innerHTML = `
 			<div class="notes-sidebar">
+				<button class="sidebar-collapse" id="sidebar-collapse" title="Hide sidebar">\u2039</button>
 				<div class="sidebar-header">
 					<input class="sidebar-search" type="text" placeholder="Search notes..." id="search-input" value="${this.esc(this.searchQuery)}">
-					<button class="sidebar-collapse" id="sidebar-collapse" title="Hide sidebar">\u2039</button>
 				</div>
 				<button class="sidebar-btn-new-nb" id="create-notebook">+ New Notebook</button>
 				<div class="sidebar-tree">
@@ -3178,21 +3178,24 @@ Gear:          EUR  400 (10%)</code></pre><p><em>Maya is tracking expenses in rF
 				opacity: 1;
 				pointer-events: auto;
 			}
-			#nav-zone { overflow: hidden; }
+			#nav-zone { overflow: visible; }
+			#notes-layout.sidebar-collapsed #nav-zone { overflow: hidden; }
 			.notes-sidebar {
 				display: flex;
 				flex-direction: column;
 				border-right: 1px solid var(--rs-border-subtle);
 				background: var(--rs-bg-surface);
-				overflow: hidden;
+				overflow: visible;
 				height: 100%;
+				position: relative;
 				transition: opacity 0.15s ease;
 			}
-			/* Collapse button in sidebar header */
+			/* Collapse button — right edge, vertically centered on sidebar */
 			.sidebar-collapse {
-				position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
-				width: 24px; height: 24px; border-radius: 4px;
+				position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
+				width: 20px; height: 48px; z-index: 10;
 				border: 1px solid var(--rs-border-subtle, #333);
+				border-radius: 0 6px 6px 0;
 				background: var(--rs-bg-surface, #1e1e2e);
 				color: var(--rs-text-muted, #888);
 				font-size: 16px; line-height: 1;
@@ -3222,9 +3225,9 @@ Gear:          EUR  400 (10%)</code></pre><p><em>Maya is tracking expenses in rF
 				color: var(--rs-text-primary);
 				background: var(--rs-bg-hover, #252538);
 			}
-			.sidebar-header { padding: 12px 12px 8px; position: relative; }
+			.sidebar-header { padding: 12px 12px 8px; }
 			.sidebar-search {
-				width: 100%; padding: 8px 36px 8px 12px; border-radius: 6px;
+				width: 100%; padding: 8px 12px; border-radius: 6px;
 				border: 1px solid var(--rs-input-border); background: var(--rs-input-bg);
 				color: var(--rs-input-text); font-size: 13px; font-family: inherit;
 				transition: border-color 0.15s;