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, 27 insertions, 21 deletions

diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 3df4ab5..5600645 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -5,38 +5,44 @@ export function loader() {
   return { bands: listBands() };
 }
 
+const STATUS_LABEL: Record<string, string> = {
+  active: "活動中",
+  hiatus: "活動休止",
+  disbanded: "解散",
+};
+
 export default function Home() {
   const { bands } = useLoaderData<typeof loader>();
   return (
-    <main className="max-w-3xl mx-auto px-4 py-8">
-      <div className="flex items-center justify-between mb-6">
-        <h1 className="text-xl font-semibold">Bands</h1>
-        <Link to="/bands/new" className="text-sm text-blue-400 hover:text-blue-300">
-          + New Band
-        </Link>
-      </div>
+    <main className="max-w-2xl mx-auto px-6 py-12">
       {bands.length === 0 ? (
-        <p className="text-gray-400">
-          まだバンドがありません。{" "}
-          <Link to="/bands/new" className="text-blue-400 hover:text-blue-300">
+        <p className="text-gray-600 text-sm">
+          バンドがまだありません。{" "}
+          <Link to="/bands/new" className="underline">
             追加する
           </Link>
         </p>
       ) : (
-        <ul className="divide-y divide-gray-800">
+        <ul className="divide-y divide-gray-900">
           {bands.map((band) => (
-            <li key={band.id} className="py-3">
-              <Link
-                to={`/bands/of/${band.id}`}
-                className="flex items-baseline gap-3 group"
-              >
-                <span className="font-medium group-hover:text-blue-300 transition-colors">
+            <li key={band.id} className="py-4 flex items-start justify-between gap-6">
+              <div className="min-w-0">
+                <Link
+                  to={`/bands/of/${band.id}`}
+                  className="text-gray-100 hover:text-white font-medium"
+                >
                   {band.name}
-                </span>
-                {band.area && (
-                  <span className="text-gray-400 text-sm">{band.area}</span>
+                </Link>
+                {band.description && (
+                  <p className="text-gray-500 text-sm mt-0.5 line-clamp-1">
+                    {band.description}
+                  </p>
                 )}
-              </Link>
+              </div>
+              <div className="flex items-center gap-4 text-sm text-gray-500 shrink-0 pt-0.5">
+                {band.area && <span>{band.area}</span>}
+                <span>{STATUS_LABEL[band.status] ?? band.status}</span>
+              </div>
             </li>
           ))}
         </ul>