fix: client perms, @everyone/@channel, docs, unit tests

- usePermissions ORs current user roles + @everyone only (not all server roles)
- cache myRolesByServer; load on active server; refresh after self role edit
- gate/notify @everyone and @channel; plain @username push; special mention UI
- refresh FEATURE_PARITY (DMs exist; drop stale critical gaps)
- README production deploy notes dumpster.service
- unit tests for permission bits and broadcast mention tokens

web/src/components/ChatArea.tsx

@@ -13,7 +13,8 @@ import Picker, { Theme } from 'emoji-picker-react';
 import { CommandDropdown } from "./CommandDropdown";
 import { findCommand, SLASH_COMMANDS } from "../lib/slashCommands";
 import { PollDisplay, CreatePollModal } from "./Poll.tsx";
-import { MentionDropdown } from "./MentionDropdown";
+import { MentionDropdown, buildMentionOptions } from "./MentionDropdown";
+import { usePermissions } from "../lib/usePermissions.ts";
 import { useReadStatesStore } from "../stores/readStates.ts";
 import { MessageSearch } from "./MessageSearch";
 import { ThreadListPanel } from "./ThreadListPanel.tsx";
@@ -45,7 +46,7 @@ function formatTime(iso: string): string {
 }
 
 function renderContent(content: string, memberUsernames: Set<string>) {
-  const segments: { type: "text" | "mention"; value: string }[] = [];
+  const segments: { type: "text" | "mention"; value: string; special?: boolean }[] = [];
   const mentionRe = /@([a-zA-Z0-9_.-]+)/g;
   let last = 0;
   let match: RegExpExecArray | null;
@@ -54,8 +55,13 @@ function renderContent(content: string, memberUsernames: Set<string>) {
       segments.push({ type: "text", value: content.slice(last, match.index) });
     }
     const username = match[1];
-    if (memberUsernames.has(username)) {
-      segments.push({ type: "mention", value: username });
+    const lower = username.toLowerCase();
+    if (lower === "everyone" || lower === "channel" || lower === "here" || memberUsernames.has(username)) {
+      segments.push({
+        type: "mention",
+        value: username,
+        special: lower === "everyone" || lower === "channel" || lower === "here",
+      });
     } else {
       segments.push({ type: "text", value: match[0] });
     }
@@ -71,7 +77,10 @@ function renderContent(content: string, memberUsernames: Set<string>) {
       const nextSeg = segments[idx + 1];
       const needsSpace = !nextSeg || (nextSeg.type === "text" && !nextSeg.value.startsWith(" "));
       return (
-        <span key={idx} className="text-gb-aqua">
+        <span
+          key={idx}
+          className={seg.special ? "text-gb-orange font-bold bg-gb-orange/15 px-0.5 rounded-sm" : "text-gb-aqua"}
+        >
           @{seg.value}{needsSpace ? " " : ""}
         </span>
       );
@@ -329,6 +338,7 @@ export function ChatArea() {
   // Humans only for mentions / nickname lookup (bots live in member list separately).
   const humanMembers = useMemo(() => members.filter((m) => !m.is_bot), [members]);
   const memberUsernames = useMemo(() => new Set(humanMembers.map((m) => m.username)), [humanMembers]);
+  const { canMentionEveryone } = usePermissions(activeServerId);
   const markRead = useReadStatesStore((s) => s.markRead);
   const readStates = useReadStatesStore((s) => s.states);
 
@@ -555,10 +565,7 @@ export function ChatArea() {
       if (!isDropdownOpen) return;
 
       const itemCount = mq !== null
-        ? humanMembers.filter((m) =>
-            m.username.toLowerCase().includes(mq.toLowerCase()) ||
-            m.display_name?.toLowerCase().includes(mq.toLowerCase())
-          ).slice(0, 6).length
+        ? buildMentionOptions(mq, humanMembers, canMentionEveryone).length
         : cq !== null
           ? SLASH_COMMANDS.filter((c) => c.name.startsWith(cq.toLowerCase())).slice(0, 8).length
           : 0;
@@ -575,13 +582,14 @@ export function ChatArea() {
         e.preventDefault();
         e.stopPropagation();
         if (mq !== null) {
-          const q = mq.toLowerCase();
-          const filtered = humanMembers.filter((m) =>
-            m.username.toLowerCase().includes(q) ||
-            m.display_name?.toLowerCase().includes(q)
-          ).slice(0, 6);
-          if (filtered[di]) {
-            handleMentionSelect(filtered[di].username);
+          const options = buildMentionOptions(mq, humanMembers, canMentionEveryone);
+          const selected = options[di];
+          if (selected) {
+            if (selected.kind === "special") {
+              handleMentionSelect(selected.label);
+            } else {
+              handleMentionSelect(selected.member.username);
+            }
           }
         } else if (cq !== null) {
           const q = cq.toLowerCase();
@@ -620,7 +628,7 @@ export function ChatArea() {
     };
     window.addEventListener('keydown', handler);
     return () => window.removeEventListener('keydown', handler);
-  }, [humanMembers, currentUser, activeChannelId, sendMessage, replyToMessage, handleMentionSelect]);
+  }, [humanMembers, canMentionEveryone, currentUser, activeChannelId, sendMessage, replyToMessage, handleMentionSelect]);
 
   const handleSubmit = useCallback(async () => {
     if (mentionQuery !== null || commandQuery !== null) return;
@@ -904,7 +912,13 @@ export function ChatArea() {
               )}
               <div className="p-3 relative">
                 {mentionQuery !== null && (
-                  <MentionDropdown query={mentionQuery} members={humanMembers} selectedIndex={dropdownIndex} onSelect={handleMentionSelect} />
+                  <MentionDropdown
+                    query={mentionQuery}
+                    members={humanMembers}
+                    selectedIndex={dropdownIndex}
+                    onSelect={handleMentionSelect}
+                    canMentionEveryone={canMentionEveryone}
+                  />
                 )}
                 {commandQuery !== null && (
                   <CommandDropdown

web/src/components/Layout.tsx

@@ -6,6 +6,7 @@ import { useWebSocketStore } from '../stores/ws.ts';
 import { useServerStore } from '../stores/server.ts';
 import { useChannelStore } from '../stores/channel.ts';
 import { useLayoutStore } from '../stores/layout.ts';
+import { useRoleStore } from '../stores/role.ts';
 import { ServerBar } from './ServerBar.tsx';
 import { ChannelList } from './ChannelList.tsx';
 import { ConversationList } from './ConversationList.tsx';
@@ -43,9 +44,18 @@ export function Layout() {
   const setMobileView = useLayoutStore((s) => s.setMobileView);
   const [showServerSettings, setShowServerSettings] = useState(false);
   const activeServerId = useServerStore((s) => s.activeServerId);
+  const fetchRoles = useRoleStore((s) => s.fetchRoles);
+  const fetchMyRoles = useRoleStore((s) => s.fetchMyRoles);
   const currentVoiceRoom = useVoiceStore((s) => s.currentRoom);
   const [activeTab, setActiveTab] = useState<'chat' | 'voice'>('chat');
 
+  // Load server roles + current user's role assignments for accurate client permission gates.
+  useEffect(() => {
+    if (!activeServerId || !user?.id) return;
+    void fetchRoles(activeServerId);
+    void fetchMyRoles(activeServerId, user.id);
+  }, [activeServerId, user?.id, fetchRoles, fetchMyRoles]);
+
   useEffect(() => {
     if (currentVoiceRoom) setActiveTab('voice');
     else setActiveTab('chat');

web/src/components/MemberRoleAssign.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useRoleStore, type Role } from '../stores/role.ts';
-import type { User } from '../stores/auth.ts';
+import { useAuthStore, type User } from '../stores/auth.ts';
 import { usePermissions } from '../lib/usePermissions.ts';
 
 interface MemberRoleAssignProps {
@@ -12,8 +12,10 @@ interface MemberRoleAssignProps {
 export function MemberRoleAssign({ serverId, member }: MemberRoleAssignProps) {
   const roles = useRoleStore((s) => s.roles);
   const fetchRoles = useRoleStore((s) => s.fetchRoles);
+  const fetchMyRoles = useRoleStore((s) => s.fetchMyRoles);
   const setMemberRoles = useRoleStore((s) => s.setMemberRoles);
   const getMemberRoles = useRoleStore((s) => s.getMemberRoles);
+  const currentUserId = useAuthStore((s) => s.user?.id);
 
   const { isOwner, canManageRoles } = usePermissions(serverId);
   const canEdit = isOwner || canManageRoles;
@@ -56,6 +58,9 @@ export function MemberRoleAssign({ serverId, member }: MemberRoleAssignProps) {
     try {
       await setMemberRoles(serverId, member.id, Array.from(selectedIds));
       setMemberRolesState(roles.filter((r) => selectedIds.has(r.id)));
+      if (currentUserId && member.id === currentUserId) {
+        await fetchMyRoles(serverId, currentUserId);
+      }
       setOpen(false);
     } catch {
       // error in store

web/src/components/MentionDropdown.tsx

@@ -1,52 +1,112 @@
 import type { Member } from "../stores/member.ts";
 
+export type MentionOption =
+  | { kind: "special"; id: string; label: string; description: string }
+  | { kind: "user"; member: Member };
+
 interface MentionDropdownProps {
   query: string;
   members: Member[];
   selectedIndex: number;
   onSelect: (username: string) => void;
+  canMentionEveryone?: boolean;
 }
 
-export function MentionDropdown({ query, members, selectedIndex, onSelect }: MentionDropdownProps) {
+const SPECIALS: { id: string; label: string; description: string }[] = [
+  { id: "everyone", label: "everyone", description: "Notify the entire server" },
+  { id: "channel", label: "channel", description: "Notify everyone in this channel" },
+];
+
+export function buildMentionOptions(
+  query: string,
+  members: Member[],
+  canMentionEveryone: boolean,
+): MentionOption[] {
   const q = query.toLowerCase();
-  const filtered = members
+  const options: MentionOption[] = [];
+
+  if (canMentionEveryone) {
+    for (const s of SPECIALS) {
+      if (!q || s.id.startsWith(q) || s.label.startsWith(q)) {
+        options.push({ kind: "special", id: s.id, label: s.label, description: s.description });
+      }
+    }
+  }
+
+  const users = members
     .filter(
       (m) =>
         m.username.toLowerCase().includes(q) ||
         m.display_name?.toLowerCase().includes(q),
     )
-    .slice(0, 6);
+    .slice(0, 6)
+    .map((m): MentionOption => ({ kind: "user", member: m }));
 
-  if (filtered.length === 0) return null;
+  return [...options, ...users].slice(0, 8);
+}
+
+export function MentionDropdown({
+  query,
+  members,
+  selectedIndex,
+  onSelect,
+  canMentionEveryone = false,
+}: MentionDropdownProps) {
+  const options = buildMentionOptions(query, members, canMentionEveryone);
+
+  if (options.length === 0) return null;
 
   return (
-    <div className="absolute bottom-full left-0 mb-1 z-50 w-64 max-h-48 overflow-y-auto bg-gb-bg-s border border-gb-bg-t shadow-lg">
+    <div className="absolute bottom-full left-0 mb-1 z-50 w-72 max-h-48 overflow-y-auto bg-gb-bg-s border border-gb-bg-t shadow-lg">
       <div className="px-2 py-1 text-xs text-gb-fg-s font-mono border-b border-gb-bg-t">
         MENTION
       </div>
-      {filtered.map((m, i) => (
-        <button
-          key={m.id}
-          type="button"
-          onMouseDown={(e) => {
-            e.preventDefault();
-            onSelect(m.username);
-          }}
-          className={`w-full px-2 py-1 text-left text-sm font-mono flex items-center gap-2 transition-colors ${
-            i === selectedIndex
-              ? "bg-gb-orange text-gb-bg"
-              : "hover:bg-gb-orange hover:text-gb-bg"
-          }`}
-        >
-          <span className={i === selectedIndex ? "text-gb-bg" : "text-gb-green"}>●</span>
-          <span className="truncate">{m.display_name || m.username}</span>
-          {m.display_name && m.display_name !== m.username && (
-            <span className={`text-xs ${i === selectedIndex ? "text-gb-bg" : "text-gb-fg-f"}`}>
-              ({m.username})
-            </span>
-          )}
-        </button>
-      ))}
+      {options.map((opt, i) => {
+        const active = i === selectedIndex;
+        if (opt.kind === "special") {
+          return (
+            <button
+              key={opt.id}
+              type="button"
+              onMouseDown={(e) => {
+                e.preventDefault();
+                onSelect(opt.label);
+              }}
+              className={`w-full px-2 py-1.5 text-left text-sm font-mono flex items-center gap-2 transition-colors ${
+                active ? "bg-gb-orange text-gb-bg" : "hover:bg-gb-orange hover:text-gb-bg"
+              }`}
+            >
+              <span className={active ? "text-gb-bg" : "text-gb-orange"}>@</span>
+              <span className="font-bold">{opt.label}</span>
+              <span className={`text-xs truncate ${active ? "text-gb-bg" : "text-gb-fg-f"}`}>
+                {opt.description}
+              </span>
+            </button>
+          );
+        }
+        const m = opt.member;
+        return (
+          <button
+            key={m.id}
+            type="button"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              onSelect(m.username);
+            }}
+            className={`w-full px-2 py-1 text-left text-sm font-mono flex items-center gap-2 transition-colors ${
+              active ? "bg-gb-orange text-gb-bg" : "hover:bg-gb-orange hover:text-gb-bg"
+            }`}
+          >
+            <span className={active ? "text-gb-bg" : "text-gb-green"}>●</span>
+            <span className="truncate">{m.display_name || m.username}</span>
+            {m.display_name && m.display_name !== m.username && (
+              <span className={`text-xs ${active ? "text-gb-bg" : "text-gb-fg-f"}`}>
+                ({m.username})
+              </span>
+            )}
+          </button>
+        );
+      })}
     </div>
   );
 }