navigate between images + manage my generations

app/api/collections/route.ts

@@ -34,7 +34,7 @@ export async function GET(request: Request) {
         equals: userId
       },
       is_visible: {
-        equals: true
+        equals: undefined
       }
     }
   } else if (is_admin) {

components/header.tsx

@@ -21,21 +21,19 @@ export const Header = () => {
     >
       <div className="relative bg-cover bg-fixed bg-black z-[1]">
         <div className="flex items-start px-6 mx-auto max-w-[1722px] relative pt-24 pb-20">
-          <div className="w-full lg:w-1/2 relative z-10">
+          <div className="w-full relative z-10">
             <h1 className="font-bold text-5xl lg:text-7xl text-white text-center lg:text-left">
-              Fast Stable Diffusion XL on TPU v5e ⚡
+              Fast Stable Diffusion XL ⚡
             </h1>
+            <p className="text-3xl lg:text-4xl text-transparent bg-gradient-to-tr from-indigo-300 via-blue-500 to-pink-400 bg-clip-text font-bold text-center lg:text-left mt-2 inline-block">
+              on TPU v5e
+            </p>
 
             <p className="text-base text-white/70 mt-3 text-center lg:text-left">
               Generate your own images - all images generated are community
               shared.
             </p>
           </div>
-          {/* <Image
-            src={HeaderImage}
-            alt="Demo generated images"
-            className="absolute h-full top-0 object-contain hidden lg:block right-0 xl:right-44 object-left"
-          /> */}
           <div
             className="absolute w-full lg:w-1/3 right-0 xl:right-44 -bottom-32 lg:-bottom-32 bg-gradient-to-br from-blue-500 to-pink-500 blur-xl lg:blur-[130px] h-full z-[-1]"
             style={{ willChange: "transform" }}

components/main/collections/collection.tsx

@@ -1,14 +1,17 @@
 import { useMemo } from "react";
 import { motion } from "framer-motion";
 import classNames from "classnames";
-import { AiFillEyeInvisible } from "react-icons/ai";
+import { AiFillEyeInvisible, AiFillCheckCircle } from "react-icons/ai";
+import { BsFillTrashFill } from "react-icons/bs";
 
 import { Image } from "@/utils/type";
 import { useInputGeneration } from "@/components/main/hooks/useInputGeneration";
-import { Button } from "@/components/button";
+import { useUser } from "@/utils/useUser";
+import { useCollection } from "@/components/modal/useCollection";
 
 interface Props {
   index: number;
+  category: string;
   collection: Image;
   className?: string;
   onOpen: (id: string) => void;
@@ -17,16 +20,23 @@ interface Props {
 export const Collection: React.FC<Props> = ({
   collection,
   index,
+  category,
   className,
   onOpen,
 }) => {
+  const { user } = useUser();
   const { setPrompt } = useInputGeneration();
+  const { updateVisibility, remove } = useCollection(collection?.id);
 
   const formatDate = useMemo(() => {
     const date = new Date(collection.createdAt);
     return date.toLocaleDateString();
   }, [collection.createdAt]);
 
+  const isNotVisible = useMemo(() => {
+    return category !== "my-own" && !collection.is_visible;
+  }, [collection.is_visible, category]);
+
   return (
     <div className={`h-[377px] w-full relative ${className}`}>
       <motion.div
@@ -68,15 +78,43 @@ export const Collection: React.FC<Props> = ({
           className={classNames(
             "rounded-[33px] bg-gray-950 bg-cover absolute top-0 left-0 w-full h-full z-[-1] transition-all duration-200 group-hover:scale-110 bg-center",
             {
-              "opacity-40": !collection.is_visible,
+              "opacity-40": isNotVisible,
             }
           )}
         />
-        {!collection.is_visible && (
-          <div className="flex items-center justify-end px-5 py-6 gap-2">
-            <p className="text-white/70 font-semibold text-lg lg:text-xl">
-              Waiting for validation.
-            </p>
+        {isNotVisible && (
+          <div
+            className={classNames("flex items-center gap-2", {
+              "justify-between py-3 pr-5 pl-3": user?.is_admin,
+              "justify-end py-6 px-5": !user?.is_admin,
+            })}
+          >
+            {user?.is_admin ? (
+              <div className="flex items-center justify-start gap-2 p-2 bg-black/20 backdrop-blur rounded-full hover:bg-black/50">
+                <div
+                  className="rounded-full bg-white w-8 h-8 flex items-center justify-center p-1 transition-all duration-200 hover:-translate-y-1"
+                  onClick={async (e) => {
+                    e.stopPropagation();
+                    await updateVisibility();
+                  }}
+                >
+                  <AiFillCheckCircle className="w-full h-full text-gray-800" />
+                </div>
+                <div
+                  className="rounded-full bg-red-500 w-8 h-8 flex items-center justify-center p-1.5 transition-all duration-200 hover:-translate-y-1.5"
+                  onClick={async (e) => {
+                    e.stopPropagation();
+                    await remove();
+                  }}
+                >
+                  <BsFillTrashFill className="w-full h-full text-white" />
+                </div>
+              </div>
+            ) : (
+              <p className="text-white/70 font-semibold text-lg lg:text-xl">
+                Waiting for validation.
+              </p>
+            )}
             <AiFillEyeInvisible className="text-white/70 text-2xl" />
           </div>
         )}

components/main/collections/index.tsx

@@ -54,6 +54,7 @@ export const Collections: React.FC<{ category: string }> = ({ category }) => {
             <Collection
               key={category + collection.id}
               index={i}
+              category={category}
               collection={collection}
               className={classNames("", {
                 "!translate-y-12":

components/main/hooks/useCollections.ts

@@ -7,7 +7,7 @@ import { useUser } from "@/utils/useUser";
 
 export const useCollections = (category: string) => {
   const [loading, setLoading] = useState(false);
-  const { user, loading: userLoading, token } = useUser();
+  const { user, token } = useUser();
 
   const client = useQueryClient();
   
@@ -26,7 +26,7 @@ export const useCollections = (category: string) => {
 
       const response = await fetch(`/api/collections?${queryParams.toString()}`, {
         headers: {
-          ...(user?.sub ? { 'Authorization': token } : {})
+          ...(token ? { 'Authorization': token } : {})
         },
         method: "GET",
       })
@@ -58,7 +58,7 @@ export const useCollections = (category: string) => {
 
       const response = await fetch(`/api/collections?${queryParams.toString()}`, {
         headers: {
-          ...(user?.sub ? { 'Authorization': token } : {})
+          ...(token ? { 'Authorization': token } : {})
         },
         method: "GET",
       })

components/main/index.tsx

@@ -76,7 +76,7 @@ export const Main = () => {
         className={classNames(
           "flex items-center justify-center lg:justify-end text-right gap-1 mt-4 lg:mt-0 pr-2 lg:pr-4",
           {
-            "text-gray-300 text-xs": !user?.sub,
+            "text-gray-300 text-sm": !user?.sub,
             "text-white text-sm": user?.sub,
           }
         )}
@@ -100,7 +100,7 @@ export const Main = () => {
             </Link>
           </>
         ) : (
-          "to save your generations in your own gallery"
+          "to persist your images in your own gallery"
         )}
       </div>
       <p

components/modal/modal.tsx

@@ -3,10 +3,15 @@ import { motion } from "framer-motion";
 import Image from "next/image";
 import { BsFillTrashFill } from "react-icons/bs";
 import { AiFillCheckCircle } from "react-icons/ai";
+import {
+  BsFillArrowLeftSquareFill,
+  BsFillArrowRightSquareFill,
+} from "react-icons/bs";
 
 import { useCollection } from "./useCollection";
 import { Button } from "../button";
 import { useUser } from "@/utils/useUser";
+import { useKeyPressEvent } from "react-use";
 
 interface Props {
   id: string;
@@ -32,10 +37,16 @@ const dropIn = {
   },
 };
 
+const keys = ["ArrowLeft", "ArrowRight"];
+
 export const Modal: React.FC<Props> = ({ id, onClose }) => {
-  const { collection, updateVisibility, remove } = useCollection(id);
+  const { collection, updateVisibility, remove, next, previous } =
+    useCollection(id);
   const { user } = useUser();
 
+  useKeyPressEvent("ArrowLeft", previous);
+  useKeyPressEvent("ArrowRight", next);
+
   const formatDate = useMemo(() => {
     if (!collection) return;
     const date = new Date(collection?.createdAt);
@@ -87,9 +98,21 @@ export const Modal: React.FC<Props> = ({ id, onClose }) => {
         />
         <div className="text-left w-full px-4 pb-3 pt-2">
           <p className="text-sm font-medium text-white/60 mb-1">{formatDate}</p>
-          <p className="text-xl font-semibold text-white lowercase leading-snug">
-            {collection?.prompt}
-          </p>
+          <div className="flex flex-col lg:flex-row items-start lg:items-end lg:justify-between">
+            <p className="text-xl font-semibold text-white lowercase leading-snug">
+              {collection?.prompt}
+            </p>
+            <div className="flex items-center justify-end gap-2">
+              <BsFillArrowLeftSquareFill
+                className="text-white/60 text-2xl inline-block mr-2 hover:text-white cursor-pointer"
+                onClick={previous}
+              />
+              <BsFillArrowRightSquareFill
+                className="text-white/60 text-2xl inline-block hover:text-white cursor-pointer"
+                onClick={next}
+              />
+            </div>
+          </div>
         </div>
       </motion.div>
     </motion.div>

components/modal/useCollection.ts

@@ -3,9 +3,11 @@ import { useQuery, useQueryClient } from "@tanstack/react-query"
 
 import { Collection, Image } from "@/utils/type"
 import { useUser } from "@/utils/useUser"
+import { useUpdateEffect } from "react-use"
 
-export const useCollection = (id?: string) => {
+export const useCollection = (initialId ?: string) => {
   const { user, token } = useUser()
+  const [id, setId] = useState(initialId)
   const [loading, setLoading] = useState(false)
 
   const { data: open } = useQuery(["modal"], () => {
@@ -30,6 +32,8 @@ export const useCollection = (id?: string) => {
     return collections?.images?.find((collection) => collection.id === id)
   }, [id, loading])
 
+  useUpdateEffect(() => setId(initialId), [initialId])
+
   const updateVisibility = async () => {
     setLoading(true)
     const response = await fetch(`/api/collections/${collection?.id}/visibility`, {
@@ -78,11 +82,51 @@ export const useCollection = (id?: string) => {
     setLoading(false)
   }
 
+  const next = () => {
+    const collections = client.getQueryData<Collection>(["collections"])
+    if (!collections?.images) {
+      return null
+    }
+
+    const index = collections?.images?.findIndex((collection) => collection.id === id)
+    if (index === -1) {
+      return null
+    }
+
+    const next = collections?.images[index + 1]
+    if (!next) {
+      return null
+    }
+
+    setId(next.id)
+  }
+
+  const previous = () => {
+    const collections = client.getQueryData<Collection>(["collections"])
+    if (!collections?.images) {
+      return null
+    }
+
+    const index = collections?.images?.findIndex((collection) => collection.id === id)
+    if (index === -1) {
+      return null
+    }
+
+    const previous = collections?.images[index - 1]
+    if (!previous) {
+      return null
+    }
+
+    setId(previous.id)
+  }
+
   return {
     collection,
     open,
     setOpen,
     updateVisibility,
-    remove
+    remove,
+    next,
+    previous
   }
 }