Feat v0.7.3 extension shell migration
All checks were successful
CI/CD / detect-changes (pull_request) Successful in 4s
CI/CD / test-runners (pull_request) Has been skipped
CI/CD / test-frontend (pull_request) Successful in 7s
CI/CD / test-sqlite (pull_request) Successful in 2m48s
CI/CD / test-go-pg (pull_request) Successful in 2m53s
CI/CD / build-and-deploy (pull_request) Successful in 1m8s

Migrate Chat, Notes, and Schedules from legacy sw.shell.Topbar to the
v0.7.0 shell topbar contract (sw.shell.topbar.setTitle/setSlot),
eliminating double topbars on all extension surfaces.

- Chat v0.3.0: reactive slot for thread title + People button
- Notes v0.9.0: slot for New/Import/Graph buttons
- Schedules v0.2.0: reactive slot for count + New button
- 6 new shell-topbar runner tests (2 per surface)
- Headless E2E deferred to v0.7.5

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-02 12:52:40 +00:00
parent d6c7b21713
commit 4a6109b74f
18 changed files with 188 additions and 58 deletions

View File

@@ -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}