feat: Added anchor when jumping back to grid

src/components/GridView/GridImage.tsx

@@ -5,43 +5,46 @@ import LazyLoad from 'react-lazy-load';
 interface GridImageProps {
   image: NostrImage;
   onClick?: MouseEventHandler | undefined;
+  index: number;
 }
 
-const GridImage = ({ image, onClick }: GridImageProps) => {
+const GridImage = ({ image, onClick, index }: GridImageProps) => {
   const [loaded, setLoaded] = useState(false);
 
   const mediaIsVideo = isVideo(image.url);
 
   return (
-    <LazyLoad height={200}>
-      {mediaIsVideo ? (
-        <video
-          className={`image ${loaded ? 'show' : ''}`}
-          data-node-id={image.noteId}
-          key={image.url}
-          controls={false}
-          autoPlay={false}
-          onClick={onClick}
-          src={image.url + '#t=0.1'}
-          playsInline
-          onLoad={() => setLoaded(true)}
-        ></video>
-      ) : (
-        <img
-          data-node-id={image.noteId}
-          onError={(e: SyntheticEvent<HTMLImageElement>) => {
-            console.log('not found: ', e.currentTarget.src);
-            e.currentTarget.src = '/notfound.png';
-          }}
-          className={`image ${loaded ? 'show' : ''}`}
-          onLoad={() => setLoaded(true)}
-          loading="lazy"
-          key={image.url}
-          onClick={onClick}
-          src={createImgProxyUrl(image.url)}
-        ></img>
-      )}
-    </LazyLoad>
+    <a id={'g' + index}>
+      <LazyLoad height={200}>
+        {mediaIsVideo ? (
+          <video
+            className={`image ${loaded ? 'show' : ''}`}
+            data-node-id={image.noteId}
+            key={image.url}
+            controls={false}
+            autoPlay={false}
+            onClick={onClick}
+            src={image.url + '#t=0.1'}
+            playsInline
+            onLoad={() => setLoaded(true)}
+          ></video>
+        ) : (
+          <img
+            data-node-id={image.noteId}
+            onError={(e: SyntheticEvent<HTMLImageElement>) => {
+              console.log('not found: ', e.currentTarget.src);
+              e.currentTarget.src = '/notfound.png';
+            }}
+            className={`image ${loaded ? 'show' : ''}`}
+            onLoad={() => setLoaded(true)}
+            loading="lazy"
+            key={image.url}
+            onClick={onClick}
+            src={createImgProxyUrl(image.url)}
+          ></img>
+        )}
+      </LazyLoad>
+    </a>
   );
 };
 

src/components/GridView/ScrollImage.tsx

@@ -57,15 +57,6 @@ const ScrollImage = ({ image, currentImage, setCurrentImage, index }: ScrollImag
     }
   }, [isVisible, videoRef, index, currentImage, setCurrentImage, mediaIsVideo]);
 
-  /* not needed anymore
-  useEffect(() => {
-    if (currentImage == index) {
-      containerRef.current?.focus();
-      console.log('setting self focus ' + currentImage);
-    }
-  }, [currentImage, index]);
-  */
-
   return (
     <div
       ref={containerRef}

src/components/GridView/index.tsx

@@ -60,6 +60,12 @@ const GridView = ({ settings, images, currentImage, setCurrentImage, setViewMode
 
   useEffect(() => {
     document.body.addEventListener('keydown', onKeyDown);
+
+    if (currentImage) {
+      console.log('setting hash to #g' + currentImage);
+      window.location.hash = '#g' + currentImage;
+    }
+
     return () => {
       document.body.removeEventListener('keydown', onKeyDown);
     };
@@ -77,7 +83,16 @@ const GridView = ({ settings, images, currentImage, setCurrentImage, setViewMode
        */}
       <div className="imagegrid">
         {sortedImages.map((image, idx) => (
-          <GridImage key={image.url} image={image} onClick={() => {setCurrentImage(idx); setViewMode('scroll');}}></GridImage>
+          <GridImage
+            index={idx}
+            key={image.url}
+            image={image}
+            onClick={(e) => {
+              e.stopPropagation();
+              setCurrentImage(idx);
+              setViewMode('scroll');
+            }}
+          ></GridImage>
         ))}
       </div>
       {activeProfile && (