feat(ui): match Swift download workspace

apps/desktop/src-tauri/tauri.conf.json

@@ -13,10 +13,10 @@
     "windows": [
       {
         "title": "Firelink",
-        "width": 1024,
+        "width": 1280,
-        "height": 768,
+        "height": 760,
-        "minWidth": 800,
+        "minWidth": 1180,
-        "minHeight": 600,
+        "minHeight": 720,
         "titleBarStyle": "Overlay",
         "trafficLightPosition": {
           "x": 17,

apps/desktop/src/App.tsx

@@ -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 ${
+        className={`app-sidebar-shell relative z-20 shrink-0 ${
-          isSidebarVisible ? 'w-[244px] opacity-100' : 'w-0 opacity-0 pointer-events-none'
+          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">
+        <div className="app-statusbar px-[14px] flex items-center justify-between text-text-muted shrink-0">
-          <span className="flex items-center gap-2">
+          <span>Ready</span>
-            <span className="w-1.5 h-1.5 rounded-full bg-[hsl(var(--status-success))]"></span>
-            Ready
-          </span>
           <div className="flex gap-3 tabular-nums">
-            <span className="flex items-center gap-1.5">
+            <span>{activeDownloadCount} active</span>
-              <span className="text-text-primary">{activeDownloadCount}</span> active
+            <span>{queuedCount} queued</span>
-            </span>
+            <span>{doneCount} done</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>
           </div>
         </div>
       </div>

apps/desktop/src/components/DownloadTable.tsx

@@ -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">
+        {filteredDownloads.length === 0 ? (
-          <div>File Name</div>
+          <div className="downloads-empty-state">
-          <div>Size</div>
+            <ArrowDownCircle aria-hidden="true" />
-          <div>Status</div>
+            <div className="downloads-empty-title">No Downloads</div>
-          <div>Speed</div>
+            <div className="downloads-empty-description">
-          <div>ETA</div>
+              Use Add or press <span className="keyboard-symbol">⌘</span>V to paste one or more links.
-          <div className="download-cell-right">Date Added</div>
+            </div>
-        </div>
+          </div>
-
+        ) : (
-        <div className="download-table-body">
+          <>
-          {filteredDownloads.length === 0 ? (
+            <div className="download-table-scroll">
-            <div className="h-full overflow-auto">
+            <div className="download-table-header" style={{ gridTemplateColumns: tableGridTemplate }}>
-              <div className="download-row download-empty-row">
+              {['File Name', 'Size', 'Status', 'Speed', 'ETA', 'Date Added'].map((label, index) => (
-                <div className="download-file-cell">
+                <div key={label} className={index === 5 ? 'download-cell-right' : undefined}>
-                  <FileQuestion size={15} />
+                  <span>{label}</span>
-                  <span className="download-file-name">
+                  <div
-                    No downloads yet · Use + to add a link
+                    className="column-resize-handle"
-                  </span>
+                    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.size && d.size !== '-' ? d.size : 'Unknown'}
-                        ? `${((d.fraction || 0) * parseInt((d.size || '').replace(/[^0-9.]/g, '') || '0')).toFixed(1)} GB / ${d.size || '-'}`
-                        : d.size || '-'}
                     </span>
                   </div>
                   
-                  <div>
+                  <div className="download-status-cell">
-                    <div className="flex flex-col justify-center gap-1.5">
+                    {d.status === 'completed' ? (
-                      <div className="download-progress-status">
+                      <span className="download-status download-status-completed">Completed</span>
-                        <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-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>
-                      )}
+                        <span className={`download-status ${d.status === 'paused' ? 'download-status-paused' : d.status === 'failed' ? 'download-status-failed' : d.status === 'downloading' ? 'download-status-downloading' : ''}`}>
-                    </div>
+                          {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

@@ -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;
+    gap: 9px;
-    font-size: 16px;
+    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 {
+  .downloads-empty-state {
-    height: 34px;
+    flex: 1;
-    display: grid;
+    min-height: 0;
-    grid-template-columns: minmax(260px, 1fr) 132px 220px 126px 100px 190px;
+    display: flex;
+    flex-direction: column;
     align-items: center;
-    padding: 0 18px;
+    justify-content: center;
-    border-top: 1px solid hsl(var(--border-color));
+    padding: 32px;
-    border-bottom: 1px solid hsl(var(--border-color));
+    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;
+    padding: 0 16px;
-    border-bottom: 1px solid hsl(0 0% 100% / 0.055);
+    border-bottom: 1px solid hsl(0 0% 100% / 0.045);
-    color: hsl(var(--text-secondary));
+    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;
+    width: 100%;
-    height: 7px;
+    min-width: 58px;
-    border-radius: 999px;
+    height: 14px;
+    border-radius: 4px;
     overflow: hidden;
-    background: hsl(0 0% 100% / 0.12);
+    background: hsl(0 0% 100% / 0.09);
-    box-shadow: inset 0 1px 1px hsl(0 0% 0% / 0.35);
+    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;