Organize document URLs by category and collection with compact navigation

apps/docs/src/components/Shell.tsx

@@ -1,4 +1,5 @@
 import Link from "next/link";
+import { useRouter } from "next/router";
 import { Icon } from "@/components/Icon";
 import { useEffect, useRef, useState, type ReactNode } from "react";
 import type { DocLink } from "@/lib/docs";
@@ -36,9 +37,6 @@ export function Navigation({
   return (
     <nav aria-label="文档导航">
       {collection ? <>
-        <Link className="nav-back" href="/" onClick={onNavigate}>
-          <Icon name="arrow" size={15} style={{ transform: "rotate(180deg)" }} />全部文档
-        </Link>
         <Link className="collection-identity" href={`/docs/${collections.find((c) => c.name === collection)!.entry.slug}`} onClick={onNavigate}>
           <Icon name={collectionIcon(collection)} size={22} /><span>{collectionLabel(collection)}</span>
         </Link>
@@ -52,7 +50,7 @@ export function Navigation({
           {scopedDocs.filter((d) => d.group === group).map((d) => (
             <Link onClick={onNavigate} aria-current={d.slug === current ? "page" : undefined}
               className="nav-item" href={`/docs/${d.slug}`} key={d.slug}>
-              <span>{d.slug.endsWith("/00-overview") ? "概览" : d.title.replace("（草案）", "")}</span>
+              <span>{d.slug.endsWith("/overview") ? "概览" : d.title.replace("（草案）", "").replace(/^\d+\s*·\s*/, "")}</span>
               {d.draft && <span className="tiny-dot" aria-label="草案" />}
             </Link>
           ))}
@@ -71,6 +69,7 @@ export function Shell({
   current?: string;
   children: ReactNode;
 }) {
+  const router = useRouter();
   const dialog = useRef<HTMLDialogElement>(null);
   const input = useRef<HTMLInputElement>(null);
   const trigger = useRef<HTMLButtonElement>(null);
@@ -126,9 +125,21 @@ export function Shell({
       </a>
       <header className="site-header">
         <Brand />
-        <nav className="top-nav" aria-label="主导航">
-          <Link href="/" aria-current={!current ? "page" : undefined}>文档中心</Link>
-          {collections.map(({ name, entry }) => <Link key={name} href={`/docs/${entry.slug}`} aria-current={collection === name ? "page" : undefined}>{collectionLabel(name)}</Link>)}
+        <nav className="top-nav" aria-label="文档选择">
+          <label className="collection-picker">
+            <span className="picker-category">{docs.find((d) => d.slug === current)?.category ?? "全部分类"}</span>
+            <span className="sr-only">选择分类与文档合集</span>
+            <select value={collection ?? ""} onChange={(event) => {
+              const entry = collections.find((c) => c.name === event.target.value)?.entry;
+              void router.push(entry ? `/docs/${entry.slug}` : "/");
+            }}>
+              <option value="">文档中心</option>
+              {[...new Set(docs.map((d) => d.category))].map((category) => <optgroup label={category} key={category}>
+                {collections.filter((c) => c.entry.category === category).map(({name}) => <option value={name} key={name}>{collectionLabel(name)}</option>)}
+              </optgroup>)}
+            </select>
+            <Icon name="chevron" size={13} />
+          </label>
         </nav>
         <button
           ref={trigger}