feat(Admin > Edit Album): Yellow border to indicate multiple selected thumbs

Author: danactive

src/components/AdminAlbum/Thumbs.tsx

@@ -14,6 +14,7 @@ export default function AdminAlbumThumbs(
   },
 ) {
   const items = xmlAlbum.album.item ? (Array.isArray(xmlAlbum.album.item) ? xmlAlbum.album.item : [xmlAlbum.album.item]) : []
+  const hasMultiSelection = (selectedIndices?.size ?? 0) > 1
 
   if (items.length === 0) {
     return <div>No items found</div>
@@ -34,6 +35,7 @@ export default function AdminAlbumThumbs(
               key={filename}
               id={`select${item.$.id}`}
               viewed={isSelected}
+              multiSelected={hasMultiSelection && isSelected}
             />
           )
         })}

src/components/ThumbImg/index.tsx

@@ -4,9 +4,9 @@ import config from '../../../src/models/config'
 import Img from '../Img'
 import styles from './styles.module.css'
 
-function getViewed(viewed: boolean) {
+function getViewed(viewed: boolean, multiSelected: boolean) {
   if (viewed) {
-    return `${styles.highlight} ${styles.imgButton}`
+    return `${multiSelected ? styles.highlightMulti : styles.highlight} ${styles.imgButton}`
   }
   return styles.imgButton
 }
@@ -18,13 +18,15 @@ function ThumbImg({
   src,
   id,
   viewed: globalViewed = false,
+  multiSelected = false,
 }: {
   onClick?: (event: MouseEvent<HTMLAnchorElement | HTMLUListElement>) => void;
   caption: string;
   href?: string;
   src: string;
   id: string;
   viewed: boolean;
+  multiSelected?: boolean;
 }) {
   // Keep visuals (local state for immediate feedback) but never reset globally
   const [viewed, setViewed] = useState(globalViewed)
@@ -43,7 +45,7 @@ function ThumbImg({
 
   return (
     <li className={styles.bullet}>
-      <a className={getViewed(globalViewed || viewed)} href={href} onClick={handleClick} id={id}>
+      <a className={getViewed(globalViewed || viewed, multiSelected)} href={href} onClick={handleClick} id={id}>
         <Img
           src={src}
           alt={caption}

src/components/ThumbImg/styles.module.css

@@ -25,3 +25,6 @@
 .highlight {
   border-color: white;
 }
+.highlightMulti {
+  border-color: #d9c24a;
+}