Add band description/status fields and redesign index page

- bands table: add description (TEXT) and status (TEXT DEFAULT 'active')
  via ALTER TABLE migrations (active / hiatus / disbanded)
- Home page: minimal monochrome index listing name, area, status
- Band detail: show description below title, status alongside area
- Band new/edit forms: textarea for description, select for status

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

1 files changed, 13 insertions, 1 deletions

diff --git a/app/routes/band-by-uuid.tsx b/app/routes/band-by-uuid.tsx
index c55472e..1945a57 100644
--- a/app/routes/band-by-uuid.tsx
+++ b/app/routes/band-by-uuid.tsx
@@ -16,6 +16,12 @@ export async function loader({ params }: LoaderFunctionArgs) {
   return { band, links, artists, latest: revisions[0] ?? null };
 }
 
+const STATUS_LABEL: Record<string, string> = {
+  active: "活動中",
+  hiatus: "活動休止",
+  disbanded: "解散",
+};
+
 export default function BandDetail() {
   const { band, links, artists, latest } = useLoaderData<typeof loader>();
   return (
@@ -23,7 +29,13 @@ export default function BandDetail() {
       <div className="flex items-start justify-between mb-6">
         <div>
           <h1 className="text-2xl font-bold">{band.name}</h1>
-          {band.area && <p className="text-gray-400 mt-1 text-sm">{band.area}</p>}
+          <div className="flex items-center gap-3 mt-1 text-sm text-gray-400">
+            {band.area && <span>{band.area}</span>}
+            <span>{STATUS_LABEL[band.status] ?? band.status}</span>
+          </div>
+          {band.description && (
+            <p className="mt-3 text-gray-300 text-sm leading-relaxed">{band.description}</p>
+          )}
         </div>
         <div className="flex items-center gap-3 text-sm shrink-0 ml-4">
           <Link