From 288abdc180eb096d360037a0352724a4e4725bcd Mon Sep 17 00:00:00 2001
From: Jure <44338+hoornet@users.noreply.github.com>
Date: Tue, 10 Mar 2026 19:41:16 +0100
Subject: [PATCH] Sidebar improvements (roadmap #10)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- sidebarCollapsed now persisted to localStorage — remembered across sessions
- Explicit ‹/› toggle button always visible in the header; no longer
  requires knowing to click the WRYSTR wordmark
  - Expanded: WRYSTR on left, ‹ collapse button on right
  - Collapsed: centered › expand button fills the header
- Write article (✦) now visible in collapsed mode as icon-only with
  tooltip, consistent with the rest of the nav
- Nav items have title tooltip in collapsed mode for discoverability
- Status footer: collapsed shows just the connection dot with tooltip;
  expanded shows dot + online/offline text + note count as before

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/sidebar/Sidebar.tsx | 126 +++++++++++++++++------------
 src/stores/ui.ts                   |  10 ++-
 2 files changed, 83 insertions(+), 53 deletions(-)

diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
index 511d817..f966b16 100644
--- a/src/components/sidebar/Sidebar.tsx
+++ b/src/components/sidebar/Sidebar.tsx
@@ -18,64 +18,89 @@ export function Sidebar() {
   const { connected, notes } = useFeedStore();
   const { loggedIn } = useUserStore();
 
+  const c = sidebarCollapsed;
+
   return (
-    <>
-      <aside
-        className={`h-full border-r border-border bg-bg flex flex-col transition-all duration-150 ${
-          sidebarCollapsed ? "w-12" : "w-48"
-        }`}
-      >
-        {/* Logo */}
-        <div className="border-b border-border px-3 py-2.5 flex items-center justify-between shrink-0">
+    <aside
+      className={`h-full border-r border-border bg-bg flex flex-col transition-all duration-150 shrink-0 ${
+        c ? "w-12" : "w-48"
+      }`}
+    >
+      {/* Header / logo */}
+      <div className="border-b border-border px-2 py-2.5 flex items-center justify-between shrink-0">
+        {c ? (
+          /* Collapsed: just the expand chevron, centred */
           <button
             onClick={toggleSidebar}
-            className="text-text hover:text-accent transition-colors"
+            title="Expand sidebar"
+            className="w-full flex items-center justify-center text-text-dim hover:text-accent transition-colors"
           >
-            {sidebarCollapsed ? (
-              <span className="text-sm font-bold">W</span>
-            ) : (
-              <span className="text-sm font-bold tracking-widest">WRYSTR</span>
-            )}
+            <span className="text-[13px]">›</span>
           </button>
-        </div>
-
-        {/* Nav */}
-        <nav className="flex-1 overflow-y-auto py-2">
-          {loggedIn && !!getNDK().signer && !sidebarCollapsed && (
+        ) : (
+          /* Expanded: brand on left, collapse chevron on right */
+          <>
+            <span className="text-sm font-bold tracking-widest text-text select-none">WRYSTR</span>
             <button
-              onClick={() => setView("article-editor")}
-              className={`w-full text-left px-3 py-1.5 flex items-center gap-2 text-[12px] transition-colors mb-1 ${
-                currentView === "article-editor"
-                  ? "text-accent bg-accent/8"
-                  : "text-text-muted hover:text-text hover:bg-bg-hover"
-              }`}
+              onClick={toggleSidebar}
+              title="Collapse sidebar"
+              className="text-text-dim hover:text-accent transition-colors px-1"
             >
-              <span className="w-4 text-center text-[14px]">✦</span>
-              <span>write article</span>
+              <span className="text-[13px]">‹</span>
             </button>
-          )}
-          {NAV_ITEMS.map((item) => (
-            <button
-              key={item.id}
-              onClick={() => setView(item.id)}
-              className={`w-full text-left px-3 py-1.5 flex items-center gap-2 text-[12px] transition-colors ${
-                currentView === item.id
-                  ? "text-accent bg-accent/8"
-                  : "text-text-muted hover:text-text hover:bg-bg-hover"
-              }`}
-            >
-              <span className="w-4 text-center text-[14px]">{item.icon}</span>
-              {!sidebarCollapsed && <span>{item.label}</span>}
-            </button>
-          ))}
-        </nav>
+          </>
+        )}
+      </div>
 
-        {/* Account switcher */}
-        {!sidebarCollapsed && <AccountSwitcher />}
+      {/* Nav */}
+      <nav className="flex-1 overflow-y-auto py-2">
+        {/* Write article — show icon even when collapsed */}
+        {loggedIn && !!getNDK().signer && (
+          <button
+            onClick={() => setView("article-editor")}
+            title="Write article"
+            className={`w-full text-left px-3 py-1.5 flex items-center gap-2 text-[12px] transition-colors mb-1 ${
+              currentView === "article-editor"
+                ? "text-accent bg-accent/8"
+                : "text-text-muted hover:text-text hover:bg-bg-hover"
+            }`}
+          >
+            <span className="w-4 text-center text-[14px]">✦</span>
+            {!c && <span>write article</span>}
+          </button>
+        )}
 
-        {/* Status footer */}
-        {!sidebarCollapsed && (
-          <div className="border-t border-border px-3 py-2 text-[10px] text-text-dim shrink-0">
+        {NAV_ITEMS.map((item) => (
+          <button
+            key={item.id}
+            onClick={() => setView(item.id)}
+            title={c ? item.label : undefined}
+            className={`w-full text-left px-3 py-1.5 flex items-center gap-2 text-[12px] transition-colors ${
+              currentView === item.id
+                ? "text-accent bg-accent/8"
+                : "text-text-muted hover:text-text hover:bg-bg-hover"
+            }`}
+          >
+            <span className="w-4 text-center text-[14px]">{item.icon}</span>
+            {!c && <span>{item.label}</span>}
+          </button>
+        ))}
+      </nav>
+
+      {/* Account switcher (full) — expanded only */}
+      {!c && <AccountSwitcher />}
+
+      {/* Footer — connection status */}
+      <div className={`border-t border-border shrink-0 ${c ? "py-2 flex justify-center" : "px-3 py-2"}`}>
+        {c ? (
+          /* Collapsed: single dot */
+          <span
+            title={connected ? "Online" : "Offline"}
+            className={`w-2 h-2 rounded-full inline-block ${connected ? "bg-success" : "bg-danger"}`}
+          />
+        ) : (
+          /* Expanded: dot + label + note count */
+          <div className="text-[10px] text-text-dim">
             <div className="flex items-center gap-1.5">
               <span className={`w-1.5 h-1.5 rounded-full ${connected ? "bg-success" : "bg-danger"}`} />
               <span>{connected ? "online" : "offline"}</span>
@@ -83,8 +108,7 @@ export function Sidebar() {
             <div className="mt-0.5">{notes.length} notes</div>
           </div>
         )}
-      </aside>
-
-    </>
+      </div>
+    </aside>
   );
 }
diff --git a/src/stores/ui.ts b/src/stores/ui.ts
index 868843c..89e24ae 100644
--- a/src/stores/ui.ts
+++ b/src/stores/ui.ts
@@ -19,9 +19,11 @@ interface UIState {
   toggleSidebar: () => void;
 }
 
+const SIDEBAR_KEY = "wrystr_sidebar_collapsed";
+
 export const useUIStore = create<UIState>((set, _get) => ({
   currentView: "feed",
-  sidebarCollapsed: false,
+  sidebarCollapsed: localStorage.getItem(SIDEBAR_KEY) === "true",
   selectedPubkey: null,
   selectedNote: null,
   previousView: "feed",
@@ -34,5 +36,9 @@ export const useUIStore = create<UIState>((set, _get) => ({
     currentView: s.previousView !== s.currentView ? s.previousView : "feed",
     selectedNote: null,
   })),
-  toggleSidebar: () => set((s) => ({ sidebarCollapsed: !s.sidebarCollapsed })),
+  toggleSidebar: () => set((s) => {
+    const next = !s.sidebarCollapsed;
+    localStorage.setItem(SIDEBAR_KEY, String(next));
+    return { sidebarCollapsed: next };
+  }),
 }));