Add History Panel

src/app/page.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { ClipboardImage } from "@components/ClipboardImage";
 import { ActionPanel } from "@components/ActionsPanel";
+import { HistoryPanel } from "@components/HistoryPanel";
 import { defaultSettings } from "@config/defaults";
 import { cn } from "@utils/cn";
 import { useSettings } from "@hooks/useSettings";
@@ -30,36 +31,57 @@ export default function Home() {
     setBackgroundColor,
   } = useSettings(defaultSettings);
 
+  // TODO: Move this to a custom hook
+  // imagesHistoryUrl = ["blob:http://localhost:3000/73c51e5e...", "..."]
+  // selectedImageUrl = "blob:http://localhost:3000/73c51e5e..."
+  const [imagesHistoryUrl, setImagesHistoryUrl] = React.useState<string[]>([]);
+  const [selectedImageUrl, setSelectedImageUrl] = React.useState("")
+
   return (
     <LoadProvider>
       <ToastProvider>
         <TooltipProviders>
           <section className="flex h-screen w-screen items-center gap-2 p-5">
-            <div className="m-9 h-fit w-full rounded-md shadow-3xl ring-8 ring-slate-900/50">
-              <div className="grid w-full place-items-center rounded-md bg-[#020617] bg-[length:15px_15px] p-12 [background-image:radial-gradient(#64748b_0.75px,_transparent_0)]">
-                <div
-                  ref={clipboardRef}
-                  className={`${cn(
-                    "max-w-6xl max-h-[648px] grid place-items-center p-[4%] overflow-hidden",
-                    settings.aspectRatio,
-                    settings.aspectRatio === "aspect-[3/4]" && "h-fit",
-                    settings.aspectRatio === "aspect-square" && "h-fit",
-                    settings.aspectRatio === "aspect-video" && "w-full",
-                    settings.backgroundColor
-                  )}`}
-                >
-                  <ClipboardImage
-                    insetColor={settings.insetColor}
-                    scale={settings.scale}
-                    positionX={settings.positionX}
-                    positionY={settings.positionY}
-                    insetPadding={settings.insetPadding}
-                    setInsetColor={setInsetColor}
-                    setInsetPadding={setInsetPadding}
-                  />
+            {/* Editing container */}
+            <div className="m-9 grid h-fit w-full gap-8">
+              {/* Clipboard image panel */}
+              <div className="h-fit w-full rounded-md shadow-3xl ring-8 ring-slate-900/50">
+                <div className="grid w-full place-items-center rounded-md bg-[#020617] bg-[length:15px_15px] p-12 [background-image:radial-gradient(#64748b_0.75px,_transparent_0)]">
+                  <div
+                    ref={clipboardRef}
+                    className={`${cn(
+                      "max-w-6xl max-h-[648px] grid place-items-center p-[4%] overflow-hidden",
+                      settings.aspectRatio,
+                      settings.aspectRatio === "aspect-[3/4]" && "h-fit",
+                      settings.aspectRatio === "aspect-square" && "h-fit",
+                      settings.aspectRatio === "aspect-video" && "w-full",
+                      settings.backgroundColor
+                    )}`}
+                  >
+                    <ClipboardImage
+                      insetColor={settings.insetColor}
+                      scale={settings.scale}
+                      positionX={settings.positionX}
+                      positionY={settings.positionY}
+                      insetPadding={settings.insetPadding}
+                      setInsetColor={setInsetColor}
+                      setInsetPadding={setInsetPadding}
+                      selectedImageUrl={selectedImageUrl}
+                      imagesHistoryUrl={imagesHistoryUrl}
+                      setImagesHistoryUrl={setImagesHistoryUrl}
+                      setSelectedImageUrl={setSelectedImageUrl}
+                    />
+                  </div>
                 </div>
               </div>
+              {/* Clipboard images history panel */}
+              <HistoryPanel
+                setImagesHistoryUrl={setImagesHistoryUrl}
+                setSelectedImageUrl={setSelectedImageUrl}
+                imagesHistoryUrl={imagesHistoryUrl}
+              />
             </div>
+            {/* Sidebar container */}
             <div className="flex h-full min-w-[340px] flex-col justify-between gap-1">
               <div className="flex items-center justify-between gap-2 rounded-md bg-slate-900/90 p-5 py-3 text-slate-100 shadow-3xl">
                 <header className="w-[150px] text-slate-200">

src/components/ClipboardImage.tsx

@@ -15,6 +15,10 @@ export const ClipboardImage = ({
   insetPadding,
   setInsetColor,
   setInsetPadding,
+  setImagesHistoryUrl,
+  imagesHistoryUrl,
+  selectedImageUrl,
+  setSelectedImageUrl,
 }: {
   insetColor: string;
   scale: number,
@@ -23,6 +27,10 @@ export const ClipboardImage = ({
   insetPadding: number;
   setInsetColor: (input: string) => void;
   setInsetPadding: (input: number) => void;
+  setImagesHistoryUrl: React.Dispatch<React.SetStateAction<string[]>>
+  imagesHistoryUrl: string[]
+  selectedImageUrl: string
+  setSelectedImageUrl: React.Dispatch<React.SetStateAction<string>>
 }) => {
   const { toast } = useToast();
   const imageRef = React.useRef<HTMLImageElement | null>(null);
@@ -49,6 +57,15 @@ export const ClipboardImage = ({
       currentImage.onclick = async () => {
         const result = await pasteImage(currentImage);
         if (result === "SUCCESS") {
+          // TODO: Extract this to a custom hook
+          // Adds the images to the shared history state, only if there are less than 10.
+          if (imagesHistoryUrl.length < 10) {
+            setImagesHistoryUrl((prevUrl) => [currentImage.src, ...prevUrl])
+            // TODO: Fix redundant code, pasteImage and setSelectedImage are
+            // both setting the current image to be displayed
+            setSelectedImageUrl(currentImage.src)
+          }
+
           toast({
             title: (
               <span className="flex items-center gap-2">
@@ -70,7 +87,13 @@ export const ClipboardImage = ({
           });
       };
     }
-  }, [toast]);
+    // Checks if there are selected images from the shared state
+    if (imageRef.current && selectedImageUrl) {
+      // If there are, set the "src" of the ref to the selected image
+      const currentImage = imageRef.current;
+      currentImage.src = selectedImageUrl;
+    }
+  }, [toast, setImagesHistoryUrl, selectedImageUrl, imagesHistoryUrl.length, setSelectedImageUrl]);
 
   return (
     <Image

src/components/HistoryPanel.tsx

@@ -0,0 +1,92 @@
+import Image from "next/image";
+import React from "react";
+import placeholder from "../app/placeholder.svg";
+
+export const HistoryPanel = ({
+  imagesHistoryUrl,
+  setSelectedImageUrl,
+  setImagesHistoryUrl,
+}: {
+  imagesHistoryUrl: string[],
+  setSelectedImageUrl: React.Dispatch<React.SetStateAction<string>>
+  setImagesHistoryUrl: React.Dispatch<React.SetStateAction<string[]>>
+}) => {
+
+  const handleSelectFromHistory = (url: string) => {
+    // Updates the state with the current selected image from the panel
+    setSelectedImageUrl(url);
+  }
+
+  const handleDeleteFromHistory = (url: string) => {
+    // Filter out the URL to delete the image selected from the panel
+    setImagesHistoryUrl((prevUrl) => {
+      // Length has to be subtracted by one to stay accurate
+      // because the last operation is going to remove one item
+      if ((prevUrl.length - 1) === 0) {
+        // If the length is zero, then no images are left. Set the default placeholder.
+        setSelectedImageUrl(placeholder.src);
+        return []
+      }
+
+      return (
+        prevUrl.filter((value, index) => {
+
+          // If we match the current image being deleted with the one being displayed
+          // And there are more than one images remaining in history then...
+          if (value === url && (prevUrl.length - 1) > 0) {
+            // Check if we have entries on the positive side
+            prevUrl[index + 1] ? (
+              // If there are, change the current image to the next positive index
+              setSelectedImageUrl((prevUrl[index + 1]))
+            ) : (
+              // Else, change the current image to the next negative index
+              setSelectedImageUrl((prevUrl[index - 1]))
+            );
+          }
+
+          return (value !== url)
+        })
+      );
+    });
+  }
+
+  return (
+    /* History panel container */
+    <div className="flex w-full rounded-md shadow-3xl ring-8 ring-slate-900/50">
+      <div className="flex h-32 w-full items-center justify-center gap-4 rounded-md bg-[#020617] bg-[length:15px_15px] p-4 [background-image:radial-gradient(#64748b_0.75px,_transparent_0)]">
+        {imagesHistoryUrl.length > 0 ? (
+          imagesHistoryUrl.map((url, index) => {
+            return (
+              /* History image container */
+              <div
+                key={index}
+                className="relative flex aspect-square cursor-pointer rounded-lg border-2 border-slate-500 transition-colors hover:border-slate-400"
+              >
+                {/* History image delete button */}
+                <button
+                  className="absolute -right-2 -top-2 flex h-4 w-4 items-center justify-center rounded-full bg-slate-700 p-4 font-bold leading-none text-white transition-colors hover:bg-red-500"
+                  onClick={() => handleDeleteFromHistory(url)}
+                >
+                  X
+                </button>
+                {/* History image */}
+                <Image
+                  src={url}
+                  width={100}
+                  height={100}
+                  alt="Image"
+                  quality={50}
+                  onClick={() => handleSelectFromHistory(url)}
+                  className="rounded-lg object-cover"
+                />
+              </div>
+            )
+          })
+        ) : (
+          /* No history placeholder text */
+          <h1 className="text-2xl font-light text-slate-400">Clipboard images history (empty)</h1>
+        )}
+      </div>
+    </div>
+  )
+}