From 6b3211f26f3b697bbc2efb81e4759d45c53dfcd9 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Sun, 31 May 2026 02:56:34 +0800
Subject: [PATCH] style: format homepage files

---
 src/components/PopularRankList.tsx |   5 +-
 src/pages/Home/index.tsx           | 298 +++++++++++++++--------------
 2 files changed, 156 insertions(+), 147 deletions(-)

diff --git a/src/components/PopularRankList.tsx b/src/components/PopularRankList.tsx
index 596c0ec..b6ed5ae 100644
--- a/src/components/PopularRankList.tsx
+++ b/src/components/PopularRankList.tsx
@@ -176,7 +176,10 @@ function PopularRankRow({
             className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#191921] text-white outline-none transition hover:bg-[#22232D] focus-visible:ring-2 focus-visible:ring-ark-gold/70 disabled:cursor-wait"
           >
             {isDownloading ? (
-              <LoaderCircle className="h-5 w-5 animate-spin" strokeWidth={2.3} />
+              <LoaderCircle
+                className="h-5 w-5 animate-spin"
+                strokeWidth={2.3}
+              />
             ) : (
               <DownloadCloudIcon className="h-6 w-6" />
             )}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 72a09c3..efd42a3 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -224,7 +224,9 @@ export function Home() {
       const lefts = children
         .map((c) => c.getBoundingClientRect().left - rowLeft)
         .filter((left) => left < padLeft - epsilon);
-      delta = lefts.length ? lefts[lefts.length - 1] - padLeft : -row.scrollLeft;
+      delta = lefts.length
+        ? lefts[lefts.length - 1] - padLeft
+        : -row.scrollLeft;
     }
     const maxScroll = Math.max(0, row.scrollWidth - row.clientWidth);
     const target = Math.max(0, Math.min(maxScroll, row.scrollLeft + delta));
@@ -273,96 +275,96 @@ export function Home() {
       <Reveal delay={0}>
         <section id="categories" className="scroll-mt-16 md:scroll-mt-24">
           <div className="mx-auto max-w-full md:max-w-[820px] lg:max-w-[1080px] xl:max-w-[1180px]">
-          <div className="px-4 md:px-0">
-            <SectionHeader
-              title={t("categorySection")}
-              viewAllTo="/categories"
-              viewAllLabel={t("viewAll")}
-            />
-          </div>
-
-          <div className="mt-2.5 md:hidden">
-            <div
-              ref={categoryRowRef}
-              className="flex snap-x snap-mandatory items-start overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-              style={{ height: `${mobileCategoryHeight}px` }}
-              aria-label={t("categorySection")}
-            >
-              {categoryPages.map((page, pageIndex) => (
-                <div
-                  key={`category-page-${pageIndex}`}
-                  className="grid w-full shrink-0 snap-start grid-cols-3 gap-2 px-4"
-                >
-                  {page.map((c) => (
-                    <Link
-                      key={c.id}
-                      to={`/category/${encodeURIComponent(c.slug)}`}
-                      className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
-                    >
-                      <CategoryIcon
-                        iconKey={c.iconKey}
-                        categorySlug={c.slug}
-                        className="h-9 w-9 shrink-0 text-ark-gold"
-                      />
-                      <div className="w-full truncate text-[13px] font-medium leading-[19.5px] text-white">
-                        {cleanCategoryDisplayName(c.name)}
-                      </div>
-                    </Link>
-                  ))}
-                </div>
-              ))}
+            <div className="px-4 md:px-0">
+              <SectionHeader
+                title={t("categorySection")}
+                viewAllTo="/categories"
+                viewAllLabel={t("viewAll")}
+              />
             </div>
 
-            {categoryPages.length > 1 ? (
+            <div className="mt-2.5 md:hidden">
               <div
-                className="flex h-[30px] items-center justify-center gap-1.5"
-                aria-label="Category pagination"
+                ref={categoryRowRef}
+                className="flex snap-x snap-mandatory items-start overflow-x-auto overflow-y-hidden scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+                style={{ height: `${mobileCategoryHeight}px` }}
+                aria-label={t("categorySection")}
               >
-                {categoryPages.map((_, index) => (
-                  <button
-                    key={`category-dot-${index}`}
-                    type="button"
-                    aria-label={`Go to category page ${index + 1}`}
-                    aria-current={activeCategoryPage === index}
-                    onClick={() => {
-                      const row = categoryRowRef.current;
-                      if (!row) return;
-                      row.scrollTo({
-                        left: row.clientWidth * index,
-                        behavior: "smooth",
-                      });
-                      setActiveCategoryPage(index);
-                    }}
-                    className={`h-1.5 rounded-full transition-all ${
-                      activeCategoryPage === index
-                        ? "w-6 bg-ark-gold"
-                        : "w-1.5 bg-[#7C7C7C]"
-                    }`}
-                  />
+                {categoryPages.map((page, pageIndex) => (
+                  <div
+                    key={`category-page-${pageIndex}`}
+                    className="grid w-full shrink-0 snap-start grid-cols-3 gap-2 px-4"
+                  >
+                    {page.map((c) => (
+                      <Link
+                        key={c.id}
+                        to={`/category/${encodeURIComponent(c.slug)}`}
+                        className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+                      >
+                        <CategoryIcon
+                          iconKey={c.iconKey}
+                          categorySlug={c.slug}
+                          className="h-9 w-9 shrink-0 text-ark-gold"
+                        />
+                        <div className="w-full truncate text-[13px] font-medium leading-[19.5px] text-white">
+                          {cleanCategoryDisplayName(c.name)}
+                        </div>
+                      </Link>
+                    ))}
+                  </div>
                 ))}
               </div>
-            ) : null}
-          </div>
 
-          <div className="mt-7 hidden grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
-            {figmaOrderedCategories.map((c, index) => (
-              <Reveal key={c.id} delay={Math.min(index, 8) * 0.05}>
-                <Link
-                  to={`/category/${encodeURIComponent(c.slug)}`}
-                  className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+              {categoryPages.length > 1 ? (
+                <div
+                  className="flex h-[30px] items-center justify-center gap-1.5"
+                  aria-label="Category pagination"
                 >
-                  <CategoryIcon
-                    iconKey={c.iconKey}
-                    categorySlug={c.slug}
-                    className="h-9 w-9 shrink-0 text-ark-gold"
-                  />
-                  <div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2">
-                    {cleanCategoryDisplayName(c.name)}
-                  </div>
-                </Link>
-              </Reveal>
-            ))}
-          </div>
+                  {categoryPages.map((_, index) => (
+                    <button
+                      key={`category-dot-${index}`}
+                      type="button"
+                      aria-label={`Go to category page ${index + 1}`}
+                      aria-current={activeCategoryPage === index}
+                      onClick={() => {
+                        const row = categoryRowRef.current;
+                        if (!row) return;
+                        row.scrollTo({
+                          left: row.clientWidth * index,
+                          behavior: "smooth",
+                        });
+                        setActiveCategoryPage(index);
+                      }}
+                      className={`h-1.5 rounded-full transition-all ${
+                        activeCategoryPage === index
+                          ? "w-6 bg-ark-gold"
+                          : "w-1.5 bg-[#7C7C7C]"
+                      }`}
+                    />
+                  ))}
+                </div>
+              ) : null}
+            </div>
+
+            <div className="mt-7 hidden grid-cols-3 gap-3 min-[440px]:gap-3.5 md:grid md:grid-cols-5 md:gap-3 lg:grid-cols-6 xl:grid-cols-7 xl:gap-4">
+              {figmaOrderedCategories.map((c, index) => (
+                <Reveal key={c.id} delay={Math.min(index, 8) * 0.05}>
+                  <Link
+                    to={`/category/${encodeURIComponent(c.slug)}`}
+                    className="flex h-[88px] min-w-0 flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center outline-none transition hover:border-ark-gold/55 hover:bg-[#252630] focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+                  >
+                    <CategoryIcon
+                      iconKey={c.iconKey}
+                      categorySlug={c.slug}
+                      className="h-9 w-9 shrink-0 text-ark-gold"
+                    />
+                    <div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2">
+                      {cleanCategoryDisplayName(c.name)}
+                    </div>
+                  </Link>
+                </Reveal>
+              ))}
+            </div>
           </div>
         </section>
       </Reveal>
@@ -378,71 +380,75 @@ export function Home() {
               />
             </div>
             <div className="relative">
-            <div
-              ref={recRowRef}
-              className="mt-2.5 flex gap-3 overflow-x-auto overflow-y-hidden px-4 pb-0 pr-4 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] md:mt-7 md:gap-4 md:px-0 md:pr-0 md:pb-5 [&::-webkit-scrollbar]:hidden"
-            >
-              {rec.map((r, index) => (
-                <div key={r.id}>
-                  <Reveal delay={Math.min(index, 8) * 0.05}>
-                    <RecommendedCard r={r} visualIndex={index} useFigmaDesign />
-                  </Reveal>
-                </div>
-              ))}
-            </div>
-            <div
-              className="flex h-[30px] items-center justify-center gap-1.5"
-              aria-label="Recommended pagination"
-            >
-              {Array.from({ length: recommendedDotCount }).map((_, index) => (
+              <div
+                ref={recRowRef}
+                className="mt-2.5 flex gap-3 overflow-x-auto overflow-y-hidden px-4 pb-0 pr-4 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] md:mt-7 md:gap-4 md:px-0 md:pr-0 md:pb-5 [&::-webkit-scrollbar]:hidden"
+              >
+                {rec.map((r, index) => (
+                  <div key={r.id}>
+                    <Reveal delay={Math.min(index, 8) * 0.05}>
+                      <RecommendedCard
+                        r={r}
+                        visualIndex={index}
+                        useFigmaDesign
+                      />
+                    </Reveal>
+                  </div>
+                ))}
+              </div>
+              <div
+                className="flex h-[30px] items-center justify-center gap-1.5"
+                aria-label="Recommended pagination"
+              >
+                {Array.from({ length: recommendedDotCount }).map((_, index) => (
+                  <button
+                    key={`recommended-dot-${index}`}
+                    type="button"
+                    aria-label={`Go to recommendation page ${index + 1}`}
+                    aria-current={activeRecommendedDot === index}
+                    onClick={() => {
+                      const row = recRowRef.current;
+                      if (!row) return;
+                      const maxScroll = Math.max(
+                        0,
+                        row.scrollWidth - row.clientWidth,
+                      );
+                      row.scrollTo({
+                        left:
+                          recommendedDotCount === 1
+                            ? 0
+                            : (maxScroll * index) / (recommendedDotCount - 1),
+                        behavior: "smooth",
+                      });
+                    }}
+                    className={`h-1.5 rounded-full transition-all ${
+                      activeRecommendedDot === index
+                        ? "w-6 bg-ark-gold"
+                        : "w-1.5 bg-[#7C7C7C]"
+                    }`}
+                  />
+                ))}
+              </div>
+              {canScrollRec && !recAtStart ? (
                 <button
-                  key={`recommended-dot-${index}`}
                   type="button"
-                  aria-label={`Go to recommendation page ${index + 1}`}
-                  aria-current={activeRecommendedDot === index}
-                  onClick={() => {
-                    const row = recRowRef.current;
-                    if (!row) return;
-                    const maxScroll = Math.max(
-                      0,
-                      row.scrollWidth - row.clientWidth,
-                    );
-                    row.scrollTo({
-                      left:
-                        recommendedDotCount === 1
-                          ? 0
-                          : (maxScroll * index) / (recommendedDotCount - 1),
-                      behavior: "smooth",
-                    });
-                  }}
-                  className={`h-1.5 rounded-full transition-all ${
-                    activeRecommendedDot === index
-                      ? "w-6 bg-ark-gold"
-                      : "w-1.5 bg-[#7C7C7C]"
-                  }`}
-                />
-              ))}
-            </div>
-            {canScrollRec && !recAtStart ? (
-              <button
-                type="button"
-                onClick={() => scrollRec(-1)}
-                className="absolute left-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
-                aria-label="Previous recommendations"
-              >
-                <ChevronLeft className="h-5 w-5" />
-              </button>
-            ) : null}
-            {canScrollRec && !recAtEnd ? (
-              <button
-                type="button"
-                onClick={() => scrollRec(1)}
-                className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
-                aria-label="Next recommendations"
-              >
-                <ChevronRight className="h-5 w-5" />
-              </button>
-            ) : null}
+                  onClick={() => scrollRec(-1)}
+                  className="absolute left-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
+                  aria-label="Previous recommendations"
+                >
+                  <ChevronLeft className="h-5 w-5" />
+                </button>
+              ) : null}
+              {canScrollRec && !recAtEnd ? (
+                <button
+                  type="button"
+                  onClick={() => scrollRec(1)}
+                  className="absolute right-0 top-[45%] hidden h-9 w-9 -translate-y-1/2 items-center justify-center rounded-lg border border-ark-line bg-[#292a31]/95 text-neutral-200 shadow-lg backdrop-blur transition hover:border-ark-gold hover:text-ark-gold md:flex"
+                  aria-label="Next recommendations"
+                >
+                  <ChevronRight className="h-5 w-5" />
+                </button>
+              ) : null}
             </div>
           </div>
         </section>