fix: nested button inside button broke channel clicks

Invalid HTML: <button> inside <button> causes the browser to close
the outer button prematurely, so clicking the channel name never
fires setActiveChannel. Changed inner elements to <span role=button>.

web/src/components/ChannelList.tsx

@@ -288,19 +288,21 @@ export function ChannelList() {
               <span className="text-gb-orange text-xs font-bold" title="Unread messages">●</span>
             )}
             <span className="flex items-center gap-1 text-xs">
-              <button
+              <span
                 onClick={(e) => handleNotifClick(e, channel.id)}
-                className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100 transition-opacity"
+                className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"
                 title={`Notifications: ${NOTIF_LABELS[getLevel(channel.id)]}`}
+                role="button"
+                tabIndex={-1}
               >
                 {notifIcon(channel.id)}
-              </button>
+              </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"
+                className="text-gb-fg-f hover:text-gb-orange opacity-0 group-hover:opacity-100 cursor-pointer"
                 title="Channel settings"
                 role="button"
-                tabIndex={0}
+                tabIndex={-1}
               >
                 [⚙]
               </span>