From c4d4b2ecf5a95dce5cd3662ddef63c0c7a40f37e Mon Sep 17 00:00:00 2001
From: ZhenYi <434836402@qq.com>
Date: Sun, 19 Apr 2026 20:47:07 +0800
Subject: [PATCH] fix(room): fix channel sidebar clickability and polish UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix DraggableRow: remove opacity-0 wrapper that was hiding
  RoomButton; drag handles now work without blocking clicks
- Move "+ Add Category" to bottom of channel list
- Reduce channel item padding (6px → 4px) for compact look
- Shrink # hash icon to 12px
- Add explicit text-align: left to channel names
- Reduce Add Category button/input to 10px font
---
 src/components/room/DiscordChannelSidebar.tsx | 66 +++++++++----------
 src/index.css                                 |  7 +-
 2 files changed, 36 insertions(+), 37 deletions(-)

diff --git a/src/components/room/DiscordChannelSidebar.tsx b/src/components/room/DiscordChannelSidebar.tsx
index d90527f..f1ef110 100644
--- a/src/components/room/DiscordChannelSidebar.tsx
+++ b/src/components/room/DiscordChannelSidebar.tsx
@@ -76,13 +76,11 @@ const DraggableRow = memo(function DraggableRow({
       {...attributes}
       {...listeners}
       className={cn(
-        'cursor-grab active:cursor-grabbing',
+        'group cursor-grab active:cursor-grabbing',
         isDragging && 'opacity-40',
       )}
     >
-      <div className="absolute left-0 top-0 h-full w-full opacity-0 group-hover:opacity-100 transition-opacity">
-        {children}
-      </div>
+      {children}
     </li>
   );
 });
@@ -374,36 +372,6 @@ export const DiscordChannelSidebar = memo(function DiscordChannelSidebar({
           onMoveRoom={handleMoveRoom}
         />
 
-        {/* Create category */}
-        {creatingCat ? (
-          <div className="flex items-center gap-1 px-2 py-1">
-            <Input
-              autoFocus
-              value={newCatName}
-              onChange={(e) => setNewCatName(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter') handleCreateCategory();
-                if (e.key === 'Escape') { setCreatingCat(false); setNewCatName(''); }
-              }}
-              placeholder="Category name"
-              className="h-7 text-xs"
-            />
-            <Button size="icon" variant="ghost" className="h-7 w-7" onClick={handleCreateCategory}>
-              <Plus className="h-4 w-4" />
-            </Button>
-            <Button size="icon" variant="ghost" className="h-7 w-7" onClick={() => { setCreatingCat(false); setNewCatName(''); }}>
-              <X className="h-3 w-3" />
-            </Button>
-          </div>
-        ) : (
-          <button
-            onClick={() => setCreatingCat(true)}
-            className="discord-channel-item w-full px-2 py-1 text-xs text-muted-foreground hover:text-foreground"
-          >
-            + Add Category
-          </button>
-        )}
-
         {rooms.length === 0 && (
           <div className="px-4 py-8 text-center">
             <p className="text-sm mb-3 text-muted-foreground">No channels yet</p>
@@ -417,6 +385,36 @@ export const DiscordChannelSidebar = memo(function DiscordChannelSidebar({
             </Button>
           </div>
         )}
+
+        {/* Add Category — always at the bottom */}
+        {creatingCat ? (
+          <div className="flex items-center gap-1 px-2 py-1">
+            <Input
+              autoFocus
+              value={newCatName}
+              onChange={(e) => setNewCatName(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleCreateCategory();
+                if (e.key === 'Escape') { setCreatingCat(false); setNewCatName(''); }
+              }}
+              placeholder="Category name"
+              className="h-6 text-[10px]"
+            />
+            <Button size="icon" variant="ghost" className="h-6 w-6" onClick={handleCreateCategory}>
+              <Plus className="h-3 w-3" />
+            </Button>
+            <Button size="icon" variant="ghost" className="h-6 w-6" onClick={() => { setCreatingCat(false); setNewCatName(''); }}>
+              <X className="h-2.5 w-2.5" />
+            </Button>
+          </div>
+        ) : (
+          <button
+            onClick={() => setCreatingCat(true)}
+            className="discord-channel-item w-full px-2 py-1 text-[10px] text-muted-foreground hover:text-foreground"
+          >
+            + Add Category
+          </button>
+        )}
       </div>
 
       {/* Footer */}
diff --git a/src/index.css b/src/index.css
index d61bb09..43162f8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -342,7 +342,7 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 6px 8px;
+  padding: 4px 8px;
   border-radius: 4px;
   cursor: pointer;
   color: var(--room-text-muted);
@@ -377,8 +377,8 @@
 
 .discord-channel-hash {
   opacity: 0.7;
-  font-size: 18px;
-  line-height: 1;
+  width: 12px !important;
+  height: 12px !important;
   flex-shrink: 0;
 }
 
@@ -387,6 +387,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-align: left;
 }
 
 .discord-mention-badge {