feat: improve app ui and project metadata

apps/web/components/foreshadow/ForeshadowCard.tsx

@@ -1,9 +1,13 @@
 "use client";
 
+import { AlertTriangle } from "lucide-react";
 import { useState } from "react";
 
+import { Badge } from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { TextInput } from "@/components/ui/TextInput";
 import type { ForeshadowView } from "@/lib/api/types";
-import type { ForeshadowStatus } from "@/lib/foreshadow/board";
+import { LANE_LABELS, type ForeshadowStatus } from "@/lib/foreshadow/board";
 
 interface ForeshadowCardProps {
   item: ForeshadowView;
@@ -44,9 +48,10 @@ export function ForeshadowCard({
       <div className="flex items-baseline gap-2">
         <span className="font-mono text-xs text-cinnabar">{item.code}</span>
         {overdue ? (
-          <span className="text-xs text-overdue" aria-label="逾期">
-            ⚠ 逾期
-          </span>
+          <Badge variant="warning" aria-label="逾期">
+            <AlertTriangle className="h-3 w-3" aria-hidden="true" />
+            逾期
+          </Badge>
         ) : null}
       </div>
       <p className="mt-0.5 font-serif text-sm text-ink">{item.title}</p>
@@ -72,15 +77,16 @@ export function ForeshadowCard({
           {transitions.length > 0 ? (
             <div className="flex flex-wrap gap-1.5">
               {transitions.map((to) => (
-                <button
+                <Button
                   key={to}
-                  type="button"
                   disabled={busy}
                   onClick={() => onTransition(item.code, to, "")}
-                  className="rounded border border-line px-2 py-0.5 text-xs text-ink hover:border-cinnabar hover:text-cinnabar disabled:opacity-40"
+                  variant="secondary"
+                  size="sm"
+                  className="px-2 py-0.5"
                 >
-                  → {to === "CLOSED" ? "回收" : to}
-                </button>
+                  → {to === "CLOSED" ? "回收" : LANE_LABELS[to]}
+                </Button>
               ))}
             </div>
           ) : null}
@@ -89,25 +95,27 @@ export function ForeshadowCard({
               <label htmlFor={`prog-${item.code}`} className="sr-only">
                 {item.code} 进展
               </label>
-              <input
+              <TextInput
                 id={`prog-${item.code}`}
                 type="text"
                 value={note}
                 onChange={(e) => setNote(e.target.value)}
                 placeholder="加进展（如：23章发光）"
-                className="min-w-0 flex-1 rounded border border-line bg-bg px-2 py-0.5 text-xs text-ink focus:border-cinnabar focus:outline-none"
+                controlSize="sm"
+                className="min-w-0 flex-1 py-0.5"
               />
-              <button
-                type="button"
+              <Button
                 disabled={busy || note.trim().length === 0}
                 onClick={() => {
                   onTransition(item.code, null, note.trim());
                   setNote("");
                 }}
-                className="rounded border border-line px-2 py-0.5 text-xs text-ink hover:border-cinnabar disabled:opacity-40"
+                variant="secondary"
+                size="sm"
+                className="px-2 py-0.5"
               >
                 记
-              </button>
+              </Button>
             </div>
           ) : null}
         </div>