fix(ui): a group opened directly lands on the preferred app once preferences load0.14

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XuNrwLf5EFWCMHzfoEvnpm

1 files changed, 23 insertions, 4 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
index 988bcb1..51e39dc 100644
--- a/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
+++ b/packages/meshbay-hub/src/meshbay_hub/static/group-page.js
@@ -55,7 +55,21 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
     if (o && o.groupId === groupId) { session.openGroupTab = null; return o.tab; }
     return null;
   }, [groupId]);
-  const [tab, setTab] = useState(() => consumeTabOverride() || defaultTab);
+  // Whether the tab on screen is still the one the preference picked. The
+  // preferences come from the hub after sign-in, so a group opened directly — a
+  // reload, a link — mounts on the built-in 'chat' before they are known, and
+  // has to move when they land. Not once the reader has picked a tab, and not
+  // when the wizard asked for one.
+  const onDefaultTabRef = useRef(true);
+  const [tab, setTab] = useState(() => {
+    const override = consumeTabOverride();
+    onDefaultTabRef.current = !override;
+    return override || defaultTab;
+  });
+  const chooseTab = useCallback((key) => {
+    onDefaultTabRef.current = false;
+    setTab(key);
+  }, []);
   // GroupPage is not remounted when switching groups (see the refreshedRef note
   // below), so react to a real groupId change here — but not to the initial
   // mount, where useState already picked the right tab.
@@ -63,8 +77,13 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
   useEffect(() => {
     if (tabGroupRef.current === groupId) return;
     tabGroupRef.current = groupId;
-    setTab(consumeTabOverride() || defaultTab);
+    const override = consumeTabOverride();
+    onDefaultTabRef.current = !override;
+    setTab(override || defaultTab);
   }, [groupId]);
+  useEffect(() => {
+    if (onDefaultTabRef.current) setTab(defaultTab);
+  }, [defaultTab]);
   const [groupMuted, setGroupMuted] = useState(() => !!(group && group.muted));
 
   const _lastTouch = useRef(0);
@@ -848,11 +867,11 @@ function GroupPage({ groupId, group, token, username, userId, userPrefs,
         <div class="group-tabs" ref=${tabBand}>
           ${apps.map(a => html`
             <button key=${a.key} class="group-tab ${tab === a.key ? 'active' : ''}"
-              onClick=${() => setTab(a.key)} title=${t(a.labelKey)}>
+              onClick=${() => chooseTab(a.key)} title=${t(a.labelKey)}>
               <${Icon} name=${a.icon} cls="tab-icon" /></button>
           `)}
           <button class="group-tab ${tab === 'settings' ? 'active' : ''}"
-            onClick=${() => setTab('settings')} title=${t('group.tab_settings')}>
+            onClick=${() => chooseTab('settings')} title=${t('group.tab_settings')}>
             <${Icon} name="gear" cls="tab-icon" /></button>
         </div>