mirror of
https://github.com/nimbold/Firelink.git
synced 2026-07-26 12:08:27 +00:00
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
This commit is contained in:
+20
-1
@@ -22,6 +22,7 @@ import { useToast } from "./contexts/ToastContext";
|
|||||||
import { openUrl } from '@tauri-apps/plugin-opener';
|
import { openUrl } from '@tauri-apps/plugin-opener';
|
||||||
import { usePlatformInfo } from './utils/platform';
|
import { usePlatformInfo } from './utils/platform';
|
||||||
import type { PostQueueAction } from './bindings/PostQueueAction';
|
import type { PostQueueAction } from './bindings/PostQueueAction';
|
||||||
|
import { PanelLeft } from 'lucide-react';
|
||||||
|
|
||||||
let automaticUpdateCheckStarted = false;
|
let automaticUpdateCheckStarted = false;
|
||||||
const processingScheduleKeys = new Set<string>();
|
const processingScheduleKeys = new Set<string>();
|
||||||
@@ -86,6 +87,7 @@ function App() {
|
|||||||
|
|
||||||
const theme = useSettingsStore(state => state.theme);
|
const theme = useSettingsStore(state => state.theme);
|
||||||
const isSidebarVisible = useSettingsStore(state => state.isSidebarVisible);
|
const isSidebarVisible = useSettingsStore(state => state.isSidebarVisible);
|
||||||
|
const toggleSidebar = useSettingsStore(state => state.toggleSidebar);
|
||||||
const activeView = useSettingsStore(state => state.activeView);
|
const activeView = useSettingsStore(state => state.activeView);
|
||||||
const appFontSize = useSettingsStore(state => state.appFontSize);
|
const appFontSize = useSettingsStore(state => state.appFontSize);
|
||||||
const listRowDensity = useSettingsStore(state => state.listRowDensity);
|
const listRowDensity = useSettingsStore(state => state.listRowDensity);
|
||||||
@@ -114,6 +116,8 @@ function App() {
|
|||||||
download.status === 'retrying'
|
download.status === 'retrying'
|
||||||
).length;
|
).length;
|
||||||
const { addToast } = useToast();
|
const { addToast } = useToast();
|
||||||
|
const isMacUserAgent = navigator.userAgent.includes('Mac');
|
||||||
|
const usesCustomWindowControls = !isMacUserAgent && platform.os !== 'macos';
|
||||||
|
|
||||||
const acknowledgePairingTokenChange = () => {
|
const acknowledgePairingTokenChange = () => {
|
||||||
invoke('acknowledge_pairing_token_change').catch(error => {
|
invoke('acknowledge_pairing_token_change').catch(error => {
|
||||||
@@ -666,7 +670,22 @@ function App() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<div className="flex-1 flex flex-col overflow-hidden relative">
|
||||||
{activeView === 'downloads' && <DownloadTable filter={filter} />}
|
{activeView === 'downloads' && <DownloadTable filter={filter} />}
|
||||||
{activeView === 'settings' && <SettingsView />}
|
{activeView === 'settings' && <SettingsView />}
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { useToast } from '../contexts/ToastContext';
|
|||||||
import { useSettingsStore } from '../store/useSettingsStore';
|
import { useSettingsStore } from '../store/useSettingsStore';
|
||||||
import { SidebarFilter } from './Sidebar';
|
import { SidebarFilter } from './Sidebar';
|
||||||
import { useAutoAnimate } from '@formkit/auto-animate/react';
|
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 { DownloadItem as DownloadItemComponent } from './DownloadItem';
|
||||||
import { invokeCommand as invoke } from '../ipc';
|
import { invokeCommand as invoke } from '../ipc';
|
||||||
import {
|
import {
|
||||||
@@ -18,7 +18,6 @@ import {
|
|||||||
startActionLabel
|
startActionLabel
|
||||||
} from '../utils/downloadActions';
|
} from '../utils/downloadActions';
|
||||||
import { isActiveDownloadStatus } from '../utils/downloads';
|
import { isActiveDownloadStatus } from '../utils/downloads';
|
||||||
import { usePlatformInfo } from '../utils/platform';
|
|
||||||
|
|
||||||
interface DownloadTableProps {
|
interface DownloadTableProps {
|
||||||
filter: SidebarFilter;
|
filter: SidebarFilter;
|
||||||
@@ -29,12 +28,8 @@ const COLUMN_WIDTHS_STORAGE_KEY = 'firelink-download-column-widths';
|
|||||||
|
|
||||||
export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
||||||
const { downloads, queues, assignToQueue, toggleAddModal, openDeleteModal, redownload } = useDownloadStore();
|
const { downloads, queues, assignToQueue, toggleAddModal, openDeleteModal, redownload } = useDownloadStore();
|
||||||
const { isSidebarVisible, toggleSidebar } = useSettingsStore();
|
|
||||||
const { addToast } = useToast();
|
const { addToast } = useToast();
|
||||||
const platform = usePlatformInfo();
|
|
||||||
|
|
||||||
const isMac = navigator.userAgent.includes('Mac');
|
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 [contextMenu, setContextMenu] = useState<{ x: number; y: number; id: string } | null>(null);
|
||||||
const [animationParent] = useAutoAnimate<HTMLDivElement>();
|
const [animationParent] = useAutoAnimate<HTMLDivElement>();
|
||||||
@@ -377,18 +372,9 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
|
|||||||
return (
|
return (
|
||||||
<div className="downloads-view flex-1 flex flex-col h-full min-w-0">
|
<div className="downloads-view flex-1 flex flex-col h-full min-w-0">
|
||||||
<div
|
<div
|
||||||
className={`main-titlebar ${!isSidebarVisible ? (usesCustomWindowControls ? 'main-titlebar--custom-controls-collapsed' : 'pl-[88px]') : ''}`}
|
className="main-titlebar"
|
||||||
data-tauri-drag-region
|
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-titlebar-title cursor-default" data-tauri-drag-region>Firelink</div>
|
||||||
|
|
||||||
<div className="main-control-group">
|
<div className="main-control-group">
|
||||||
|
|||||||
+17
-1
@@ -1037,6 +1037,18 @@ html[data-list-density="relaxed"] {
|
|||||||
background: hsl(var(--workspace-bg));
|
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 {
|
.app-statusbar {
|
||||||
height: 26px;
|
height: 26px;
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
@@ -1535,10 +1547,14 @@ html[data-list-density="relaxed"] {
|
|||||||
background: hsl(var(--statusbar-bg));
|
background: hsl(var(--statusbar-bg));
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-titlebar--custom-controls-collapsed {
|
.app-workspace--sidebar-collapsed .main-titlebar {
|
||||||
padding-left: 124px;
|
padding-left: 124px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-workspace--sidebar-collapsed.app-workspace--custom-window-controls .main-titlebar {
|
||||||
|
padding-left: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
.main-titlebar-title {
|
.main-titlebar-title {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|||||||
Reference in New Issue
Block a user