From e0240f6217db7e3e7f2479411c4e0c8899c4c755 Mon Sep 17 00:00:00 2001
From: TerryM <chiachintat10@gmail.com>
Date: Thu, 28 May 2026 16:07:08 +0800
Subject: [PATCH] feat: refine home section navigation

---
 src/App.tsx                      |  6 +++--
 src/layouts/PublicLayout.tsx     |  3 +--
 src/pages/Home/index.tsx         | 45 +++++++++++++++++---------------
 src/pages/PostRedirect/index.tsx |  9 +++----
 4 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 6d2ad9f..8b975b3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,6 @@ import { I18nProvider } from "./i18n";
 import { PublicLayout } from "./layouts/PublicLayout";
 import { Home } from "./pages/Home";
 import { Browse } from "./pages/Browse";
-import { CategoryPage } from "./pages/Category";
 import { SearchPage } from "./pages/Search";
 import { PostRedirect } from "./pages/PostRedirect";
 import { AboutPage } from "./pages/About";
@@ -27,7 +26,10 @@ export default function App() {
                 <Route element={<PublicLayout />}>
                   <Route path="/" element={<Home />} />
                   <Route path="/browse" element={<Browse />} />
-                  <Route path="/category/:slug" element={<CategoryPage />} />
+                  <Route
+                    path="/category/:slug"
+                    element={<Navigate to="/browse" replace />}
+                  />
                   <Route path="/search" element={<SearchPage />} />
                   <Route path="/resource/:id" element={<PostRedirect />} />
                   <Route path="/about" element={<AboutPage />} />
diff --git a/src/layouts/PublicLayout.tsx b/src/layouts/PublicLayout.tsx
index 6d81847..0d1e75c 100644
--- a/src/layouts/PublicLayout.tsx
+++ b/src/layouts/PublicLayout.tsx
@@ -267,8 +267,7 @@ export function PublicLayout() {
   const na = (which: PublicNavWhich) =>
     navIsActive(pathname, search, hash, which);
   const isHome = pathname === "/";
-  const footerInContentFlow =
-    pathname === "/browse" || pathname.startsWith("/category/");
+  const footerInContentFlow = pathname === "/browse";
 
   const goSearch = () => {
     const s = q.trim();
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 6e2b99d..bd2a9e4 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,5 +1,5 @@
 import { ChevronRight } from "lucide-react";
-import { Link, useLocation } from "react-router-dom";
+import { useLocation } from "react-router-dom";
 import { useEffect, useRef, useState } from "react";
 import { getJSON, itemsOrEmpty, type Category } from "../../api";
 import { CategoryIcon } from "../../components/CategoryIcon";
@@ -170,18 +170,23 @@ export function Home() {
     const id = hash.slice(1);
     if (!id) return;
     const frame = window.requestAnimationFrame(() => {
-      document.getElementById(id)?.scrollIntoView({ block: "start" });
+      document.getElementById(id)?.scrollIntoView({
+        block: id === "latest" ? "center" : "start",
+      });
     });
     return () => window.cancelAnimationFrame(frame);
   }, [hash, cats.length, rec.length, latest.length, popular.length]);
 
   const latestPlaceholderCount = Math.max(0, 5 - latest.length);
   const popularPlaceholderCount = Math.max(0, 5 - popular.length);
-  const recommendedDotCount = Math.max(1, Math.min(4, rec.length || 4));
-  const activeRecommendedDot = Math.min(
-    recommendedDotCount - 1,
-    Math.round(recScroll.progress * (recommendedDotCount - 1)),
-  );
+  const recommendedDotCount = rec.length;
+  const activeRecommendedDot =
+    recommendedDotCount > 0
+      ? Math.min(
+          recommendedDotCount - 1,
+          Math.round(recScroll.progress * (recommendedDotCount - 1)),
+        )
+      : 0;
 
   if (err) {
     return (
@@ -197,7 +202,7 @@ export function Home() {
         <FigmaBanner />
       </section>
 
-      <section id="categories" className="scroll-mt-24">
+      <section id="categories" className="scroll-mt-16 md:scroll-mt-24">
         <div className="px-4 md:px-0">
           <SectionHeader
             title={t("categorySection")}
@@ -219,10 +224,9 @@ export function Home() {
                 className="grid w-full shrink-0 snap-start grid-cols-3 gap-2 px-4"
               >
                 {page.map((c) => (
-                  <Link
+                  <div
                     key={c.id}
-                    to={`/category/${c.slug}`}
-                    className="group 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 transition hover:bg-[#252630] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+                    className="flex h-[88px] min-w-0 cursor-default flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center"
                   >
                     <CategoryIcon
                       iconKey={c.iconKey}
@@ -232,7 +236,7 @@ export function Home() {
                     <div className="w-full truncate text-[13px] font-medium leading-[19.5px] text-white">
                       {cleanCategoryDisplayName(c.name)}
                     </div>
-                  </Link>
+                  </div>
                 ))}
               </div>
             ))}
@@ -271,10 +275,9 @@ export function Home() {
 
         <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) => (
-            <Link
+            <div
               key={c.id}
-              to={`/category/${c.slug}`}
-              className="group 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 transition hover:border-ark-gold/55 hover:bg-[#252630] hover:shadow-[0_0_0_1px_rgba(238,183,38,0.12)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
+              className="flex h-[88px] min-w-0 cursor-default flex-col items-center justify-center gap-2 rounded-xl border border-[#27292E] bg-[#1D1E23] px-4 py-3 text-center"
             >
               <CategoryIcon
                 iconKey={c.iconKey}
@@ -284,12 +287,12 @@ export function Home() {
               <div className="w-full text-center text-[13px] font-medium leading-[19.5px] text-white line-clamp-2">
                 {cleanCategoryDisplayName(c.name)}
               </div>
-            </Link>
+            </div>
           ))}
         </div>
       </section>
 
-      <section id="official" className="scroll-mt-24">
+      <section id="official" className="scroll-mt-16 md:scroll-mt-24">
         <div className="px-4 md:px-0">
           <SectionHeader
             title={t("officialSection")}
@@ -300,10 +303,10 @@ export function Home() {
         <div className="relative">
           <div
             ref={recRowRef}
-            className="flex snap-x snap-mandatory 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:pb-5 [&::-webkit-scrollbar]:hidden"
+            className="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} className="snap-start">
+              <div key={r.id}>
                 <RecommendedCard r={r} visualIndex={index} useFigmaDesign />
               </div>
             ))}
@@ -354,7 +357,7 @@ export function Home() {
         </div>
       </section>
 
-      <section id="latest" className="scroll-mt-24">
+      <section id="latest" className="scroll-mt-16 md:scroll-mt-24">
         <div className="px-4 md:px-0">
           <SectionHeader
             title={t("latestSection")}
@@ -380,7 +383,7 @@ export function Home() {
         </div>
       </section>
 
-      <section id="popular" className="scroll-mt-24">
+      <section id="popular" className="scroll-mt-16 md:scroll-mt-24">
         <div className="px-4 md:px-0">
           <SectionHeader
             title={t("popularSection")}
diff --git a/src/pages/PostRedirect/index.tsx b/src/pages/PostRedirect/index.tsx
index 6875c57..3a97e4c 100644
--- a/src/pages/PostRedirect/index.tsx
+++ b/src/pages/PostRedirect/index.tsx
@@ -19,10 +19,9 @@ export function PostRedirect() {
 
     if (POST_STREAM_USES_MOCK) {
       const post = MOCK_POSTS.find((p) => p.id === id);
-      navigate(
-        post ? `/category/${post.categorySlug}#post-${post.id}` : "/browse",
-        { replace: true },
-      );
+      navigate(post ? `/browse#post-${post.id}` : "/browse", {
+        replace: true,
+      });
       return;
     }
 
@@ -30,7 +29,7 @@ export function PostRedirect() {
       `/api/posts/${id}?lang=${encodeURIComponent(langQuery(lang))}`,
     )
       .then((post) => {
-        navigate(`/category/${post.categorySlug}#post-${post.id}`, {
+        navigate(`/browse#post-${post.id}`, {
           replace: true,
         });
       })