feat: add latest updates carousel controls

src/pages/Home/index.tsx

@@ -1,4 +1,4 @@
-import { ChevronRight } from "lucide-react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
 import { useLocation } from "react-router-dom";
 import { useEffect, useRef, useState } from "react";
 import { getJSON, itemsOrEmpty, type Category } from "../../api";
@@ -54,9 +54,11 @@ export function Home() {
   const [categoryUnavailableOpen, setCategoryUnavailableOpen] = useState(false);
   const [err, setErr] = useState<string | null>(null);
   const recRowRef = useRef<HTMLDivElement>(null);
+  const latestRowRef = useRef<HTMLDivElement>(null);
   const categoryRowRef = useRef<HTMLDivElement>(null);
   const [activeCategoryPage, setActiveCategoryPage] = useState(0);
   const [canScrollRec, setCanScrollRec] = useState(false);
+  const [canScrollLatest, setCanScrollLatest] = useState(false);
   const [recScroll, setRecScroll] = useState({ ratio: 1, progress: 0 });
 
   useEffect(() => {
@@ -67,7 +69,7 @@ export function Home() {
     Promise.all([
       getJSON<Category[]>(`/api/categories${catQ}`),
       getJSON<{ items: Post[] }>(`/api/posts/recommended${postQ}&limit=12`),
-      getJSON<{ items: Post[] }>(`/api/posts${postQ}&sort=latest&limit=5`),
+      getJSON<{ items: Post[] }>(`/api/posts${postQ}&sort=latest&limit=12`),
       getJSON<{ items: Post[] }>(
         `/api/posts${postQ}&tag=popular&limit=5`,
       ).catch((): { items: Post[] } => ({ items: [] })),
@@ -166,6 +168,31 @@ export function Home() {
     recRowRef.current?.scrollBy({ left: dir * 280, behavior: "smooth" });
   };
 
+  useEffect(() => {
+    const row = latestRowRef.current;
+    if (!row) {
+      setCanScrollLatest(false);
+      return;
+    }
+
+    const update = () => {
+      setCanScrollLatest(row.scrollWidth > row.clientWidth + 1);
+    };
+
+    update();
+    const resizeObserver = new ResizeObserver(update);
+    resizeObserver.observe(row);
+    row.addEventListener("scroll", update, { passive: true });
+    return () => {
+      resizeObserver.disconnect();
+      row.removeEventListener("scroll", update);
+    };
+  }, [latest.length]);
+
+  const scrollLatest = (dir: 1 | -1) => {
+    latestRowRef.current?.scrollBy({ left: dir * 360, behavior: "smooth" });
+  };
+
   useEffect(() => {
     if (!hash) return;
     const id = hash.slice(1);
@@ -351,14 +378,24 @@ export function Home() {
             ))}
           </div>
           {canScrollRec ? (
-            <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={t("viewAll")}
-            >
-              <ChevronRight className="h-5 w-5" />
-            </button>
+            <>
+              <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>
+              <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>
       </section>
@@ -376,16 +413,45 @@ export function Home() {
             <MessageBubble key={post.id} post={post} />
           ))}
         </div>
-        <div className="mt-7 hidden grid-cols-1 gap-3 min-[576px]:grid-cols-2 md:grid md:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
-          {latest.map((r) => (
-            <LatestUpdateRow key={r.id} r={r} iconKey={iconKeyForResource(r)} />
-          ))}
-          {Array.from({ length: latestPlaceholderCount }).map((_, index) => (
-            <ComingSoonLatestUpdateRow
-              key={`latest-coming-soon-${index}`}
-              index={latest.length + index}
-            />
-          ))}
+        <div className="relative hidden md:block">
+          <div
+            ref={latestRowRef}
+            className="mt-7 flex gap-4 overflow-x-auto overflow-y-hidden pb-5 scroll-smooth [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+          >
+            {latest.map((r) => (
+              <div key={r.id} className="w-[340px] shrink-0 xl:w-[352px]">
+                <LatestUpdateRow r={r} iconKey={iconKeyForResource(r)} />
+              </div>
+            ))}
+            {Array.from({ length: latestPlaceholderCount }).map((_, index) => (
+              <div
+                key={`latest-coming-soon-${index}`}
+                className="w-[340px] shrink-0 xl:w-[352px]"
+              >
+                <ComingSoonLatestUpdateRow index={latest.length + index} />
+              </div>
+            ))}
+          </div>
+          {canScrollLatest ? (
+            <>
+              <button
+                type="button"
+                onClick={() => scrollLatest(-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 latest updates"
+              >
+                <ChevronLeft className="h-5 w-5" />
+              </button>
+              <button
+                type="button"
+                onClick={() => scrollLatest(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 latest updates"
+              >
+                <ChevronRight className="h-5 w-5" />
+              </button>
+            </>
+          ) : null}
         </div>
       </section>