From d7ae9dd9178a5d3d45d7f9e17cd360de8ad3d6bb Mon Sep 17 00:00:00 2001
From: Takitxt <sharma.varun1903@gmail.com>
Date: Thu, 6 Aug 2026 14:36:36 +0530
Subject: [PATCH 1/6] add-images-dialog-albums-crop-fix

---
 .../Albums/AddImagesToAlbumDialog.tsx         | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
index d2195ce28..dca0ecbe7 100644
--- a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
+++ b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
@@ -135,7 +135,7 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
                 {filteredImages.map((image) => (
                   <div
                     key={image.id}
-                    className="group hover:border-primary relative aspect-square cursor-pointer overflow-hidden rounded-md border-2 transition-all"
+                    className="group hover:border-primary bg-muted relative aspect-square cursor-pointer overflow-hidden rounded-md border-2 transition-all"
                     style={{
                       borderColor: selectedImages.has(image.id)
                         ? 'hsl(var(--primary))'
@@ -143,21 +143,24 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
                     }}
                     onClick={() => handleImageToggle(image.id)}
                   >
-                    <img
-                      src={convertFileSrc(image.thumbnailPath)}
-                      alt=""
-                      className="h-full w-full object-cover"
-                      onError={(e) => {
-                        const img = e.target as HTMLImageElement;
-                        img.onerror = null;
-                        const placeholder = window.matchMedia(
-                          '(prefers-color-scheme: dark)',
-                        ).matches
-                          ? '/placeholder-album.svg'
-                          : '/placeholder-album-light.svg';
-                        img.src = placeholder;
-                      }}
-                    />
+                    <div className="bg-muted flex h-full w-full items-center justify-center">
+                      <img
+                        src={convertFileSrc(image.thumbnailPath)}
+                        alt={image.path.split('/').pop() || ''}
+                        loading="lazy"
+                        className="max-h-full max-w-full object-contain transition-transform group-hover:scale-105"
+                        onError={(e) => {
+                          const img = e.target as HTMLImageElement;
+                          img.onerror = null;
+                          const placeholder = window.matchMedia(
+                            '(prefers-color-scheme: dark)',
+                          ).matches
+                            ? '/placeholder-album.svg'
+                            : '/placeholder-album-light.svg';
+                          img.src = placeholder;
+                        }}
+                      />
+                    </div>
 
                     {selectedImages.has(image.id) && (
                       <div className="bg-primary/20 absolute inset-0 flex items-center justify-center">

From 5eb7aaca6d161b0828ec148cde26cac30e8009e7 Mon Sep 17 00:00:00 2001
From: Takitxt <sharma.varun1903@gmail.com>
Date: Thu, 6 Aug 2026 15:28:26 +0530
Subject: [PATCH 2/6] coderabbit-chenges

---
 .../Albums/AddImagesToAlbumDialog.tsx         | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
index dca0ecbe7..4759024e7 100644
--- a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
+++ b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
@@ -19,6 +19,8 @@ import { useMutationFeedback } from '@/hooks/useMutationFeedback';
 import { Image } from '@/types/Media';
 import { convertFileSrc } from '@tauri-apps/api/core';
 import { Search, Check } from 'lucide-react';
+import { useTheme } from '@/contexts/ThemeContext';
+import { cn } from '@/lib/utils';
 
 export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
   isOpen,
@@ -31,6 +33,12 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
   const [searchQuery, setSearchQuery] = useState('');
   const [allImages, setAllImages] = useState<Image[]>([]);
 
+  const { theme } = useTheme();
+  const isLightMode = theme === 'light';
+  const placeholderSrc = isLightMode
+    ? '/placeholder-album-light.svg'
+    : '/placeholder-album.svg';
+
   const { data: imagesData, isLoading } = usePictoQuery({
     queryKey: ['images'],
     queryFn: () => fetchAllImages(),
@@ -135,12 +143,12 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
                 {filteredImages.map((image) => (
                   <div
                     key={image.id}
-                    className="group hover:border-primary bg-muted relative aspect-square cursor-pointer overflow-hidden rounded-md border-2 transition-all"
-                    style={{
-                      borderColor: selectedImages.has(image.id)
-                        ? 'hsl(var(--primary))'
-                        : 'transparent',
-                    }}
+                    className={cn(
+                      'group bg-muted relative aspect-square cursor-pointer overflow-hidden rounded-md border-2 transition-all',
+                      selectedImages.has(image.id)
+                        ? 'border-primary'
+                        : 'hover:border-primary border-transparent',
+                    )}
                     onClick={() => handleImageToggle(image.id)}
                   >
                     <div className="bg-muted flex h-full w-full items-center justify-center">
@@ -152,12 +160,7 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
                         onError={(e) => {
                           const img = e.target as HTMLImageElement;
                           img.onerror = null;
-                          const placeholder = window.matchMedia(
-                            '(prefers-color-scheme: dark)',
-                          ).matches
-                            ? '/placeholder-album.svg'
-                            : '/placeholder-album-light.svg';
-                          img.src = placeholder;
+                          img.src = placeholderSrc;
                         }}
                       />
                     </div>

From 34e885db076a43d6b7c4cb3e3c97de003af03222 Mon Sep 17 00:00:00 2001
From: Takitxt <sharma.varun1903@gmail.com>
Date: Thu, 6 Aug 2026 16:25:10 +0530
Subject: [PATCH 3/6] coderabbit-fix-2

---
 frontend/src/components/Albums/AddImagesToAlbumDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
index 4759024e7..b601f1267 100644
--- a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
+++ b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
@@ -156,7 +156,7 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
                         src={convertFileSrc(image.thumbnailPath)}
                         alt={image.path.split('/').pop() || ''}
                         loading="lazy"
-                        className="max-h-full max-w-full object-contain transition-transform group-hover:scale-105"
+                        className="max-h-full max-w-full object-contain"
                         onError={(e) => {
                           const img = e.target as HTMLImageElement;
                           img.onerror = null;

From b92c6a6c5201ff0f681c5d2e6be0178f3b7952e5 Mon Sep 17 00:00:00 2001
From: Takitxt <sharma.varun1903@gmail.com>
Date: Sat, 15 Aug 2026 21:36:17 +0530
Subject: [PATCH 4/6] Requested-changes

---
 .../Albums/AddImagesToAlbumDialog.tsx         | 52 +++++++++----------
 1 file changed, 25 insertions(+), 27 deletions(-)

diff --git a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
index b601f1267..ddd48e306 100644
--- a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
+++ b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
@@ -16,11 +16,10 @@ import { usePictoMutation, usePictoQuery } from '@/hooks/useQueryExtension';
 import { addImagesToAlbum, fetchAllImages } from '@/api/api-functions';
 import { showInfoDialog } from '@/features/infoDialogSlice';
 import { useMutationFeedback } from '@/hooks/useMutationFeedback';
+import { AspectRatio } from '@/components/ui/aspect-ratio';
 import { Image } from '@/types/Media';
 import { convertFileSrc } from '@tauri-apps/api/core';
 import { Search, Check } from 'lucide-react';
-import { useTheme } from '@/contexts/ThemeContext';
-import { cn } from '@/lib/utils';
 
 export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
   isOpen,
@@ -33,12 +32,6 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
   const [searchQuery, setSearchQuery] = useState('');
   const [allImages, setAllImages] = useState<Image[]>([]);
 
-  const { theme } = useTheme();
-  const isLightMode = theme === 'light';
-  const placeholderSrc = isLightMode
-    ? '/placeholder-album-light.svg'
-    : '/placeholder-album.svg';
-
   const { data: imagesData, isLoading } = usePictoQuery({
     queryKey: ['images'],
     queryFn: () => fetchAllImages(),
@@ -106,7 +99,7 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="flex max-h-[80vh] flex-col overflow-hidden p-0 sm:max-w-[700px]">
+      <DialogContent className="flex max-h-[85vh] flex-col overflow-hidden p-0 sm:max-w-[820px]">
         <DialogHeader className="px-6 pt-6">
           <DialogTitle>Add Images to "{albumName}"</DialogTitle>
           <DialogDescription>
@@ -143,35 +136,40 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
                 {filteredImages.map((image) => (
                   <div
                     key={image.id}
-                    className={cn(
-                      'group bg-muted relative aspect-square cursor-pointer overflow-hidden rounded-md border-2 transition-all',
-                      selectedImages.has(image.id)
-                        ? 'border-primary'
-                        : 'hover:border-primary border-transparent',
-                    )}
+                    className="group hover:border-primary relative cursor-pointer overflow-hidden rounded-md border-2 transition-all"
+                    style={{
+                      borderColor: selectedImages.has(image.id)
+                        ? 'hsl(var(--primary))'
+                        : 'transparent',
+                    }}
                     onClick={() => handleImageToggle(image.id)}
                   >
-                    <div className="bg-muted flex h-full w-full items-center justify-center">
+                    <AspectRatio ratio={1}>
                       <img
-                        src={convertFileSrc(image.thumbnailPath)}
-                        alt={image.path.split('/').pop() || ''}
+                        src={convertFileSrc(image.thumbnailPath || image.path)}
+                        alt=""
                         loading="lazy"
-                        className="max-h-full max-w-full object-contain"
+                        className="h-full w-full object-cover"
                         onError={(e) => {
                           const img = e.target as HTMLImageElement;
                           img.onerror = null;
-                          img.src = placeholderSrc;
+                          const placeholder = window.matchMedia(
+                            '(prefers-color-scheme: dark)',
+                          ).matches
+                            ? '/placeholder-album.svg'
+                            : '/placeholder-album-light.svg';
+                          img.src = placeholder;
                         }}
                       />
-                    </div>
 
-                    {selectedImages.has(image.id) && (
-                      <div className="bg-primary/20 absolute inset-0 flex items-center justify-center">
-                        <div className="bg-primary flex h-8 w-8 items-center justify-center rounded-full">
-                          <Check className="text-primary-foreground h-5 w-5" />
+                      {selectedImages.has(image.id) && (
+                        <div className="bg-primary/20 absolute inset-0 flex items-center justify-center">
+                          <div className="bg-primary flex h-8 w-8 items-center justify-center rounded-full">
+                            <Check className="text-primary-foreground h-5 w-5" />
+                          </div>
                         </div>
-                      </div>
-                    )}
+                      )}
+                    </AspectRatio>
                   </div>
                 ))}
               </div>

From ab8f68baf9a8effb09a5a8a0dea209b5cfc14eeb Mon Sep 17 00:00:00 2001
From: Takitxt <sharma.varun1903@gmail.com>
Date: Sat, 15 Aug 2026 21:54:55 +0530
Subject: [PATCH 5/6] coderabbit changes

---
 .../src/components/Albums/AddImagesToAlbumDialog.tsx  | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
index ddd48e306..a8a984ce1 100644
--- a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
+++ b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
@@ -134,9 +134,14 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
             ) : (
               <div className="grid grid-cols-4 gap-3 p-4">
                 {filteredImages.map((image) => (
-                  <div
+                  <button
                     key={image.id}
-                    className="group hover:border-primary relative cursor-pointer overflow-hidden rounded-md border-2 transition-all"
+                    type="button"
+                    aria-pressed={selectedImages.has(image.id)}
+                    aria-label={
+                      image.path.split(/[/\\]/).pop() || 'Untitled image'
+                    }
+                    className="group hover:border-primary focus-visible:ring-ring relative w-full cursor-pointer appearance-none overflow-hidden rounded-md border-2 bg-transparent p-0 text-left transition-all focus-visible:ring-2 focus-visible:outline-none"
                     style={{
                       borderColor: selectedImages.has(image.id)
                         ? 'hsl(var(--primary))'
@@ -170,7 +175,7 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
                         </div>
                       )}
                     </AspectRatio>
-                  </div>
+                  </button>
                 ))}
               </div>
             )}

From ab92f53a7265d35955063a8c43a21d26f5b7b228 Mon Sep 17 00:00:00 2001
From: Takitxt <sharma.varun1903@gmail.com>
Date: Sat, 15 Aug 2026 22:18:51 +0530
Subject: [PATCH 6/6] coderabbit-chenges-nitpick

---
 frontend/src/components/Albums/AddImagesToAlbumDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
index a8a984ce1..94a2b5872 100644
--- a/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
+++ b/frontend/src/components/Albums/AddImagesToAlbumDialog.tsx
@@ -156,7 +156,7 @@ export const AddImagesToAlbumDialog: React.FC<AddImagesToAlbumDialogProps> = ({
                         loading="lazy"
                         className="h-full w-full object-cover"
                         onError={(e) => {
-                          const img = e.target as HTMLImageElement;
+                          const img = e.currentTarget;
                           img.onerror = null;
                           const placeholder = window.matchMedia(
                             '(prefers-color-scheme: dark)',