Merged in release/2025-12-19 (pull request #2777)

IO-3431 Job Image Gallery

client/src/components/jobs-documents-local-gallery/local-media-grid.component.jsx

@@ -1,3 +1,4 @@
+import { Checkbox } from "antd";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 /**
@@ -7,18 +8,19 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
  *  - images: Array<{ src, fullsize, filename?, isSelected? }>
  *  - onToggle(index)
  *  - onClick(index) optional for viewing
+ *  - thumbSize: automatically set to 125 for chat, 250 for default
  */
 export function LocalMediaGrid({
   images,
   onToggle,
   onClick,
-  thumbSize = 100,
   gap = 8,
   minColumns = 3,
   maxColumns = 12,
   context = "default",
   expandHeight = false
 }) {
+  const thumbSize = context === "chat" ? 100 : 180;
   const containerRef = useRef(null);
   const [cols, setCols] = useState(() => {
     // Pre-calc initial columns to stabilize layout before images render
@@ -133,7 +135,7 @@ export function LocalMediaGrid({
           role="listitem"
           tabIndex={0}
           aria-label={img.filename || `image ${idx + 1}`}
-          onClick={() => onClick ? onClick(idx) : onToggle(idx)}
+          onClick={() => (onClick ? onClick(idx) : onToggle(idx))}
           onKeyDown={(e) => handleKeyDown(e, idx)}
           style={{
             position: "relative",
@@ -200,8 +202,7 @@ export function LocalMediaGrid({
             />
           )}
           {onClick && (
-            <input
-              type="checkbox"
+            <Checkbox
               checked={img.isSelected}
               onChange={(e) => {
                 e.stopPropagation();
@@ -209,10 +210,12 @@ export function LocalMediaGrid({
               }}
               onClick={(e) => e.stopPropagation()}
               style={{
-                position: 'absolute',
+                position: "absolute",
                 top: 5,
-                right: 5,
-                zIndex: 2
+                left: 5,
+                zIndex: 2,
+                opacity: img.isSelected ? 1 : 0.4,
+                transition: "opacity 0.3s"
               }}
             />
           )}