fix: channel/group rename now works

- Input field no longer nested inside a button/clickable div
- Snapshot state before clearing editing mode to avoid stale closures
- Log errors instead of silently swallowing them

web/src/components/ChannelList.tsx

@@ -190,15 +190,19 @@ export function ChannelList() {
   };
 
   const commitEditChannel = async () => {
-    if (!editingChannelId || !editingChannelName.trim()) { setEditingChannelId(null); return; }
+    const id = editingChannelId;
+    const name = editingChannelName.trim();
+    setEditingChannelId(null);
+    if (!id || !name) return;
     try {
       const updated = await api.patch<{ id: string; server_id: string; name: string; type: string; category: string | null; position: number; group_id?: string | null }>(
-        `/servers/${activeServerId}/channels/${editingChannelId}`,
-        { name: editingChannelName.trim() }
+        `/servers/${activeServerId}/channels/${id}`,
+        { name }
       );
       updateChannel(updated as any);
-    } catch { /* ignore */ }
-    setEditingChannelId(null);
+    } catch (err) {
+      console.error('Rename channel failed:', err);
+    }
   };
 
   const deleteChannel = async (channelId: string, channelName: string) => {
@@ -224,12 +228,16 @@ export function ChannelList() {
   };
 
   const commitEditGroup = async () => {
-    if (!editingGroupId || !editingGroupName.trim()) { setEditingGroupId(null); return; }
-    try {
-      await api.patch(`/servers/${activeServerId}/groups/${editingGroupId}`, { name: editingGroupName.trim() });
-      refreshGroups();
-    } catch { /* ignore */ }
+    const id = editingGroupId;
+    const name = editingGroupName.trim();
     setEditingGroupId(null);
+    if (!id || !name) return;
+    try {
+      await api.patch(`/servers/${activeServerId}/groups/${id}`, { name });
+      refreshGroups();
+    } catch (err) {
+      console.error('Rename group failed:', err);
+    }
   };
 
   const deleteGroup = async (groupId: string, groupName: string) => {
@@ -253,16 +261,9 @@ export function ChannelList() {
 
     return (
       <div key={channel.id} className="group" onContextMenu={(e) => handleChannelContextMenu(e, channel)}>
-        <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">
-            {channel.type === 'forum' ? '■' : channel.type === 'calendar' ? '○' : channel.type === 'docs' ? '☰' : channel.type === 'list' ? '☑' : '#'}
-          </span>
-          {isEditing ? (
+        {isEditing ? (
+          <div className="w-full text-left px-2 py-1 rounded-sm flex items-center gap-2">
+            <span className="text-gb-fg-f">#</span>
             <input
               autoFocus
               value={editingChannelName}
@@ -270,33 +271,42 @@ export function ChannelList() {
               onBlur={commitEditChannel}
               onKeyDown={(e) => { if (e.key === 'Enter') commitEditChannel(); if (e.key === 'Escape') setEditingChannelId(null); }}
               className="flex-1 bg-gb-bg-t text-gb-fg px-1 py-0.5 text-sm outline-none border border-gb-orange"
-              onClick={(e) => e.stopPropagation()}
             />
-          ) : (
-            <span className="truncate flex-1">{channel.name}</span>
-          )}
-          {hasUnread(channel.id) && (
-            <span className="text-gb-orange text-xs font-bold" title="Unread messages">●</span>
-          )}
-          <span className="flex items-center gap-1 text-xs">
-            <button
-              onClick={(e) => handleNotifClick(e, channel.id)}
-              className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100 transition-opacity"
-              title={`Notifications: ${NOTIF_LABELS[getLevel(channel.id)]}`}
-            >
-              {notifIcon(channel.id)}
-            </button>
-            <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}
-            >
-              [⚙]
+          </div>
+        ) : (
+          <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">
+              {channel.type === 'forum' ? '■' : channel.type === 'calendar' ? '○' : channel.type === 'docs' ? '☰' : channel.type === 'list' ? '☑' : '#'}
             </span>
-          </span>
-        </button>
+            <span className="truncate flex-1">{channel.name}</span>
+            {hasUnread(channel.id) && (
+              <span className="text-gb-orange text-xs font-bold" title="Unread messages">●</span>
+            )}
+            <span className="flex items-center gap-1 text-xs">
+              <button
+                onClick={(e) => handleNotifClick(e, channel.id)}
+                className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100 transition-opacity"
+                title={`Notifications: ${NOTIF_LABELS[getLevel(channel.id)]}`}
+              >
+                {notifIcon(channel.id)}
+              </button>
+              <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>
+            </span>
+          </button>
+        )}
       </div>
     );
   };
@@ -335,13 +345,9 @@ export function ChannelList() {
             const isEditingGroup = editingGroupId === grp.id;
             return (
               <div key={'grp:' + grp.id} className="mb-3">
-                <div
-                  className="text-gb-fg-t text-xs uppercase mb-1 cursor-pointer select-none hover:text-gb-fg flex items-center"
-                  onClick={() => { toggleCollapsed(activeServerId || '', grp.id); setToggleTick(t => t + 1); }}
-                  onContextMenu={(e) => handleGroupContextMenu(e, grp)}
-                >
-                  <span className="mr-1">{collapsed ? '[+]' : '[-]'}</span>
-                  {isEditingGroup ? (
+                {isEditingGroup ? (
+                  <div className="text-gb-fg-t text-xs uppercase mb-1 flex items-center">
+                    <span className="mr-1">{collapsed ? '[+]' : '[-]'}</span>
                     <input
                       autoFocus
                       value={editingGroupName}
@@ -349,12 +355,18 @@ export function ChannelList() {
                       onBlur={commitEditGroup}
                       onKeyDown={(e) => { if (e.key === 'Enter') commitEditGroup(); if (e.key === 'Escape') setEditingGroupId(null); }}
                       className="flex-1 bg-gb-bg-t text-gb-fg px-1 py-0.5 text-xs outline-none border border-gb-orange"
-                      onClick={(e) => e.stopPropagation()}
                     />
-                  ) : (
+                  </div>
+                ) : (
+                  <div
+                    className="text-gb-fg-t text-xs uppercase mb-1 cursor-pointer select-none hover:text-gb-fg flex items-center"
+                    onClick={() => { toggleCollapsed(activeServerId || '', grp.id); setToggleTick(t => t + 1); }}
+                    onContextMenu={(e) => handleGroupContextMenu(e, grp)}
+                  >
+                    <span className="mr-1">{collapsed ? '[+]' : '[-]'}</span>
                     <span>{grp.name}</span>
-                  )}
-                </div>
+                  </div>
+                )}
                 {!collapsed && (
                   <>
                     <div className="text-gb-fg-f text-xs mb-1">---</div>