Reused EmptyGalleryState for empty album placeholder.

frontend/src/components/EmptyStates/EmptyGalleryState.tsx

@@ -1,4 +1,5 @@
 import { FolderOpen, Image as ImageIcon, type LucideIcon } from 'lucide-react';
+import { ReactNode } from 'react';
 import { useNavigate } from 'react-router';
 import { ROUTES } from '@/constants/routes';
 
@@ -7,13 +8,15 @@ interface EmptyGalleryStateProps {
   description?: string;
   formatsHint?: string;
   formatsIcon?: LucideIcon;
+  action?: ReactNode;
 }
 
 export const EmptyGalleryState = ({
   title = 'No Images to Display',
   description = 'Your gallery is empty. Please add a folder containing images to get started.',
   formatsHint = 'Supports PNG, JPG, JPEG image formats.',
   formatsIcon: FormatsIcon = ImageIcon,
+  action,
 }: EmptyGalleryStateProps) => {
   const navigate = useNavigate();
 
@@ -22,32 +25,37 @@ export const EmptyGalleryState = ({
       <div className="mb-6 rounded-full bg-gray-100 p-4 dark:bg-gray-800">
         <FolderOpen className="h-16 w-16 text-gray-400" strokeWidth={1.5} />
       </div>
+
       <h2 className="mb-2 text-xl font-semibold text-gray-700 dark:text-gray-300">
         {title}
       </h2>
+
       <p className="mb-6 max-w-md text-gray-500 dark:text-gray-400">
         {description}
       </p>
-      <div className="flex flex-col gap-2 text-sm text-gray-400 dark:text-gray-500">
-        <div className="flex items-center gap-2">
-          <FolderOpen className="h-4 w-4" />
-          <span>
+
+      <div className="mb-6">
+        {action ?? (
+          <span className="text-sm text-gray-500 dark:text-gray-400">
             Go to{' '}
             <button
               type="button"
               onClick={() => navigate(`/${ROUTES.SETTINGS}`)}
-              className="rounded text-blue-500 hover:underline focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 focus-visible:outline-none"
+              className="rounded text-blue-500 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2"
             >
               Settings
             </button>{' '}
             to add folders.
           </span>
-        </div>
-        <div className="flex items-center gap-2">
+        )}
+      </div>
+
+      {formatsHint && (
+        <div className="flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500">
           <FormatsIcon className="h-4 w-4" />
           <span>{formatsHint}</span>
         </div>
-      </div>
+      )}
     </div>
   );
-};
+};

frontend/src/pages/Album/AlbumDetail.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams, useNavigate, useLocation } from 'react-router';
 import { Button } from '@/components/ui/button';
+import { EmptyGalleryState } from '@/components/EmptyStates/EmptyGalleryState';
 import { ArrowLeft, Plus, Trash2 } from 'lucide-react';
 import { ImageCard } from '@/components/Media/ImageCard';
 import { MediaView } from '@/components/Media/MediaView';
@@ -216,7 +217,7 @@ export const AlbumDetail = () => {
     return (
       <div className="flex h-full items-center justify-center">
         <div className="text-center">
-          <p className="text-muted-foreground mb-4">Album not found</p>
+          <p className="mb-4 text-muted-foreground">Album not found</p>
           <Button onClick={handleBack}>
             <ArrowLeft className="mr-2 h-4 w-4" />
             Back to Albums
@@ -228,28 +229,23 @@ export const AlbumDetail = () => {
 
   return (
     <div className="flex h-full flex-col">
-      {/* Header */}
-      <div className="mb-6">
-        <div className="mb-4 flex items-center gap-3">
-          <Button variant="ghost" size="icon" onClick={handleBack}>
-            <ArrowLeft className="h-5 w-5" />
-          </Button>
-          <div className="flex-1">
-            <h1 className="text-2xl font-bold">{album.name}</h1>
-            {album.description && (
-              <p className="text-muted-foreground text-sm">
-                {album.description}
-              </p>
-            )}
-          </div>
-        </div>
+
+      <div className="mb-6 flex items-start justify-between gap-4">
+
+        <div>
+          <h1 className="text-2xl font-bold">
+            {album.name}
+          </h1>
 
-        <div className="flex items-center justify-between">
-          <p className="text-muted-foreground text-sm">
-            {images.length} {images.length === 1 ? 'photo' : 'photos'}
-            {selectedImages.size > 0 && ` • ${selectedImages.size} selected`}
-          </p>
+          {album.description && (
+            <p className="text-sm text-muted-foreground">
+              {album.description}
+            </p>
+          )}
+        </div>
 
+
+        <div className="flex flex-col items-end gap-2">
           <div className="flex items-center gap-2">
             {isSelectionMode ? (
               <>
@@ -263,6 +259,7 @@ export const AlbumDetail = () => {
                 >
                   Cancel
                 </Button>
+
                 <Button
                   variant="destructive"
                   size="sm"
@@ -284,6 +281,7 @@ export const AlbumDetail = () => {
                     Select Images
                   </Button>
                 )}
+
                 <Button
                   size="sm"
                   onClick={() => setIsAddImagesDialogOpen(true)}
@@ -294,6 +292,11 @@ export const AlbumDetail = () => {
               </>
             )}
           </div>
+
+          <p className="text-sm text-muted-foreground">
+            {images.length} {images.length === 1 ? 'photo' : 'photos'}
+            {selectedImages.size > 0 && ` • ${selectedImages.size} selected`}
+          </p>
         </div>
       </div>
 
@@ -306,17 +309,17 @@ export const AlbumDetail = () => {
             ))}
           </div>
         ) : images.length === 0 ? (
-          <div className="flex h-full items-center justify-center">
-            <div className="text-center">
-              <p className="text-muted-foreground mb-4">
-                No images in this album yet
-              </p>
-              <Button onClick={() => setIsAddImagesDialogOpen(true)}>
-                <Plus className="mr-2 h-4 w-4" />
-                Add Images
-              </Button>
-            </div>
-          </div>
+         <EmptyGalleryState
+  title="No images in this album yet"
+  description="Add images to start organizing this album."
+  formatsHint=""
+  action={
+    <Button onClick={() => setIsAddImagesDialogOpen(true)}>
+      <Plus className="mr-2 h-4 w-4" />
+      Add Images
+    </Button>
+  }
+/>
         ) : (
           <div className="grid grid-cols-2 gap-4 pb-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6">
             {images.map((image, index) => (
@@ -329,12 +332,12 @@ export const AlbumDetail = () => {
                   image={image}
                   className={
                     isSelectionMode && selectedImages.has(image.id)
-                      ? 'ring-primary ring-2 ring-offset-2'
+                      ? 'ring-2 ring-primary ring-offset-2'
                       : ''
                   }
                 />
                 {isSelectionMode && selectedImages.has(image.id) && (
-                  <div className="bg-primary text-primary-foreground absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full">
+                  <div className="absolute top-2 right-2 flex h-6 w-6 items-center justify-center rounded-full bg-primary text-primary-foreground">
                     ✓
                   </div>
                 )}
@@ -361,4 +364,4 @@ export const AlbumDetail = () => {
   );
 };
 
-export default AlbumDetail;
+export default AlbumDetail;