refactor: purge legacy server_members.role column, single source of truth via member_roles
Remove the legacy TEXT role column ('owner'/'admin'/'member') from
server_members and make the bitwise RBAC member_roles junction table
the sole authority for role assignments. Owner detection now uses
servers.ownerId exclusively.
- Remove MemberRole type and role field from shared types
- Remove role from Drizzle schema, raw SQL CREATE TABLE, and seed data
- Rewrite PATCH /members/:uid to accept { roleIds: string[] }
- Fix GET /members to populate roles array (was TODO)
- Replace member.role === 'owner' guard with isServerOwner()
- Remove getMemberRole() helper and legacy bridge code
- MemberSidebar groups by highest-positioned role instead of legacy string
- ServerSettings replaces admin/member dropdown with role checkboxes
- Message.tsx derives color from roles[] with owner fallback via ownerId
- Existing DBs keep vestigial column (Drizzle ignores it); new DBs omit it
This commit is contained in:
Jannis Braun
@@ -6,7 +6,6 @@ import { useAuthStore } from '../../stores/authStore';
|
||||
import { Avatar } from '../ui/Avatar';
|
||||
import { api } from '../../api/client';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import type { MemberRole } from '@opencord/shared';
|
||||
import { hasPermissionBit, PermissionBits } from '../../utils/permissions';
|
||||
|
||||
export function ServerSettingsModal() {
|
||||
@@ -15,6 +14,7 @@ export function ServerSettingsModal() {
|
||||
const currentServerId = useServerStore((s) => s.currentServerId);
|
||||
const servers = useServerStore((s) => s.servers);
|
||||
const members = useServerStore((s) => s.members);
|
||||
const roles = useServerStore((s) => s.roles);
|
||||
const updateServer = useServerStore((s) => s.updateServer);
|
||||
const deleteServer = useServerStore((s) => s.deleteServer);
|
||||
const loadServerDetail = useServerStore((s) => s.loadServerDetail);
|
||||
@@ -26,6 +26,7 @@ export function ServerSettingsModal() {
|
||||
const [error, setError] = useState('');
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [confirmDelete, setConfirmDelete] = useState(false);
|
||||
const [pendingRoleChanges, setPendingRoleChanges] = useState<Map<string, Set<string>>>(new Map());
|
||||
|
||||
const serverPermissions = useServerStore((s) => s.serverPermissions);
|
||||
|
||||
@@ -34,6 +35,10 @@ export function ServerSettingsModal() {
|
||||
const isOwnerUser = server?.ownerId === currentUser?.id;
|
||||
const myServerPerms = currentServerId ? serverPermissions.get(currentServerId) : undefined;
|
||||
const canManageServer = hasPermissionBit(myServerPerms, PermissionBits.MANAGE_SERVER);
|
||||
const canManageRoles = hasPermissionBit(myServerPerms, PermissionBits.MANAGE_ROLES);
|
||||
|
||||
// Assignable roles: exclude @everyone (where role.id === serverId)
|
||||
const assignableRoles = roles.filter(r => r.id !== currentServerId);
|
||||
|
||||
React.useEffect(() => {
|
||||
if (server) {
|
||||
@@ -69,15 +74,48 @@ export function ServerSettingsModal() {
|
||||
}
|
||||
};
|
||||
|
||||
const handleRoleChange = async (userId: string, role: MemberRole) => {
|
||||
const getMemberRoleIds = (member: typeof members[number]): Set<string> => {
|
||||
// Check for pending (unsaved) changes first
|
||||
const pending = pendingRoleChanges.get(member.userId);
|
||||
if (pending) return pending;
|
||||
return new Set(member.roles?.map(r => r.id) ?? []);
|
||||
};
|
||||
|
||||
const handleRoleToggle = (userId: string, roleId: string, currentRoleIds: Set<string>) => {
|
||||
const updated = new Set(currentRoleIds);
|
||||
if (updated.has(roleId)) {
|
||||
updated.delete(roleId);
|
||||
} else {
|
||||
updated.add(roleId);
|
||||
}
|
||||
setPendingRoleChanges(prev => new Map(prev).set(userId, updated));
|
||||
};
|
||||
|
||||
const handleSaveRoles = async (userId: string) => {
|
||||
const roleIds = pendingRoleChanges.get(userId);
|
||||
if (!roleIds) return;
|
||||
|
||||
try {
|
||||
await api.servers.updateMember(currentServerId, userId, { role });
|
||||
await api.servers.updateMember(currentServerId, userId, { roleIds: Array.from(roleIds) });
|
||||
setPendingRoleChanges(prev => {
|
||||
const next = new Map(prev);
|
||||
next.delete(userId);
|
||||
return next;
|
||||
});
|
||||
await loadServerDetail(currentServerId);
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err.message : 'Failed to update role');
|
||||
setError(err instanceof Error ? err.message : 'Failed to update roles');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancelRoleChange = (userId: string) => {
|
||||
setPendingRoleChanges(prev => {
|
||||
const next = new Map(prev);
|
||||
next.delete(userId);
|
||||
return next;
|
||||
});
|
||||
};
|
||||
|
||||
const handleKick = async (userId: string) => {
|
||||
try {
|
||||
await api.servers.removeMember(currentServerId, userId);
|
||||
@@ -159,37 +197,91 @@ export function ServerSettingsModal() {
|
||||
<div className="space-y-2 max-h-[400px] overflow-y-auto scrollbar-thin">
|
||||
{members.map((member) => {
|
||||
const displayName = member.user.displayName ?? member.user.username;
|
||||
const isOwner = member.userId === server.ownerId;
|
||||
const memberRoleIds = getMemberRoleIds(member);
|
||||
const hasPendingChanges = pendingRoleChanges.has(member.userId);
|
||||
|
||||
return (
|
||||
<div key={member.userId} className="flex items-center justify-between p-2 rounded hover:bg-discord-bg-hover">
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar
|
||||
src={member.user.avatar}
|
||||
name={displayName}
|
||||
size={32}
|
||||
status={member.user.status}
|
||||
/>
|
||||
<div>
|
||||
<div className="text-sm font-medium">{displayName}</div>
|
||||
<div className="text-xs text-discord-text-muted capitalize">{member.role}</div>
|
||||
<div key={member.userId} className="p-2 rounded hover:bg-discord-bg-hover">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Avatar
|
||||
src={member.user.avatar}
|
||||
name={displayName}
|
||||
size={32}
|
||||
status={member.user.status}
|
||||
/>
|
||||
<div>
|
||||
<div className="text-sm font-medium">{displayName}</div>
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
{isOwner && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded bg-discord-red/20 text-discord-red font-medium">
|
||||
Owner
|
||||
</span>
|
||||
)}
|
||||
{member.roles?.filter(r => r.id !== currentServerId).map(r => (
|
||||
<span
|
||||
key={r.id}
|
||||
className="text-[10px] px-1.5 py-0.5 rounded font-medium"
|
||||
style={{ backgroundColor: `${r.color}20`, color: r.color }}
|
||||
>
|
||||
{r.name}
|
||||
</span>
|
||||
))}
|
||||
{!isOwner && (!member.roles || member.roles.filter(r => r.id !== currentServerId).length === 0) && (
|
||||
<span className="text-[10px] text-discord-text-muted">No roles</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{canManageRoles && member.userId !== currentUser?.id && !isOwner && (
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => handleKick(member.userId)}
|
||||
className="px-2 py-1 text-xs text-discord-red hover:bg-discord-red/10 rounded transition-colors"
|
||||
>
|
||||
Kick
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{isOwnerUser && member.userId !== currentUser?.id && (
|
||||
<div className="flex items-center gap-2">
|
||||
<select
|
||||
value={member.role}
|
||||
onChange={(e) => handleRoleChange(member.userId, e.target.value as MemberRole)}
|
||||
className="px-2 py-1 bg-discord-bg-tertiary rounded text-xs text-discord-text-secondary outline-none"
|
||||
>
|
||||
<option value="member">Member</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => handleKick(member.userId)}
|
||||
className="px-2 py-1 text-xs text-discord-red hover:bg-discord-red/10 rounded transition-colors"
|
||||
>
|
||||
Kick
|
||||
</button>
|
||||
{/* Role checkboxes — shown for non-self, non-owner members when user can manage roles */}
|
||||
{canManageRoles && member.userId !== currentUser?.id && !isOwner && assignableRoles.length > 0 && (
|
||||
<div className="mt-2 ml-10 space-y-1">
|
||||
{assignableRoles.map(role => (
|
||||
<label key={role.id} className="flex items-center gap-2 cursor-pointer group/role">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={memberRoleIds.has(role.id)}
|
||||
onChange={() => handleRoleToggle(member.userId, role.id, memberRoleIds)}
|
||||
className="w-3.5 h-3.5 rounded border-discord-text-muted accent-discord-blurple"
|
||||
/>
|
||||
<span
|
||||
className="text-xs font-medium"
|
||||
style={{ color: role.color !== '#b9bbbe' ? role.color : undefined }}
|
||||
>
|
||||
{role.name}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
{hasPendingChanges && (
|
||||
<div className="flex items-center gap-2 mt-1.5">
|
||||
<button
|
||||
onClick={() => handleSaveRoles(member.userId)}
|
||||
className="px-2 py-0.5 text-xs bg-discord-blurple hover:bg-discord-blurple-hover text-white rounded transition-colors"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleCancelRoleChange(member.userId)}
|
||||
className="px-2 py-0.5 text-xs text-discord-text-muted hover:text-discord-text-secondary transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user