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";
@@ -27,36 +28,63 @@ export default function Home() {
     setBackgroundColor,
   } = useSettings(defaultSettings);
 
+  /** History Panel Shared State Setup **
+   *
+   * The "setImagesHistoryUrl" useState hook holds a blob URL array to
+   * manage the history of clipboard pastes.
+   * Sample data: ["blob:http://localhost:3000/73c51e5e...", "..."]
+   *
+   * The "setSelectedImageUrl" useState hook holds the blob URL of the
+   * current selected image from the history panel
+   * Sample data: "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}
-                  style={{
-                    padding: `${settings.padding}%`,
-                  }}
-                  className={`${cn(
-                    "max-w-6xl max-h-[648px] grid place-items-center",
-                    settings.padding === 0 && "[&>img]:rounded-none",
-                    settings.aspectRatio,
-                    settings.aspectRatio === "aspect-[3/4]" && "h-fit",
-                    settings.aspectRatio === "aspect-video" && "w-full",
-                    settings.backgroundColor
-                  )}`}
-                >
-                  <ClipboardImage
-                    insetColor={settings.insetColor}
-                    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}
+                      style={{
+                      padding: `${settings.padding}%`,
+                    }}
+                    className={`${cn(
+                      "max-w-6xl max-h-[648px] grid place-items-center",
+                      settings.padding === 0 && "[&>img]:rounded-none",
+                      settings.aspectRatio,
+                      settings.aspectRatio === "aspect-[3/4]" && "h-fit",
+                      settings.aspectRatio === "aspect-video" && "w-full",
+                      settings.backgroundColor
+                    )}`}
+                  >
+                    <ClipboardImage
+                      insetColor={settings.insetColor}
+                      insetPadding={settings.insetPadding}
+                      setInsetColor={setInsetColor}
+                      setInsetPadding={setInsetPadding}
+                      selectedImageUrl={selectedImageUrl}
+                      imagesHistoryUrl={imagesHistoryUrl}
+                      setImagesHistoryUrl={setImagesHistoryUrl}
+                    />
+                  </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="flex items-center gap-[5px]">

src/components/ClipboardImage.tsx

@@ -12,11 +12,17 @@ export const ClipboardImage = ({
   insetPadding,
   setInsetColor,
   setInsetPadding,
+  setImagesHistoryUrl,
+  imagesHistoryUrl,
+  selectedImageUrl,
 }: {
   insetColor: string;
   insetPadding: number;
   setInsetColor: (input: string) => void;
   setInsetPadding: (input: number) => void;
+  setImagesHistoryUrl: React.Dispatch<React.SetStateAction<string[]>>
+  imagesHistoryUrl: string[]
+  selectedImageUrl: string
 }) => {
   const { toast } = useToast();
   const imageRef = React.useRef<HTMLImageElement | null>(null);
@@ -38,11 +44,21 @@ export const ClipboardImage = ({
   }, [setInsetColor, setInsetPadding]);
 
   React.useEffect(() => {
+    // 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;
+    }
     if (imageRef.current) {
       const currentImage = imageRef.current;
       currentImage.onclick = async () => {
         const result = await pasteImage(currentImage);
         if (result === "SUCCESS") {
+          // Adds the images to the shared history state, only if there are less than 10.
+          imagesHistoryUrl.length < 10 && (
+            setImagesHistoryUrl((prevUrl) => [currentImage.src, ...prevUrl])
+          );
           toast({
             title: (
               <span className="flex items-center gap-2">
@@ -64,7 +80,7 @@ export const ClipboardImage = ({
           });
       };
     }
-  }, [toast]);
+  }, [toast, setImagesHistoryUrl, selectedImageUrl, imagesHistoryUrl.length]);
 
   return (
     <Image

src/components/HistoryPanel.tsx

@@ -0,0 +1,63 @@
+import Image from "next/image";
+import React from "react";
+
+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) => prevUrl.filter((value) => 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>
+  )
+}