From 8c9604b4e88cf0216f75bbd2442c6bce216fc794 Mon Sep 17 00:00:00 2001
From: nakomochi <nakomochi13@gmail.com>
Date: Sat, 20 Sep 2025 16:18:31 +0900
Subject: [PATCH 1/3] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=AE?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=83=BB=E8=BF=BD=E5=8A=A0=E3=83=BB=E5=89=8A?=
 =?UTF-8?q?=E9=99=A4=E3=83=BB=E7=B7=A8=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../routes/orgs/[orgId]/settings/+page.svelte | 203 +++++++++++++++++-
 packages/convex/src/convex/organizations.ts   |   9 +-
 packages/convex/src/convex/perms.ts           |   1 +
 packages/convex/src/convex/roles.ts           |  81 +++++++
 packages/convex/src/convex/schema.ts          |   6 +-
 5 files changed, 292 insertions(+), 8 deletions(-)
 create mode 100644 packages/convex/src/convex/roles.ts

diff --git a/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte b/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte
index 2e2cbc3..dff7754 100644
--- a/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte
+++ b/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
   import { api, type Id } from "@packages/convex";
+  import type { Doc } from "@packages/convex/src/convex/_generated/dataModel";
   import { useQuery } from "convex-svelte";
-  import { page } from "$app/stores";
+  import { page } from "$app/state";
+  import Modal, { ModalManager } from "~/lib/modal/modal.svelte";
   import { useMutation } from "~/lib/useMutation.svelte.ts";
 
-  const organizationId = $derived($page.params.orgId as Id<"organizations">);
+  const roleModalManager = new ModalManager();
+
+  const organizationId = $derived(page.params.orgId as Id<"organizations">);
 
   const organization = useQuery(api.organizations.get, () => ({
     id: organizationId,
@@ -12,8 +16,20 @@
   const members = useQuery(api.organizations.getMembers, () => ({
     organizationId,
   }));
+  const roles = useQuery(api.roles.get, () => ({ organizationId }));
   const updateOrganization = useMutation(api.organizations.update);
   const removeMember = useMutation(api.organizations.removeMember);
+  const updateMemberRole = useMutation(api.roles.updateMemberRole);
+  const createRole = useMutation(api.roles.createRole);
+  const updateRole = useMutation(api.roles.updateRole);
+  const deleteRole = useMutation(api.roles.deleteRole);
+
+  let selectedMemberId: Id<"users"> | null = $state(null);
+  let selectedRoleIds: Id<"roles">[] = $state([]);
+
+  let newRoleName = $state("");
+  let editingRole: Doc<"roles"> | null = $state(null);
+  let editingRoleName = $state("");
 
   let isEditing = $state(false);
   let editForm = $state({
@@ -28,6 +44,64 @@
     }
   });
 
+  function openRoleEditor(userId: Id<"users">) {
+    selectedMemberId = userId;
+    selectedRoleIds =
+      members.data?.find((m) => m.userId === userId)?.roleIds || [];
+    roleModalManager.dispatch(roleEditorSnippet);
+  }
+
+  async function handleUpdateMemberRoles() {
+    if (!selectedMemberId) return;
+
+    try {
+      await updateMemberRole.run({
+        organizationId,
+        userId: selectedMemberId,
+        roleIds: selectedRoleIds,
+      });
+      roleModalManager.close();
+    } catch (error) {
+      console.error("Failed to update member roles:", error);
+    }
+  }
+
+  async function handleCreateRole() {
+    if (!newRoleName.trim()) return;
+    try {
+      await createRole.run({ organizationId, roleName: newRoleName });
+      newRoleName = "";
+    } catch (error) {
+      console.error("Failed to create role:", error);
+    }
+  }
+
+  async function handleDeleteRole(roleId: Id<"roles">) {
+    try {
+      await deleteRole.run({ roleId });
+    } catch (error) {
+      console.error("Failed to delete role:", error);
+    }
+  }
+
+  function startEditingRole(role: Doc<"roles">) {
+    editingRole = role;
+    editingRoleName = role.roleName;
+  }
+
+  async function handleUpdateRole() {
+    if (!editingRole || !editingRoleName.trim()) return;
+    try {
+      await updateRole.run({
+        roleId: editingRole._id,
+        roleName: editingRoleName,
+      });
+      editingRole = null;
+    } catch (error) {
+      console.error("Failed to update role:", error);
+    }
+  }
+
   async function handleUpdate() {
     if (!organizationId) return;
 
@@ -172,10 +246,28 @@
                     </div>
                   </div>
                 </div>
-                <div class="flex items-center gap-2">
+                <div class="flex flex-wrap items-center gap-2">
                   <div class="badge badge-outline capitalize">
                     {member.permission}
                   </div>
+                  {#if roles.data && member.roleIds}
+                    {#each member.roleIds as roleId}
+                      {@const role = roles.data.find((r) => r._id === roleId)}
+                      {#if role}
+                        <div class="badge badge-neutral">{role.roleName}</div>
+                      {/if}
+                    {/each}
+                  {/if}
+                </div>
+                <div class="flex items-center gap-2">
+                  {#if organization.data?.permission === "admin"}
+                    <button
+                      class="btn btn-ghost btn-sm"
+                      onclick={() => openRoleEditor(member.userId)}
+                    >
+                      ロール管理
+                    </button>
+                  {/if}
                   {#if organization.data?.permission === "admin" && member.userId !== organization.data?.ownerId}
                     <button
                       class="btn btn-ghost btn-sm text-error"
@@ -195,5 +287,110 @@
         {/if}
       </div>
     </div>
+
+    {#if organization.data?.permission === "admin"}
+      <!-- Role Management -->
+      <div class="card bg-base-200 shadow-xl lg:col-span-2">
+        <div class="card-body">
+          <h2 class="card-title mb-4">ロール管理</h2>
+
+          <!-- Create Role -->
+          <div class="join mb-4">
+            <input
+              class="input join-item input-bordered w-full"
+              placeholder="新しいロール名"
+              bind:value={newRoleName}
+              onkeydown={(e) => e.key === "Enter" && handleCreateRole()}
+            />
+            <button
+              class="btn btn-primary join-item"
+              onclick={handleCreateRole}
+            >
+              作成
+            </button>
+          </div>
+
+          <!-- Roles List -->
+          <div class="space-y-2">
+            {#if roles.data}
+              {#each roles.data as role}
+                <div
+                  class="bg-base-300 flex items-center justify-between rounded-lg p-3"
+                >
+                  {#if editingRole?._id === role._id}
+                    <input
+                      class="input input-bordered input-sm w-full"
+                      bind:value={editingRoleName}
+                      onkeydown={(e) => e.key === "Enter" && handleUpdateRole()}
+                    />
+                    <div class="flex items-center gap-2">
+                      <button
+                        class="btn btn-primary btn-sm"
+                        onclick={handleUpdateRole}>保存</button
+                      >
+                      <button
+                        class="btn btn-ghost btn-sm"
+                        onclick={() => (editingRole = null)}>キャンセル</button
+                      >
+                    </div>
+                  {:else}
+                    <div class="font-medium">{role.roleName}</div>
+                    <div class="flex items-center gap-2">
+                      <button
+                        class="btn btn-ghost btn-sm"
+                        onclick={() => startEditingRole(role)}>名前変更</button
+                      >
+                      <button
+                        class="btn btn-ghost btn-sm text-error"
+                        onclick={() => handleDeleteRole(role._id)}>削除</button
+                      >
+                    </div>
+                  {/if}
+                </div>
+              {/each}
+            {/if}
+          </div>
+        </div>
+      </div>
+    {/if}
   </div>
 </div>
+
+{#snippet roleEditorSnippet()}
+  {#if selectedMemberId}
+    <h3 class="text-lg font-bold">
+      {members.data?.find((m) => m.userId === selectedMemberId)?.user?.name} のロールを編集
+    </h3>
+    {#if roles.data && roles.data.length > 0}
+      <div class="py-4">
+        <div class="form-control space-y-2">
+          {#each roles.data as role}
+            <label class="label cursor-pointer">
+              <span class="label-text">{role.roleName}</span>
+              <input
+                type="checkbox"
+                class="checkbox"
+                value={role._id}
+                bind:group={selectedRoleIds}
+              />
+            </label>
+          {/each}
+        </div>
+      </div>
+      <div class="modal-action">
+        <button class="btn btn-ghost" onclick={() => roleModalManager.close()}
+          >キャンセル</button
+        >
+        <button class="btn btn-primary" onclick={handleUpdateMemberRoles}
+          >保存</button
+        >
+      </div>
+    {:else}
+      <div class="py-4">
+        <p>利用可能なロールがありません。</p>
+      </div>
+    {/if}
+  {/if}
+{/snippet}
+
+<Modal manager={roleModalManager} />
diff --git a/packages/convex/src/convex/organizations.ts b/packages/convex/src/convex/organizations.ts
index eef6778..b5ca823 100644
--- a/packages/convex/src/convex/organizations.ts
+++ b/packages/convex/src/convex/organizations.ts
@@ -26,6 +26,7 @@ export const create = mutation({
       userId,
       permission: "admin",
       joinedAt: Date.now(),
+      roleIds: [],
     });
 
     return organizationId;
@@ -51,7 +52,7 @@ export const list = query({
         return {
           ...org,
           permission: membership.permission,
-          role: membership.role,
+          roleIds: membership.roleIds,
         };
       }),
     );
@@ -68,7 +69,7 @@ export const get = query({
     return {
       ...perms.organization,
       permission: perms.membership.permission,
-      role: perms.membership.role,
+      roleIds: perms.membership.roleIds,
     };
   },
 });
@@ -95,7 +96,7 @@ export const addMember = mutation({
   args: {
     organizationId: v.id("organizations"),
     userId: v.id("users"),
-    role: v.optional(v.string()),
+    roleIds: v.array(v.id("roles")),
     permission: v.union(
       v.literal("admin"),
       v.literal("member"),
@@ -123,7 +124,7 @@ export const addMember = mutation({
     await ctx.db.insert("organizationMembers", {
       organizationId: args.organizationId,
       userId: args.userId,
-      role: args.role,
+      roleIds: args.roleIds,
       permission: args.permission,
       joinedAt: Date.now(),
     });
diff --git a/packages/convex/src/convex/perms.ts b/packages/convex/src/convex/perms.ts
index c9cac08..ec8bb4c 100644
--- a/packages/convex/src/convex/perms.ts
+++ b/packages/convex/src/convex/perms.ts
@@ -173,6 +173,7 @@ export async function getOrganizationPerms(
       invite: membership.permission === "admin",
       changePermission: membership.permission === "admin",
       kick: membership.permission === "admin",
+      updateRole: membership.permission === "admin",
     },
   };
 }
diff --git a/packages/convex/src/convex/roles.ts b/packages/convex/src/convex/roles.ts
new file mode 100644
index 0000000..0fd5a84
--- /dev/null
+++ b/packages/convex/src/convex/roles.ts
@@ -0,0 +1,81 @@
+import { v } from "convex/values";
+import { mutation, query } from "./_generated/server";
+import { getOrganizationPerms } from "./perms";
+
+export const get = query({
+  args: {
+    organizationId: v.id("organizations"),
+  },
+  handler: async (ctx, args) => {
+    return ctx.db
+      .query("roles")
+      .withIndex("by_organization", (q) =>
+        q.eq("organizationId", args.organizationId),
+      )
+      .collect();
+  },
+});
+
+export const createRole = mutation({
+  args: {
+    organizationId: v.id("organizations"),
+    roleName: v.string(),
+  },
+  handler: async (ctx, args) => {
+    await ctx.db.insert("roles", {
+      organizationId: args.organizationId,
+      roleName: args.roleName,
+    });
+  },
+});
+
+export const updateRole = mutation({
+  args: {
+    roleId: v.id("roles"),
+    roleName: v.string(),
+  },
+  handler: async (ctx, args) => {
+    return await ctx.db.patch(args.roleId, {
+      roleName: args.roleName,
+    });
+  },
+});
+
+export const deleteRole = mutation({
+  args: {
+    roleId: v.id("roles"),
+  },
+  handler: async (ctx, args) => {
+    return await ctx.db.delete(args.roleId);
+  },
+});
+
+export const updateMemberRole = mutation({
+  args: {
+    organizationId: v.id("organizations"),
+    userId: v.id("users"),
+    roleIds: v.array(v.id("roles")),
+  },
+  handler: async (ctx, args) => {
+    const perms = await getOrganizationPerms(ctx, { id: args.organizationId });
+    if (!perms.members.updateRole) {
+      throw new Error("Insufficient permissions");
+    }
+
+    const targetMembership = await ctx.db
+      .query("organizationMembers")
+      .withIndex("by_organization", (q) =>
+        q.eq("organizationId", args.organizationId),
+      )
+      .filter((q) => q.eq(q.field("userId"), args.userId))
+      .first();
+
+    if (!targetMembership) {
+      throw new Error("User is not a member");
+    }
+
+    await ctx.db.patch(targetMembership._id, {
+      roleIds: args.roleIds,
+    });
+  },
+});
diff --git a/packages/convex/src/convex/schema.ts b/packages/convex/src/convex/schema.ts
index 044203e..ee2446d 100644
--- a/packages/convex/src/convex/schema.ts
+++ b/packages/convex/src/convex/schema.ts
@@ -17,7 +17,7 @@ export default defineSchema({
   organizationMembers: defineTable({
     organizationId: v.id("organizations"),
     userId: v.id("users"),
-    role: v.optional(v.string()),
+    roleIds: v.array(v.id("roles")),
     permission: v.union(
       v.literal("admin"),
       v.literal("member"),
@@ -27,6 +27,10 @@ export default defineSchema({
   })
     .index("by_organization", ["organizationId"])
     .index("by_user", ["userId"]),
+  roles: defineTable({
+    organizationId: v.id("organizations"),
+    roleName: v.string(),
+  }).index("by_organization", ["organizationId"]),
   channels: defineTable({
     name: v.string(),
     description: v.optional(v.string()),

From 782b37f5f6170cb7bf393be14d1cb886c7342caa Mon Sep 17 00:00:00 2001
From: nakomochi <nakomochi13@gmail.com>
Date: Sat, 20 Sep 2025 16:50:56 +0900
Subject: [PATCH 2/3] =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=AB?=
 =?UTF-8?q?=E8=89=B2=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../routes/orgs/[orgId]/settings/+page.svelte | 65 ++++++++++++++-----
 packages/convex/src/convex/roles.ts           |  4 ++
 packages/convex/src/convex/schema.ts          |  1 +
 3 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte b/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte
index dff7754..4ab4d21 100644
--- a/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte
+++ b/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte
@@ -28,8 +28,10 @@
   let selectedRoleIds: Id<"roles">[] = $state([]);
 
   let newRoleName = $state("");
+  let newRoleColor = $state("#CCCCCC"); // Default color
   let editingRole: Doc<"roles"> | null = $state(null);
   let editingRoleName = $state("");
+  let editingRoleColor = $state("");
 
   let isEditing = $state(false);
   let editForm = $state({
@@ -69,8 +71,13 @@
   async function handleCreateRole() {
     if (!newRoleName.trim()) return;
     try {
-      await createRole.run({ organizationId, roleName: newRoleName });
+      await createRole.run({
+        organizationId,
+        roleName: newRoleName,
+        color: newRoleColor,
+      });
       newRoleName = "";
+      newRoleColor = "#CCCCCC"; // Reset to default
     } catch (error) {
       console.error("Failed to create role:", error);
     }
@@ -87,6 +94,7 @@
   function startEditingRole(role: Doc<"roles">) {
     editingRole = role;
     editingRoleName = role.roleName;
+    editingRoleColor = role.color;
   }
 
   async function handleUpdateRole() {
@@ -95,6 +103,7 @@
       await updateRole.run({
         roleId: editingRole._id,
         roleName: editingRoleName,
+        color: editingRoleColor,
       });
       editingRole = null;
     } catch (error) {
@@ -225,7 +234,7 @@
           <div class="space-y-2">
             {#each members.data as member}
               <div
-                class="bg-base-300 flex items-center justify-between rounded-lg p-3"
+                class="bg-base-300 flex min-w-0 items-center justify-between rounded-lg p-3"
               >
                 <div class="flex items-center gap-3">
                   <div class="avatar placeholder">
@@ -246,7 +255,9 @@
                     </div>
                   </div>
                 </div>
-                <div class="flex flex-wrap items-center gap-2">
+                <div
+                  class="flex min-w-0 flex-grow items-center gap-2 overflow-hidden"
+                >
                   <div class="badge badge-outline capitalize">
                     {member.permission}
                   </div>
@@ -254,7 +265,15 @@
                     {#each member.roleIds as roleId}
                       {@const role = roles.data.find((r) => r._id === roleId)}
                       {#if role}
-                        <div class="badge badge-neutral">{role.roleName}</div>
+                        <div
+                          class="badge badge-neutral flex max-w-[calc(100%-2rem)] flex-shrink-0 items-center gap-1 overflow-hidden text-ellipsis whitespace-nowrap"
+                        >
+                          <div
+                            class="border-base-content/20 h-3 w-3 rounded-full border"
+                            style="background-color: {role.color}"
+                          ></div>
+                          <span>{role.roleName}</span>
+                        </div>
                       {/if}
                     {/each}
                   {/if}
@@ -302,6 +321,11 @@
               bind:value={newRoleName}
               onkeydown={(e) => e.key === "Enter" && handleCreateRole()}
             />
+            <input
+              type="color"
+              class="border-base-content/20 h-10 w-10 border p-0"
+              bind:value={newRoleColor}
+            />
             <button
               class="btn btn-primary join-item"
               onclick={handleCreateRole}
@@ -315,26 +339,35 @@
             {#if roles.data}
               {#each roles.data as role}
                 <div
-                  class="bg-base-300 flex items-center justify-between rounded-lg p-3"
+                  class="bg-base-300 join flex items-center justify-between rounded-lg p-3"
                 >
                   {#if editingRole?._id === role._id}
                     <input
-                      class="input input-bordered input-sm w-full"
+                      class="input input-bordered input-sm join-item w-full"
                       bind:value={editingRoleName}
                       onkeydown={(e) => e.key === "Enter" && handleUpdateRole()}
                     />
+                    <input
+                      type="color"
+                      class="border-base-content/20 h-8 w-8 border p-0"
+                      bind:value={editingRoleColor}
+                    />
+                    <button
+                      class="btn btn-primary btn-sm"
+                      onclick={handleUpdateRole}>保存</button
+                    >
+                    <button
+                      class="btn btn-ghost btn-sm"
+                      onclick={() => (editingRole = null)}>キャンセル</button
+                    >
+                  {:else}
                     <div class="flex items-center gap-2">
-                      <button
-                        class="btn btn-primary btn-sm"
-                        onclick={handleUpdateRole}>保存</button
-                      >
-                      <button
-                        class="btn btn-ghost btn-sm"
-                        onclick={() => (editingRole = null)}>キャンセル</button
-                      >
+                      <div
+                        class="border-base-content/20 h-4 w-4 rounded-full border"
+                        style="background-color: {role.color}"
+                      ></div>
+                      <div class="font-medium">{role.roleName}</div>
                     </div>
-                  {:else}
-                    <div class="font-medium">{role.roleName}</div>
                     <div class="flex items-center gap-2">
                       <button
                         class="btn btn-ghost btn-sm"
diff --git a/packages/convex/src/convex/roles.ts b/packages/convex/src/convex/roles.ts
index 0fd5a84..6657c0a 100644
--- a/packages/convex/src/convex/roles.ts
+++ b/packages/convex/src/convex/roles.ts
@@ -20,11 +20,13 @@ export const createRole = mutation({
   args: {
     organizationId: v.id("organizations"),
     roleName: v.string(),
+    color: v.string(),
   },
   handler: async (ctx, args) => {
     await ctx.db.insert("roles", {
       organizationId: args.organizationId,
       roleName: args.roleName,
+      color: args.color,
     });
   },
 });
@@ -33,10 +35,12 @@ export const updateRole = mutation({
   args: {
     roleId: v.id("roles"),
     roleName: v.string(),
+    color: v.optional(v.string()),
   },
   handler: async (ctx, args) => {
     return await ctx.db.patch(args.roleId, {
       roleName: args.roleName,
+      color: args.color,
     });
   },
 });
diff --git a/packages/convex/src/convex/schema.ts b/packages/convex/src/convex/schema.ts
index ee2446d..82d7420 100644
--- a/packages/convex/src/convex/schema.ts
+++ b/packages/convex/src/convex/schema.ts
@@ -30,6 +30,7 @@ export default defineSchema({
   roles: defineTable({
     organizationId: v.id("organizations"),
     roleName: v.string(),
+    color: v.string(),
   }).index("by_organization", ["organizationId"]),
   channels: defineTable({
     name: v.string(),

From 335e83d453def86272c5ec28d19e8be996c425b2 Mon Sep 17 00:00:00 2001
From: nakomochi <nakomochi13@gmail.com>
Date: Sat, 20 Sep 2025 17:27:04 +0900
Subject: [PATCH 3/3] =?UTF-8?q?UI=E8=AA=BF=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../routes/orgs/[orgId]/settings/+page.svelte | 139 ++++++++++++++----
 1 file changed, 107 insertions(+), 32 deletions(-)

diff --git a/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte b/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte
index 4ab4d21..0063393 100644
--- a/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte
+++ b/packages/client/src/routes/orgs/[orgId]/settings/+page.svelte
@@ -27,6 +27,21 @@
   let selectedMemberId: Id<"users"> | null = $state(null);
   let selectedRoleIds: Id<"roles">[] = $state([]);
 
+  const assignedRoles = $derived(
+    roles.data?.filter((role) => selectedRoleIds.includes(role._id)) || [],
+  );
+  const unassignedRoles = $derived(
+    roles.data?.filter((role) => !selectedRoleIds.includes(role._id)) || [],
+  );
+
+  function assignRole(roleId: Id<"roles">) {
+    selectedRoleIds = [...selectedRoleIds, roleId];
+  }
+
+  function unassignRole(roleId: Id<"roles">) {
+    selectedRoleIds = selectedRoleIds.filter((id) => id !== roleId);
+  }
+
   let newRoleName = $state("");
   let newRoleColor = $state("#CCCCCC"); // Default color
   let editingRole: Doc<"roles"> | null = $state(null);
@@ -361,14 +376,20 @@
                       onclick={() => (editingRole = null)}>キャンセル</button
                     >
                   {:else}
-                    <div class="flex items-center gap-2">
+                    <div
+                      class="flex min-w-0 flex-grow items-center gap-2 overflow-hidden"
+                    >
                       <div
-                        class="border-base-content/20 h-4 w-4 rounded-full border"
+                        class="border-base-content/20 h-4 w-4 flex-shrink-0 rounded-full border"
                         style="background-color: {role.color}"
                       ></div>
-                      <div class="font-medium">{role.roleName}</div>
+                      <div
+                        class="min-w-0 overflow-hidden font-medium text-ellipsis whitespace-nowrap"
+                      >
+                        {role.roleName}
+                      </div>
                     </div>
-                    <div class="flex items-center gap-2">
+                    <div class="flex flex-shrink-0 items-center gap-2">
                       <button
                         class="btn btn-ghost btn-sm"
                         onclick={() => startEditingRole(role)}>名前変更</button
@@ -394,35 +415,89 @@
     <h3 class="text-lg font-bold">
       {members.data?.find((m) => m.userId === selectedMemberId)?.user?.name} のロールを編集
     </h3>
-    {#if roles.data && roles.data.length > 0}
-      <div class="py-4">
-        <div class="form-control space-y-2">
-          {#each roles.data as role}
-            <label class="label cursor-pointer">
-              <span class="label-text">{role.roleName}</span>
-              <input
-                type="checkbox"
-                class="checkbox"
-                value={role._id}
-                bind:group={selectedRoleIds}
-              />
-            </label>
-          {/each}
+    <div class="mx-auto max-w-lg">
+      {#if roles.data && roles.data.length > 0}
+        <div class="py-4">
+          <!-- Assigned Roles -->
+          <h4 class="mb-2 font-semibold">割り当て済みロール</h4>
+          <div
+            class="mb-4 flex max-h-32 flex-wrap gap-2 overflow-y-auto rounded border p-1"
+          >
+            {#if assignedRoles.length > 0}
+              {#each assignedRoles as role}
+                <div class="badge badge-neutral flex items-center gap-1">
+                  <div
+                    class="border-base-content/20 h-3 w-3 rounded-full border"
+                    style="background-color: {role.color}"
+                  ></div>
+                  <span
+                    class="min-w-0 flex-grow overflow-hidden text-ellipsis whitespace-nowrap"
+                    >{role.roleName}</span
+                  >
+                  <button
+                    class="btn btn-xs btn-ghost"
+                    onclick={() => unassignRole(role._id)}
+                  >
+                    ✕
+                  </button>
+                </div>
+              {/each}
+            {:else}
+              <p class="text-base-content/70 text-sm">
+                割り当てられたロールはありません。
+              </p>
+            {/if}
+          </div>
+
+          <!-- Available Roles -->
+          <h4 class="mb-2 font-semibold">利用可能なロール</h4>
+          <div
+            class="max-h-32 space-y-2 overflow-x-hidden overflow-y-auto rounded border p-1"
+          >
+            {#if unassignedRoles.length > 0}
+              {#each unassignedRoles as role}
+                <div class="flex items-center justify-between">
+                  <div
+                    class="flex min-w-0 flex-grow items-center gap-2 overflow-hidden"
+                  >
+                    <div
+                      class="border-base-content/20 h-4 w-4 flex-shrink-0 rounded-full border"
+                      style="background-color: {role.color}"
+                    ></div>
+                    <span
+                      class="min-w-0 flex-grow overflow-hidden font-medium text-ellipsis whitespace-nowrap"
+                      >{role.roleName}</span
+                    >
+                  </div>
+                  <button
+                    class="btn btn-primary btn-sm flex-shrink-0"
+                    onclick={() => assignRole(role._id)}
+                  >
+                    追加
+                  </button>
+                </div>
+              {/each}
+            {:else}
+              <p class="text-base-content/70 text-sm">
+                利用可能なロールはありません。
+              </p>
+            {/if}
+          </div>
         </div>
-      </div>
-      <div class="modal-action">
-        <button class="btn btn-ghost" onclick={() => roleModalManager.close()}
-          >キャンセル</button
-        >
-        <button class="btn btn-primary" onclick={handleUpdateMemberRoles}
-          >保存</button
-        >
-      </div>
-    {:else}
-      <div class="py-4">
-        <p>利用可能なロールがありません。</p>
-      </div>
-    {/if}
+        <div class="modal-action">
+          <button class="btn btn-ghost" onclick={() => roleModalManager.close()}
+            >キャンセル</button
+          >
+          <button class="btn btn-primary" onclick={handleUpdateMemberRoles}
+            >保存</button
+          >
+        </div>
+      {:else}
+        <div class="py-4">
+          <p>利用可能なロールがありません。</p>
+        </div>
+      {/if}
+    </div>
   {/if}
 {/snippet}