Fix album delete-all stuck, add select-all, fix admin cleanup alignment

rishabhverma17 · rishabhverma17 · commit fc38d6da28f5 · 2026-04-06T20:35:20.000+05:30
- Backend: Switch album delete-all from sequential blob deletion to batch soft-delete (instant)
- Backend: Add SignalR broadcast after album delete for live UI updates
- Frontend: Wrap album delete in runTask for progress tracking visibility
- Frontend: Add Select All / Deselect All button in Gallery and Album Detail pages
- Admin: Fix cleanup flyout table column alignment with fixed table layout
- Admin: Pass correct totalCount from stats to flyout header
- Admin: Bump soft-deleted API limit from 100 to 500, show overflow indicator
diff --git a/client/src/pages/AdminPage.tsx b/client/src/pages/AdminPage.tsx
@@ -95,12 +95,14 @@ function ActivityFeed() {
   );
 }
 
-function CleanupFlyout({ onClose, onCleanup }: { onClose: () => void; onCleanup: () => Promise<void> }) {
+function CleanupFlyout({ onClose, onCleanup, totalCount }: { onClose: () => void; onCleanup: () => Promise<void>; totalCount?: number }) {
   const { data: items, isLoading } = useQuery({
     queryKey: ['admin-soft-deleted'],
     queryFn: adminApi.getSoftDeleted,
   });
 
+  const displayTotal = totalCount ?? items?.length ?? 0;
+
   return (
     <div className="fixed inset-0 z-50 flex justify-end" style={{ background: 'rgba(0,0,0,0.5)' }} onClick={onClose}>
       <div
@@ -112,7 +114,7 @@ function CleanupFlyout({ onClose, onCleanup }: { onClose: () => void; onCleanup:
         <div className="flex items-center justify-between px-4 py-3 flex-shrink-0" style={{ borderBottom: '1px solid #30363d' }}>
           <h3 className="text-sm font-medium flex items-center gap-2" style={{ color: '#e6edf3' }}>
             <Trash2 size={16} style={{ color: '#fbbf24' }} />
-            Pending Cleanup ({items?.length ?? 0} items)
+            Pending Cleanup ({displayTotal} items)
           </h3>
           <div className="flex items-center gap-2">
             <button
@@ -135,21 +137,21 @@ function CleanupFlyout({ onClose, onCleanup }: { onClose: () => void; onCleanup:
           ) : !items?.length ? (
             <div className="py-10 text-center" style={{ color: '#8b949e' }}>No soft-deleted items</div>
           ) : (
-            <table className="w-full">
+            <table className="w-full" style={{ tableLayout: 'fixed' }}>
               <thead>
                 <tr style={{ borderBottom: '1px solid #30363d', color: '#8b949e', position: 'sticky', top: 0, background: '#0d1117' }}>
-                  <th className="text-left px-3 py-2 font-normal">File</th>
-                  <th className="text-left px-3 py-2 font-normal">Type</th>
-                  <th className="text-left px-3 py-2 font-normal">Size</th>
-                  <th className="text-left px-3 py-2 font-normal">Status</th>
-                  <th className="text-left px-3 py-2 font-normal">Thumb</th>
-                  <th className="text-left px-3 py-2 font-normal">Deleted</th>
+                  <th className="text-left px-3 py-2 font-normal" style={{ width: '35%' }}>File</th>
+                  <th className="text-left px-3 py-2 font-normal" style={{ width: '10%' }}>Type</th>
+                  <th className="text-left px-3 py-2 font-normal" style={{ width: '10%' }}>Size</th>
+                  <th className="text-left px-3 py-2 font-normal" style={{ width: '12%' }}>Status</th>
+                  <th className="text-left px-3 py-2 font-normal" style={{ width: '8%' }}>Thumb</th>
+                  <th className="text-left px-3 py-2 font-normal" style={{ width: '25%' }}>Deleted</th>
                 </tr>
               </thead>
               <tbody>
                 {items.map((item) => (
                   <tr key={item.id} style={{ borderBottom: '1px solid #21262d' }}>
-                    <td className="px-3 py-1.5 truncate max-w-[220px]" style={{ color: '#e6edf3' }}>{item.fileName}</td>
+                    <td className="px-3 py-1.5 truncate" style={{ color: '#e6edf3' }}>{item.fileName}</td>
                     <td className="px-3 py-1.5" style={{ color: '#8b949e' }}>{item.contentType.split('/')[1] || item.contentType}</td>
                     <td className="px-3 py-1.5" style={{ color: '#8b949e' }}>{item.sizeMB} MB</td>
                     <td className="px-3 py-1.5">
@@ -165,6 +167,11 @@ function CleanupFlyout({ onClose, onCleanup }: { onClose: () => void; onCleanup:
                 ))}
               </tbody>
             </table>
+            {items.length < displayTotal && (
+              <div className="px-3 py-2 text-[10px] text-center" style={{ color: '#484f58', borderTop: '1px solid #21262d' }}>
+                Showing {items.length} of {displayTotal} items
+              </div>
+            )}
           )}
         </div>
       </div>
@@ -432,7 +439,7 @@ export function AdminPage() {
       )}
 
       {/* Soft-Deleted Items Flyout */}
-      {showCleanupFlyout && <CleanupFlyout onClose={() => setShowCleanupFlyout(false)} onCleanup={handleTriggerCleanup} />}
+      {showCleanupFlyout && <CleanupFlyout onClose={() => setShowCleanupFlyout(false)} onCleanup={handleTriggerCleanup} totalCount={stats?.softDeleted} />}
     </div>
   );
 }
diff --git a/client/src/pages/AlbumDetailPage.tsx b/client/src/pages/AlbumDetailPage.tsx
@@ -199,8 +199,11 @@ export function AlbumDetailPage() {
     );
     if (!choice) return;
     const deleteMedia = choice.trim().toLowerCase() === 'all';
-    await albumApi.deleteAlbum(albumId, deleteMedia);
-    queryClient.invalidateQueries({ queryKey: ['albums'] });
+    await runTask(`Deleting album "${data.album.name}"${deleteMedia ? ' and all media' : ''}`, async () => {
+      await albumApi.deleteAlbum(albumId, deleteMedia);
+      queryClient.invalidateQueries({ queryKey: ['albums'] });
+      if (deleteMedia) queryClient.invalidateQueries({ queryKey: ['media'] });
+    });
     navigate('/albums');
   };
 
@@ -284,6 +287,20 @@ export function AlbumDetailPage() {
           >
             {selectMode ? <><Check size={14} className="inline mr-1" />{selectedIds.size} selected</> : 'Select'}
           </button>
+          {selectMode && (
+            <button
+              onClick={() => {
+                if (selectedIds.size === sortedMedia.length) {
+                  setSelectedIds(new Set());
+                } else {
+                  setSelectedIds(new Set(sortedMedia.map(m => m.id)));
+                }
+              }}
+              className="px-3 py-1.5 bg-zinc-800 text-zinc-400 hover:text-white rounded-md text-sm transition"
+            >
+              {selectedIds.size === sortedMedia.length ? 'Deselect All' : 'Select All'}
+            </button>
+          )}
           {selectMode && selectedIds.size > 0 && (
             <>
               <button onClick={handleDownloadSelected} className="px-3 py-1.5 bg-zinc-700 hover:bg-zinc-600 rounded-md text-sm text-white transition flex items-center gap-1">
diff --git a/client/src/pages/AlbumsPage.tsx b/client/src/pages/AlbumsPage.tsx
@@ -2,11 +2,13 @@ import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { albumApi } from '../api/albumApi';
+import { useTrackedTask } from '../hooks/useTrackedTask';
 import { FolderOpen, Trash2, EyeOff, Eye, Pencil, Lock } from 'lucide-react';
 
 export function AlbumsPage() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
+  const { runTask } = useTrackedTask();
   const { data: albums, isLoading } = useQuery({
     queryKey: ['albums'],
     queryFn: albumApi.getAll,
@@ -31,9 +33,11 @@ export function AlbumsPage() {
     );
     if (!choice) return;
     const deleteMedia = choice.trim().toLowerCase() === 'all';
-    await albumApi.deleteAlbum(albumId, deleteMedia);
-    queryClient.invalidateQueries({ queryKey: ['albums'] });
-    if (deleteMedia) queryClient.invalidateQueries({ queryKey: ['media'] });
+    await runTask(`Deleting album "${albumName}"${deleteMedia ? ' and all media' : ''}`, async () => {
+      await albumApi.deleteAlbum(albumId, deleteMedia);
+      queryClient.invalidateQueries({ queryKey: ['albums'] });
+      if (deleteMedia) queryClient.invalidateQueries({ queryKey: ['media'] });
+    });
   };
 
   const handleToggleHidden = async (e: React.MouseEvent, album: { id: string; isHidden: boolean; isPasswordProtected: boolean }) => {
diff --git a/client/src/pages/GalleryPage.tsx b/client/src/pages/GalleryPage.tsx
@@ -132,6 +132,20 @@ export function GalleryPage() {
           >
             {selectMode ? <><Check size={14} className="inline mr-1" />{selectedIds.size} selected</> : 'Select'}
           </button>
+          {selectMode && (
+            <button
+              onClick={() => {
+                if (selectedIds.size === allItems.length) {
+                  setSelectedIds(new Set());
+                } else {
+                  setSelectedIds(new Set(allItems.map(m => m.id)));
+                }
+              }}
+              className="px-3 py-1.5 bg-zinc-800 text-zinc-400 hover:text-white rounded-md text-sm transition"
+            >
+              {selectedIds.size === allItems.length ? 'Deselect All' : 'Select All'}
+            </button>
+          )}
           {selectMode && selectedIds.size > 0 && (
             <>
               <button onClick={handleDownloadSelected} className="px-3 py-1.5 bg-zinc-700 hover:bg-zinc-600 rounded-md text-sm text-white transition flex items-center gap-1">
diff --git a/src/CleanSweep.API/Controllers/AdminController.cs b/src/CleanSweep.API/Controllers/AdminController.cs
@@ -409,7 +409,7 @@ public async Task<ActionResult> GetSoftDeleted(CancellationToken ct)
         var items = await _db.MediaItems
             .Where(m => m.IsDeleted)
             .OrderByDescending(m => m.DeletedAt)
-            .Take(100)
+            .Take(500)
             .Select(m => new
             {
                 m.Id,
diff --git a/src/CleanSweep.API/Controllers/AlbumController.cs b/src/CleanSweep.API/Controllers/AlbumController.cs
@@ -16,13 +16,15 @@ public class AlbumController : ControllerBase
     private readonly AlbumService _albumService;
     private readonly IAlbumRepository _albumRepo;
     private readonly IBlobStorageService _blobService;
+    private readonly INotificationService _notificationService;
     private readonly StorageOptions _storageOptions;
 
-    public AlbumController(AlbumService albumService, IAlbumRepository albumRepo, IBlobStorageService blobService, IOptions<StorageOptions> storageOptions)
+    public AlbumController(AlbumService albumService, IAlbumRepository albumRepo, IBlobStorageService blobService, INotificationService notificationService, IOptions<StorageOptions> storageOptions)
     {
         _albumService = albumService;
         _albumRepo = albumRepo;
         _blobService = blobService;
+        _notificationService = notificationService;
         _storageOptions = storageOptions.Value;
     }
 
@@ -53,6 +55,7 @@ public async Task<ActionResult> RemoveMedia(Guid albumId, Guid mediaId, Cancella
     public async Task<ActionResult> DeleteAlbum(Guid albumId, [FromQuery] bool deleteMedia = false, CancellationToken ct = default)
     {
         await _albumService.DeleteAlbumAsync(albumId, deleteMedia, ct);
+        await _notificationService.BroadcastMediaChangedAsync(ct);
         return NoContent();
     }
 
diff --git a/src/CleanSweep.Application/Services/AlbumService.cs b/src/CleanSweep.Application/Services/AlbumService.cs
@@ -90,8 +90,9 @@ public async Task DeleteAlbumAsync(Guid albumId, bool deleteMedia, CancellationT
             var album = await _albumRepo.GetByIdWithMediaAsync(albumId, ct);
             if (album != null)
             {
-                foreach (var am in album.AlbumMedia)
-                    await _mediaService.DeleteMediaWithBlobsAsync(am.MediaId, ct);
+                var mediaIds = album.AlbumMedia.Select(am => am.MediaId).ToList();
+                if (mediaIds.Count > 0)
+                    await _mediaService.DeleteBatchAsync(mediaIds, ct);
             }
         }
         await _albumRepo.DeleteAsync(albumId, ct);

Original file line number	Diff line number	Diff line change
`@@ -409,7 +409,7 @@ public async Task<ActionResult> GetSoftDeleted(CancellationToken ct)`
`409`	`409`	`var items = await _db.MediaItems`
`410`	`410`	`.Where(m => m.IsDeleted)`
`411`	`411`	`.OrderByDescending(m => m.DeletedAt)`
`412`		`- .Take(100)`
	`412`	`+ .Take(500)`
`413`	`413`	`.Select(m => new`
`414`	`414`	`{`
`415`	`415`	`m.Id,`
Original file line number	Diff line number	Diff line change
`@@ -16,13 +16,15 @@ public class AlbumController : ControllerBase`
`16`	`16`	`private readonly AlbumService _albumService;`
`17`	`17`	`private readonly IAlbumRepository _albumRepo;`
`18`	`18`	`private readonly IBlobStorageService _blobService;`
	`19`	`+ private readonly INotificationService _notificationService;`
`19`	`20`	`private readonly StorageOptions _storageOptions;`
`20`	`21`
`21`		`- public AlbumController(AlbumService albumService, IAlbumRepository albumRepo, IBlobStorageService blobService, IOptions<StorageOptions> storageOptions)`
	`22`	`+ public AlbumController(AlbumService albumService, IAlbumRepository albumRepo, IBlobStorageService blobService, INotificationService notificationService, IOptions<StorageOptions> storageOptions)`
`22`	`23`	`{`
`23`	`24`	`_albumService = albumService;`
`24`	`25`	`_albumRepo = albumRepo;`
`25`	`26`	`_blobService = blobService;`
	`27`	`+ _notificationService = notificationService;`
`26`	`28`	`_storageOptions = storageOptions.Value;`
`27`	`29`	`}`
`28`	`30`
`@@ -53,6 +55,7 @@ public async Task<ActionResult> RemoveMedia(Guid albumId, Guid mediaId, Cancella`
`53`	`55`	`public async Task<ActionResult> DeleteAlbum(Guid albumId, [FromQuery] bool deleteMedia = false, CancellationToken ct = default)`
`54`	`56`	`{`
`55`	`57`	`await _albumService.DeleteAlbumAsync(albumId, deleteMedia, ct);`
	`58`	`+ await _notificationService.BroadcastMediaChangedAsync(ct);`
`56`	`59`	`return NoContent();`
`57`	`60`	`}`
`58`	`61`
Original file line number	Diff line number	Diff line change
`@@ -90,8 +90,9 @@ public async Task DeleteAlbumAsync(Guid albumId, bool deleteMedia, CancellationT`
`90`	`90`	`var album = await _albumRepo.GetByIdWithMediaAsync(albumId, ct);`
`91`	`91`	`if (album != null)`
`92`	`92`	`{`
`93`		`- foreach (var am in album.AlbumMedia)`
`94`		`- await _mediaService.DeleteMediaWithBlobsAsync(am.MediaId, ct);`
	`93`	`+ var mediaIds = album.AlbumMedia.Select(am => am.MediaId).ToList();`
	`94`	`+ if (mediaIds.Count > 0)`
	`95`	`+ await _mediaService.DeleteBatchAsync(mediaIds, ct);`
`95`	`96`	`}`
`96`	`97`	`}`
`97`	`98`	`await _albumRepo.DeleteAsync(albumId, ct);`