Add predefined link types and artist roles

- app/lib/constants.ts: LINK_TYPES (12種) and ARTIST_ROLES (13種)
- Band link forms: label input → type select (公式サイト, X, Instagram, ...)
- Band member forms: role text → role select (Vocal, Guitar, Bass, ...)
- Band detail: resolve link type key to display label via LINK_TYPE_LABEL

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

1 files changed, 16 insertions, 8 deletions

diff --git a/app/routes/band-edit.tsx b/app/routes/band-edit.tsx
index 99d4ee7..50b8bd4 100644
--- a/app/routes/band-edit.tsx
+++ b/app/routes/band-edit.tsx
@@ -9,6 +9,7 @@ import {
   listArtists,
   updateBand,
 } from "~/lib/db.server";
+import { ARTIST_ROLES, LINK_TYPES } from "~/lib/constants";
 
 export async function loader({ params }: LoaderFunctionArgs) {
   const band = getBandById(params.uuid!);
@@ -159,12 +160,15 @@ export default function BandEdit() {
           <div className="space-y-2">
             {links.map((link, i) => (
               <div key={i} className="flex gap-2">
-                <input
+                <select
                   value={link.label}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, label: e.target.value } : l))}
-                  placeholder="ラベル (例: X)"
-                  className="w-28 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
-                />
+                  className="w-36 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
+                >
+                  {LINK_TYPES.map((t) => (
+                    <option key={t.value} value={t.value}>{t.label}</option>
+                  ))}
+                </select>
                 <input
                   value={link.url}
                   onChange={(e) => setLinks(links.map((l, idx) => idx === i ? { ...l, url: e.target.value } : l))}
@@ -183,7 +187,7 @@ export default function BandEdit() {
           </div>
           <button
             type="button"
-            onClick={() => setLinks([...links, { label: "", url: "" }])}
+            onClick={() => setLinks([...links, { label: LINK_TYPES[0].value, url: "" }])}
             className="mt-2 text-blue-400 hover:text-blue-300 text-sm transition-colors"
           >
             + リンクを追加
@@ -196,12 +200,16 @@ export default function BandEdit() {
             {picked.map((p, i) => (
               <div key={p.id} className="flex gap-2 items-center">
                 <span className="text-gray-200 text-sm w-32 truncate">{p.name}</span>
-                <input
+                <select
                   value={p.role}
                   onChange={(e) => setPicked(picked.map((a, idx) => idx === i ? { ...a, role: e.target.value } : a))}
-                  placeholder="パート (例: Guitar)"
                   className="flex-1 bg-gray-800 border border-gray-700 rounded px-3 py-2 text-gray-100 focus:outline-none focus:border-blue-500 text-sm"
-                />
+                >
+                  <option value="">— パートを選択 —</option>
+                  {ARTIST_ROLES.map((r) => (
+                    <option key={r} value={r}>{r}</option>
+                  ))}
+                </select>
                 <button
                   type="button"
                   onClick={() => setPicked(picked.filter((_, idx) => idx !== i))}