gsadmin/Firelink
1
0
Fork 0
mirror of https://github.com/nimbold/Firelink.git synced 2026-08-07 09:53:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): refine page transitions and bulk actions

Browse Source
This commit is contained in:
NimBold
2026-07-28 22:39:00 +03:30
parent 62f8c83c57
commit 807663cf03
8 changed files with 175 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DownloadItem.tsx
+51 -3
View File
@@ -2,7 +2,12 @@ import React from 'react';
import { useDownloadProgressStore } from '../store/downloadProgressStore';
import { Play, Pause, MoreVertical, Clock } from 'lucide-react';
import type { DownloadItem as DownloadItemType } from '../bindings/DownloadItem';
import { canPauseDownload, canStartDownload } from '../utils/downloadActions';
import {
canPauseDownload,
canStartDownload,
formatDownloadActionCount,
type DownloadActionCounts,
} from '../utils/downloadActions';
import { useTranslation } from 'react-i18next';
import { useSettingsStore } from '../store/useSettingsStore';
import { formatDateTime } from '../utils/dateTime';
@@ -30,8 +35,11 @@ interface DownloadItemProps {
setContextMenu: (menu: { x: number; y: number; id: string }) => void;
handlePause: (id: string, skipConfirm?: boolean) => void;
handleResume: (item: DownloadItemType) => void;
handlePauseSelected: () => void;
handleResumeSelected: () => void;
getCategoryIcon: (category: string) => React.ReactNode;
isSelected: boolean;
selectedActionCounts: DownloadActionCounts;
isQueueReorderable: boolean;
isQueueDragSource: boolean;
onMoveInQueue: (id: string, direction: 'up' | 'down') => void;
@@ -49,8 +57,11 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
setContextMenu,
handlePause,
handleResume,
handlePauseSelected,
handleResumeSelected,
getCategoryIcon,
isSelected,
selectedActionCounts,
isQueueReorderable,
isQueueDragSource,
onMoveInQueue,
@@ -67,6 +78,15 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
const [isActionFocused, setIsActionFocused] = React.useState(false);
const [actionPosition, setActionPosition] = React.useState<React.CSSProperties | undefined>();
const hasRowActions = download.status !== 'completed';
const pauseSelectionCount = isSelected && selectedActionCounts.pause > 1
? selectedActionCounts.pause
: null;
const resumeSelectionCount = isSelected && selectedActionCounts.resume > 1
? selectedActionCounts.resume
: null;
const selectedCountLabel = (count: number | null) => count === null
? null
: t($ => $.downloadTable.summary.selected, { count });
const isActionVisible = hasRowActions && (
isRowHovered ||
isActionHovered ||
@@ -358,13 +378,41 @@ export const DownloadItem = React.memo<DownloadItemProps>(({
}}
>
{canPauseDownload(download.status) && (
<button onClick={() => handlePause(download.id)} className="app-icon-button h-7 w-7" title={t($ => $.downloads.actions.pause)}>
<button
onClick={() => pauseSelectionCount !== null ? handlePauseSelected() : handlePause(download.id)}
className="app-icon-button h-7 w-7"
title={pauseSelectionCount === null
? t($ => $.downloads.actions.pause)
: `${t($ => $.downloads.actions.pause)} (${selectedCountLabel(pauseSelectionCount)})`}
aria-label={pauseSelectionCount === null
? t($ => $.downloads.actions.pause)
: `${t($ => $.downloads.actions.pause)} (${selectedCountLabel(pauseSelectionCount)})`}
>
<Pause size={14} fill="currentColor" />
{pauseSelectionCount !== null ? (
<span className="download-row-action-badge" aria-hidden="true">
{formatDownloadActionCount(pauseSelectionCount)}
</span>
) : null}
</button>
)}
{canStartDownload(download.status) && (
<button onClick={() => handleResume(download)} className="app-icon-button h-7 w-7" title={download.status === 'paused' ? t($ => $.downloads.actions.resume) : t($ => $.downloads.actions.start)}>
<button
onClick={() => resumeSelectionCount !== null ? handleResumeSelected() : handleResume(download)}
className="app-icon-button h-7 w-7"
title={resumeSelectionCount === null
? download.status === 'paused' ? t($ => $.downloads.actions.resume) : t($ => $.downloads.actions.start)
: `${t($ => $.downloadTable.startResume)} (${selectedCountLabel(resumeSelectionCount)})`}
aria-label={resumeSelectionCount === null
? download.status === 'paused' ? t($ => $.downloads.actions.resume) : t($ => $.downloads.actions.start)
: `${t($ => $.downloadTable.startResume)} (${selectedCountLabel(resumeSelectionCount)})`}
>
<Play size={14} fill="currentColor" />
{resumeSelectionCount !== null ? (
<span className="download-row-action-badge" aria-hidden="true">
{formatDownloadActionCount(resumeSelectionCount)}
</span>
) : null}
</button>
)}
<button
src/components/DownloadTable.tsx
+47 -17
View File
@@ -18,7 +18,8 @@ import {
import {
canPauseDownload,
canRedownload,
canStartDownload
canStartDownload,
countDownloadActions
} from '../utils/downloadActions';
import { isActiveDownloadStatus, isTransferActiveStatus } from '../utils/downloads';
import { summarizeDownloads, type DownloadSummary } from '../utils/downloadSummary';
@@ -1594,6 +1595,10 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter, onSummaryC
() => filteredDownloads.filter(download => selectedIds.has(download.id)),
[filteredDownloads, selectedIds]
);
const selectedActionCounts = useMemo(
() => countDownloadActions(selectedDownloads),
[selectedDownloads]
);
const summaryDownloads = selectedDownloads.length > 0 ? selectedDownloads : filteredDownloads;
const downloadSummary = useMemo(
() => summarizeDownloads(summaryDownloads, progressMap),
@@ -1799,14 +1804,47 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter, onSummaryC
}
}, [showInteractionError]);
const resumeItemsSequentially = async (items: DownloadItem[]) => {
const resumeItemsSequentially = useCallback(async (items: DownloadItem[]) => {
for (const item of items) {
const current = useDownloadStore.getState().downloads.find(download => download.id === item.id);
if (current && canStartDownload(current.status)) {
await handleResume(current);
}
}
};
}, [handleResume]);
const getCurrentSelectedDownloads = useCallback(() => {
const selected = selectedIdsRef.current;
return useDownloadStore.getState().downloads.filter(download => selected.has(download.id));
}, []);
const handlePauseSelected = useCallback(async () => {
const items = getCurrentSelectedDownloads().filter(download => canPauseDownload(download.status));
if (items.length === 0) return;
const nonResumableCount = items.filter(download => download.resumable === false).length;
if (nonResumableCount > 0) {
const confirmPause = window.confirm(
nonResumableCount === 1
? t($ => $.downloadTable.nonResumableOne)
: t($ => $.downloadTable.nonResumableMany, { count: nonResumableCount })
);
if (!confirmPause) return;
}
await Promise.all(items.map(item => {
const current = useDownloadStore.getState().downloads.find(download => download.id === item.id);
return current && canPauseDownload(current.status)
? handlePause(current.id, true)
: Promise.resolve();
}));
}, [getCurrentSelectedDownloads, handlePause, t]);
const handleResumeSelected = useCallback(() => {
const items = getCurrentSelectedDownloads().filter(download => canStartDownload(download.status));
if (items.length === 0) return;
void resumeItemsSequentially(items);
}, [getCurrentSelectedDownloads, resumeItemsSequentially]);
const handleDelete = (ids: string | string[]) => {
openDeleteModal(ids);
@@ -2010,7 +2048,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter, onSummaryC
</div>
</div>
<div className="downloads-table flex-1 flex flex-col">
<div className="app-page-transition-content downloads-table flex-1 flex flex-col">
<div className="download-table-scroll">
<div
ref={headerRef}
@@ -2161,8 +2199,11 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter, onSummaryC
setContextMenu={handleContextMenu}
handlePause={handlePause}
handleResume={handleResume}
handlePauseSelected={handlePauseSelected}
handleResumeSelected={handleResumeSelected}
getCategoryIcon={getCategoryIcon}
isSelected={selectedIds.has(d.id)}
selectedActionCounts={selectedActionCounts}
isQueueReorderable={queueReorderableIds.has(d.id)}
isQueueDragSource={Boolean(queueDragState?.active && queueDragState.ids.includes(d.id))}
onMoveInQueue={handleMoveInQueue}
@@ -2274,7 +2315,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter, onSummaryC
<button
onClick={() => {
setContextMenu(null);
void resumeItemsSequentially(itemsToResume);
handleResumeSelected();
}}
className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
>
@@ -2286,18 +2327,7 @@ export const DownloadTable: React.FC<DownloadTableProps> = ({ filter, onSummaryC
<button
onClick={() => {
setContextMenu(null);
const nonResumableCount = itemsToPause.filter(d => d.resumable === false).length;
if (nonResumableCount > 0) {
const confirmPause = window.confirm(
nonResumableCount === 1
? t($ => $.downloadTable.nonResumableOne)
: t($ => $.downloadTable.nonResumableMany, { count: nonResumableCount })
);
if (!confirmPause) {
return;
}
}
itemsToPause.forEach(d => handlePause(d.id, true));
void handlePauseSelected();
}}
className="w-full text-left px-3 py-2 hover:bg-item-hover transition-colors"
>
src/components/LogsView.tsx
+1 -1
View File
@@ -337,7 +337,7 @@ export default function LogsView() {
<div
ref={scrollRef}
onContextMenu={handleContextMenu}
className="logs-console flex-1 overflow-y-auto p-3 font-mono text-[11px] leading-[1.5] select-text"
className="app-page-transition-content logs-console flex-1 overflow-y-auto p-3 font-mono text-[11px] leading-[1.5] select-text"
style={{ userSelect: 'text', WebkitUserSelect: 'text' }}
>
{logs.length === 0 && (
src/components/SchedulerView.tsx
+1 -1
View File
@@ -303,7 +303,7 @@ export default function SchedulerView() {
</div>
</div>
<div className="flex-1 overflow-y-auto p-6">
<div className="app-page-transition-content flex-1 overflow-y-auto p-6">
<div className={`max-w-[760px] space-y-4 ${draft.enabled ? '' : 'opacity-50'}`}>
<section className="app-card p-5">
<div className="mb-5 flex items-center gap-2 font-semibold text-text-primary">
src/components/SpeedLimiterView.tsx
+1 -1
View File
@@ -223,7 +223,7 @@ export default function SpeedLimiterView() {
</button>
</div>
<div className="flex-1 overflow-y-auto p-6">
<div className="app-page-transition-content flex-1 overflow-y-auto p-6">
<section className={`app-card max-w-[760px] p-5 ${enabled ? '' : 'opacity-55'}`}>
<div className="mb-2 flex items-center gap-2 font-semibold text-text-primary">
<Gauge size={18} className="text-accent" /> {t($ => $.speedLimiter.globalSpeedLimit)}