Merge branch 'ExtractCast'

Author: hatton

components/ImagePreviewDialog.tsx

@@ -0,0 +1,180 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Typography,
+} from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import { ImageRecord } from "../types";
+
+export interface ImagePreviewDialogProps {
+  open: boolean;
+  images: ImageRecord[];
+  onClose: () => void;
+}
+
+const getGridTemplateColumns = (imageCount: number) => {
+  if (imageCount <= 1) {
+    return "minmax(0, 1fr)";
+  }
+
+  return "repeat(2, minmax(0, 1fr))";
+};
+
+const getGridTemplateRows = (imageCount: number) => {
+  if (imageCount <= 2) {
+    return "minmax(0, 1fr)";
+  }
+
+  return "repeat(2, minmax(0, 1fr))";
+};
+
+export const ImagePreviewDialog: React.FC<ImagePreviewDialogProps> = ({
+  open,
+  images,
+  onClose,
+}) => {
+  const visibleImages = React.useMemo(() => images.slice(-4), [images]);
+
+  return (
+    <Dialog
+      open={open && visibleImages.length > 0}
+      onClose={onClose}
+      fullScreen
+      PaperProps={{
+        "data-testid": "image-preview-dialog",
+        sx: {
+          backgroundColor: "#06080d",
+          color: "#f8fafc",
+        },
+      }}
+    >
+      <DialogTitle sx={{ px: { xs: 2, sm: 3 }, py: 2, pr: 8, position: "relative" }}>
+        <Typography component="span" variant="h6" sx={{ fontWeight: 600 }}>
+          {visibleImages.length === 1
+            ? "Image preview"
+            : `${visibleImages.length} image preview`}
+        </Typography>
+        <IconButton
+          aria-label="Close image preview"
+          onClick={onClose}
+          data-testid="image-preview-dialog-close"
+          sx={{
+            position: "absolute",
+            right: 12,
+            top: 12,
+            color: "inherit",
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      </DialogTitle>
+
+      <DialogContent
+        sx={{
+          px: { xs: 2, sm: 3 },
+          py: 0,
+          display: "flex",
+          minHeight: 0,
+        }}
+      >
+        <Box
+          sx={{
+            display: "grid",
+            gridTemplateColumns: {
+              xs: "minmax(0, 1fr)",
+              sm: getGridTemplateColumns(visibleImages.length),
+            },
+            gridTemplateRows: {
+              xs: `repeat(${visibleImages.length}, minmax(0, 1fr))`,
+              sm: getGridTemplateRows(visibleImages.length),
+            },
+            gap: { xs: 2, sm: 3 },
+            width: "100%",
+            height: "100%",
+            minHeight: 0,
+          }}
+        >
+          {visibleImages.map((image, index) => {
+            const resolution = image.resolution
+              ? `${image.resolution.width} x ${image.resolution.height}`
+              : null;
+
+            return (
+              <Box
+                key={image.id}
+                data-testid={`image-preview-dialog-item-${index}`}
+                sx={{
+                  minWidth: 0,
+                  minHeight: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: 3,
+                  backgroundColor: "rgba(15, 23, 42, 0.68)",
+                  overflow: "hidden",
+                  position: "relative",
+                }}
+              >
+                <Box
+                  sx={{
+                    width: "100%",
+                    height: "100%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    p: { xs: 1.5, sm: 2 },
+                    minWidth: 0,
+                    minHeight: 0,
+                  }}
+                >
+                  <img
+                    src={image.imageData}
+                    alt={image.imageFileName || `Preview image ${index + 1}`}
+                    draggable={false}
+                    style={{
+                      display: "block",
+                      width: "auto",
+                      height: "auto",
+                      maxWidth: "100%",
+                      maxHeight: "100%",
+                      objectFit: "contain",
+                    }}
+                  />
+                </Box>
+                {resolution && (
+                  <Typography
+                    variant="caption"
+                    sx={{
+                      position: "absolute",
+                      left: 12,
+                      bottom: 12,
+                      px: 1,
+                      py: 0.5,
+                      borderRadius: 999,
+                      backgroundColor: "rgba(6, 8, 13, 0.76)",
+                      color: "#e2e8f0",
+                    }}
+                  >
+                    {resolution}
+                  </Typography>
+                )}
+              </Box>
+            );
+          })}
+        </Box>
+      </DialogContent>
+
+      <DialogActions sx={{ px: { xs: 2, sm: 3 }, py: 2.5, justifyContent: "center" }}>
+        <Button onClick={onClose} variant="contained" color="inherit">
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};

components/ImageSlot.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import imagePlaceholder from "../assets/image_placeholder.svg";
-import { GenerationProgressState, ImageRecord } from "../types";
+import { GenerationProgressState, ImageRecord, ImageSlotActionKey } from "../types";
 import { MagnifiableImage } from "./MagnifiableImage";
+import { Icon, Icons } from "./Icons";
 import { kPrimary, theme } from "../themes";
 import { ImageSlotHeader } from "./ImageSlotHeader";
 import { ImageSlotActions, ImageSlotActionsHandle } from "./ImageSlotActions";
@@ -70,6 +71,8 @@ export interface ImageSlotProps {
   disabled?: boolean;
   isDropZone?: boolean;
   onClick?: () => void;
+  previewModifierActive?: boolean;
+  previewSelected?: boolean;
   isSelected?: boolean;
   onDrop?: (imageId: string) => void;
   onUpload?: (file: File) => void;
@@ -87,6 +90,7 @@ export interface ImageSlotProps {
   dropLabel?: string;
   dataTestId?: string;
   actionLabels?: Partial<Record<keyof ImageSlotControls, string>>;
+  actionDisabledReasons?: Partial<Record<ImageSlotActionKey, string>>;
   removeIcon?: string;
   starState?: { isStarred: boolean; onToggle: () => void };
   isAnyDndDragging?: boolean;
@@ -240,6 +244,8 @@ export const ImageSlot: React.FC<ImageSlotProps> = ({
   disabled = false,
   isDropZone = false,
   onClick,
+  previewModifierActive = false,
+  previewSelected = false,
   isSelected = false,
   onDrop,
   onUpload,
@@ -257,6 +263,7 @@ export const ImageSlot: React.FC<ImageSlotProps> = ({
   dropLabel = "Drop image",
   dataTestId,
   actionLabels,
+  actionDisabledReasons,
   removeIcon,
   starState,
   isAnyDndDragging: isAnyDndDraggingProp = false,
@@ -643,6 +650,7 @@ export const ImageSlot: React.FC<ImageSlotProps> = ({
         supportsUpload={!!onUpload}
         supportsRemove={!!onRemove}
         actionLabels={actionLabels}
+        actionDisabledReasons={actionDisabledReasons}
         removeIcon={removeIcon}
         iconSize={ACTION_ICON_SIZE}
         buttonPadding={ACTION_BUTTON_PADDING}
@@ -710,7 +718,12 @@ export const ImageSlot: React.FC<ImageSlotProps> = ({
                   ? 1
                   : 0.8
               : 1,
-          cursor: !disabled && (onClick || variant === "thumb") ? "pointer" : "default",
+          cursor:
+            !disabled && variant === "thumb" && !!image && previewModifierActive
+              ? "zoom-in"
+              : !disabled && (onClick || variant === "thumb")
+                ? "pointer"
+                : "default",
           pointerEvents: disabled ? "none" : "auto",
           filter: disabled ? "grayscale(1)" : "none",
           borderColor: isDragOver
@@ -795,6 +808,37 @@ export const ImageSlot: React.FC<ImageSlotProps> = ({
               emptyStateContent
             )}
 
+            {variant === "thumb" && image && previewSelected ? (
+              <div
+                data-testid="preview-selection-indicator"
+                style={{
+                  position: "absolute",
+                  inset: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  backgroundColor: "rgba(7, 12, 20, 0.34)",
+                  pointerEvents: "none",
+                }}
+              >
+                <div
+                  style={{
+                    width: 52,
+                    height: 52,
+                    borderRadius: "50%",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    backgroundColor: "rgba(255, 255, 255, 0.92)",
+                    boxShadow: "0 12px 28px rgba(15, 23, 42, 0.32)",
+                    color: theme.colors.textPrimary,
+                  }}
+                >
+                  <Icon path={Icons.Magnifier} width={28} height={28} />
+                </div>
+              </div>
+            ) : null}
+
             <ImageSlotActions
               ref={thumbActionsRef}
               placement="overlay"
@@ -806,6 +850,7 @@ export const ImageSlot: React.FC<ImageSlotProps> = ({
               supportsUpload={!!onUpload}
               supportsRemove={!!onRemove}
               actionLabels={actionLabels}
+              actionDisabledReasons={actionDisabledReasons}
               removeIcon={removeIcon}
               iconSize={ACTION_ICON_SIZE}
               buttonPadding={ACTION_BUTTON_PADDING}