chore(View Album > useSearch): Bookmark anchors you in your current filtered view, while Clear anchors you to the photo while blowing away the filters.

Author: danactive

src/components/Album/AlbumClient.tsx

@@ -40,15 +40,10 @@ function AlbumClient({ items = [], meta, indexedKeywords, clusteredMarkers }: Al
 
   useEffect(() => {
     if (!selectId || itemsToShow.length === 0) return
-    let idx = itemsToShow.findIndex(i => i.id === selectId)
-
-    // Fallback: try matching by filename (for All view where IDs may not be unique)
-    if (idx < 0) {
-      idx = itemsToShow.findIndex(i => {
-        const filename = Array.isArray(i.filename) ? i.filename[0] : i.filename
-        return filename === selectId
-      })
-    }
+    const idx = itemsToShow.findIndex(i => {
+      const filename = Array.isArray(i.filename) ? i.filename[0] : i.filename
+      return filename === selectId
+    })
 
     // Only slide if we found the item (idx >= 0) AND the gallery isn't already at that index
     if (idx >= 0 && refImageGallery.current?.getCurrentIndex?.() !== idx) {

src/components/All/AllClient.tsx

@@ -35,21 +35,22 @@ export default function AllClient({ items, indexedKeywords, clusteredMarkers }:
   // Handle URL ?select= parameter
   useEffect(() => {
     if (!selectId || itemsToShow.length === 0) return
-    let idx = itemsToShow.findIndex(i => i.id === selectId)
 
-    // Fallback: try matching by filename
-    if (idx < 0) {
-      idx = itemsToShow.findIndex(i => {
-        const filename = Array.isArray(i.filename) ? i.filename[0] : i.filename
-        return filename === selectId
-      })
-    }
+    const idx = itemsToShow.findIndex(i => {
+      const filename = Array.isArray(i.filename) ? i.filename[0] : i.filename
+      return filename === selectId
+    })
 
-    // Only slide if found and not already at that index
-    if (idx >= 0 && refImageGallery.current?.getCurrentIndex?.() !== idx) {
-      refImageGallery.current?.slideToIndex(idx)
-      setMemoryIndex(idx)
-      setViewed(idx)
+    if (idx >= 0) {
+      // Use timeout to allow gallery to process items update (which might reset index)
+      // before enforcing the selected index
+      setTimeout(() => {
+        if (refImageGallery.current?.getCurrentIndex?.() !== idx) {
+          refImageGallery.current?.slideToIndex(idx)
+          setMemoryIndex(idx)
+          setViewed(idx)
+        }
+      }, 0)
     }
   }, [selectId, itemsToShow, refImageGallery, setMemoryIndex, setViewed])
 

src/components/All/Items.tsx

@@ -24,7 +24,7 @@ function All({ items, keyword, refImageGallery }: InputProps) {
       {items.map((item, index) => (
         <li key={item.filename.toString()}>
           <b className={styles.albumName}>{item.album}</b>
-          <Link href={`/${item.gallery}/${item.album}?select=${item.id}`} title={item.corpus}>
+          <Link href={`/${item.gallery}/${item.album}?select=${Array.isArray(item.filename) ? item.filename[0] : item.filename}`} title={item.corpus}>
             {!showThumbnail(keyword) && item.caption}
             {showThumbnail(keyword) && <Img src={item.thumbPath} alt={item.caption} title={item.corpus} width={width} height={height} />}
           </Link>

src/components/Persons/PersonsClient.tsx

@@ -41,21 +41,20 @@ export default function PersonsClient({
   // Handle URL ?select= parameter
   useEffect(() => {
     if (!selectId || ageFiltered.length === 0) return
-    let idx = ageFiltered.findIndex(i => i.id === selectId)
 
-    // Fallback: try matching by filename
-    if (idx < 0) {
-      idx = ageFiltered.findIndex(i => {
-        const filename = Array.isArray(i.filename) ? i.filename[0] : i.filename
-        return filename === selectId
-      })
-    }
+    const idx = ageFiltered.findIndex(i => {
+      const filename = Array.isArray(i.filename) ? i.filename[0] : i.filename
+      return filename === selectId
+    })
 
-    // Only slide if found and not already at that index
-    if (idx >= 0 && refImageGallery.current?.getCurrentIndex?.() !== idx) {
-      refImageGallery.current?.slideToIndex(idx)
-      setMemoryIndex(idx)
-      setViewed(idx)
+    if (idx >= 0) {
+      setTimeout(() => {
+        if (refImageGallery.current?.getCurrentIndex?.() !== idx) {
+          refImageGallery.current?.slideToIndex(idx)
+          setMemoryIndex(idx)
+          setViewed(idx)
+        }
+      }, 0)
     }
   }, [selectId, ageFiltered, refImageGallery, setMemoryIndex, setViewed])
 

src/hooks/useBookmark.tsx

@@ -1,23 +1,31 @@
 'use client'
 
 import { Button } from '@mui/joy'
+import { useRouter } from 'next/navigation'
 import type { RefObject } from 'react'
 
 interface UseBookmarkProps<ItemType> {
   refImageGallery?: RefObject<any>
   displayedItems: ItemType[]
   pathname: string
+  currentIndex?: number
+  selectById?: (id: string) => void
 }
 
 export default function useBookmark<ItemType>({
   refImageGallery,
   displayedItems,
   pathname,
+  currentIndex,
+  selectById,
 }: UseBookmarkProps<ItemType>) {
+  const router = useRouter()
+
   const handleBookmark = () => {
     // Get current photo ID from displayed items (respects map filter)
-    const currentIndex = refImageGallery?.current?.getCurrentIndex?.() ?? 0
-    const currentItem = displayedItems[currentIndex]
+    const galleryIndex = refImageGallery?.current?.getCurrentIndex?.()
+    const indexToUse = typeof galleryIndex === 'number' ? galleryIndex : (currentIndex ?? 0)
+    const currentItem = displayedItems[indexToUse]
     if (!currentItem) return
 
     // Use filename as unique identifier (works across all albums)
@@ -26,9 +34,17 @@ export default function useBookmark<ItemType>({
       : (currentItem as any).filename
     if (!identifier) return
 
+    // Notify parent to track selection (updates memoryIndex to match ID)
+    if (selectById) {
+      selectById(identifier)
+    }
+
     // Copy bookmark URL to clipboard
     const bookmarkUrl = `${window.location.origin}${pathname}?select=${identifier}`
     navigator.clipboard.writeText(bookmarkUrl)
+
+    // Update URL to reflect the selection
+    router.replace(`${pathname}?select=${identifier}`, { scroll: false })
   }
 
   const BookmarkButton = () => (

src/hooks/useMapFilter.ts

@@ -50,6 +50,7 @@ export default function useMapFilter({ items, indexedKeywords }: All.ItemData) {
     setDisplayedItems,
   } = useSearch({
     items,
+    memoryIndex,
     setMemoryIndex,
     indexedKeywords,
     refImageGallery,

src/hooks/useSearch.tsx

@@ -19,6 +19,7 @@ interface ServerSideItem {
 
 interface UseSearchProps<ItemType> {
   items: ItemType[];
+  memoryIndex?: number;
   setMemoryIndex?: Dispatch<SetStateAction<number>>;
   indexedKeywords?: IndexedKeywords[];
   refImageGallery?: React.RefObject<any>;
@@ -29,6 +30,7 @@ interface UseSearchProps<ItemType> {
 
 export default function useSearch<ItemType extends ServerSideItem>({
   items,
+  memoryIndex,
   setMemoryIndex,
   indexedKeywords = [],
   refImageGallery,
@@ -116,6 +118,8 @@ export default function useSearch<ItemType extends ServerSideItem>({
     refImageGallery,
     displayedItems: displayedItems || filtered,
     pathname,
+    currentIndex: memoryIndex,
+    selectById,
   })
 
   const keywordResultLabel = keyword ? <> for &quot;{keyword}&quot;</> : null