feat(select): add per-tile checkbox selection in Admin grid and all gallery layouts; tile click opens viewer; checkbox toggles selection; auto-enable selection mode; add testids

frontend/src/components/gallery/layouts/GridGalleryLayout.tsx

@@ -12,6 +12,7 @@ interface GridPhotoProps {
   isSelectionMode: boolean;
   onClick: (e: React.MouseEvent) => void;
   onDownload: (e: React.MouseEvent) => void;
+  onToggleSelect: () => void;
   animationType?: string;
   allowDownloads?: boolean;
   slug?: string;
@@ -26,6 +27,7 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
   isSelectionMode,
   onClick,
   onDownload,
+  onToggleSelect,
   animationType = 'fade',
   allowDownloads = true,
   slug,
@@ -105,13 +107,22 @@ const GridPhoto: React.FC<GridPhotoProps> = ({
             )}
           </div>
 
-          {isSelectionMode && (
-            <div className={`absolute top-2 right-2 ${isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity`}>
-              <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/80 border-white'} flex items-center justify-center transition-colors`}>
-                {isSelected && <Check className="w-4 h-4 text-white" />}
-              </div>
+          {/* Selection Checkbox (visible on hover or when selected) */}
+          <button
+            type="button"
+            aria-label={`Select ${photo.filename}`}
+            role="checkbox"
+            aria-checked={isSelected}
+            data-testid={`gallery-photo-checkbox-${photo.id}`}
+            className={`absolute top-2 right-2 z-20 transition-opacity ${
+              isSelected ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
+            }`}
+            onClick={(e) => { e.stopPropagation(); onToggleSelect(); }}
+          >
+            <div className={`w-6 h-6 rounded-full border-2 ${isSelected ? 'bg-primary-600 border-primary-600' : 'bg-white/90 border-white'} flex items-center justify-center transition-colors`}>
+              {isSelected && <Check className="w-4 h-4 text-white" />}
             </div>
-          )}
+          </button>
 
           {/* Feedback Indicators */}
           {feedbackEnabled && (photo.comment_count > 0 || photo.average_rating > 0 || photo.like_count > 0) && (
@@ -187,13 +198,8 @@ export const GridGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
           photo={photo}
           isSelected={selectedPhotos.has(photo.id)}
           isSelectionMode={isSelectionMode}
-          onClick={() => {
-            if (isSelectionMode && onPhotoSelect) {
-              onPhotoSelect(photo.id);
-            } else {
-              onPhotoClick(index);
-            }
-          }}
+          onClick={() => onPhotoClick(index)}
+          onToggleSelect={() => onPhotoSelect && onPhotoSelect(photo.id)}
           onDownload={(e) => onDownload(photo, e)}
           animationType={animation}
           allowDownloads={allowDownloads}
@@ -205,4 +211,4 @@ export const GridGalleryLayout: React.FC<BaseGalleryLayoutProps> = ({
       ))}
     </div>
   );
-};
+};