This commit is contained in:
Linrador 2026-06-02 07:37:46 +02:00
parent b105e8c422
commit 1631ff4f18

View File

@ -4739,8 +4739,18 @@ export default function FinishedDownloads({
<div className="flex flex-col gap-3">
<div className="flex items-start justify-between gap-2">
<div className="min-w-0">
<div className="text-sm font-semibold text-gray-900 dark:text-white">
Downloads
<div className="flex min-w-0 items-center gap-2">
<div className="truncate text-sm font-semibold text-gray-900 dark:text-white">
Downloads
</div>
{bulkBusy ? (
<LoadingSpinner
size="sm"
className="shrink-0"
srLabel="Bulk-Aktion läuft…"
/>
) : null}
</div>
<div className="mt-0.5 text-xs text-gray-500 dark:text-gray-400">
@ -4752,7 +4762,6 @@ export default function FinishedDownloads({
<Button
size="sm"
variant="soft"
disabled={bulkBusy}
onClick={() => setSelectionActionsOpen((v) => !v)}
title={
selectionActionsOpen
@ -4787,13 +4796,6 @@ export default function FinishedDownloads({
].join(' ')}
>
<div className="lg:hidden">
{bulkBusy ? (
<div className="mb-2 flex items-center gap-1.5 text-[11px] text-gray-600 dark:text-gray-300">
<LoadingSpinner size="sm" srLabel="Bulk-Aktion läuft…" />
<span>Wird verarbeitet</span>
</div>
) : null}
<div className="grid grid-cols-2 gap-2">
<Button
size="sm"
@ -4852,13 +4854,6 @@ export default function FinishedDownloads({
</div>
<div className="hidden lg:grid lg:grid-cols-2 lg:gap-2">
{bulkBusy ? (
<div className="mr-2 flex items-center gap-2 text-xs text-gray-600 dark:text-gray-300">
<LoadingSpinner size="sm" srLabel="Bulk-Aktion läuft…" />
<span>Wird verarbeitet</span>
</div>
) : null}
<Button
size="sm"
variant="soft"
@ -5082,8 +5077,18 @@ export default function FinishedDownloads({
<div className="lg:hidden">
<div className="flex items-center gap-2 px-3 pt-2.5 pb-1.5">
<div className="min-w-0 flex flex-1 items-center gap-2">
<div className="truncate text-sm font-semibold text-gray-900 dark:text-white">
Abgeschlossene Downloads
<div className="flex min-w-0 items-center gap-2">
<div className="truncate text-sm font-semibold text-gray-900 dark:text-white">
Abgeschlossene Downloads
</div>
{bulkBusy ? (
<LoadingSpinner
size="sm"
className="shrink-0"
srLabel="Bulk-Aktion läuft…"
/>
) : null}
</div>
<span className="shrink-0 rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-900 dark:bg-white/10 dark:text-gray-200">
{totalItemsForPagination}
@ -5154,8 +5159,10 @@ export default function FinishedDownloads({
<Button
size="md"
variant="soft"
disabled={bulkBusy}
onClick={() => setSelectionActionsOpen((v) => !v)}
onClick={() => {
setSelectionActionsOpen((v) => !v)
setMobileOptionsOpen(false)
}}
title={selectionActionsOpen ? 'Auswahl-Aktionen ausblenden' : 'Auswahl-Aktionen anzeigen'}
className={[
'shrink-0 whitespace-nowrap px-3 font-semibold',
@ -5170,7 +5177,10 @@ export default function FinishedDownloads({
type="button"
className="relative inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-gray-200 bg-white shadow-sm
hover:bg-gray-50 dark:border-white/10 dark:bg-gray-900 dark:text-gray-100 dark:hover:bg-white/10"
onClick={() => setMobileOptionsOpen((v) => !v)}
onClick={() => {
setMobileOptionsOpen((v) => !v)
setSelectionActionsOpen(false)
}}
aria-expanded={mobileOptionsOpen}
aria-controls="finished-mobile-options"
aria-label="Filter & Optionen"
@ -5184,6 +5194,81 @@ export default function FinishedDownloads({
</div>
</div>
<div
className={[
'lg:hidden overflow-hidden transition-[max-height,opacity,border-color] duration-200 ease-in-out',
selectionActionsVisible
? 'max-h-72 opacity-100 border-t border-gray-200/60 dark:border-white/10'
: 'max-h-0 opacity-0 border-t border-transparent dark:border-transparent',
].join(' ')}
aria-hidden={!selectionActionsVisible}
>
<div
className={[
'p-3 transition-transform duration-200 ease-in-out',
selectionActionsVisible
? 'translate-y-0'
: '-translate-y-1 pointer-events-none',
].join(' ')}
>
<div className="grid grid-cols-2 gap-2">
<Button
size="sm"
variant="soft"
color={allPageSelected ? 'amber' : 'indigo'}
className="w-full justify-center"
leadingIcon={
allPageSelected
? <XMarkIcon className="size-4 shrink-0" />
: <CheckIcon className="size-4 shrink-0" />
}
disabled={bulkBusy}
onClick={() => {
if (allPageSelected) deselectPageRows(pageRows)
else selectPageRows(pageRows)
}}
>
{allPageSelected ? 'Seite abwählen' : 'Seite auswählen'}
</Button>
<Button
size="sm"
variant="secondary"
leadingIcon={<XMarkIcon className="size-4 shrink-0" />}
disabled={bulkBusy}
onClick={clearSelection}
className="w-full justify-center"
>
Auswahl aufheben
</Button>
<Button
size="sm"
variant="soft"
color="emerald"
leadingIcon={<ArchiveBoxIcon className="size-4 shrink-0" />}
disabled={bulkBusy}
onClick={() => void bulkKeepSelected()}
className="w-full justify-center"
>
Behalten
</Button>
<Button
size="sm"
variant="primary"
color="red"
leadingIcon={<TrashIcon className="size-4 shrink-0" />}
disabled={bulkBusy}
onClick={() => void bulkDeleteSelected()}
className="w-full justify-center"
>
Löschen
</Button>
</div>
</div>
</div>
{(allKnownTags.length > 0 || tagFilter.length > 0) ? (
<div className="hidden lg:block border-t border-gray-200/60 dark:border-white/10 px-3 py-2.5">
<div className="space-y-2">