From 7e9de5f03efad0aff451b04a247c6cd213a9a29b Mon Sep 17 00:00:00 2001
From: Tapiwa Muzira <tapsmuzira@gmail.com>
Date: Thu, 18 Jun 2026 00:42:52 +0200
Subject: [PATCH] Collapse collections and folders by default in the sidebar,
 and enlarge the tree icons.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 client/src/components/Sidebar.tsx | 14 ++++++++------
 client/src/styles.css             |  3 ++-
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/src/components/Sidebar.tsx b/client/src/components/Sidebar.tsx
index 8927987..379e02d 100644
--- a/client/src/components/Sidebar.tsx
+++ b/client/src/components/Sidebar.tsx
@@ -99,7 +99,9 @@ export function Sidebar({
   onImportFile,
   onImportFolder,
 }: Props) {
-  const [collapsed, setCollapsed] = useState<Record<string, boolean>>({});
+  // Tracks which collections/folders are expanded; absent keys are collapsed
+  // (the default), so the tree opens collapsed.
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
   const [menu, setMenu] = useState<MenuState | null>(null);
   const [importMenu, setImportMenu] = useState<{ x: number; y: number } | null>(null);
   const [drag, setDrag] = useState<DragItem | null>(null);
@@ -109,7 +111,7 @@ export function Sidebar({
     JSON.stringify(sel) === JSON.stringify(selection);
 
   const toggle = (key: string) =>
-    setCollapsed((c) => ({ ...c, [key]: !c[key] }));
+    setExpanded((c) => ({ ...c, [key]: !c[key] }));
 
   /** Whether the dragged item may drop into the given node (not a no-op/cycle). */
   function canDrop(item: DragItem, cid: string, folderPath: string[]): boolean {
@@ -286,7 +288,7 @@ export function Sidebar({
           {...dropTarget(collectionId, folderPath, key)}
         >
           <button className="icon-btn chevron" onClick={() => toggle(key)}>
-            {collapsed[key] ? '▸' : '▾'}
+            {expanded[key] ? '▾' : '▸'}
           </button>
           <button className="row-label" onClick={() => onSelect(sel)}>
             <span className="folder-tag">▥</span>
@@ -300,7 +302,7 @@ export function Sidebar({
             ⋯
           </button>
         </div>
-        {!collapsed[key] &&
+        {expanded[key] &&
           renderChildren(collectionId, folderPath, folder, depth + 1)}
       </div>
     );
@@ -330,7 +332,7 @@ export function Sidebar({
       <div key={collection.id}>
         <div className={cls} {...dropTarget(collection.id, [], key)}>
           <button className="icon-btn chevron" onClick={() => toggle(key)}>
-            {collapsed[key] ? '▸' : '▾'}
+            {expanded[key] ? '▾' : '▸'}
           </button>
           <button
             className="row-label"
@@ -355,7 +357,7 @@ export function Sidebar({
             ⋯
           </button>
         </div>
-        {!collapsed[key] && renderChildren(collection.id, [], collection, 1)}
+        {expanded[key] && renderChildren(collection.id, [], collection, 1)}
       </div>
     );
   }
diff --git a/client/src/styles.css b/client/src/styles.css
index b796bef..e0bd7f8 100644
--- a/client/src/styles.css
+++ b/client/src/styles.css
@@ -182,7 +182,7 @@ pre,
 }
 
 .folder-tag {
-  font-size: 0.78rem;
+  font-size: 0.95rem;
   color: var(--text-muted);
 }
 
@@ -659,6 +659,7 @@ input[type='radio'] {
   border-radius: 4px;
   padding: 3px 7px;
   line-height: 1;
+  font-size: 1.05rem;
 }
 
 .icon-btn:hover {