feat(frontend): channel sidebar toggle, member list default closed, fix accent-fg colors

src/app/project/room.tsx

@@ -29,6 +29,7 @@ function ProjectRoomInner() {
     members,
   } = useRoom();
 
+  const [showChannelSidebar, setShowChannelSidebar] = useState(true);
   const [createDialogOpen, setCreateDialogOpen] = useState(false);
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
@@ -119,6 +120,7 @@ function ProjectRoomInner() {
   return (
     <div className="discord-layout">
       {/* Channel sidebar */}
+      {showChannelSidebar && (
         <DiscordChannelSidebar
           projectName={projectName}
           rooms={rooms}
@@ -129,6 +131,7 @@ function ProjectRoomInner() {
           onCreateCategory={handleCreateCategory}
           onMoveRoomToCategory={handleMoveRoomToCategory}
         />
+      )}
 
       {/* Main chat area */}
       {activeRoom ? (
@@ -136,6 +139,8 @@ function ProjectRoomInner() {
           room={activeRoom}
           isAdmin={isAdmin}
           onClose={handleClose}
+          onToggleChannelSidebar={() => setShowChannelSidebar((v) => !v)}
+          channelSidebarOpen={showChannelSidebar}
           onDelete={() => setDeleteDialogOpen(true)}
         />
       ) : (

src/components/room/DiscordChatPanel.tsx

@@ -10,7 +10,7 @@ import type { MessageWithMeta } from '@/contexts';
 import { cn } from '@/lib/utils';
 import {
   Hash, Lock, Users, Search, ChevronLeft,
-  AtSign, Pin, Settings,
+  AtSign, Pin, Settings, PanelLeft,
 } from 'lucide-react';
 import {
   useCallback,
@@ -38,9 +38,11 @@ interface DiscordChatPanelProps {
   isAdmin: boolean;
   onClose: () => void;
   onDelete: () => void;
+  onToggleChannelSidebar: () => void;
+  channelSidebarOpen: boolean;
 }
 
-export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordChatPanelProps) {
+export function DiscordChatPanel({ room, isAdmin, onClose, onDelete, onToggleChannelSidebar, channelSidebarOpen }: DiscordChatPanelProps) {
   const {
     messages,
     members,
@@ -67,7 +69,7 @@ export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordCh
   const [selectedMessageForHistory, setSelectedMessageForHistory] = useState<string>('');
   const [showSettings, setShowSettings] = useState(false);
   const [showMentions, setShowMentions] = useState(false);
-  const [showMemberList, setShowMemberList] = useState(true);
+  const [showMemberList, setShowMemberList] = useState(false);
   const [showSearch, setShowSearch] = useState(false);
   const [activeThread, setActiveThread] = useState<{ thread: RoomThreadResponse; parentMessage: MessageWithMeta } | null>(null);
   const [isUpdatingRoom, setIsUpdatingRoom] = useState(false);
@@ -79,7 +81,8 @@ export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordCh
 
   const handleSend = useCallback(
     (content: string) => {
-      sendMessage(content, 'text', replyingTo?.id ?? undefined);
+      const attachmentIds = messageInputRef.current?.getAttachmentIds() ?? [];
+      sendMessage(content, 'text', replyingTo?.id ?? undefined, attachmentIds.length > 0 ? attachmentIds : undefined);
       setReplyingTo(null);
       messageInputRef.current?.clearContent();
     },
@@ -260,6 +263,18 @@ export function DiscordChatPanel({ room, isAdmin, onClose, onDelete }: DiscordCh
             </button>
           )}
 
+          <button
+            className="flex h-8 w-8 items-center justify-center rounded-md transition-colors"
+            style={{
+              color: channelSidebarOpen ? 'var(--room-accent)' : 'var(--room-text-muted)',
+              background: channelSidebarOpen ? 'var(--room-channel-active)' : 'transparent',
+            }}
+            onClick={onToggleChannelSidebar}
+            title={channelSidebarOpen ? 'Hide channels' : 'Show channels'}
+          >
+            <PanelLeft className="h-4 w-4" />
+          </button>
+
           <Button
             variant="ghost"
             size="sm"

src/components/room/RoomSettingsPanel.tsx

@@ -204,7 +204,7 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
             onClick={handleSave}
             disabled={!name.trim() || isPending}
             className="w-full border-none"
-            style={{ background: 'var(--room-accent)', color: '#fff' }}
+            style={{ background: 'var(--room-accent)', color: 'var(--accent-fg)' }}
           >
             {isPending ? (
               <Loader2 className="mr-2 h-4 w-4 animate-spin" />
@@ -264,7 +264,7 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
                     {config.think && (
                       <span
                         className="rounded px-1 py-0.5 text-[10px] shrink-0"
-                        style={{ background: 'rgba(59,130,246,0.1)', color: 'var(--room-accent)' }}
+                        style={{ background: 'var(--accent-subtle)', color: 'var(--room-accent)' }}
                       >
                         think
                       </span>
@@ -439,7 +439,7 @@ export const RoomSettingsPanel = memo(function RoomSettingsPanel({
             <Button
               onClick={handleAddAi}
               disabled={!selectedModelId || isAddingAi}
-              style={{ background: 'var(--room-accent)', color: '#fff', border: 'none' }}
+              style={{ background: 'var(--room-accent)', color: 'var(--accent-fg)', border: 'none' }}
             >
               {isAddingAi ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
               Add Model