Feat v0.7.3 extension shell migration (#57)

Co-authored-by: Jeffrey Smith <jasafpro@gmail.com>
Co-committed-by: Jeffrey Smith <jasafpro@gmail.com>

packages/chat/js/main.js

@@ -1,12 +1,12 @@
 /**
- * Chat — Surface Entry Point (v0.2.0)
+ * Chat — Surface Entry Point (v0.3.0)
  *
  * Messaging surface built on chat-core library:
  *   sw.api.ext('chat-core')  — conversation/message CRUD
  *   sw.api.ext('chat')       — typing indicators
  *   sw.realtime              — live events
  *   sw.ui.*                  — primitive components
- *   sw.shell.Topbar          — navigation bar
+ *   sw.shell.topbar           — shell topbar API
  */
 (async function () {
   'use strict';
@@ -42,7 +42,6 @@
   var api     = sw.api.ext('chat-core');
   var chatApi = sw.api.ext('chat');
   var { Button, Spinner, Avatar, Dialog, Tabs } = sw.ui;
-  var Topbar = sw.shell.Topbar;
 
   // Import UserPicker directly (not in sw.ui index)
   var { UserPicker } = await import(base + '/js/sw/primitives/user-picker.js?v=' + ver);
@@ -831,20 +830,33 @@
     var selectedConv = conversations.find(c => c.id === selectedId);
     var threadTitle = selectedConv ? (selectedConv.title || 'Direct Message') : '';
 
+    // ── Shell topbar ───────────────────────────
+    useEffect(() => {
+      if (!sw.shell?.topbar) return;
+      sw.shell.topbar.setTitle('Chat');
+    }, []);
+
+    useEffect(() => {
+      if (!sw.shell?.topbar) return;
+      if (selectedId) {
+        sw.shell.topbar.setSlot(html`
+          <span class="ext-chat-topbar__thread-title">${threadTitle}</span>
+          <${Button} size="sm" variant="secondary"
+                     onClick=${() => setShowParticipants(!showParticipants)}>
+            ${showParticipants ? 'Hide' : 'People'}
+          <//>
+        `);
+      } else {
+        sw.shell.topbar.setSlot(null);
+      }
+    }, [selectedId, threadTitle, showParticipants]);
+
     if (loading) {
       return html`<div class="ext-chat-loading"><${Spinner} /></div>`;
     }
 
     return html`
       <div class="ext-chat-app">
-        <${Topbar} title="Chat">
-          ${selectedId && html`
-            <span class="ext-chat-topbar__thread-title">${threadTitle}</span>
-            <${Button} size="sm" variant="secondary"
-                       onClick=${() => setShowParticipants(!showParticipants)}>
-              ${showParticipants ? 'Hide' : 'People'}
-            <//>`}
-        <//>
         <div class="ext-chat-body">
           <${ConversationList}
             selected=${selectedId}