From 43e2d26ea2d7237b0da436d0dfada7e65f748dcc Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Mon, 20 Apr 2026 19:33:14 +0800
Subject: [PATCH] feat(frontend): channel sidebar toggle, member list default
 closed, fix accent-fg colors

---
 src/app/project/room.tsx                  | 25 ++++++++++++++---------
 src/components/room/DiscordChatPanel.tsx  | 23 +++++++++++++++++----
 src/components/room/RoomSettingsPanel.tsx |  6 +++---
 3 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/src/app/project/room.tsx b/src/app/project/room.tsx
index 0738927..9861665 100644
--- a/src/app/project/room.tsx
+++ b/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,16 +120,18 @@ function ProjectRoomInner() {
   return (
     <div className="discord-layout">
       {/* Channel sidebar */}
-      <DiscordChannelSidebar
-        projectName={projectName}
-        rooms={rooms}
-        selectedRoomId={activeRoomId}
-        onSelectRoom={handleSelectRoom}
-        onCreateRoom={handleOpenCreate}
-        categories={categories.map((c) => ({ id: c.id, name: c.name }))}
-        onCreateCategory={handleCreateCategory}
-        onMoveRoomToCategory={handleMoveRoomToCategory}
-      />
+      {showChannelSidebar && (
+        <DiscordChannelSidebar
+          projectName={projectName}
+          rooms={rooms}
+          selectedRoomId={activeRoomId}
+          onSelectRoom={handleSelectRoom}
+          onCreateRoom={handleOpenCreate}
+          categories={categories.map((c) => ({ id: c.id, name: c.name }))}
+          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)}
         />
       ) : (
diff --git a/src/components/room/DiscordChatPanel.tsx b/src/components/room/DiscordChatPanel.tsx
index ffd11b9..2ce286f 100644
--- a/src/components/room/DiscordChatPanel.tsx
+++ b/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"
diff --git a/src/components/room/RoomSettingsPanel.tsx b/src/components/room/RoomSettingsPanel.tsx
index e5af24e..3c3d47e 100644
--- a/src/components/room/RoomSettingsPanel.tsx
+++ b/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