gsadmin/Firelink
1
0
Fork 0
mirror of https://github.com/nimbold/Firelink.git synced 2026-08-04 16:37:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): match Swift download workspace

Browse Source
This commit is contained in:
NimBold
2026-06-14 09:40:57 +03:30
parent 7ab592b3d4
commit c82757fc2e
4 changed files with 266 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop/src-tauri/tauri.conf.json
+4 -4
View File
@@ -13,10 +13,10 @@
"windows": [
{
"title": "Firelink",
"width": 1024,
"height": 768,
"minWidth": 800,
"minHeight": 600,
"width": 1280,
"height": 760,
"minWidth": 1180,
"minHeight": 720,
"titleBarStyle": "Overlay",
"trafficLightPosition": {
"x": 17,
apps/desktop/src/App.tsx
+43 -17
View File
@@ -33,6 +33,10 @@ const handleDeepLinks = (deepLinks: string[]) => {
function App() {
const [filter, setFilter] = useState<SidebarFilter>('all');
const [sidebarWidth, setSidebarWidth] = useState(() => {
const stored = Number(window.localStorage.getItem('firelink-sidebar-width'));
return Number.isFinite(stored) && stored >= 190 && stored <= 260 ? stored : 220;
});
const updateDownload = useDownloadStore(state => state.updateDownload);
const theme = useSettingsStore(state => state.theme);
const isSidebarVisible = useSettingsStore(state => state.isSidebarVisible);
@@ -50,6 +54,31 @@ function App() {
const previousSpeedLimit = useRef(globalSpeedLimit);
const maxConcurrentDownloads = useSettingsStore(state => state.maxConcurrentDownloads);
const startSidebarResize = (event: React.PointerEvent<HTMLDivElement>) => {
event.preventDefault();
const startX = event.clientX;
const startWidth = sidebarWidth;
const handlePointerMove = (moveEvent: PointerEvent) => {
const nextWidth = Math.min(260, Math.max(190, startWidth + moveEvent.clientX - startX));
setSidebarWidth(nextWidth);
};
const handlePointerUp = () => {
window.removeEventListener('pointermove', handlePointerMove);
window.removeEventListener('pointerup', handlePointerUp);
document.body.classList.remove('is-resizing');
};
document.body.classList.add('is-resizing');
window.addEventListener('pointermove', handlePointerMove);
window.addEventListener('pointerup', handlePointerUp);
};
useEffect(() => {
window.localStorage.setItem('firelink-sidebar-width', String(sidebarWidth));
}, [sidebarWidth]);
useEffect(() => {
useDownloadStore.getState().initDB();
}, []);
@@ -236,11 +265,12 @@ function App() {
return (
<div className="app-shell flex h-screen w-screen overflow-hidden text-text-primary">
<div
className={`app-sidebar-shell relative z-20 shrink-0 transition-all duration-300 ease-in-out ${
isSidebarVisible ? 'w-[244px] opacity-100' : 'w-0 opacity-0 pointer-events-none'
className={`app-sidebar-shell relative z-20 shrink-0 ${
isSidebarVisible ? 'opacity-100' : 'w-0 opacity-0 pointer-events-none'
}`}
style={isSidebarVisible ? { width: sidebarWidth } : undefined}
>
<div className="app-sidebar-panel h-full w-[244px]">
<div className="app-sidebar-panel h-full w-full">
<Sidebar
selectedFilter={filter}
onSelectFilter={(f) => {
@@ -249,6 +279,11 @@ function App() {
}}
/>
</div>
<div
className="sidebar-resize-handle"
onPointerDown={startSidebarResize}
title="Resize Sidebar"
/>
</div>
<div className="app-workspace relative z-0 flex-1 flex flex-col h-full overflow-hidden">
@@ -260,21 +295,12 @@ function App() {
</div>
{/* Status Bar */}
<div className="app-statusbar h-8 px-5 flex items-center justify-between text-[10px] text-text-muted font-medium shrink-0 border-t border-border-color">
<span className="flex items-center gap-2">
<span className="w-1.5 h-1.5 rounded-full bg-[hsl(var(--status-success))]"></span>
Ready
</span>
<div className="app-statusbar px-[14px] flex items-center justify-between text-text-muted shrink-0">
<span>Ready</span>
<div className="flex gap-3 tabular-nums">
<span className="flex items-center gap-1.5">
<span className="text-text-primary">{activeDownloadCount}</span> active
</span>
<span className="flex items-center gap-1.5">
<span className="text-text-primary">{queuedCount}</span> queued
</span>
<span className="flex items-center gap-1.5">
<span className="text-text-primary">{doneCount}</span> done
</span>
<span>{activeDownloadCount} active</span>
<span>{queuedCount} queued</span>
<span>{doneCount} done</span>
</div>
</div>
</div>
apps/desktop/src/components/DownloadTable.tsx
+69 -45
View File
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
import { useDownloadStore, DownloadItem } from '../store/useDownloadStore';
import { useSettingsStore } from '../store/useSettingsStore';
import { SidebarFilter } from './Sidebar';
import { Play, Pause, Plus, Trash2, FileText, Image as ImageIcon, Music, Film, Box, Archive, FileQuestion, MoreVertical, PanelLeft } from 'lucide-react';
import { Play, Pause, Plus, Trash2, FileText, Image as ImageIcon, Music, Film, Box, Archive, FileQuestion, MoreVertical, PanelLeft, ArrowDownCircle } from 'lucide-react';
import { invoke } from '@tauri-apps/api/core';
import { homeDir } from '@tauri-apps/api/path';
@@ -15,6 +15,31 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
const { isSidebarVisible, toggleSidebar } = useSettingsStore();
const [contextMenu, setContextMenu] = useState<{ x: number; y: number; id: string } | null>(null);
const [columnWidths, setColumnWidths] = useState([340, 100, 220, 100, 80, 170]);
const columnMinimums = [200, 80, 170, 80, 70, 120];
const tableGridTemplate = columnWidths.map(width => `${width}px`).join(' ');
const startColumnResize = (index: number, event: React.PointerEvent<HTMLDivElement>) => {
event.preventDefault();
event.stopPropagation();
const startX = event.clientX;
const startWidth = columnWidths[index];
const handlePointerMove = (moveEvent: PointerEvent) => {
const nextWidth = Math.max(columnMinimums[index], startWidth + moveEvent.clientX - startX);
setColumnWidths(widths => widths.map((width, columnIndex) => columnIndex === index ? nextWidth : width));
};
const handlePointerUp = () => {
window.removeEventListener('pointermove', handlePointerMove);
window.removeEventListener('pointerup', handlePointerUp);
document.body.classList.remove('is-resizing');
};
document.body.classList.add('is-resizing');
window.addEventListener('pointermove', handlePointerMove);
window.addEventListener('pointerup', handlePointerUp);
};
useEffect(() => {
const handleCloseMenu = () => setContextMenu(null);
@@ -161,42 +186,36 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
</div>
<div className="downloads-table flex-1 flex flex-col">
<div className="download-table-header">
<div>File Name</div>
<div>Size</div>
<div>Status</div>
<div>Speed</div>
<div>ETA</div>
<div className="download-cell-right">Date Added</div>
</div>
<div className="download-table-body">
{filteredDownloads.length === 0 ? (
<div className="h-full overflow-auto">
<div className="download-row download-empty-row">
<div className="download-file-cell">
<FileQuestion size={15} />
<span className="download-file-name">
No downloads yet · Use + to add a link
</span>
{filteredDownloads.length === 0 ? (
<div className="downloads-empty-state">
<ArrowDownCircle aria-hidden="true" />
<div className="downloads-empty-title">No Downloads</div>
<div className="downloads-empty-description">
Use Add or press <span className="keyboard-symbol">⌘</span>V to paste one or more links.
</div>
</div>
) : (
<>
<div className="download-table-scroll">
<div className="download-table-header" style={{ gridTemplateColumns: tableGridTemplate }}>
{['File Name', 'Size', 'Status', 'Speed', 'ETA', 'Date Added'].map((label, index) => (
<div key={label} className={index === 5 ? 'download-cell-right' : undefined}>
<span>{label}</span>
<div
className="column-resize-handle"
onPointerDown={(event) => startColumnResize(index, event)}
/>
</div>
<div>—</div>
<div>Idle</div>
<div>—</div>
<div>—</div>
<div className="download-cell-right">—</div>
</div>
{Array.from({ length: 12 }).map((_, index) => (
<div key={index} className="download-ghost-row" />
))}
</div>
) : (
<div className="download-table-body">
<div className="h-full overflow-auto">
{filteredDownloads.map(d => (
<div
key={d.id}
className="download-row group cursor-default relative"
style={{ gridTemplateColumns: tableGridTemplate }}
onContextMenu={(e) => {
e.preventDefault();
setContextMenu({ x: e.clientX, y: e.clientY, id: d.id });
@@ -213,25 +232,28 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
<div>
<span className="tabular-nums">
{d.status === 'downloading' || d.status === 'paused'
? `${((d.fraction || 0) * parseInt((d.size || '').replace(/[^0-9.]/g, '') || '0')).toFixed(1)} GB / ${d.size || '-'}`
: d.size || '-'}
{d.size && d.size !== '-' ? d.size : 'Unknown'}
</span>
</div>
<div>
<div className="flex flex-col justify-center gap-1.5">
<div className="download-progress-status">
<span className={`truncate text-[12px] ${d.status === 'completed' ? 'download-status-completed' : d.status === 'paused' ? 'download-status-paused' : d.status === 'failed' ? 'download-status-failed' : 'download-status-downloading'}`}>
{d.status === 'downloading' || d.status === 'paused' ? `${((d.fraction || 0) * 100).toFixed(0)}%` : d.status.charAt(0).toUpperCase() + d.status.slice(1)}
</span>
</div>
{(d.status === 'downloading' || d.status === 'paused') && (
<div className="download-status-cell">
{d.status === 'completed' ? (
<span className="download-status download-status-completed">Completed</span>
) : (
<>
<div className="download-progress-track">
<div className={`download-progress-fill transition-all duration-300 ease-out ${d.status === 'paused' ? 'paused' : ''}`} style={{ width: `${(d.fraction || 0) * 100}%` }}></div>
<div
className={`download-progress-fill ${d.status === 'paused' ? 'paused' : ''}`}
style={{ width: `${(d.fraction || 0) * 100}%` }}
/>
</div>
)}
</div>
<span className={`download-status ${d.status === 'paused' ? 'download-status-paused' : d.status === 'failed' ? 'download-status-failed' : d.status === 'downloading' ? 'download-status-downloading' : ''}`}>
{d.status === 'downloading'
? `${((d.fraction || 0) * 100).toFixed(0)}%`
: d.status.charAt(0).toUpperCase() + d.status.slice(1)}
</span>
</>
)}
</div>
<div>
@@ -276,8 +298,10 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter }) => {
<div key={`ghost-${index}`} className="download-ghost-row" />
))}
</div>
)}
</div>
</div>
</div>
</>
)}
</div>
{/* Floating Context Menu */}
apps/desktop/src/index.css
+150 -28
View File
@@ -104,6 +104,12 @@
height: 100%;
}
body.is-resizing,
body.is-resizing * {
cursor: col-resize !important;
user-select: none !important;
}
body {
margin: 0;
background-color: transparent;
@@ -304,6 +310,32 @@
background: hsl(0 0% 11%);
}
.sidebar-resize-handle {
position: absolute;
top: 18px;
right: -4px;
bottom: 18px;
z-index: 60;
width: 8px;
cursor: col-resize;
}
.sidebar-resize-handle::after {
content: '';
position: absolute;
top: 0;
right: 3px;
bottom: 0;
width: 1px;
background: transparent;
transition: background-color 100ms ease;
}
.sidebar-resize-handle:hover::after,
body.is-resizing .sidebar-resize-handle::after {
background: hsl(var(--accent-color) / 0.55);
}
.app-sidebar-panel {
position: relative;
display: flex;
@@ -599,18 +631,18 @@
}
.downloads-content-header {
height: 56px;
height: 58px;
display: flex;
align-items: center;
padding: 0 18px;
padding: 0 16px;
background: hsl(var(--main-bg));
}
.downloads-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 16px;
gap: 9px;
font-size: 17px;
line-height: 1;
font-weight: 700;
color: hsl(var(--text-primary));
@@ -638,17 +670,95 @@
background: hsl(var(--main-bg));
}
.download-table-header {
height: 34px;
display: grid;
grid-template-columns: minmax(260px, 1fr) 132px 220px 126px 100px 190px;
.downloads-empty-state {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 18px;
border-top: 1px solid hsl(var(--border-color));
border-bottom: 1px solid hsl(var(--border-color));
justify-content: center;
padding: 32px;
color: hsl(var(--text-muted));
text-align: center;
}
.downloads-empty-state > svg {
width: 38px;
height: 38px;
margin-bottom: 12px;
stroke-width: 1.35;
color: hsl(var(--text-muted));
}
.downloads-empty-title {
margin-bottom: 5px;
color: hsl(var(--text-secondary));
font-size: 15px;
font-weight: 600;
}
.downloads-empty-description {
max-width: 360px;
font-size: 12px;
font-weight: 700;
line-height: 1.45;
}
.keyboard-symbol {
color: hsl(var(--text-secondary));
font-size: 13px;
font-weight: 600;
}
.download-table-header {
height: 32px;
display: grid;
align-items: center;
column-gap: 0;
padding: 0 16px;
border-bottom: 1px solid hsl(var(--border-color));
color: hsl(var(--text-primary));
font-size: 12px;
font-weight: 600;
}
.download-table-scroll {
flex: 1;
min-height: 0;
overflow-x: auto;
overflow-y: hidden;
}
.download-table-header,
.download-row {
width: max-content;
min-width: 100%;
}
.download-table-header > div {
position: relative;
height: 100%;
display: flex;
align-items: center;
min-width: 0;
}
.download-table-header > div:not(:first-child) {
border-left: 1px solid hsl(var(--border-color));
padding-left: 12px;
}
.column-resize-handle {
position: absolute;
top: 0;
right: -4px;
bottom: 0;
z-index: 5;
width: 8px;
cursor: col-resize;
}
.column-resize-handle:hover {
background: hsl(var(--accent-color) / 0.18);
}
.download-table-body {
@@ -657,18 +767,17 @@
}
.download-row {
height: 34px;
height: 31px;
display: grid;
grid-template-columns: minmax(260px, 1fr) 132px 220px 126px 100px 190px;
align-items: center;
padding: 0 18px;
border-bottom: 1px solid hsl(0 0% 100% / 0.055);
color: hsl(var(--text-secondary));
padding: 0 16px;
border-bottom: 1px solid hsl(0 0% 100% / 0.045);
color: hsl(var(--text-primary));
font-size: 12px;
}
.download-row:nth-child(even) {
background: hsl(0 0% 100% / 0.025);
background: hsl(0 0% 100% / 0.035);
}
.download-row:hover {
@@ -678,7 +787,7 @@
.download-file-cell {
display: flex;
align-items: center;
gap: 12px;
gap: 9px;
min-width: 0;
}
@@ -688,7 +797,7 @@
text-overflow: ellipsis;
white-space: nowrap;
color: hsl(var(--text-primary));
font-weight: 600;
font-weight: 650;
}
.download-cell-muted {
@@ -712,7 +821,7 @@
}
.download-ghost-row {
height: 34px;
height: 31px;
border-bottom: 1px solid hsl(0 0% 100% / 0.045);
}
@@ -720,19 +829,28 @@
background: hsl(0 0% 100% / 0.025);
}
.download-progress-status {
.download-status-cell {
display: flex;
align-items: center;
gap: 10px;
gap: 8px;
padding-right: 12px;
}
.download-status-cell > span {
min-width: 48px;
flex-shrink: 0;
font-size: 10px;
font-variant-numeric: tabular-nums;
}
.download-progress-track {
width: 128px;
height: 7px;
border-radius: 999px;
width: 100%;
min-width: 58px;
height: 14px;
border-radius: 4px;
overflow: hidden;
background: hsl(0 0% 100% / 0.12);
box-shadow: inset 0 1px 1px hsl(0 0% 0% / 0.35);
background: hsl(0 0% 100% / 0.09);
box-shadow: inset 0 1px 1px hsl(0 0% 0% / 0.22);
}
.download-progress-fill {
@@ -745,6 +863,10 @@
background: hsl(28 95% 56%);
}
.download-status {
font-weight: 500;
}
.download-status-paused {
color: hsl(var(--status-paused));
font-weight: 600;