feat: 首页「最新更新」桌面端统一为手机端竖向气泡流(responsive)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

src/pages/Home/index.tsx

@@ -4,10 +4,6 @@ import { useEffect, useRef, useState } from "react";
 import { getJSON, itemsOrEmpty, readJSONCache, type Category } from "../../api";
 import { CategoryIcon } from "../../components/CategoryIcon";
 import { FigmaBanner } from "../../components/FigmaBanner";
-import {
-  ComingSoonLatestUpdateRow,
-  LatestUpdateRow,
-} from "../../components/LatestUpdateRow";
 import { PopularRankList } from "../../components/PopularRankList";
 import { RecommendedCard } from "../../components/RecommendedCard";
 import { SectionHeader } from "../../components/SectionHeader";
@@ -49,17 +45,14 @@ export function Home() {
   const { hash } = useLocation();
   const [cats, setCats] = useState<Category[]>([]);
   const [rec, setRec] = useState<PostBackedResource[]>([]);
-  const [latest, setLatest] = useState<PostBackedResource[]>([]);
   const [latestPosts, setLatestPosts] = useState<Post[]>([]);
   const [popular, setPopular] = useState<PostBackedResource[]>([]);
   const [popularPosts, setPopularPosts] = useState<Post[]>([]);
   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(() => {
@@ -88,9 +81,6 @@ export function Home() {
       );
       const latestItems = itemsOrEmpty(l.items);
       setLatestPosts(latestItems);
-      setLatest(
-        latestItems.map((post) => postToResource(post, lang, categoryItems)),
-      );
       const popularItems = itemsOrEmpty<Post>(p.items);
       setPopularPosts(popularItems);
       setPopular(
@@ -139,9 +129,6 @@ export function Home() {
     };
   }, [lang]);
 
-  const iconKeyForResource = (r: PostBackedResource) =>
-    cats.find((c) => c.id === r.categoryId)?.iconKey ?? "folder";
-
   const figmaOrderedCategories = [...cats].sort(
     (a, b) => figmaCategoryRank(a) - figmaCategoryRank(b),
   );
@@ -208,31 +195,6 @@ 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);
@@ -243,9 +205,8 @@ export function Home() {
       });
     });
     return () => window.cancelAnimationFrame(frame);
-  }, [hash, cats.length, rec.length, latest.length, popular.length]);
+  }, [hash, cats.length, rec.length, latestPosts.length, popular.length]);
 
-  const latestPlaceholderCount = Math.max(0, 5 - latest.length);
   const hasPopular = popular.length > 0 || popularPosts.length > 0;
   const recommendedDotCount = rec.length;
   const activeRecommendedDot =
@@ -446,6 +407,7 @@ export function Home() {
 
       <Reveal>
         <section id="latest" 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("latestSection")}
@@ -453,52 +415,13 @@ export function Home() {
                 viewAllLabel={t("viewAll")}
               />
             </div>
-          <div className="flex flex-col gap-3 md:hidden">
+            <div className="mt-4 flex flex-col gap-3 md:mt-7">
-            {latestPosts.slice(0, 5).map((post) => (
+              {latestPosts.slice(0, 5).map((post, index) => (
-              <MessageBubble key={post.id} post={post} />
+                <Reveal key={post.id} delay={Math.min(index, 8) * 0.05}>
+                  <MessageBubble post={post} />
+                </Reveal>
               ))}
             </div>
-          <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>
       </Reveal>