icub3d/decentcom

Fork 0

Feature: Admin UI for role and permission management #52

New issue

Open

opened 2026-04-26 16:46:09 +00:00 by icub3d · 0 comments

icub3d commented

2026-04-26 16:46:09 +00:00

Owner

Migrated from GitHub issue icub3d/decentcom#73
Original Author: @icub3d
Original Date: 2026-04-17T01:51:55Z

Feature: Admin UI for role and permission management

Overview

Build a comprehensive admin interface in the client for managing server roles, their permissions, and member role assignments. Admins should be able to create, edit, and delete roles; assign permissions as a visual checklist; and manage which members belong to which roles — all through an intuitive UI.

Background

The server already supports role-based permission management via REST endpoints (/api/v1/roles, /api/v1/members/:pubkey/roles/:role_id, etc.). Role permissions are stored as a bitmask (14 permission flags defined in server/src/permissions.rs). The client has basic data structures in client/src/stores/roles.ts and some partial UI components (RoleList.tsx, RoleEditor.tsx), but the management interface is incomplete and difficult to use. Admins need a visual, intuitive way to:

See all roles at a glance with their permission summary
Create new roles with a friendly name, color, and permission picker
Edit existing roles and apply permission changes
Assign and unassign roles to/from members
See role hierarchy (position) and manage it
Understand which permissions are required for which actions

Requirements

Implement a complete role list view with role cards showing name, color, member count, and permission summary
Implement a role creation/editing modal with a visual permission checklist for all 14 permission flags
Display human-readable permission names and descriptions (not just bit flags)
Allow dragging or reordering roles to adjust position (role hierarchy)
Show role assignments in the member list (which roles each member has)
Add/remove roles from members via a member detail panel or quick-action menu
Prevent deletion of built-in @everyone and @admin roles
Prevent non-admins from accessing role management UI
Show helpful tooltips/descriptions for each permission
Display which members have each role (role detail view or popover)

Design

API / Interface Changes

The REST API endpoints already exist:

GET /api/v1/roles — list all roles
POST /api/v1/roles — create role
PATCH /api/v1/roles/{role_id} — update role (name, color, permissions, position)
DELETE /api/v1/roles/{role_id} — delete role
PUT /api/v1/members/{pubkey}/roles/{role_id} — add member to role
DELETE /api/v1/members/{pubkey}/roles/{role_id} — remove member from role
GET /api/v1/members — list members (includes their role assignments)

No new API endpoints are needed.

Data Model Changes

No data model changes — the server schema is already set.

Component Changes

Client (client/):

client/src/components/settings/RoleManagementPanel.tsx — new: main admin panel for role management (wraps child components)
client/src/components/settings/RoleList.tsx — update: improve existing component to show cards with role info
client/src/components/settings/RoleEditor.tsx — update: improve to include permission checklist UI
client/src/components/settings/PermissionCheckbox.tsx — new: reusable permission checkbox with label and description
client/src/components/settings/RoleHierarchyManager.tsx — new: UI for reordering roles by position
client/src/components/members/MemberRoleAssignment.tsx — new: modal/panel for assigning/removing roles from a specific member
client/src/stores/roles.ts — update: add computed state for role summaries (member count per role, permission descriptions)
client/src/api/roles.ts — verify existing API client functions are complete

Constants/Utilities:

client/src/constants/permissions.ts — new: export permission names and descriptions

export const PERMISSION_INFO = {
  SEND_MESSAGES: { name: "Send Messages", description: "Post messages in channels" },
  READ_MESSAGES: { name: "Read Messages", description: "View channel history" },
  MANAGE_MESSAGES: { name: "Manage Messages", description: "Edit/delete others' messages" },
  // ... etc for all 14 permissions
}

Task List

Phase A — Core permission UI

Create client/src/constants/permissions.ts with all 14 permission names and descriptions
Create PermissionCheckbox.tsx component (checkbox + label + description tooltip)
Improve RoleEditor.tsx with permission checklist using PermissionCheckbox
Add color picker to RoleEditor.tsx for role custom color

Phase B — Role list and hierarchy

Improve RoleList.tsx to show role cards (name, color, member count, summary of permissions)
Add create role button to RoleList.tsx
Create RoleHierarchyManager.tsx with drag-and-drop reordering (or arrow up/down buttons)
Add edit/delete buttons to each role card

Phase C — Member role assignment

Create MemberRoleAssignment.tsx modal/panel for assigning/removing roles from a member
Integrate role assignment into member list (right-click context menu or detail panel)
Display roles on each member in the member list view

Phase D — Admin panel integration

Create RoleManagementPanel.tsx as the top-level admin panel
Integrate into server settings navigation (e.g., Settings → Roles)
Add admin permission check (only users with MANAGE_ROLES can access)
Wire up create/update/delete role API calls
Add success/error notifications for role operations

Test List

Unit test: PERMISSION_INFO constant covers all 14 permissions with unique names/descriptions
Component test: PermissionCheckbox renders label, description, and is toggleable
Component test: RoleEditor renders all 14 permission checkboxes; form values serialize correctly
Component test: RoleList displays role cards with name, color, member count
Component test: Create role button opens editor modal; canceling closes without API call
Integration test: Create a new role via form → API call succeeds → role appears in list
Integration test: Edit role permissions → API call succeeds → role list reflects changes
Integration test: Delete a role → API call succeeds → role removed from list
Integration test: Drag-and-drop reorder roles → position values update via API
Integration test: Assign role to member → member appears in role's member list
Integration test: Remove role from member → member removed from role's member list
Manual: as admin, open role management panel; create/edit/delete a role; assign roles to members
Manual: verify @everyone and @admin roles cannot be deleted
Manual: verify non-admins see "Permission denied" when trying to access role management
Manual: verify permission descriptions appear as tooltips and are helpful

Open Questions

Permission UI design: Should permissions be organized in groups (messaging, moderation, admin) or shown flat? Grouped would be more usable.
Drag-and-drop vs. buttons: For role reordering, should we use drag-and-drop or arrow buttons? Buttons are more accessible.
Role color picker: Should we offer a color palette or free-form hex input? Palette (with default Catppuccin colors) is friendlier.
Role member count: Should we show a live count or fetch on demand? Live would require keeping the store synced.
Hierarchy explanation: Should we explain why role position matters (higher position = higher precedence for conflicts)? Yes, with a tooltip.

**Migrated from GitHub issue icub3d/decentcom#73** **Original Author:** @icub3d **Original Date:** 2026-04-17T01:51:55Z --- # Feature: Admin UI for role and permission management ## Overview Build a comprehensive admin interface in the client for managing server roles, their permissions, and member role assignments. Admins should be able to create, edit, and delete roles; assign permissions as a visual checklist; and manage which members belong to which roles — all through an intuitive UI. ## Background The server already supports role-based permission management via REST endpoints (`/api/v1/roles`, `/api/v1/members/:pubkey/roles/:role_id`, etc.). Role permissions are stored as a bitmask (14 permission flags defined in `server/src/permissions.rs`). The client has basic data structures in `client/src/stores/roles.ts` and some partial UI components (`RoleList.tsx`, `RoleEditor.tsx`), but the management interface is incomplete and difficult to use. Admins need a visual, intuitive way to: - See all roles at a glance with their permission summary - Create new roles with a friendly name, color, and permission picker - Edit existing roles and apply permission changes - Assign and unassign roles to/from members - See role hierarchy (position) and manage it - Understand which permissions are required for which actions ## Requirements - [ ] Implement a complete role list view with role cards showing name, color, member count, and permission summary - [ ] Implement a role creation/editing modal with a visual permission checklist for all 14 permission flags - [ ] Display human-readable permission names and descriptions (not just bit flags) - [ ] Allow dragging or reordering roles to adjust position (role hierarchy) - [ ] Show role assignments in the member list (which roles each member has) - [ ] Add/remove roles from members via a member detail panel or quick-action menu - [ ] Prevent deletion of built-in `@everyone` and `@admin` roles - [ ] Prevent non-admins from accessing role management UI - [ ] Show helpful tooltips/descriptions for each permission - [ ] Display which members have each role (role detail view or popover) ## Design ### API / Interface Changes The REST API endpoints already exist: - `GET /api/v1/roles` — list all roles - `POST /api/v1/roles` — create role - `PATCH /api/v1/roles/{role_id}` — update role (name, color, permissions, position) - `DELETE /api/v1/roles/{role_id}` — delete role - `PUT /api/v1/members/{pubkey}/roles/{role_id}` — add member to role - `DELETE /api/v1/members/{pubkey}/roles/{role_id}` — remove member from role - `GET /api/v1/members` — list members (includes their role assignments) No new API endpoints are needed. ### Data Model Changes No data model changes — the server schema is already set. ### Component Changes **Client (`client/`):** - `client/src/components/settings/RoleManagementPanel.tsx` — new: main admin panel for role management (wraps child components) - `client/src/components/settings/RoleList.tsx` — update: improve existing component to show cards with role info - `client/src/components/settings/RoleEditor.tsx` — update: improve to include permission checklist UI - `client/src/components/settings/PermissionCheckbox.tsx` — new: reusable permission checkbox with label and description - `client/src/components/settings/RoleHierarchyManager.tsx` — new: UI for reordering roles by position - `client/src/components/members/MemberRoleAssignment.tsx` — new: modal/panel for assigning/removing roles from a specific member - `client/src/stores/roles.ts` — update: add computed state for role summaries (member count per role, permission descriptions) - `client/src/api/roles.ts` — verify existing API client functions are complete **Constants/Utilities:** - `client/src/constants/permissions.ts` — new: export permission names and descriptions ```typescript export const PERMISSION_INFO = { SEND_MESSAGES: { name: "Send Messages", description: "Post messages in channels" }, READ_MESSAGES: { name: "Read Messages", description: "View channel history" }, MANAGE_MESSAGES: { name: "Manage Messages", description: "Edit/delete others' messages" }, // ... etc for all 14 permissions } ``` ## Task List ### Phase A — Core permission UI - [ ] Create `client/src/constants/permissions.ts` with all 14 permission names and descriptions - [ ] Create `PermissionCheckbox.tsx` component (checkbox + label + description tooltip) - [ ] Improve `RoleEditor.tsx` with permission checklist using `PermissionCheckbox` - [ ] Add color picker to `RoleEditor.tsx` for role custom color ### Phase B — Role list and hierarchy - [ ] Improve `RoleList.tsx` to show role cards (name, color, member count, summary of permissions) - [ ] Add create role button to `RoleList.tsx` - [ ] Create `RoleHierarchyManager.tsx` with drag-and-drop reordering (or arrow up/down buttons) - [ ] Add edit/delete buttons to each role card ### Phase C — Member role assignment - [ ] Create `MemberRoleAssignment.tsx` modal/panel for assigning/removing roles from a member - [ ] Integrate role assignment into member list (right-click context menu or detail panel) - [ ] Display roles on each member in the member list view ### Phase D — Admin panel integration - [ ] Create `RoleManagementPanel.tsx` as the top-level admin panel - [ ] Integrate into server settings navigation (e.g., Settings → Roles) - [ ] Add admin permission check (only users with MANAGE_ROLES can access) - [ ] Wire up create/update/delete role API calls - [ ] Add success/error notifications for role operations ## Test List - [ ] Unit test: `PERMISSION_INFO` constant covers all 14 permissions with unique names/descriptions - [ ] Component test: `PermissionCheckbox` renders label, description, and is toggleable - [ ] Component test: `RoleEditor` renders all 14 permission checkboxes; form values serialize correctly - [ ] Component test: `RoleList` displays role cards with name, color, member count - [ ] Component test: Create role button opens editor modal; canceling closes without API call - [ ] Integration test: Create a new role via form → API call succeeds → role appears in list - [ ] Integration test: Edit role permissions → API call succeeds → role list reflects changes - [ ] Integration test: Delete a role → API call succeeds → role removed from list - [ ] Integration test: Drag-and-drop reorder roles → position values update via API - [ ] Integration test: Assign role to member → member appears in role's member list - [ ] Integration test: Remove role from member → member removed from role's member list - [ ] Manual: as admin, open role management panel; create/edit/delete a role; assign roles to members - [ ] Manual: verify @everyone and @admin roles cannot be deleted - [ ] Manual: verify non-admins see "Permission denied" when trying to access role management - [ ] Manual: verify permission descriptions appear as tooltips and are helpful ## Open Questions - **Permission UI design:** Should permissions be organized in groups (messaging, moderation, admin) or shown flat? Grouped would be more usable. - **Drag-and-drop vs. buttons:** For role reordering, should we use drag-and-drop or arrow buttons? Buttons are more accessible. - **Role color picker:** Should we offer a color palette or free-form hex input? Palette (with default Catppuccin colors) is friendlier. - **Role member count:** Should we show a live count or fetch on demand? Live would require keeping the store synced. - **Hierarchy explanation:** Should we explain why role position matters (higher position = higher precedence for conflicts)? Yes, with a tooltip.

icub3d added the

status:planned

area:ux

type:feature

labels

2026-04-26 16:46:09 +00:00

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

icub3d/decentcom#52

No description provided.

Rows
Columns