From 28df7ca809cfd774ed3c516624f0c5c49c70702f Mon Sep 17 00:00:00 2001 From: NimBold Date: Fri, 19 Jun 2026 07:42:59 +0330 Subject: [PATCH] fix(ui): align download list and live properties --- src/components/PropertiesModal.tsx | 42 ++++++++++++++---------------- src/index.css | 40 +++++++++++++++------------- src/store/downloadStore.ts | 9 +++++-- 3 files changed, 49 insertions(+), 42 deletions(-) diff --git a/src/components/PropertiesModal.tsx b/src/components/PropertiesModal.tsx index 57b247e..018f811 100644 --- a/src/components/PropertiesModal.tsx +++ b/src/components/PropertiesModal.tsx @@ -7,15 +7,16 @@ import { open } from '@tauri-apps/plugin-dialog'; type LoginMode = 'matching' | 'custom' | 'none'; export const PropertiesModal = () => { - const { - selectedPropertiesDownloadId, - setSelectedPropertiesDownloadId, - updateDownload - } = useDownloadStore(); + const selectedPropertiesDownloadId = useDownloadStore(state => state.selectedPropertiesDownloadId); + const setSelectedPropertiesDownloadId = useDownloadStore(state => state.setSelectedPropertiesDownloadId); + const updateDownload = useDownloadStore(state => state.updateDownload); + const item = useDownloadStore(state => + selectedPropertiesDownloadId + ? state.downloads.find(d => d.id === selectedPropertiesDownloadId) ?? null + : null + ); - const { defaultDownloadPath } = useSettingsStore(); - - const [item, setItem] = useState(null); + const { defaultDownloadPath, perServerConnections } = useSettingsStore(); // Form states const [url, setUrl] = useState(''); @@ -44,7 +45,6 @@ export const PropertiesModal = () => { if (selectedPropertiesDownloadId) { const activeItem = useDownloadStore.getState().downloads.find(d => d.id === selectedPropertiesDownloadId); if (activeItem) { - setItem(activeItem); setUrl(activeItem.url); setFileName(activeItem.fileName); setSaveLocation(activeItem.destination || defaultDownloadPath || '~/Downloads'); @@ -83,12 +83,10 @@ export const PropertiesModal = () => { setMirrors(activeItem.mirrors || ''); setErrorMessage(''); } else { - setItem(null); + setSelectedPropertiesDownloadId(null); } - } else { - setItem(null); } - }, [selectedPropertiesDownloadId, defaultDownloadPath]); + }, [selectedPropertiesDownloadId, defaultDownloadPath, setSelectedPropertiesDownloadId]); if (!selectedPropertiesDownloadId || !item) return null; @@ -165,15 +163,15 @@ export const PropertiesModal = () => {
-
-
Progress{item.status === 'completed' ? '100%' : ((item.fraction || 0) * 100).toFixed(0) + '%'}
-
Size-
-
Speed{item.status === 'completed' ? '-' : item.speed || '-'}
-
ETA{item.status === 'completed' ? '-' : item.eta || '-'}
- -
Live connections-
-
Speed cap{item.speedLimit || '-'}
-
Category{item.category}
+
+
Progress{item.status === 'completed' ? '100%' : ((item.fraction || 0) * 100).toFixed(0) + '%'}
+
Size{item.size || '-'}
+
Speed{item.status === 'completed' ? '-' : item.speed || '-'}
+
ETA{item.status === 'completed' ? '-' : item.eta || '-'}
+ +
Connections{item.connections || perServerConnections || '-'}
+
Speed cap{item.speedLimit || '-'}
+
Category{item.category}
Last try-
Date added{new Date(item.dateAdded).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' })}
diff --git a/src/index.css b/src/index.css index 37fe7a4..ebd2af0 100644 --- a/src/index.css +++ b/src/index.css @@ -962,10 +962,9 @@ white-space: nowrap; } - .download-table-header > div:not(:first-child) { - border-left: 1px solid hsl(var(--border-color)); - padding-left: 12px; - } +.download-table-header > div:not(:first-child) { + padding-left: 0; +} .column-resize-handle { position: absolute; @@ -990,9 +989,9 @@ height: 32px; display: grid; align-items: center; - width: auto; + width: 100%; padding: 0 16px; - margin: 2px 12px; + margin: 2px 0; border-radius: 6px; color: hsl(var(--text-primary)); font-size: 12px; @@ -1069,12 +1068,12 @@ font-weight: 500; } - .download-ghost-row { - height: 32px; - margin: 2px 12px; - border-radius: 6px; - flex-shrink: 0; - } +.download-ghost-row { + height: 32px; + margin: 2px 0; + border-radius: 6px; + flex-shrink: 0; +} .download-ghost-row.striped, .download-row.striped { @@ -1085,7 +1084,6 @@ display: flex; align-items: center; gap: 8px; - padding-right: 12px; min-width: 0; overflow: hidden; } @@ -1093,16 +1091,18 @@ .download-status-cell > span { min-width: 0; max-width: 100%; - flex: 0 1 auto; + flex: 0 0 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; + line-height: 1.2; font-variant-numeric: tabular-nums; } .download-progress-track { - width: 100%; + flex: 1 1 auto; + width: auto; min-width: 0; height: 14px; border-radius: 4px; @@ -1134,9 +1134,13 @@ animation: pulse-progress 1.5s ease-in-out infinite; } - .download-status { - font-weight: 500; - } +.download-status { + font-weight: 500; +} + +.download-status .truncate { + min-width: 0; +} .download-status-paused { color: hsl(var(--status-paused)); diff --git a/src/store/downloadStore.ts b/src/store/downloadStore.ts index 990714d..ad3346b 100644 --- a/src/store/downloadStore.ts +++ b/src/store/downloadStore.ts @@ -34,8 +34,13 @@ export async function initDownloadListener() { const mainStore = useDownloadStore.getState(); const current = mainStore.downloads.find(d => d.id === payload.id); - if (current && payload.size && current.size !== payload.size) { - mainStore.updateDownload(payload.id, { size: payload.size }); + if (current) { + mainStore.updateDownload(payload.id, { + fraction: payload.fraction, + speed: payload.speed, + eta: payload.eta, + ...(payload.size ? { size: payload.size } : {}), + }); } });