From 64aaf10febd028a282b876d56568375a0048900e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CBeeRad=E2=80=9D?= <bradwmorriswork@gmail.com>
Date: Tue, 17 Mar 2026 20:25:34 +1100
Subject: [PATCH] fix: center view items vertically in left toolbar

Top actions (collapse/search/add/refresh) stay at top.
View items (nodes/skills/map/etc) sit in a flex:1 middle
section, vertically centered with a subtle top border separator.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/components/layout/LeftToolbar.tsx | 56 ++++++++++++++-------------
 1 file changed, 30 insertions(+), 26 deletions(-)

diff --git a/src/components/layout/LeftToolbar.tsx b/src/components/layout/LeftToolbar.tsx
index edeb3a2..69ae3a9 100644
--- a/src/components/layout/LeftToolbar.tsx
+++ b/src/components/layout/LeftToolbar.tsx
@@ -120,40 +120,44 @@ export default function LeftToolbar({
         background: 'transparent',
         display: 'flex',
         flexDirection: 'column',
-        justifyContent: 'space-between',
         padding: '12px 8px',
         flexShrink: 0,
         transition: 'width 0.2s ease',
         overflow: 'hidden',
       }}
     >
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
-        <NavButton
-          icon={isExpanded ? PanelLeftClose : PanelLeftOpen}
-          label={isExpanded ? 'Collapse' : 'Expand'}
-          expanded={isExpanded}
-          onClick={onToggleExpanded}
-        />
-
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
-          <NavButton icon={Search} label="Search" expanded={isExpanded} onClick={onSearchClick} />
-          <NavButton icon={Plus} label="Add Stuff" expanded={isExpanded} onClick={onAddStuffClick} />
-          <NavButton icon={RefreshCw} label="Refresh" expanded={isExpanded} onClick={onRefreshClick} />
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '10px', height: '100%' }}>
+        {/* Top: collapse + actions */}
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          <NavButton
+            icon={isExpanded ? PanelLeftClose : PanelLeftOpen}
+            label={isExpanded ? 'Collapse' : 'Expand'}
+            expanded={isExpanded}
+            onClick={onToggleExpanded}
+          />
+          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+            <NavButton icon={Search} label="Search" expanded={isExpanded} onClick={onSearchClick} />
+            <NavButton icon={Plus} label="Add Stuff" expanded={isExpanded} onClick={onAddStuffClick} />
+            <NavButton icon={RefreshCw} label="Refresh" expanded={isExpanded} onClick={onRefreshClick} />
+          </div>
         </div>
 
-        <div style={{ borderTop: '1px solid var(--rah-border)', paddingTop: '14px', marginTop: '10px' }}>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px', paddingTop: '4px' }}>
-            {VIEW_ITEMS.map((item) => (
-              <NavButton
-                key={`${item.paneType}-${item.label}`}
-                icon={item.icon}
-                label={item.label}
-                expanded={isExpanded}
-                active={activeTabType === item.paneType || openTabTypes.has(item.paneType)}
-                onClick={() => onPaneTypeClick(item.paneType)}
-                activeTone="green"
-              />
-            ))}
+        {/* Middle: view items, vertically centered */}
+        <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center', minHeight: 0 }}>
+          <div style={{ borderTop: '1px solid var(--rah-border)', paddingTop: '14px' }}>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+              {VIEW_ITEMS.map((item) => (
+                <NavButton
+                  key={`${item.paneType}-${item.label}`}
+                  icon={item.icon}
+                  label={item.label}
+                  expanded={isExpanded}
+                  active={activeTabType === item.paneType || openTabTypes.has(item.paneType)}
+                  onClick={() => onPaneTypeClick(item.paneType)}
+                  activeTone="green"
+                />
+              ))}
+            </div>
           </div>
         </div>
       </div>