fix: align official recommendations behavior

src/components/LatestUpdateRow.tsx

@@ -27,11 +27,11 @@ export function LatestUpdateRow({
           className="h-10 w-10 text-ark-gold"
         />
       </div>
-      <div className="min-w-0 flex-1 py-0.5">
+      <div className="flex min-w-0 flex-1 self-stretch py-0.5 flex-col">
         <div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
           {r.title}
         </div>
-        <div className="mt-4 grid gap-1 text-sm text-[#9b9ca6] md:mt-6">
+        <div className="mt-auto grid gap-1 text-sm text-[#9b9ca6]">
           <span>{r.categoryName}</span>
           <span>
             {resourceTypeLabel(t, r.type)}
@@ -58,11 +58,11 @@ export function ComingSoonLatestUpdateRow({ index = 0 }: { index?: number }) {
       <div className="flex shrink-0 items-center justify-center pt-0.5">
         <CategoryIcon iconKey={iconKey} className="h-10 w-10 text-ark-gold" />
       </div>
-      <div className="min-w-0 flex-1 py-0.5">
+      <div className="flex min-w-0 flex-1 self-stretch py-0.5 flex-col">
         <div className="text-base font-bold leading-snug text-white line-clamp-2 md:text-lg">
           即将到来
         </div>
-        <div className="mt-4 grid gap-1 text-sm text-[#9b9ca6] md:mt-6">
+        <div className="mt-auto grid gap-1 text-sm text-[#9b9ca6]">
           <span>更多内容准备中</span>
           <span>Coming soon</span>
         </div>

src/layouts/PublicLayout.tsx

@@ -79,13 +79,13 @@ export function PublicLayout() {
       <header className="sticky top-0 z-40 border-b border-ark-line bg-ark-nav/98 backdrop-blur-md">
         <div className="mx-auto max-w-[1280px] px-4 py-[15px] min-[440px]:px-5 sm:px-6 md:px-9 xl:px-0">
           {/* Single row (md+): logo | scrollable nav (左對齊，可橫向滑動) | 搜尋 + 語言 */}
-          <div className="flex h-10 items-center gap-2 lg:gap-4">
+          <div className="flex h-10 items-center gap-2 min-[1200px]:gap-0 lg:gap-4">
             <Link
               to="/"
               className="flex min-w-0 shrink-0 items-center gap-2.5 rounded-sm text-xl font-bold tracking-wide text-ark-gold outline-none focus-visible:ring-2 focus-visible:ring-ark-gold/80 focus-visible:ring-offset-2 focus-visible:ring-offset-ark-bg"
             >
               <ArkLogoMark className="h-10 w-10 shrink-0" />
-              <span className="max-w-[7.125rem] truncate text-ark-gold sm:inline">
+              <span className="max-w-[8rem] truncate text-ark-gold sm:inline">
                 {t("brand")}
               </span>
             </Link>

src/pages/Browse.tsx

@@ -53,13 +53,40 @@ export function Browse() {
 
   useEffect(() => {
     setErr(null);
+
+    if (sort === "recommended") {
+      const p = new URLSearchParams();
+      p.set("lang", lang);
+      p.set("limit", "100");
+
+      getJSON<{ items: Resource[] }>(`/api/resources/recommended?${p}`)
+        .then((r) => {
+          const tagLower = tag.toLowerCase();
+          const officialItems = itemsOrEmpty(r.items)
+            .filter((item) => item.isRecommended)
+            .filter((item) => type === "all" || item.type === type)
+            .filter((item) => !resourceLang || item.language === resourceLang)
+            .filter(
+              (item) =>
+                !tagLower ||
+                item.tags?.some(
+                  (itemTag) => itemTag.toLowerCase() === tagLower,
+                ),
+            );
+          setTotal(officialItems.length);
+          setItems(officialItems.slice((page - 1) * limit, page * limit));
+        })
+        .catch((e) => setErr(String(e)));
+      return;
+    }
+
     getJSON<{ items: Resource[]; total?: number }>(`/api/resources?${query}`)
       .then((r) => {
         setItems(itemsOrEmpty(r.items));
         setTotal(typeof r.total === "number" ? r.total : 0);
       })
       .catch((e) => setErr(String(e)));
-  }, [query]);
+  }, [lang, limit, page, query, resourceLang, sort, tag, type]);
 
   const setPage = (next: number) => {
     const n = new URLSearchParams(sp);

src/pages/Home.tsx

@@ -8,10 +8,7 @@ import {
   ComingSoonLatestUpdateRow,
   LatestUpdateRow,
 } from "../components/LatestUpdateRow";
-import {
-  ComingSoonRecommendedCard,
-  RecommendedCard,
-} from "../components/RecommendedCard";
+import { RecommendedCard } from "../components/RecommendedCard";
 import { SectionHeader } from "../components/SectionHeader";
 import { useI18n } from "../i18n";
 import { categoryCardLines } from "../utils/categoryDisplay";
@@ -23,6 +20,7 @@ export function Home() {
   const [latest, setLatest] = useState<Resource[]>([]);
   const [err, setErr] = useState<string | null>(null);
   const recRowRef = useRef<HTMLDivElement>(null);
+  const [canScrollRec, setCanScrollRec] = useState(false);
 
   useEffect(() => {
     const q = `?lang=${encodeURIComponent(lang)}`;
@@ -42,11 +40,27 @@ export function Home() {
   const iconKeyForResource = (r: Resource) =>
     cats.find((c) => c.id === r.categoryId)?.iconKey ?? "folder";
 
+  useEffect(() => {
+    const row = recRowRef.current;
+    if (!row) {
+      setCanScrollRec(false);
+      return;
+    }
+
+    const updateCanScroll = () => {
+      setCanScrollRec(row.scrollWidth > row.clientWidth + 1);
+    };
+
+    updateCanScroll();
+    const resizeObserver = new ResizeObserver(updateCanScroll);
+    resizeObserver.observe(row);
+    return () => resizeObserver.disconnect();
+  }, [rec.length]);
+
   const scrollRec = (dir: 1 | -1) => {
     recRowRef.current?.scrollBy({ left: dir * 280, behavior: "smooth" });
   };
 
-  const recommendedPlaceholderCount = Math.max(0, 5 - rec.length);
   const latestPlaceholderCount = Math.max(0, 5 - latest.length);
 
   if (err) {
@@ -115,28 +129,20 @@ export function Home() {
                 <RecommendedCard r={r} visualIndex={index} />
               </div>
             ))}
-            {Array.from({ length: recommendedPlaceholderCount }).map(
-              (_, index) => (
-                <div
-                  key={`recommended-coming-soon-${index}`}
-                  className="snap-start"
-                >
-                  <ComingSoonRecommendedCard visualIndex={rec.length + index} />
-                </div>
-              ),
-            )}
           </div>
           <div className="h-1 rounded-full bg-black/80 md:hidden">
             <div className="h-full w-24 rounded-full bg-[#353740]" />
           </div>
-          <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>
+          {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>
+          ) : null}
         </div>
       </section>