Show a joined channel's web tab whichever reply comes first (closes #193)

After a join request returned, joinChannel made tab number
tabsRef.current.length active. When the user's own JOIN event had
already added the tab, or the tab was already open, that index was one
past the last tab. The view then fell back to the Server tab and typed
lines were dropped.

joinChannel now finds the channel's tab by name inside its own tab-list
update and makes that tab active there. Preact runs that update at once
on the newest tab list, so the position is right even when the JOIN
event, or the close of another tab, landed first.

Model: opus-5-5

web/src/app.jsx

@@ -280,8 +280,6 @@ function App() {
   const [connected, setConnected] = useState(true);
   const [inputHistory, setInputHistory] = useState([]);
   const [historyIndex, setHistoryIndex] = useState(-1);
-  // A channel this client has just joined, whose tab is to be shown.
-  const [joinedChannel, setJoinedChannel] = useState(null);
 
   const lastIdRef = useRef(0);
   const seenIdsRef = useRef(new Set());
@@ -317,18 +315,6 @@ function App() {
     if (tab) setUnread((prev) => ({ ...prev, [tab.name]: 0 }));
   }, [activeTab, tabs]);
 
-  // Show the tab of a channel this client has just joined. The tab is
-  // found by name in the updated tab list, because the user's own JOIN
-  // event may have added it before the join request returned.
-  useEffect(() => {
-    if (!joinedChannel) return;
-    const idx = tabs.findIndex(
-      (t) => t.type === "channel" && t.name === joinedChannel,
-    );
-    if (idx >= 0) setActiveTab(idx);
-    setJoinedChannel(null);
-  }, [tabs, joinedChannel]);
-
   const addMessage = useCallback((tabName, msg) => {
     if (msg.id && seenIdsRef.current.has(msg.id)) return;
     if (msg.id) seenIdsRef.current.add(msg.id);
@@ -872,13 +858,23 @@ function App() {
         method: "POST",
         body: JSON.stringify({ command: "JOIN", to: name }),
       });
+      // Show the channel's tab. Preact runs this update at once on the
+      // newest tab list, so the tab is found there by name: the user's
+      // own JOIN event may already have added it, and other tabs may
+      // have closed.
       setTabs((prev) => {
-        if (prev.find((t) => t.type === "channel" && t.name === name))
+        const idx = prev.findIndex(
+          (t) => t.type === "channel" && t.name === name,
+        );
+        if (idx >= 0) {
+          setActiveTab(idx);
+
           return prev;
+        }
+        setActiveTab(prev.length);
 
         return [...prev, { type: "channel", name }];
       });
-      setJoinedChannel(name);
       try {
         const hist = await api(
           `/history?target=${encodeURIComponent(name)}&limit=50`,