View large upload thumbnails

src/admin/AdminUploadsTable.tsx

@@ -1,6 +1,5 @@
 'use client';
 
-import ImageSmall from '@/components/image/ImageSmall';
 import Spinner from '@/components/Spinner';
 import {
   getIdFromStorageUrl,
@@ -13,6 +12,7 @@ import AddButton from './AddButton';
 import { UrlAddStatus } from './AdminUploadsClient';
 import ResponsiveDate from '@/components/ResponsiveDate';
 import DeleteBlobButton from './DeleteUploadButton';
+import ImageMedium from '@/components/image/ImageMedium';
 
 export default function AdminUploadsTable({
   isAdding,
@@ -30,54 +30,53 @@ export default function AdminUploadsTable({
   return (
     <div className="space-y-4">
       {urlAddStatuses.map(({ url, status, statusMessage, uploadedAt, size }) =>
-        <div key={url}>
+        <div
+          key={url}
+          className={clsx(
+            'flex items-center grow',
+            'transition-opacity',
+            'rounded-lg overflow-hidden',
+            'border-main bg-extra-dim',
+            isAdding && !isComplete && status !== 'adding' && 'opacity-30',
+          )}
+        >
           <div className={clsx(
-            'flex items-center gap-2 w-full min-h-8',
+            'shrink-0 transition-transform',
+            isAdding && !isComplete && status === 'adding' &&
+              'translate-x-[-2px] scale-[1.125] shadow-lg',
+            isAdding && !isComplete && status !== 'adding' &&
+              'scale-90',
+            'w-[55%] sm:w-auto',
           )}>
-            <div
+            <ImageMedium
-              className={clsx(
+              title={getIdFromStorageUrl(url)}
-                'flex items-center grow gap-2',
+              src={url}
-                'transition-opacity',
+              alt={url}
-                isAdding && !isComplete && status !== 'adding' && 'opacity-30',
+              aspectRatio={3.0 / 2.0}
-              )}
+            />
-            >
+          </div>
-              <div className={clsx(
+          <div className={clsx(
-                'shrink-0 transition-transform',
+            'flex flex-col gap-2 w-full self-start',
-                isAdding && !isComplete && status === 'adding' &&
+            'p-2.5 sm:p-4',
-                  'translate-x-[-2px] scale-[1.125] shadow-lg',
+          )}>
-                isAdding && !isComplete && status !== 'adding' &&
+            <div className="flex flex-col gap-0.5 h-full">
-                  'scale-90',
+              <div className="truncate font-medium">
-              )}>
+                {uploadedAt
-                <ImageSmall
+                  ? <ResponsiveDate date={uploadedAt} />
-                  title={getIdFromStorageUrl(url)}
+                  : '—'}
-                  src={url}
+              </div>
-                  alt={url}
+              <div className="text-dim overflow-hidden text-ellipsis">
-                  aspectRatio={3.0 / 2.0}
+                {isAdding || isComplete
-                  className={clsx(
+                  ? status === 'added'
-                    'rounded-[3px] overflow-hidden',
+                    ? 'Added'
-                    'border-main',
+                    : status === 'adding'
-                  )}
+                      ? statusMessage ?? 'Adding ...'
-                />
+                      : 'Waiting'
+                  : size
+                    // eslint-disable-next-line max-len
+                    ? `${size} ${getExtensionFromStorageUrl(url)?.toUpperCase()}`
+                    : getExtensionFromStorageUrl(url)?.toUpperCase()}
               </div>
-              <span className="grow min-w-0">
-                <div className="truncate">
-                  {uploadedAt
-                    ? <ResponsiveDate date={uploadedAt} />
-                    : '—'}
-                </div>
-                <div className="text-dim overflow-hidden text-ellipsis">
-                  {isAdding || isComplete
-                    ? status === 'added'
-                      ? 'Added'
-                      : status === 'adding'
-                        ? statusMessage ?? 'Adding ...'
-                        : 'Waiting'
-                    : size
-                      // eslint-disable-next-line max-len
-                      ? `${size} ${getExtensionFromStorageUrl(url)?.toUpperCase()}`
-                      : getExtensionFromStorageUrl(url)?.toUpperCase()}
-                </div>
-              </span>
             </div>
             <span className="flex items-center gap-2">
               {isAdding || isComplete
@@ -101,9 +100,10 @@ export default function AdminUploadsTable({
                   <DeleteBlobButton
                     urls={[url]}
                     shouldRedirectToAdminPhotos={urlAddStatuses.length <= 1}
-                    onDelete={() => setUrlAddStatuses?.(urlAddStatuses.filter(
+                    onDelete={() =>
-                      ({ url: urlToRemove }) => urlToRemove !== url,
+                      setUrlAddStatuses?.(urlAddStatuses
-                    ))}
+                        .filter(({ url: urlToRemove }) =>
+                          urlToRemove !== url))}
                     isLoading={isDeleting}
                   />
                 </>}
@@ -112,4 +112,4 @@ export default function AdminUploadsTable({
         </div>)}
     </div>
   );
-}
+}

src/components/Container.tsx

@@ -29,7 +29,7 @@ export default function Container({
     ];
     case 'gray-border': return [
       'text-medium',
-      'bg-gray-50 dark:bg-gray-900/40',
+      'bg-extra-dim',
       'border border-gray-200 dark:border-gray-800',
     ];
     case 'blue': return [

tailwind.css

@@ -165,6 +165,10 @@
   @apply
     bg-gray-100 dark:bg-gray-900/75
 }
+@utility bg-extra-dim {
+  @apply
+    bg-gray-50 dark:bg-gray-900/40
+}
 @utility bg-content {
   @apply
     bg-main border-medium