+
+ );
+ }
return (
- No job selected.
+
- {
- setgalleryImages(galleryImages.map((g, idx) => (index === idx ? { ...g, isSelected: !g.isSelected } : g)));
- }}
- />
+
+ {isLoading && galleryImages.length === 0 && (
+
);
}
diff --git a/client/src/components/jobs-documents-local-gallery/local-media-grid.component.jsx b/client/src/components/jobs-documents-local-gallery/local-media-grid.component.jsx
new file mode 100644
index 000000000..277351296
--- /dev/null
+++ b/client/src/components/jobs-documents-local-gallery/local-media-grid.component.jsx
@@ -0,0 +1,207 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+/**
+ * LocalMediaGrid
+ * Lightweight replacement for react-grid-gallery inside the chat popover.
+ * Props:
+ * - images: Array<{ src, fullsize, filename?, isSelected? }>
+ * - onToggle(index)
+ */
+export function LocalMediaGrid({
+ images,
+ onToggle,
+ thumbSize = 100,
+ gap = 8,
+ minColumns = 3,
+ maxColumns = 12,
+ context = "default"
+}) {
+ const containerRef = useRef(null);
+ const [cols, setCols] = useState(() => {
+ // Pre-calc initial columns to stabilize layout before images render
+ const count = images.length;
+ if (count === 0) return minColumns; // reserve minimal structure
+ if (count === 1 && context === "chat") return 1;
+ return Math.min(maxColumns, Math.max(minColumns, count));
+ });
+ const [justifyMode, setJustifyMode] = useState("start");
+ const [distributeExtra, setDistributeExtra] = useState(false);
+ const [loadedMap, setLoadedMap] = useState(() => new Map()); // filename -> boolean loaded
+
+ const handleImageLoad = useCallback((key) => {
+ setLoadedMap((prev) => {
+ if (prev.get(key)) return prev; // already loaded
+ const next = new Map(prev);
+ next.set(key, true);
+ return next;
+ });
+ }, []);
+
+ // Dynamically compute columns for all contexts to avoid auto-fit stretching gaps in email overlay
+ useEffect(() => {
+ const el = containerRef.current;
+ if (!el) return;
+ const compute = () => {
+ // For non-chat (email / default) we rely on CSS auto-fill; only chat needs explicit column calc & distribution logic.
+ if (context !== "chat") {
+ setCols(images.length || 0); // retain count for ARIA semantics; not used for template when non-chat.
+ setDistributeExtra(false);
+ return;
+ }
+ const width = el.clientWidth;
+ if (!width) return;
+ const perCol = thumbSize + gap; // track + gap space
+ const fitCols = Math.max(1, Math.floor((width + gap) / perCol));
+ // base desired columns: up to how many images we have and how many fit
+ let finalCols = Math.min(images.length || 1, fitCols, maxColumns);
+ // enforce minimum columns to reserve layout skeleton (except when fewer images)
+ if (finalCols < minColumns && images.length >= minColumns) {
+ finalCols = Math.min(fitCols, minColumns);
+ }
+ // chat-specific clamp
+ if (context === "chat") {
+ finalCols = Math.min(finalCols, 4);
+ }
+ if (finalCols < 1) finalCols = 1;
+ setCols(finalCols);
+ setJustifyMode("start");
+
+ // Determine if there is leftover horizontal space that can't fit another column.
+ // Only distribute when we're at the maximum allowed columns for the context and images exceed or meet that count.
+ const contextMax = context === "chat" ? 4 : maxColumns;
+ const baseWidthNeeded = finalCols * thumbSize + (finalCols - 1) * gap;
+ const leftover = width - baseWidthNeeded;
+ const atMaxColumns = finalCols === contextMax && images.length >= finalCols;
+ // leftover must be positive but less than space needed for an additional column (perCol)
+ if (atMaxColumns && leftover > 0 && leftover < perCol) {
+ setDistributeExtra(true);
+ } else {
+ setDistributeExtra(false);
+ }
+ };
+ compute();
+ const ro = new ResizeObserver(() => compute());
+ ro.observe(el);
+ return () => ro.disconnect();
+ }, [images.length, thumbSize, gap, minColumns, maxColumns, context]);
+
+ const gridTemplateColumns = useMemo(() => {
+ if (context === "chat") {
+ if (distributeExtra) {
+ return `repeat(${cols}, minmax(${thumbSize}px, 1fr))`;
+ }
+ return `repeat(${cols}, ${thumbSize}px)`;
+ }
+ // Non-chat contexts: allow browser to auto-fill columns; fixed min (thumbSize) ensures squares; tracks expand to distribute remaining space.
+ return `repeat(auto-fill, minmax(${thumbSize}px, 1fr))`;
+ }, [cols, thumbSize, distributeExtra, context]);
+ const stableWidth = undefined; // no fixed width
+
+ const handleKeyDown = useCallback(
+ (e, idx) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ onToggle(idx);
+ }
+ },
+ [onToggle]
+ );
+
+ return (
+
+
+ )}
+ {galleryImages.length > 0 && (
+
+ {`${t("general.labels.media")}: ${galleryImages.length}`}
+
+ )}
+ {images.map((img, idx) => (
+
+ );
+}
+
+export default LocalMediaGrid;
diff --git a/client/src/redux/media/media.reducer.js b/client/src/redux/media/media.reducer.js
index ace8cac46..7199fdff2 100644
--- a/client/src/redux/media/media.reducer.js
+++ b/client/src/redux/media/media.reducer.js
@@ -19,29 +19,19 @@ const mediaReducer = (state = INITIAL_STATE, action) => {
case MediaActionTypes.TOGGLE_MEDIA_SELECTED:
return {
...state,
- [action.payload.jobid]: state[action.payload.jobid].map((p) => {
- if (p.filename === action.payload.filename) {
- p.isSelected = !p.isSelected;
- }
- return p;
- })
+ [action.payload.jobid]: state[action.payload.jobid].map((p) =>
+ p.filename === action.payload.filename ? { ...p, isSelected: !p.isSelected } : p
+ )
};
case MediaActionTypes.SELECT_ALL_MEDIA_FOR_JOB:
return {
...state,
- [action.payload.jobid]: state[action.payload.jobid].map((p) => {
- p.isSelected = true;
-
- return p;
- })
+ [action.payload.jobid]: state[action.payload.jobid].map((p) => ({ ...p, isSelected: true }))
};
case MediaActionTypes.DESELECT_ALL_MEDIA_FOR_JOB:
return {
...state,
- [action.payload.jobid]: state[action.payload.jobid].map((p) => {
- p.isSelected = false;
- return p;
- })
+ [action.payload.jobid]: state[action.payload.jobid].map((p) => ({ ...p, isSelected: false }))
};
default:
return state;
diff --git a/client/src/redux/media/media.selectors.js b/client/src/redux/media/media.selectors.js
index e5c930e5c..8c1123bb1 100644
--- a/client/src/redux/media/media.selectors.js
+++ b/client/src/redux/media/media.selectors.js
@@ -2,4 +2,5 @@ import { createSelector } from "reselect";
const selectMedia = (state) => state.media;
-export const selectAllMedia = createSelector([selectMedia], (media) => media);
+// Return a shallow copy to avoid identity selector warning and allow memoization to detect actual changes.
+export const selectAllMedia = createSelector([selectMedia], (media) => ({ ...media }));
onToggle(idx)}
+ onKeyDown={(e) => handleKeyDown(e, idx)}
+ style={{
+ position: "relative",
+ border: img.isSelected ? "2px solid #1890ff" : "1px solid #ccc",
+ outline: "none",
+ borderRadius: 4,
+ cursor: "pointer",
+ background: "#fafafa",
+ width: thumbSize,
+ height: thumbSize,
+ overflow: "hidden",
+ boxSizing: "border-box"
+ }}
+ >
+ {(() => {
+ const key = img.filename || idx;
+ const loaded = loadedMap.get(key) === true;
+ return (
+ <>
+ {!loaded && (
+
+ )}
+ 
handleImageLoad(key)}
+ style={{
+ width: thumbSize,
+ height: thumbSize,
+ objectFit: "cover",
+ display: "block",
+ borderRadius: 4,
+ opacity: loaded ? 1 : 0,
+ transition: "opacity .25s ease"
+ }}
+ />
+
+ );
+ })()}
+ {img.isSelected && (
+
+ )}
+
+ ))}
+ {/* No placeholders needed; layout uses auto-fit for non-chat or fixed columns for chat */}
+