Add band index page sorted by slug, show hiatus status only

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

3 files changed, 9 insertions, 21 deletions

diff --git a/app/app.css b/app/app.css
index 1a24300..1129e5a 100644
--- a/app/app.css
+++ b/app/app.css
@@ -69,10 +69,10 @@ section h2 { font-size: 1rem; font-weight: 600; color: #9ca3af; text-transform:
 
 /* ── Band list / home ── */
 
-.band-list { display: flex; flex-direction: column; gap: .5rem; }
-.band-item { display: flex; align-items: center; gap: .75rem; padding: .75rem; background: #111827; border-radius: 6px; }
-.band-item a { font-weight: 500; color: #f3f4f6; flex: 1; }
-.band-item a:hover { color: #60a5fa; text-decoration: none; }
+.band-list { display: flex; flex-direction: column; gap: .25rem; list-style: none; }
+.band-list li { display: flex; align-items: baseline; gap: .75rem; padding: .375rem 0; border-bottom: 1px solid #1f2937; }
+.band-list a { font-weight: 500; color: #e5e7eb; }
+.band-list a:hover { color: #60a5fa; text-decoration: none; }
 
 /* ── Meta ── */
 
diff --git a/app/lib/db.server.ts b/app/lib/db.server.ts
index d3e5469..ab32126 100644
--- a/app/lib/db.server.ts
+++ b/app/lib/db.server.ts
@@ -300,7 +300,7 @@ export function toSlug(name: string): string {
 // ── Band queries ──────────────────────────────────────────────────────────────
 
 export function listBands(): Band[] {
-  return getDb().prepare("SELECT * FROM bands ORDER BY name").all() as Band[];
+  return getDb().prepare("SELECT * FROM bands ORDER BY slug").all() as Band[];
 }
 
 export function getBandById(id: string): Band | null {
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index 5aa7de1..ef6912d 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -5,12 +5,6 @@ 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 (
@@ -24,16 +18,10 @@ export default function Home() {
         <ul className="band-list">
           {bands.map((band) => (
             <li key={band.id}>
-              <div className="name-col">
-                <Link to={`/bands/of/${band.id}`}>{band.name}</Link>
-                {band.description && (
-                  <p className="desc">{band.description}</p>
-                )}
-              </div>
-              <div className="info">
-                {band.area && <span>{band.area}</span>}
-                <span>{STATUS_LABEL[band.status] ?? band.status}</span>
-              </div>
+              <Link to={`/bands/of/${band.id}`}>{band.name}</Link>
+              {band.status === "hiatus" && (
+                <span className="muted" style={{ fontSize: ".75rem" }}>活動休止</span>
+              )}
             </li>
           ))}
         </ul>