Support multiple roles per member with free-text fallback

- Role field stores comma-separated values ("Guitar, Vocal")
- Form: tag-based multi-role editor per member; predefined select
  + "その他..." option reveals a free-text input for custom roles
- Band detail: render each role as an inline tag (split on ", ")
- band-edit: initializes roles from existing comma-separated data

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

1 files changed, 4 insertions, 4 deletions

diff --git a/app/routes/band-by-uuid.tsx b/app/routes/band-by-uuid.tsx
index 94a7d3c..9cb4d33 100644
--- a/app/routes/band-by-uuid.tsx
+++ b/app/routes/band-by-uuid.tsx
@@ -61,16 +61,16 @@ export default function BandDetail() {
           </h2>
           <ul className="space-y-2">
             {artists.map((a) => (
-              <li key={a.artist_id} className="flex items-center gap-3">
+              <li key={a.artist_id} className="flex items-center gap-3 flex-wrap">
                 <Link
                   to={`/artists/of/${a.artist_id}`}
                   className="text-blue-400 hover:text-blue-300 transition-colors font-medium"
                 >
                   {a.artist_name}
                 </Link>
-                {a.role && (
-                  <span className="text-gray-400 text-sm">{a.role}</span>
-                )}
+                {a.role && a.role.split(", ").filter(Boolean).map((r, i) => (
+                  <span key={i} className="text-gray-500 text-xs bg-gray-900 px-1.5 py-0.5 rounded">{r}</span>
+                ))}
               </li>
             ))}
           </ul>