bugfixes

frontend/src/components/ui/FinishedDownloads.tsx

@@ -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">
+                    <div className="flex min-w-0 items-center gap-2">
-                      Downloads
+                      <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">
+                  <div className="flex min-w-0 items-center gap-2">
-                    Abgeschlossene Downloads
+                    <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={() => {
-                      onClick={() => setSelectionActionsOpen((v) => !v)}
+                        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">