feat: improve app ui and project metadata

apps/web/components/foreshadow/RegisterForm.tsx

@@ -1,13 +1,18 @@
 "use client";
 
-import { useState } from "react";
+import { useState, type ReactNode } from "react";
+import { Plus } from "lucide-react";
 
+import { Button } from "@/components/ui/Button";
+import { TextInput } from "@/components/ui/TextInput";
 import type { RegisterInput } from "@/lib/foreshadow/board";
 
 interface RegisterFormProps {
   projectId: string;
   busy: boolean;
   onRegister: (input: RegisterInput) => Promise<boolean>;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
 }
 
 const EMPTY = {
@@ -25,9 +30,16 @@ export function RegisterForm({
   projectId,
   busy,
   onRegister,
+  open: controlledOpen,
+  onOpenChange,
 }: RegisterFormProps) {
-  const [open, setOpen] = useState(false);
+  const [localOpen, setLocalOpen] = useState(false);
   const [form, setForm] = useState({ ...EMPTY });
+  const open = controlledOpen ?? localOpen;
+  const setOpen = (next: boolean): void => {
+    if (controlledOpen === undefined) setLocalOpen(next);
+    onOpenChange?.(next);
+  };
 
   const set = (key: keyof typeof EMPTY, value: string): void =>
     setForm((prev) => ({ ...prev, [key]: value }));
@@ -51,13 +63,10 @@ export function RegisterForm({
 
   if (!open) {
     return (
-      <button
-        type="button"
-        onClick={() => setOpen(true)}
-        className="rounded bg-cinnabar px-3 py-1.5 text-sm text-panel hover:opacity-90"
-      >
-        ＋ 登记伏笔
-      </button>
+      <Button onClick={() => setOpen(true)} variant="primary" size="sm">
+        <Plus className="h-4 w-4" aria-hidden="true" />
+        登记伏笔
+      </Button>
     );
   }
 
@@ -73,99 +82,90 @@ export function RegisterForm({
       className="rounded border border-line bg-panel p-4"
     >
       <div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
-        <Field label="代号 *" id="f-code">
-          <input
+        <FormSlot label="代号 *" id="f-code">
+          <TextInput
             id="f-code"
             value={form.code}
             onChange={(e) => set("code", e.target.value)}
-            className={inputCls}
           />
-        </Field>
-        <Field label="标题 *" id="f-title" span2>
-          <input
+        </FormSlot>
+        <FormSlot label="标题 *" id="f-title" span2>
+          <TextInput
             id="f-title"
             value={form.title}
             onChange={(e) => set("title", e.target.value)}
-            className={inputCls}
           />
-        </Field>
-        <Field label="埋设章" id="f-planted">
-          <input
+        </FormSlot>
+        <FormSlot label="埋设章" id="f-planted">
+          <TextInput
             id="f-planted"
             inputMode="numeric"
             value={form.plantedAt}
             onChange={(e) => set("plantedAt", e.target.value)}
-            className={inputCls}
           />
-        </Field>
-        <Field label="回收窗口起" id="f-from">
-          <input
+        </FormSlot>
+        <FormSlot label="回收窗口起" id="f-from">
+          <TextInput
             id="f-from"
             inputMode="numeric"
             value={form.expectedCloseFrom}
             onChange={(e) => set("expectedCloseFrom", e.target.value)}
-            className={inputCls}
           />
-        </Field>
-        <Field label="回收窗口止" id="f-to">
-          <input
+        </FormSlot>
+        <FormSlot label="回收窗口止" id="f-to">
+          <TextInput
             id="f-to"
             inputMode="numeric"
             value={form.expectedCloseTo}
             onChange={(e) => set("expectedCloseTo", e.target.value)}
-            className={inputCls}
           />
-        </Field>
-        <Field label="重要度" id="f-imp">
-          <input
+        </FormSlot>
+        <FormSlot label="重要度" id="f-imp">
+          <TextInput
             id="f-imp"
             value={form.importance}
             onChange={(e) => set("importance", e.target.value)}
             placeholder="主线/支线"
-            className={inputCls}
           />
-        </Field>
-        <Field label="线索内容" id="f-content" span3>
-          <input
+        </FormSlot>
+        <FormSlot label="线索内容" id="f-content" span3>
+          <TextInput
             id="f-content"
             value={form.content}
             onChange={(e) => set("content", e.target.value)}
-            className={inputCls}
           />
-        </Field>
+        </FormSlot>
       </div>
       <div className="mt-3 flex items-center gap-2">
-        <button
+        <Button
           type="submit"
           disabled={!canSubmit}
-          className="rounded bg-cinnabar px-3 py-1.5 text-sm text-panel hover:opacity-90 disabled:opacity-40"
+          variant="primary"
+          size="sm"
         >
           {busy ? "登记中…" : "登记"}
-        </button>
-        <button
-          type="button"
+        </Button>
+        <Button
           onClick={() => setOpen(false)}
-          className="rounded border border-line px-3 py-1.5 text-sm text-ink-soft hover:border-cinnabar"
+          variant="secondary"
+          size="sm"
         >
           取消
-        </button>
+        </Button>
       </div>
     </form>
   );
 }
 
-const inputCls =
-  "w-full rounded border border-line bg-bg px-2 py-1 text-sm text-ink focus:border-cinnabar focus:outline-none";
-
-interface FieldProps {
+interface FormSlotProps {
   label: string;
   id: string;
   span2?: boolean;
   span3?: boolean;
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
-function Field({ label, id, span2, span3, children }: FieldProps) {
+function FormSlot({ label, id, span2, span3, children }: FormSlotProps) {
   const span = span3 ? "col-span-2 sm:col-span-3" : span2 ? "col-span-2" : "";
   return (
     <div className={span}>