From f9aac5e19fb17d274c56b26f0f79feb814641358 Mon Sep 17 00:00:00 2001
From: Rishi Ghan <rishi.ghan@gmail.com>
Date: Wed, 25 Feb 2026 20:33:33 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A0=20Carousels=20on=20Wanted=20and=20?=
 =?UTF-8?q?Volumes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/Dashboard/VolumeGroups.tsx     |  85 ++++---
 .../components/Dashboard/WantedComicsList.tsx | 209 ++++++++++--------
 2 files changed, 163 insertions(+), 131 deletions(-)

diff --git a/src/client/components/Dashboard/VolumeGroups.tsx b/src/client/components/Dashboard/VolumeGroups.tsx
index ebf0382..88c2368 100644
--- a/src/client/components/Dashboard/VolumeGroups.tsx
+++ b/src/client/components/Dashboard/VolumeGroups.tsx
@@ -4,6 +4,7 @@ import ellipsize from "ellipsize";
 import { Link, useNavigate } from "react-router-dom";
 import Card from "../shared/Carda";
 import Header from "../shared/Header";
+import useEmblaCarousel from "embla-carousel-react";
 
 export const VolumeGroups = (props): ReactElement => {
   // Till mongo gives us back the deduplicated results with the ObjectId
@@ -13,50 +14,64 @@ export const VolumeGroups = (props): ReactElement => {
     navigate(`/volumes/all`);
   };
 
+  // embla carousel
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: false,
+    align: "start",
+    containScroll: "trimSnaps",
+    slidesToScroll: 1,
+  });
+
   return (
-    <section>
+    <div>
       <Header
         headerContent="Volumes"
-        subHeaderContent="Based on ComicVine Volume information"
+        subHeaderContent={<>Based on ComicVine Volume information</>}
         iconClassNames="fa-solid fa-binoculars mr-2"
         link={"/volumes"}
       />
-      <div className="grid grid-cols-5 gap-6 mt-3">
-        {map(deduplicatedGroups, (data) => {
-          return (
-            <div className="max-w-sm mx-auto" key={data._id}>
-              <Card
-                orientation="vertical-2"
-                key={data._id}
-                imageUrl={data.volumes.image.small_url}
-                hasDetails
-              >
-                <div className="py-3">
-                  <div className="text-sm">
-                    <Link to={`/volume/details/${data._id}`}>
-                      {ellipsize(data.volumes.name, 48)}
-                    </Link>
-                  </div>
-                  {/* issue count */}
-                  <span className="inline-flex mt-1 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
-                    <span className="pr-1 pt-1">
-                      <i className="icon-[solar--documents-minimalistic-bold-duotone] w-5 h-5"></i>
-                    </span>
+      <div className="-mr-10 sm:-mr-17 lg:-mr-29 xl:-mr-36 2xl:-mr-42 mt-3">
+        <div className="overflow-hidden" ref={emblaRef}>
+          <div className="flex">
+            {map(deduplicatedGroups, (data) => {
+              return (
+                <div
+                  key={data._id}
+                  className="flex-[0_0_200px] min-w-0 sm:flex-[0_0_220px] md:flex-[0_0_240px] lg:flex-[0_0_260px] xl:flex-[0_0_280px] pr-[15px]"
+                >
+                  <Card
+                    orientation="vertical-2"
+                    imageUrl={data.volumes.image.small_url}
+                    hasDetails
+                  >
+                    <div className="py-3">
+                      <div className="text-sm">
+                        <Link to={`/volume/details/${data._id}`}>
+                          {ellipsize(data.volumes.name, 48)}
+                        </Link>
+                      </div>
+                      {/* issue count */}
+                      <span className="inline-flex mt-1 items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-600 dark:bg-slate-400">
+                        <span className="pr-1 pt-1">
+                          <i className="icon-[solar--documents-minimalistic-bold-duotone] w-5 h-5"></i>
+                        </span>
 
-                    <span className="text-md text-slate-500 dark:text-slate-900">
-                      {data.volumes.count_of_issues} issues
-                    </span>
-                  </span>
+                        <span className="text-md text-slate-500 dark:text-slate-900">
+                          {data.volumes.count_of_issues} issues
+                        </span>
+                      </span>
+                    </div>
+                  </Card>
+                  <div className="w-11/12 h-2 mx-auto bg-slate-900 rounded-b opacity-75"></div>
+                  <div className="w-10/12 h-2 mx-auto bg-slate-900 rounded-b opacity-50"></div>
+                  <div className="w-9/12 h-2 mx-auto bg-slate-900 rounded-b opacity-25"></div>
                 </div>
-              </Card>
-              <div className="w-11/12 h-2 mx-auto bg-slate-900 rounded-b opacity-75"></div>
-              <div className="w-10/12 h-2 mx-auto bg-slate-900 rounded-b opacity-50"></div>
-              <div className="w-9/12 h-2 mx-auto bg-slate-900 rounded-b opacity-25"></div>
-            </div>
-          );
-        })}
+              );
+            })}
+          </div>
+        </div>
       </div>
-    </section>
+    </div>
   );
 };
 
diff --git a/src/client/components/Dashboard/WantedComicsList.tsx b/src/client/components/Dashboard/WantedComicsList.tsx
index 55602a3..6ed9518 100644
--- a/src/client/components/Dashboard/WantedComicsList.tsx
+++ b/src/client/components/Dashboard/WantedComicsList.tsx
@@ -6,6 +6,7 @@ import { isEmpty, isNil, isUndefined, map } from "lodash";
 import { detectIssueTypes } from "../../shared/utils/tradepaperback.utils";
 import { determineCoverFile } from "../../shared/utils/metadata.utils";
 import Header from "../shared/Header";
+import useEmblaCarousel from "embla-carousel-react";
 
 type WantedComicsListProps = {
   comics: any;
@@ -16,108 +17,124 @@ export const WantedComicsList = ({
 }: WantedComicsListProps): ReactElement => {
   const navigate = useNavigate();
 
+  // embla carousel
+  const [emblaRef, emblaApi] = useEmblaCarousel({
+    loop: false,
+    align: "start",
+    containScroll: "trimSnaps",
+    slidesToScroll: 1,
+  });
+
   return (
-    <>
+    <div>
       <Header
         headerContent="Wanted Comics"
-        subHeaderContent="Comics marked as wanted from various sources"
+        subHeaderContent={<>Comics marked as wanted from various sources</>}
         iconClassNames="fa-solid fa-binoculars mr-2"
         link={"/wanted"}
       />
-      <div className="grid grid-cols-5 gap-6 mt-3">
-        {map(
-          comics,
-          ({
-            _id,
-            rawFileDetails,
-            sourcedMetadata: { comicvine, comicInfo, locg },
-            wanted,
-          }) => {
-            const isComicBookMetadataAvailable = !isUndefined(comicvine);
-            const consolidatedComicMetadata = {
-              rawFileDetails,
-              comicvine,
-              comicInfo,
-              locg,
-            };
-
-            const {
-              issueName,
-              url,
-              publisher = null,
-            } = determineCoverFile(consolidatedComicMetadata);
-            const titleElement = (
-              <Link to={"/comic/details/" + _id}>
-                {ellipsize(issueName, 20)}
-                <p>{publisher}</p>
-              </Link>
-            );
-            return (
-              <Card
-                key={_id}
-                orientation={"vertical-2"}
-                imageUrl={url}
-                hasDetails
-                title={issueName ? titleElement : <span>No Name</span>}
-                cardState="wanted"
-              >
-                <div className="pb-1">
-                  <div className="flex flex-row gap-2">
-                    {/* Issue type */}
-                    {isComicBookMetadataAvailable &&
-                    !isNil(detectIssueTypes(comicvine.description)) ? (
-                      <div className="my-2">
-                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                          <span className="pr-1 pt-1">
-                            <i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
-                          </span>
-
-                          <span className="text-md text-slate-500 dark:text-slate-900">
-                            {
-                              detectIssueTypes(comicvine.description)
-                                .displayName
-                            }
-                          </span>
-                        </span>
+      <div className="-mr-10 sm:-mr-17 lg:-mr-29 xl:-mr-36 2xl:-mr-42 mt-3">
+        <div className="overflow-hidden" ref={emblaRef}>
+          <div className="flex">
+            {map(
+                  comics,
+                  ({
+                    _id,
+                    rawFileDetails,
+                    sourcedMetadata: { comicvine, comicInfo, locg },
+                    wanted,
+                  }) => {
+                    const isComicBookMetadataAvailable = !isUndefined(comicvine);
+                    const consolidatedComicMetadata = {
+                      rawFileDetails,
+                      comicvine,
+                      comicInfo,
+                      locg,
+                    };
+    
+                    const {
+                      issueName,
+                      url,
+                      publisher = null,
+                    } = determineCoverFile(consolidatedComicMetadata);
+                    const titleElement = (
+                      <Link to={"/comic/details/" + _id}>
+                        {ellipsize(issueName, 20)}
+                        <p>{publisher}</p>
+                      </Link>
+                    );
+                    return (
+                      <div
+                        key={_id}
+                        className="flex-[0_0_200px] min-w-0 sm:flex-[0_0_220px] md:flex-[0_0_240px] lg:flex-[0_0_260px] xl:flex-[0_0_280px] pr-[15px]"
+                      >
+                        <Card
+                          orientation={"vertical-2"}
+                          imageUrl={url}
+                          hasDetails
+                          title={issueName ? titleElement : <span>No Name</span>}
+                          cardState="wanted"
+                        >
+                          <div className="pb-1">
+                            <div className="flex flex-row gap-2">
+                              {/* Issue type */}
+                              {isComicBookMetadataAvailable &&
+                              !isNil(detectIssueTypes(comicvine.description)) ? (
+                                <div className="my-2">
+                                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                                    <span className="pr-1 pt-1">
+                                      <i className="icon-[solar--book-2-line-duotone] w-5 h-5"></i>
+                                    </span>
+    
+                                    <span className="text-md text-slate-500 dark:text-slate-900">
+                                      {
+                                        detectIssueTypes(comicvine.description)
+                                          .displayName
+                                      }
+                                    </span>
+                                  </span>
+                                </div>
+                              ) : null}
+                              {/* issues marked as wanted, part of this volume */}
+                              {wanted?.markEntireVolumeWanted ? (
+                                <div className="text-sm">sagla volume pahije</div>
+                              ) : (
+                                <div className="my-2">
+                                  <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
+                                    <span className="pr-1 pt-1">
+                                      <i className="icon-[solar--documents-bold-duotone] w-5 h-5"></i>
+                                    </span>
+    
+                                    <span className="text-md text-slate-500 dark:text-slate-900">
+                                      {wanted.issues.length}
+                                    </span>
+                                  </span>
+                                </div>
+                              )}
+                            </div>
+                            {/* comicVine metadata presence */}
+                            {isComicBookMetadataAvailable && (
+                              <img
+                                src="/src/client/assets/img/cvlogo.svg"
+                                alt={"ComicVine metadata detected."}
+                                className="inline-block w-6 h-6 md:w-7 md:h-7 flex-shrink-0 object-contain"
+                              />
+                            )}
+                            {!isEmpty(locg) && (
+                              <img
+                                src="/src/client/assets/img/locglogo.svg"
+                                className="w-7 h-7"
+                              />
+                            )}
+                          </div>
+                        </Card>
                       </div>
-                    ) : null}
-                    {/* issues marked as wanted, part of this volume */}
-                    {wanted?.markEntireVolumeWanted ? (
-                      <div className="text-sm">sagla volume pahije</div>
-                    ) : (
-                      <div className="my-2">
-                        <span className="inline-flex items-center bg-slate-50 text-slate-800 text-xs font-medium px-2.5 py-0.5 rounded-md dark:text-slate-900 dark:bg-slate-400">
-                          <span className="pr-1 pt-1">
-                            <i className="icon-[solar--documents-bold-duotone] w-5 h-5"></i>
-                          </span>
-
-                          <span className="text-md text-slate-500 dark:text-slate-900">
-                            {wanted.issues.length}
-                          </span>
-                        </span>
-                      </div>
-                    )}
-                  </div>
-                  {/* comicVine metadata presence */}
-                  {isComicBookMetadataAvailable && (
-                    <img
-                      src="/src/client/assets/img/cvlogo.svg"
-                      alt={"ComicVine metadata detected."}
-                      className="inline-block w-6 h-6 md:w-7 md:h-7 flex-shrink-0 object-contain"
-                    />
-                  )}
-                  {!isEmpty(locg) && (
-                    <img
-                      src="/src/client/assets/img/locglogo.svg"
-                      className="w-7 h-7"
-                    />
-                  )}
-                </div>
-              </Card>
-            );
-          },
-        )}
-      </div>
-    </>
+                    );
+                  },
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
   );
 };