From e52e885193ac1579c769c55b0abec657bf904b09 Mon Sep 17 00:00:00 2001
From: NimBold <NimBold@users.noreply.github.com>
Date: Wed, 8 Jul 2026 16:50:06 +0330
Subject: [PATCH] fix(ui): keep sidebar toggle accessible across views

Move the collapsed sidebar reveal control into the app shell so Settings, Scheduler, Speed Limiter, Logs, and Downloads all have a recovery path. Keep separate collapsed spacing for macOS and Windows/Linux window controls to avoid overlap.\n\nFixes #9
---
 src/App.tsx                      | 21 ++++++++++++++++++++-
 src/components/DownloadTable.tsx | 18 ++----------------
 src/index.css                    | 18 +++++++++++++++++-
 3 files changed, 39 insertions(+), 18 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e08c2b5..c4f2d01 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -22,6 +22,7 @@ import { useToast } from "./contexts/ToastContext";
 import { openUrl } from '@tauri-apps/plugin-opener';
 import { usePlatformInfo } from './utils/platform';
 import type { PostQueueAction } from './bindings/PostQueueAction';
+import { PanelLeft } from 'lucide-react';
 
 let automaticUpdateCheckStarted = false;
 const processingScheduleKeys = new Set<string>();
@@ -86,6 +87,7 @@ function App() {
 
   const theme = useSettingsStore(state => state.theme);
   const isSidebarVisible = useSettingsStore(state => state.isSidebarVisible);
+  const toggleSidebar = useSettingsStore(state => state.toggleSidebar);
   const activeView = useSettingsStore(state => state.activeView);
   const appFontSize = useSettingsStore(state => state.appFontSize);
   const listRowDensity = useSettingsStore(state => state.listRowDensity);
@@ -114,6 +116,8 @@ function App() {
     download.status === 'retrying'
   ).length;
   const { addToast } = useToast();
+  const isMacUserAgent = navigator.userAgent.includes('Mac');
+  const usesCustomWindowControls = !isMacUserAgent && platform.os !== 'macos';
 
   const acknowledgePairingTokenChange = () => {
     invoke('acknowledge_pairing_token_change').catch(error => {
@@ -666,7 +670,22 @@ function App() {
         />
       </div>
 
-      <div className="app-workspace relative z-0 flex-1 flex flex-col h-full overflow-hidden">
+      <div
+        className={`app-workspace relative z-0 flex-1 flex flex-col h-full overflow-hidden ${
+          !isSidebarVisible ? 'app-workspace--sidebar-collapsed' : ''
+        } ${usesCustomWindowControls ? 'app-workspace--custom-window-controls' : ''}`}
+      >
+        {!isSidebarVisible && (
+          <button
+            type="button"
+            onClick={toggleSidebar}
+            className="app-icon-button app-sidebar-reveal-button h-7 w-7"
+            title="Show Sidebar"
+            aria-label="Show Sidebar"
+          >
+            <PanelLeft size={16} strokeWidth={2} />
+          </button>
+        )}
         <div className="flex-1 flex flex-col overflow-hidden relative">
           {activeView === 'downloads' && <DownloadTable filter={filter} />}
           {activeView === 'settings' && <SettingsView />}
diff --git a/src/components/DownloadTable.tsx b/src/components/DownloadTable.tsx
index a8fae67..7aa4f5f 100644
--- a/src/components/DownloadTable.tsx
+++ b/src/components/DownloadTable.tsx
@@ -4,7 +4,7 @@ import { useToast } from '../contexts/ToastContext';
 import { useSettingsStore } from '../store/useSettingsStore';
 import { SidebarFilter } from './Sidebar';
 import { useAutoAnimate } from '@formkit/auto-animate/react';
-import { Play, Pause, Plus, FileText, Image as ImageIcon, Music, Film, Box, Archive, FileQuestion, PanelLeft, ArrowDownCircle, Command, ChevronRight, ChevronUp, ChevronDown } from 'lucide-react';
+import { Play, Pause, Plus, FileText, Image as ImageIcon, Music, Film, Box, Archive, FileQuestion, ArrowDownCircle, Command, ChevronRight, ChevronUp, ChevronDown } from 'lucide-react';
 import { DownloadItem as DownloadItemComponent } from './DownloadItem';
 import { invokeCommand as invoke } from '../ipc';
 import {
@@ -18,7 +18,6 @@ import {
   startActionLabel
 } from '../utils/downloadActions';
 import { isActiveDownloadStatus } from '../utils/downloads';
-import { usePlatformInfo } from '../utils/platform';
 
 interface DownloadTableProps {
   filter: SidebarFilter;
@@ -29,12 +28,8 @@ const COLUMN_WIDTHS_STORAGE_KEY = 'firelink-download-column-widths';
 
 export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
   const { downloads, queues, assignToQueue, toggleAddModal, openDeleteModal, redownload } = useDownloadStore();
-  const { isSidebarVisible, toggleSidebar } = useSettingsStore();
   const { addToast } = useToast();
-  const platform = usePlatformInfo();
-
   const isMac = navigator.userAgent.includes('Mac');
-  const usesCustomWindowControls = !isMac && platform.os !== 'macos';
 
   const [contextMenu, setContextMenu] = useState<{ x: number; y: number; id: string } | null>(null);
   const [animationParent] = useAutoAnimate<HTMLDivElement>();
@@ -377,18 +372,9 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
   return (
     <div className="downloads-view flex-1 flex flex-col h-full min-w-0">
       <div
-        className={`main-titlebar ${!isSidebarVisible ? (usesCustomWindowControls ? 'main-titlebar--custom-controls-collapsed' : 'pl-[88px]') : ''}`}
+        className="main-titlebar"
         data-tauri-drag-region
       >
-        {!isSidebarVisible && (
-          <button
-            onClick={toggleSidebar}
-            className="app-icon-button relative z-50 h-7 w-7 mr-2"
-            title="Show Sidebar"
-          >
-            <PanelLeft size={16} strokeWidth={2} />
-          </button>
-        )}
         <div className="main-titlebar-title cursor-default" data-tauri-drag-region>Firelink</div>
 
         <div className="main-control-group">
diff --git a/src/index.css b/src/index.css
index 728773d..cd6d5b4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1037,6 +1037,18 @@ html[data-list-density="relaxed"] {
     background: hsl(var(--workspace-bg));
   }
 
+  .app-sidebar-reveal-button {
+    position: absolute;
+    top: 12px;
+    left: 88px;
+    z-index: 80;
+    -webkit-app-region: no-drag;
+  }
+
+  .app-workspace--custom-window-controls .app-sidebar-reveal-button {
+    left: 124px;
+  }
+
   .app-statusbar {
     height: 26px;
     font-size: 10px;
@@ -1535,10 +1547,14 @@ html[data-list-density="relaxed"] {
   background: hsl(var(--statusbar-bg));
 }
 
-.main-titlebar--custom-controls-collapsed {
+.app-workspace--sidebar-collapsed .main-titlebar {
   padding-left: 124px;
 }
 
+.app-workspace--sidebar-collapsed.app-workspace--custom-window-controls .main-titlebar {
+  padding-left: 160px;
+}
+
 .main-titlebar-title {
   font-size: 14px;
   font-weight: 700;