RBAC frontend

spacetimedb/src/reducers.rs

@@ -202,12 +202,16 @@ pub fn delete_server(ctx: &ReducerContext, server_id: u64) {
 
 #[spacetimedb::reducer]
 pub fn edit_message(ctx: &ReducerContext, message_id: u64, new_text: String) {
-    validate_message_length(&ctx.db, &new_text).expect("Message too long");
+    if let Err(e) = validate_message_length(&ctx.db, &new_text) {
+        return report_error(&ctx.db, ctx.sender(), "edit_message", &e, ctx.timestamp);
+    }
     if let Some(mut msg) = ctx.db.message().id().find(message_id) {
         if msg.sender == ctx.sender() {
             msg.text = new_text;
             msg.edited = true;
-            ctx.db.message().id().update(msg);
+            let msg = ctx.db.message().id().update(msg);
+            sync_recent_message(&ctx.db, msg);
+            report_success(&ctx.db, ctx.sender(), "edit_message", ctx.timestamp);
         }
     }
 }
@@ -220,6 +224,11 @@ pub fn delete_message(ctx: &ReducerContext, message_id: u64) {
         
         if is_owner || can_moderate {
             ctx.db.message().id().delete(message_id);
+            // We should also delete from recent_message if it's there
+            if let Some(recent) = ctx.db.recent_message().id().find(message_id) {
+                ctx.db.recent_message().id().delete(recent.id);
+            }
+            report_success(&ctx.db, ctx.sender(), "delete_message", ctx.timestamp);
         }
     }
 }
@@ -272,17 +281,22 @@ pub fn toggle_reaction(
                 custom_emoji_id,
             });
         }
-        ctx.db.message().id().update(msg);
+        let msg = ctx.db.message().id().update(msg);
+        sync_recent_message(&ctx.db, msg);
+        report_success(&ctx.db, ctx.sender(), "toggle_reaction", ctx.timestamp);
     }
 }
 
 #[spacetimedb::reducer]
 pub fn set_name(ctx: &ReducerContext, name: String) {
-    validate_name(&name).expect("Invalid name");
+    if let Err(e) = validate_name(&name) {
+        return report_error(&ctx.db, ctx.sender(), "update_profile", &e, ctx.timestamp);
+    }
     if let Some(mut user) = ctx.db.user().identity().find(ctx.sender()) {
         user.name = Some(name);
         ctx.db.user().identity().update(user);
         sync_server_member_info(&ctx.db, ctx.sender());
+        report_success(&ctx.db, ctx.sender(), "update_profile", ctx.timestamp);
     }
 }
 
@@ -292,6 +306,7 @@ pub fn set_avatar(ctx: &ReducerContext, avatar_id: Option<u64>) {
         user.avatar_id = avatar_id;
         ctx.db.user().identity().update(user);
         sync_server_member_info(&ctx.db, ctx.sender());
+        report_success(&ctx.db, ctx.sender(), "update_profile", ctx.timestamp);
     }
 }
 
@@ -300,6 +315,7 @@ pub fn update_public_key(ctx: &ReducerContext, public_key: Option<String>) {
     if let Some(mut user) = ctx.db.user().identity().find(ctx.sender()) {
         user.public_key = public_key;
         ctx.db.user().identity().update(user);
+        report_success(&ctx.db, ctx.sender(), "update_keys", ctx.timestamp);
     }
 }
 

src/chat/components/ServerSettingsPanel.svelte

@@ -6,6 +6,7 @@
   import Button from "./ui/Button.svelte";
   import Input from "./ui/Input.svelte";
   import Switch from "./ui/Switch.svelte";
+  import MemberPermissionsSettings from "./settings/MemberPermissionsSettings.svelte";
 
   let { onClose } = $props<{ onClose: () => void }>();
 
@@ -88,9 +89,15 @@
     }
   };
 
-  const categories = [
-    { id: "overview", name: "Overview", icon: "fas fa-info-circle" },
-  ];
+  const canManageRoles = $derived(chat.can(Permissions.MANAGE_ROLES));
+
+  const categories = $derived.by(() => {
+    const list = [{ id: "overview", name: "Overview", icon: "fas fa-info-circle" }];
+    if (canManageRoles || canManageServer) {
+        list.push({ id: "members", name: "Members", icon: "fas fa-users" });
+    }
+    return list;
+  });
 
   const handleOverlayClick = (e: MouseEvent) => {
     if (e.target === e.currentTarget) {
@@ -229,6 +236,10 @@
               {/if}
             </div>
           {/if}
+
+          {#if activeCategory === "members"}
+            <MemberPermissionsSettings />
+          {/if}
         </div>
       </div>
 

src/chat/components/settings/MemberPermissionsSettings.svelte

@@ -0,0 +1,355 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+  import type { ChatService } from "../../services/chat.svelte";
+  import { Permissions } from "../../services/chat.svelte";
+  import Avatar from "../Avatar.svelte";
+  import Input from "../ui/Input.svelte";
+
+  const chat = getContext<ChatService>("chat");
+
+  const server = $derived(chat.activeServer);
+  const members = $derived(chat.serverMembers.filter(m => m.serverId === server?.id));
+  const permissions = $derived(chat.allServerPermissions.filter(p => p.serverId === server?.id));
+
+  const canManageRoles = $derived(chat.can(Permissions.MANAGE_ROLES));
+
+  let searchTerm = $state("");
+  let selectedMemberId = $state<string | null>(null);
+
+  const filteredMembers = $derived(
+    members.filter(m =>
+        m.name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        m.identity.toHexString().toLowerCase().includes(searchTerm.toLowerCase())
+    )
+  );
+
+  const selectedMember = $derived(members.find(m => m.identity.toHexString() === selectedMemberId));
+
+  const permissionList = [
+    { bit: Permissions.MANAGE_SERVER, name: "Manage Server", desc: "Rename server, change avatar, toggle public status." },
+    { bit: Permissions.MANAGE_ROLES, name: "Manage Roles", desc: "Assign or revoke permissions for other members." },
+    { bit: Permissions.MANAGE_CHANNELS, name: "Manage Channels", desc: "Create, delete, or rename channels." },
+    { bit: Permissions.CREATE_INVITES, name: "Create Invites", desc: "Generate new invite codes for the server." },
+    { bit: Permissions.KICK_MEMBERS, name: "Kick Members", desc: "Remove members from the server." },
+    { bit: Permissions.BAN_MEMBERS, name: "Ban Members", desc: "Permanently block members from joining." },
+    { bit: Permissions.MODERATE_MESSAGES, name: "Moderate Messages", desc: "Delete messages sent by other users." },
+    { bit: Permissions.USE_VOICE, name: "Use Voice", desc: "Ability to speak in voice channels." },
+    { bit: Permissions.SHARE_SCREEN, name: "Share Screen", desc: "Ability to stream video or share screen." },
+    { bit: Permissions.USE_THREADS, name: "Use Threads", desc: "Ability to start new threaded conversations." },
+    { bit: Permissions.MANAGE_EMOJIS, name: "Manage Emojis", desc: "Upload or delete server custom emojis." },
+    { bit: Permissions.DELETE_SERVER, name: "Delete Server", desc: "Permanently destroy the server (Nuclear)." },
+  ];
+
+  function getMemberPermissions(identity: any): bigint {
+    const p = permissions.find(p => p.identity.isEqual(identity));
+    return p?.permissions || 0n;
+  }
+
+  function togglePermission(identity: any, bit: bigint) {
+    if (!canManageRoles || !server) return;
+
+    const current = getMemberPermissions(identity);
+    const updated = (current & bit) ? (current & ~bit) : (current | bit);
+
+    chat.handleSetMemberPermissions(server.id, identity, updated);
+  }
+</script>
+
+<div class="members-layout">
+  <!-- Left Column: Search & List -->
+  <div class="members-sidebar">
+    <div class="search-container">
+      <Input
+        id="member-search"
+        placeholder="Search members..."
+        bind:value={searchTerm}
+        size="small"
+      />
+    </div>
+
+    <div class="members-list">
+      {#each filteredMembers as member (member.identity.toHexString())}
+        <button
+          class="member-item"
+          class:active={selectedMemberId === member.identity.toHexString()}
+          onclick={() => selectedMemberId = member.identity.toHexString()}
+        >
+          <Avatar user={chat.usersById.get(member.identity.toHexString())} size="tiny" />
+          <span class="member-name">{member.name || "Unknown"}</span>
+        </button>
+      {/each}
+
+      {#if filteredMembers.length === 0}
+        <div class="empty-results">No members found.</div>
+      {/if}
+    </div>
+  </div>
+
+  <!-- Right Column: Detail Editor -->
+  <div class="member-editor">
+    {#if selectedMember}
+      {@const isMe = chat.identity?.isEqual(selectedMember.identity)}
+      {@const memberPerms = getMemberPermissions(selectedMember.identity)}
+
+      <div class="editor-header">
+        <Avatar user={chat.usersById.get(selectedMember.identity.toHexString())} size="large" />
+        <div class="editor-title">
+          <h2>{selectedMember.name || "Unknown"}</h2>
+          <span class="identity-hex">{selectedMember.identity.toHexString()}</span>
+        </div>
+        {#if isMe}
+            <span class="self-badge">YOU</span>
+        {/if}
+      </div>
+
+      {#if !canManageRoles}
+        <div class="permission-warning">
+          <i class="fas fa-lock"></i>
+          <span>Read-only: You lack 'Manage Roles' permissions.</span>
+        </div>
+      {/if}
+
+      <div class="permissions-matrix">
+        {#each permissionList as p}
+          {@const hasBit = (memberPerms & p.bit) !== 0n}
+          {@const isRoleLock = isMe && p.bit === Permissions.MANAGE_ROLES}
+
+          <div class="matrix-item" class:active={hasBit}>
+            <div class="matrix-info">
+              <span class="perm-label">{p.name}</span>
+              <span class="perm-desc">{p.desc}</span>
+            </div>
+            <button
+              class="toggle-switch"
+              class:on={hasBit}
+              class:disabled={!canManageRoles || isRoleLock}
+              disabled={!canManageRoles || isRoleLock}
+              onclick={() => togglePermission(selectedMember.identity, p.bit)}
+              aria-label="Toggle {p.name}"
+            >
+              <div class="switch-knob"></div>
+            </button>
+          </div>
+        {/each}
+      </div>
+    {:else}
+      <div class="empty-editor-state">
+        <i class="fas fa-user-shield"></i>
+        <p>Select a member from the list to manage their permissions.</p>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .members-layout {
+    display: flex;
+    gap: 1px;
+    height: 100%;
+    background-color: var(--background-modifier-accent);
+    border-radius: 8px;
+    overflow: hidden;
+    margin-top: 10px;
+    border: 1px solid var(--background-modifier-accent);
+  }
+
+  /* Sidebar */
+  .members-sidebar {
+    width: 260px;
+    background-color: var(--background-secondary);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+
+  .search-container {
+    padding: 16px;
+    border-bottom: 1px solid var(--background-modifier-accent);
+  }
+
+  .members-list {
+    flex: 1;
+    overflow-y: auto;
+    padding: 8px;
+  }
+
+  .member-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 8px 12px;
+    background: none;
+    border: none;
+    border-radius: 4px;
+    color: var(--channels-default);
+    cursor: pointer;
+    transition: all 0.1s;
+    text-align: left;
+  }
+
+  .member-item:hover {
+    background-color: var(--background-modifier-hover);
+    color: var(--interactive-hover);
+  }
+
+  .member-item.active {
+    background-color: var(--background-modifier-selected);
+    color: white;
+  }
+
+  .member-name {
+    font-weight: 500;
+    font-size: 0.95rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* Editor Pane */
+  .member-editor {
+    flex: 1;
+    background-color: var(--background-primary);
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    padding: 32px;
+    overflow-y: auto;
+  }
+
+  .editor-header {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    margin-bottom: 32px;
+  }
+
+  .editor-title h2 {
+    margin: 0;
+    color: var(--header-primary);
+  }
+
+  .identity-hex {
+    font-family: var(--font-code);
+    font-size: 0.75rem;
+    color: var(--text-muted);
+    word-break: break-all;
+  }
+
+  .self-badge {
+    background-color: var(--brand);
+    color: white;
+    font-size: 0.7rem;
+    padding: 2px 8px;
+    border-radius: 10px;
+    font-weight: 800;
+  }
+
+  .permissions-matrix {
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+    background-color: var(--background-modifier-accent);
+  }
+
+  .matrix-item {
+    background-color: var(--background-primary);
+    padding: 16px 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid var(--background-modifier-accent);
+  }
+
+  .matrix-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .perm-label {
+    color: var(--header-primary);
+    font-weight: 600;
+    font-size: 1rem;
+  }
+
+  .perm-desc {
+    color: var(--text-muted);
+    font-size: 0.85rem;
+    line-height: 1.3;
+    max-width: 400px;
+  }
+
+  /* Custom Toggle Switch */
+  .toggle-switch {
+    width: 40px;
+    height: 24px;
+    background-color: var(--background-accent);
+    border-radius: 12px;
+    position: relative;
+    cursor: pointer;
+    border: none;
+    transition: background-color 0.2s;
+    flex-shrink: 0;
+  }
+
+  .toggle-switch.on {
+    background-color: var(--status-positive);
+  }
+
+  .toggle-switch.disabled {
+    opacity: 0.3;
+    cursor: not-allowed;
+  }
+
+  .switch-knob {
+    width: 18px;
+    height: 18px;
+    background-color: white;
+    border-radius: 50%;
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    transition: transform 0.2s;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  }
+
+  .on .switch-knob {
+    transform: translateX(16px);
+  }
+
+  .empty-editor-state {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--text-muted);
+    text-align: center;
+    gap: 16px;
+  }
+
+  .empty-editor-state i {
+    font-size: 4rem;
+    opacity: 0.1;
+  }
+
+  .empty-results {
+    padding: 20px;
+    text-align: center;
+    color: var(--text-muted);
+    font-style: italic;
+  }
+
+  .permission-warning {
+    background-color: var(--background-accent);
+    padding: 12px;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 24px;
+    color: var(--text-muted);
+    font-size: 0.85rem;
+  }
+</style>

src/chat/services/chat.svelte.ts

@@ -809,6 +809,9 @@ export class ChatService {
   get directMessages() {
     return this.#db.directMessages;
   }
+  get allServerPermissions() {
+    return this.#db.serverPermissions;
+  }
   get reducerStatus() {
     const myId = this.identity;
     if (!myId) return null;
@@ -819,6 +822,10 @@ export class ChatService {
     this.#server.handleDeleteServer(serverId);
   };
 
+  handleSetMemberPermissions = (serverId: bigint, identity: Identity, permissions: bigint) => {
+    this.#server.handleSetMemberPermissions(serverId, identity, permissions);
+  };
+
   handleOpenDirectMessage = (recipient: Identity) => {
     this.#dm.handleOpenDirectMessage(recipient);
     this.activeServerId = null;

src/chat/services/server-management.svelte.ts

@@ -11,6 +11,7 @@ export class ServerManagementService {
   #setServerPublicReducer = useReducer(reducers.setServerPublic);
   #deleteServerReducer = useReducer(reducers.deleteServer);
   #createInviteReducer = useReducer(reducers.createInvite);
+  #setMemberPermissionsReducer = useReducer(reducers.setMemberPermissions);
 
   handleCreateServer = (name: string) => {
     if (name.trim()) {
@@ -57,4 +58,8 @@ export class ServerManagementService {
   handleDeleteServer = (serverId: bigint) => {
     this.#deleteServerReducer({ serverId });
   };
+
+  handleSetMemberPermissions = (serverId: bigint, identity: any, permissions: bigint) => {
+    this.#setMemberPermissionsReducer({ serverId, identity, permissions });
+  };
 }