- feat: Enhance LyricSearch and Memes components with new features and styling improvements

Bump major version -> 0.3

src/components/Memes.jsx

@@ -2,6 +2,9 @@ import { useEffect, useState, useRef, useCallback } from "react";
 import { ProgressSpinner } from 'primereact/progressspinner';
 import { Dialog } from 'primereact/dialog';
 import { Image } from 'primereact/image';
+import IconButton from '@mui/joy/IconButton';
+import FileCopyRoundedIcon from '@mui/icons-material/FileCopyRounded';
+import { toast } from 'react-toastify';
 import { API_URL } from '../config';
 
 const MEME_API_URL = `${API_URL}/memes/list_memes`;
@@ -13,10 +16,77 @@ const Memes = () => {
   const [loading, setLoading] = useState(false);
   const [hasMore, setHasMore] = useState(true);
   const [selectedImage, setSelectedImage] = useState(null);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
   const observerRef = useRef();
   const theme = document.documentElement.getAttribute("data-theme")
+  const cacheRef = useRef({ pagesLoaded: new Set(), items: [] });
+
+  const prefetchImage = useCallback((img) => {
+    if (!img || typeof window === "undefined") return;
+    const preload = new window.Image();
+    preload.src = img.url;
+  }, []);
+
+  const handleNavigate = useCallback((direction) => {
+    setSelectedIndex((prev) => {
+      const newIndex = prev + direction;
+      if (newIndex < 0 || newIndex >= images.length) {
+        return prev;
+      }
+      const nextImage = images[newIndex];
+      setSelectedImage(nextImage);
+      prefetchImage(images[newIndex + 1]);
+      return newIndex;
+    });
+  }, [images, prefetchImage]);
+
+  useEffect(() => {
+    if (!selectedImage) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        handleNavigate(-1);
+      } else if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        handleNavigate(1);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [selectedImage, handleNavigate]);
+  useEffect(() => {
+    const cached = sessionStorage.getItem("memes-cache");
+    if (cached) {
+      try {
+        const parsed = JSON.parse(cached);
+        cacheRef.current = {
+          pagesLoaded: new Set(parsed.pagesLoaded || []),
+          items: parsed.items || [],
+        };
+        setImages(parsed.items || []);
+        setPage(parsed.nextPage || 1);
+        setHasMore(parsed.hasMore ?? true);
+      } catch (e) {
+        console.warn("Failed to parse meme cache", e);
+      }
+    }
+  }, []);
+  const persistCache = useCallback((nextPage) => {
+    sessionStorage.setItem("memes-cache", JSON.stringify({
+      items: cacheRef.current.items,
+      pagesLoaded: Array.from(cacheRef.current.pagesLoaded),
+      nextPage,
+      hasMore,
+    }));
+  }, [hasMore]);
+
   const loadImages = async (pageNum, attempt = 0) => {
-    if (loading || !hasMore) return;
+    if (loading || !hasMore || cacheRef.current.pagesLoaded.has(pageNum)) return;
     setLoading(true);
     try {
       const res = await fetch(`${MEME_API_URL}?page=${pageNum}`);
@@ -47,8 +117,14 @@ const Memes = () => {
         url: `${BASE_IMAGE_URL}/${m.id}.png`,
       }));
 
-      setImages(prev => [...prev, ...imageObjects]);
-      setPage(prev => prev + 1);
+      cacheRef.current.pagesLoaded.add(pageNum);
+      cacheRef.current.items = [...cacheRef.current.items, ...imageObjects];
+      setImages(cacheRef.current.items);
+      setPage(prev => {
+        const next = prev + 1;
+        persistCache(next);
+        return next;
+      });
     } catch (e) {
       console.error("Failed to load memes", e);
       toast.error("Failed to load more memes.");
@@ -69,9 +145,37 @@ const Memes = () => {
   }, [loading, hasMore, page]);
 
   useEffect(() => {
-    loadImages(1);
+    if (!cacheRef.current.pagesLoaded.size) {
+      loadImages(1);
+    }
   }, []);
 
+  const canGoPrev = selectedIndex > 0;
+  const canGoNext = selectedIndex >= 0 && selectedIndex < images.length - 1;
+
+  const closeDialog = useCallback(() => {
+    setSelectedImage(null);
+    setSelectedIndex(-1);
+  }, []);
+
+  const handleCopyImage = useCallback(async () => {
+    if (!selectedImage) return;
+    try {
+      const res = await fetch(selectedImage.url, { mode: "cors" });
+      const blob = await res.blob();
+      if (!navigator.clipboard?.write) {
+        throw new Error("Clipboard API not available");
+      }
+      await navigator.clipboard.write([
+        new window.ClipboardItem({ [blob.type || "image/png"]: blob })
+      ]);
+      toast.success("Image copied", { autoClose: 1500 });
+    } catch (err) {
+      console.error("Copy image failed", err);
+      toast.error("Unable to copy image");
+    }
+  }, [selectedImage]);
+
   return (
     <>
       <div className="grid-container">
@@ -82,7 +186,11 @@ const Memes = () => {
               key={img.id}
               className="grid-item"
               ref={isLast ? lastImageRef : null}
-              onClick={() => setSelectedImage(img)}
+              onClick={() => {
+                setSelectedImage(img);
+                setSelectedIndex(i);
+                prefetchImage(images[i + 1]);
+              }}
               style={{ cursor: 'pointer' }}
             >
               <Image
@@ -103,9 +211,27 @@ const Memes = () => {
 
       {/* Dialog for enlarged image */}
       <Dialog
-        header={`Meme #${selectedImage?.id} - ${selectedImage?.timestamp}`}
+        header={
+          <div className="meme-dialog-header">
+            <span>Meme #{selectedImage?.id} - {selectedImage?.timestamp}</span>
+            <div className="meme-dialog-actions">
+              <div className="meme-dialog-tooltip-wrapper">
+                <IconButton
+                  size="sm"
+                  variant="plain"
+                  color="neutral"
+                  aria-label="Copy image"
+                  onClick={handleCopyImage}
+                >
+                  <FileCopyRoundedIcon fontSize="small" />
+                </IconButton>
+                <span className="meme-dialog-tooltip">Copy image</span>
+              </div>
+            </div>
+          </div>
+        }
         visible={!!selectedImage}
-        onHide={() => setSelectedImage(null)}
+        onHide={closeDialog}
         style={{ width: '90vw', maxWidth: '720px' }}
         className={`d-${theme}`}
         modal
@@ -113,18 +239,38 @@ const Memes = () => {
         dismissableMask={true}
       >
         {selectedImage && (
-          <img
-            src={selectedImage.url}
-            alt={`meme-${selectedImage.id}`}
-            style={{
-              maxWidth: '100%',
-              maxHeight: '70vh', // restrict height to viewport height
-              objectFit: 'contain',
-              display: 'block',
-              margin: '0 auto',
-              borderRadius: '6px',
-            }}
-          />
+          <div className="meme-dialog-body">
+            <button
+              type="button"
+              className="meme-dialog-nav meme-dialog-nav-prev"
+              onClick={() => handleNavigate(-1)}
+              disabled={!canGoPrev}
+              aria-label="Previous meme"
+            >
+              ‹
+            </button>
+            <img
+              src={selectedImage.url}
+              alt={`meme-${selectedImage.id}`}
+              style={{
+                maxWidth: '100%',
+                maxHeight: '70vh',
+                objectFit: 'contain',
+                display: 'block',
+                margin: '0 auto',
+                borderRadius: '6px',
+              }}
+            />
+            <button
+              type="button"
+              className="meme-dialog-nav meme-dialog-nav-next"
+              onClick={() => handleNavigate(1)}
+              disabled={!canGoNext}
+              aria-label="Next meme"
+            >
+              ›
+            </button>
+          </div>
 
         )}
       </Dialog>