Add bands/artists index pages and redirect top page

- / now redirects to /bands
- /bands shows band list with "+ Band" link
- /artists shows artist list with "+ Artist" link
- Nav simplified to Bands / Artists only

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

5 files changed, 76 insertions, 28 deletions

diff --git a/app/root.tsx b/app/root.tsx
index 242ffe2..e30abe8 100644
--- a/app/root.tsx
+++ b/app/root.tsx
@@ -49,9 +49,8 @@ export default function App() {
       <nav>
         <div>
           <Link to="/" className="logo">whois.band</Link>
-          <Link to="/bands/new">+ Band</Link>
-          <Link to="/artists/new">+ Artist</Link>
-          <Link to="/lists">Lists</Link>
+          <Link to="/bands">Bands</Link>
+          <Link to="/artists">Artists</Link>
         </div>
       </nav>
       <Outlet />
diff --git a/app/routes.ts b/app/routes.ts
index b02a70a..0a2c028 100644
--- a/app/routes.ts
+++ b/app/routes.ts
@@ -6,11 +6,13 @@ export default [
   route("/api/artists", "routes/api-artists.tsx"),
   route("/api/export", "routes/api-export.tsx"),
   route("/api/import", "routes/api-import.tsx"),
+  route("/bands", "routes/band-index.tsx"),
   route("/bands/new", "routes/band-new.tsx"),
   route("/bands/of/:uuid", "routes/band-by-uuid.tsx"),
   route("/bands/named/:slug", "routes/band-by-slug.tsx"),
   route("/bands/of/:uuid/edit", "routes/band-edit.tsx"),
   route("/bands/of/:uuid/history", "routes/band-history.tsx"),
+  route("/artists", "routes/artist-index.tsx"),
   route("/artists/new", "routes/artist-new.tsx"),
   route("/artists/of/:uuid", "routes/artist-by-uuid.tsx"),
   route("/artists/named/:slug", "routes/artist-by-slug.tsx"),
diff --git a/app/routes/artist-index.tsx b/app/routes/artist-index.tsx
new file mode 100644
index 0000000..9981567
--- /dev/null
+++ b/app/routes/artist-index.tsx
@@ -0,0 +1,33 @@
+import { Link, useLoaderData } from "react-router";
+import { listArtists } from "~/lib/db.server";
+
+export function loader() {
+  return { artists: listArtists() };
+}
+
+export default function ArtistIndex() {
+  const { artists } = useLoaderData<typeof loader>();
+  return (
+    <main>
+      <div className="page-header">
+        <h1>Artists</h1>
+        <Link to="/artists/new">+ Artist</Link>
+      </div>
+
+      {artists.length === 0 ? (
+        <p className="muted">
+          アーティストがまだありません。{" "}
+          <Link to="/artists/new">追加する</Link>
+        </p>
+      ) : (
+        <ul className="band-list">
+          {artists.map((artist) => (
+            <li key={artist.id}>
+              <Link to={`/artists/of/${artist.id}`}>{artist.name}</Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}
diff --git a/app/routes/band-index.tsx b/app/routes/band-index.tsx
new file mode 100644
index 0000000..0b47da5
--- /dev/null
+++ b/app/routes/band-index.tsx
@@ -0,0 +1,36 @@
+import { Link, useLoaderData } from "react-router";
+import { listBands } from "~/lib/db.server";
+
+export function loader() {
+  return { bands: listBands() };
+}
+
+export default function BandIndex() {
+  const { bands } = useLoaderData<typeof loader>();
+  return (
+    <main>
+      <div className="page-header">
+        <h1>Bands</h1>
+        <Link to="/bands/new">+ Band</Link>
+      </div>
+
+      {bands.length === 0 ? (
+        <p className="muted">
+          バンドがまだありません。{" "}
+          <Link to="/bands/new">追加する</Link>
+        </p>
+      ) : (
+        <ul className="band-list">
+          {bands.map((band) => (
+            <li key={band.id}>
+              <Link to={`/bands/of/${band.id}`}>{band.name}</Link>
+              {band.status === "hiatus" && (
+                <span className="muted" style={{ fontSize: ".75rem" }}>活動休止</span>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </main>
+  );
+}
diff --git a/app/routes/home.tsx b/app/routes/home.tsx
index ef6912d..9795ba8 100644
--- a/app/routes/home.tsx
+++ b/app/routes/home.tsx
@@ -1,31 +1,9 @@
-import { Link, useLoaderData } from "react-router";
-import { listBands } from "~/lib/db.server";
+import { redirect } from "react-router";
 
 export function loader() {
-  return { bands: listBands() };
+  return redirect("/bands");
 }
 
 export default function Home() {
-  const { bands } = useLoaderData<typeof loader>();
-  return (
-    <main>
-      {bands.length === 0 ? (
-        <p className="muted">
-          バンドがまだありません。{" "}
-          <Link to="/bands/new">追加する</Link>
-        </p>
-      ) : (
-        <ul className="band-list">
-          {bands.map((band) => (
-            <li key={band.id}>
-              <Link to={`/bands/of/${band.id}`}>{band.name}</Link>
-              {band.status === "hiatus" && (
-                <span className="muted" style={{ fontSize: ".75rem" }}>活動休止</span>
-              )}
-            </li>
-          ))}
-        </ul>
-      )}
-    </main>
-  );
+  return null;
 }