feat(S04/T01): Moved sidebar collapse toggle from nav bottom into brand…

- src/frontend/src/components/Sidebar.tsx

src/frontend/src/components/Sidebar.tsx

@@ -59,13 +59,49 @@ export function Sidebar() {
           height: 'var(--header-height)',
           display: 'flex',
           alignItems: 'center',
-          padding: collapsed ? '0 var(--space-3)' : '0 var(--space-4)',
+          padding: collapsed ? '0 var(--space-1)' : '0 var(--space-4)',
           borderBottom: '1px solid var(--border)',
-          gap: 'var(--space-2)',
+          gap: collapsed ? '2px' : 'var(--space-2)',
-          justifyContent: collapsed ? 'center' : 'flex-start',
+        }}
+      >
+        <NavLink
+          to="/"
+          aria-label="Go to Channels"
+          style={{
+            textDecoration: 'none',
+            color: 'inherit',
+            display: 'flex',
+            alignItems: 'center',
           }}
         >
           <TubearrLogo collapsed={collapsed} />
+        </NavLink>
+        <button
+          onClick={() => setCollapsed(!collapsed)}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 'var(--space-1)',
+            borderRadius: 'var(--radius-md)',
+            color: 'var(--text-muted)',
+            cursor: 'pointer',
+            transition: 'color var(--transition-fast), background-color var(--transition-fast)',
+            marginLeft: 'auto',
+            flexShrink: 0,
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.color = 'var(--text-secondary)';
+            e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.color = 'var(--text-muted)';
+            e.currentTarget.style.backgroundColor = 'transparent';
+          }}
+          aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+        >
+          {collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
+        </button>
       </div>
 
       {/* Nav links */}
@@ -105,34 +141,6 @@ export function Sidebar() {
           </NavLink>
         ))}
       </div>
-
-      {/* Collapse toggle */}
-      <button
-        onClick={() => setCollapsed(!collapsed)}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: 'var(--space-2)',
-          padding: 'var(--space-3)',
-          margin: 'var(--space-2)',
-          borderRadius: 'var(--radius-md)',
-          color: 'var(--text-muted)',
-          cursor: 'pointer',
-          transition: 'color var(--transition-fast)',
-        }}
-        onMouseEnter={(e) => {
-          e.currentTarget.style.color = 'var(--text-secondary)';
-          e.currentTarget.style.backgroundColor = 'var(--bg-hover)';
-        }}
-        onMouseLeave={(e) => {
-          e.currentTarget.style.color = 'var(--text-muted)';
-          e.currentTarget.style.backgroundColor = 'transparent';
-        }}
-        aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-      >
-        {collapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
-      </button>
     </nav>
   );
 }