IO-3431 Add Tags to Images and Documents

Signed-off-by: Allan Carr <allan@imexsystems.ca>

client/src/components/jobs-documents-local-gallery/jobs-documents-local-gallery.container.jsx

@@ -67,6 +67,7 @@ export function JobsDocumentsLocalGallery({
               src: val.thumbnail,
               height: val.thumbnailHeight,
               width: val.thumbnailWidth,
+              tags: [{ value: val.filename, title: val.filename }],
               ...(val.optimized && { src: val.optimized, fullsize: val.src })
             });
             if (val.optimized) optimized = true;
@@ -77,7 +78,8 @@ export function JobsDocumentsLocalGallery({
               src: val.thumbnail,
               height: val.thumbnailHeight,
               width: val.thumbnailWidth,
-              tags: [{ value: val.filename, title: val.filename }]
+              tags: [
+                { value: val.filename, title: val.filename }]
             });
           }
           return acc;

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

@@ -1,4 +1,5 @@
 import { Checkbox } from "antd";
+import { Tag } from "antd";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 /**
@@ -187,6 +188,30 @@ export function LocalMediaGrid({
                     transition: "opacity .25s ease"
                   }}
                 />
+                {img.tags && img.tags.length > 0 && (
+                  <div
+                    style={{
+                      position: "absolute",
+                      bottom: 0,
+                      left: 0,
+                      right: 0,
+                      padding: "2px 6px",
+                      borderRadius: "0 0 4px 4px",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      whiteSpace: "nowrap",
+                      display: "flex",
+                      flexWrap: "wrap",
+                      gap: "4px"
+                    }}
+                  >
+                    {img.tags.map((tag, tagIdx) => (
+                      <Tag key={tagIdx} variant="outlined" color="gold" style={{ opacity: 0.8 }}>
+                        {tag.value || tag.title}
+                      </Tag>
+                    ))}
+                  </div>
+                )}
               </>
             );
           })()}