feat: improve app ui and project metadata

apps/web/components/outline/OutlineChapterRow.tsx

@@ -1,12 +1,15 @@
 "use client";
 
 import Link from "next/link";
+import { PenLine } from "lucide-react";
 
+import { Badge } from "@/components/ui/Badge";
 import type { OutlineChapterView } from "@/lib/api/types";
 import {
   isCloseWindow,
   windowBadgeLabel,
 } from "@/lib/outline/outline";
+import { buttonClass } from "@/lib/ui/variants";
 
 interface OutlineChapterRowProps {
   chapter: OutlineChapterView;
@@ -25,31 +28,28 @@ export function OutlineChapterRow({ chapter, projectId }: OutlineChapterRowProps
         </span>
         <Link
           href={`/projects/${projectId}/write?chapter=${chapter.no}`}
-          className="rounded border border-line px-1.5 py-0.5 text-xs text-ink-soft hover:border-cinnabar hover:text-cinnabar"
+          className={buttonClass({ variant: "secondary", size: "sm" })}
         >
-          ✍ 写此章
+          <PenLine className="h-3.5 w-3.5" aria-hidden="true" />
+          写此章
         </Link>
         {windows.map((w) => {
           const close = isCloseWindow(chapter, w);
           return (
-            <span
+            <Badge
               key={w.code}
+              variant={close ? "warning" : "accent"}
               title={close ? "进入回收窗口，建议本章安排回收" : undefined}
-              className={`rounded px-1.5 py-0.5 text-xs ${
-                close
-                  ? "bg-overdue/15 text-overdue"
-                  : "bg-[var(--color-cinnabar-wash)] text-cinnabar"
-              }`}
             >
               {windowBadgeLabel(w)}
               {close ? " · 可回收" : ""}
-            </span>
+            </Badge>
           );
         })}
       </div>
       {chapter.beats && chapter.beats.length > 0 ? (
         <p className="mt-1 text-sm text-ink">
-          <span className="text-ink-soft">beats: </span>
+          <span className="text-ink-soft">节拍：</span>
           {chapter.beats.join(" / ")}
         </p>
       ) : (