From de21e052e1a5f86fbeeb74cc83a369988cd9cdf8 Mon Sep 17 00:00:00 2001
From: Pragati Sharma <pragati3718@gmail.com>
Date: Thu, 6 Aug 2026 04:31:59 +0530
Subject: [PATCH 1/3] fix(albums): restore custom SVG placeholder for empty
 album detail view

---
 frontend/src/pages/Album/AlbumDetail.tsx | 55 +++++++++++++-----------
 1 file changed, 29 insertions(+), 26 deletions(-)

diff --git a/frontend/src/pages/Album/AlbumDetail.tsx b/frontend/src/pages/Album/AlbumDetail.tsx
index b8ba7fae4..ed8a73342 100644
--- a/frontend/src/pages/Album/AlbumDetail.tsx
+++ b/frontend/src/pages/Album/AlbumDetail.tsx
@@ -2,7 +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 { ArrowLeft, Plus, Trash2 } from 'lucide-react';
+import { ArrowLeft, Plus, Trash2, Image as ImageIcon } from 'lucide-react';
 import { ImageCard } from '@/components/Media/ImageCard';
 import { MediaView } from '@/components/Media/MediaView';
 import { AddImagesToAlbumDialog } from '@/components/Albums/AddImagesToAlbumDialog';
@@ -216,7 +216,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
@@ -229,27 +229,22 @@ 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">
+        {/* Left section */}
+        <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>
 
+        {/* Right section */}
+        <div className="flex flex-col items-end gap-2">
           <div className="flex items-center gap-2">
             {isSelectionMode ? (
               <>
@@ -263,6 +258,7 @@ export const AlbumDetail = () => {
                 >
                   Cancel
                 </Button>
+
                 <Button
                   variant="destructive"
                   size="sm"
@@ -284,6 +280,7 @@ export const AlbumDetail = () => {
                     Select Images
                   </Button>
                 )}
+
                 <Button
                   size="sm"
                   onClick={() => setIsAddImagesDialogOpen(true)}
@@ -294,6 +291,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>
 
@@ -307,8 +309,9 @@ 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">
+            <div className="flex flex-col items-center text-center">
+              <ImageIcon className="mb-4 h-16 w-16 text-muted-foreground/50" />
+              <p className="mb-4 text-muted-foreground">
                 No images in this album yet
               </p>
               <Button onClick={() => setIsAddImagesDialogOpen(true)}>
@@ -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;
\ No newline at end of file

From 7a0046d89cc34ab31745bf903d876a5d50c2c5e0 Mon Sep 17 00:00:00 2001
From: Pragati Sharma <pragati3718@gmail.com>
Date: Fri, 7 Aug 2026 19:29:53 +0530
Subject: [PATCH 2/3] Reuse EmptyGalleryState for empty album placeholder

---
 .../EmptyStates/EmptyGalleryState.tsx         | 26 ++++++++++++-------
 frontend/src/pages/Album/AlbumDetail.tsx      | 26 +++++++++----------
 2 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/EmptyStates/EmptyGalleryState.tsx b/frontend/src/components/EmptyStates/EmptyGalleryState.tsx
index a83be7d4b..85d19f88c 100644
--- a/frontend/src/components/EmptyStates/EmptyGalleryState.tsx
+++ b/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,6 +8,7 @@ interface EmptyGalleryStateProps {
   description?: string;
   formatsHint?: string;
   formatsIcon?: LucideIcon;
+  action?: ReactNode;
 }
 
 export const EmptyGalleryState = ({
@@ -14,6 +16,7 @@ export const EmptyGalleryState = ({
   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>
   );
-};
+};
\ No newline at end of file
diff --git a/frontend/src/pages/Album/AlbumDetail.tsx b/frontend/src/pages/Album/AlbumDetail.tsx
index ed8a73342..cb78c0676 100644
--- a/frontend/src/pages/Album/AlbumDetail.tsx
+++ b/frontend/src/pages/Album/AlbumDetail.tsx
@@ -2,7 +2,8 @@ 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 { ArrowLeft, Plus, Trash2, Image as ImageIcon } from 'lucide-react';
+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';
 import { AddImagesToAlbumDialog } from '@/components/Albums/AddImagesToAlbumDialog';
@@ -308,18 +309,17 @@ export const AlbumDetail = () => {
             ))}
           </div>
         ) : images.length === 0 ? (
-          <div className="flex h-full items-center justify-center">
-            <div className="flex flex-col items-center text-center">
-              <ImageIcon className="mb-4 h-16 w-16 text-muted-foreground/50" />
-              <p className="mb-4 text-muted-foreground">
-                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) => (

From 9e14b1c330762b73a24bbdfd7b3c5f4d4aca8325 Mon Sep 17 00:00:00 2001
From: Pragati Sharma <pragati3718@gmail.com>
Date: Fri, 7 Aug 2026 22:37:29 +0530
Subject: [PATCH 3/3] Fix responsive album header layout

---
 frontend/src/pages/Album/AlbumDetail.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/Album/AlbumDetail.tsx b/frontend/src/pages/Album/AlbumDetail.tsx
index cb78c0676..3919126b5 100644
--- a/frontend/src/pages/Album/AlbumDetail.tsx
+++ b/frontend/src/pages/Album/AlbumDetail.tsx
@@ -229,9 +229,9 @@ export const AlbumDetail = () => {
 
   return (
     <div className="flex h-full flex-col">
-      {/* Header */}
+      
       <div className="mb-6 flex items-start justify-between gap-4">
-        {/* Left section */}
+        
         <div>
           <h1 className="text-2xl font-bold">
             {album.name}
@@ -244,7 +244,7 @@ export const AlbumDetail = () => {
           )}
         </div>
 
-        {/* Right section */}
+        
         <div className="flex flex-col items-end gap-2">
           <div className="flex items-center gap-2">
             {isSelectionMode ? (