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/notes/js/main.js

@@ -1,10 +1,10 @@
 /**
- * Notes — Surface Entry Point (v0.8.0)
+ * Notes — Surface Entry Point (v0.9.0)
  *
  * Markdown notes surface using the SDK:
  *   sw.api.ext('notes')  — scoped API client
  *   sw.ui.*              — primitive components
- *   sw.shell.Topbar      — navigation bar
+ *   sw.shell.topbar       — shell topbar API
  *   window.CM            — CodeMirror 6 bundle (optional)
  */
 (async function () {
@@ -59,7 +59,6 @@
   // ── SDK modules ────────────────────────────
   var api = sw.api.ext('notes');
   var { Button, Spinner } = sw.ui;
-  var Topbar = sw.shell.Topbar;
 
   // ── Debounce helper ────────────────────────
   var _timers = {};
@@ -1729,13 +1728,19 @@
       debounce('search', function() { loadNotes(); }, 300);
     }
 
-    return html`
-      <${Topbar} title="Notes">
+    // ── Shell topbar ───────────────────────────
+    useEffect(() => {
+      if (!sw.shell?.topbar) return;
+      sw.shell.topbar.setTitle('Notes');
+      sw.shell.topbar.setSlot(html`
         <${Button} variant="primary" size="sm" onClick=${handleNew}>+ New Note<//>
         <${Button} variant="secondary" size="sm" onClick=${handleImport}>Import .md<//>
         <${Button} variant=${showGraph ? 'primary' : 'secondary'} size="sm"
           onClick=${function() { setShowGraph(!showGraph); }}>Graph<//>
-      <//>
+      `);
+    }, [showGraph]);
+
+    return html`
       <div class="ext-notes-app">
         <div class="ext-notes-sidebar">
           <${SidebarTabs} activeTab=${sidebarTab} onTabChange=${setSidebarTab} noteSelected=${!!activeNote} />