From 11241b10f6f962102421885e1b0580a1b0df22b0 Mon Sep 17 00:00:00 2001
From: yyamashita <yyamashita@mosquit.one>
Date: Sat, 9 May 2026 00:56:11 +0900
Subject: Support multiple roles per member with free-text fallback
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 app/routes/band-by-uuid.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

(limited to 'app/routes/band-by-uuid.tsx')

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>
-- 
cgit v1.2.3