feat(phase2): channel permission overrides + expanded role UI + audit log cleanup

web/src/components/ChannelList.tsx

@@ -4,6 +4,7 @@ import { useChannelStore } from '../stores/channel.ts';
 import { VoiceChannel } from './VoiceChannel.tsx';
 import { CreateChannelModal } from './CreateChannelModal.tsx';
 import { InviteModal } from './InviteModal.tsx';
+import { ChannelSettingsModal } from './ChannelSettingsModal.tsx';
 
 export function ChannelList() {
   const activeServerId = useServerStore((state) => state.activeServerId);
@@ -14,6 +15,7 @@ export function ChannelList() {
   const setActiveChannel = useChannelStore((state) => state.setActiveChannel);
   const [showCreate, setShowCreate] = useState(false);
   const [showInvite, setShowInvite] = useState(false);
+  const [settingsChannel, setSettingsChannel] = useState<{ id: string; name: string } | null>(null);
 
   useEffect(() => {
     if (activeServerId) {
@@ -83,16 +85,26 @@ export function ChannelList() {
                   channelName={channel.name}
                 />
               ) : (
-                <button
-                  key={channel.id}
-                  onClick={() => setActiveChannel(channel.id)}
-                  className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
-                    channel.id === activeChannelId ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
-                  }`}
-                >
-                  <span className="text-gb-fg-f">#</span>
-                  <span className="truncate">{channel.name}</span>
-                </button>
+                <div key={channel.id} className="group">
+                  <button
+                    onClick={() => setActiveChannel(channel.id)}
+                    className={`w-full text-left px-2 py-1 rounded-sm flex items-center gap-2 ${
+                      channel.id === activeChannelId ? 'terminal-active' : 'hover:bg-gb-bg-t text-gb-fg-s'
+                    }`}
+                  >
+                    <span className="text-gb-fg-f">#</span>
+                    <span className="truncate flex-1">{channel.name}</span>
+                    <span
+                      onClick={(e) => { e.stopPropagation(); setSettingsChannel({ id: channel.id, name: channel.name }); }}
+                      className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100"
+                      title="Channel settings"
+                      role="button"
+                      tabIndex={0}
+                    >
+                      [⚙]
+                    </span>
+                  </button>
+                </div>
               )
             )}
           </div>
@@ -104,6 +116,14 @@ export function ChannelList() {
       {showInvite && activeServerId && activeServer && (
         <InviteModal serverId={activeServerId} serverName={activeServer.name} onClose={() => setShowInvite(false)} />
       )}
+      {settingsChannel && activeServerId && (
+        <ChannelSettingsModal
+          serverId={activeServerId}
+          channelId={settingsChannel.id}
+          channelName={settingsChannel.name}
+          onClose={() => setSettingsChannel(null)}
+        />
+      )}
     </div>
   );
 }