switchboard/core
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Releases 9 Wiki Activity

Changeset 0.37.5 (#217)

Browse Source 
Co-authored-by: gobha <jasafpro@gmail.com>
Co-committed-by: gobha <jasafpro@gmail.com>
This commit is contained in:
gobha
2026-03-21 13:41:25 +00:00
committed by xcaliber
parent 05b5affdac
commit 74f3cb84e9
27 changed files with 2211 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/dev.html
View File

@@ -307,6 +307,74 @@
`;
}
// ── Surfaces Demo Page ────────────────────
function SurfacesPage() {
return html`
<div class="gallery">
<h1>Surfaces Demo</h1>
<p class="subtitle">v0.37.5 — Login + Settings surfaces</p>
<div class="section">
<h2>Login Surface</h2>
<p style="color:var(--text-3); font-size:0.85rem; margin-bottom:0.75rem">
The login surface is a standalone page (not embedded in AppShell).
It renders at /login with its own layout: Hero panel + Auth panel.
</p>
<div style="font-family:var(--font-mono, monospace); font-size:0.8rem; color:var(--text-2); background:var(--bg-1); padding:0.75rem; border-radius:6px; white-space:pre;">${
`<LoginSurface>
<Hero />
<AuthPanel>
authMode === 'builtin':
<LoginForm /> — sw.auth.login()
<RegisterForm /> — sw.api.auth.register()
authMode === 'oidc' | 'mtls':
<SSOPanel />
</AuthPanel>
</LoginSurface>`
}</div>
<p style="color:var(--text-3); font-size:0.8rem; margin-top:0.5rem">
Files: src/js/sw/surfaces/login/
</p>
</div>
<div class="section">
<h2>Settings Surface</h2>
<p style="color:var(--text-3); font-size:0.85rem; margin-bottom:0.75rem">
Full Preact surface with left nav + section routing.
Core sections (General, Appearance, Profile, Teams, Models, Providers,
Personas, Roles, Usage) are native Preact components.
Deferred sections use BridgeSection wrappers.
</p>
<div style="font-family:var(--font-mono, monospace); font-size:0.8rem; color:var(--text-2); background:var(--bg-1); padding:0.75rem; border-radius:6px; white-space:pre;">${
`<SettingsSurface>
<Topbar />
<Nav>
General, Appearance, Models, Personas, Profile,
Teams, Workflows, Tasks, Git Keys, Data & Privacy
[BYOK] Providers, Roles, Usage
</Nav>
<Content>
section === 'general' → <GeneralSection />
section === 'appearance' → <AppearanceSection />
section === 'profile' → <ProfileSection />
section === 'teams' → <TeamsSection />
section === 'models' → <ModelsSection />
section === 'providers' → <ProvidersSection />
section === 'personas' → <PersonasSection />
section === 'roles' → <RolesSection />
section === 'usage' → <UsageSection />
section === 'tasks' etc → <BridgeSection /> (old JS)
</Content>
</SettingsSurface>`
}</div>
<p style="color:var(--text-3); font-size:0.8rem; margin-top:0.5rem">
Files: src/js/sw/surfaces/settings/
</p>
</div>
</div>
`;
}
function PrimitivesPage() {
const [dialogOpen, setDialogOpen] = useState(false);
const [drawerOpen, setDrawerOpen] = useState(false);
@@ -579,6 +647,7 @@
<button class=${page === 'primitives' ? 'active' : ''} onClick=${() => setPage('primitives')}>Primitives</button>
<button class=${page === 'shell' ? 'active' : ''} onClick=${() => setPage('shell')}>Shell</button>
<button class=${page === 'sdk' ? 'active' : ''} onClick=${() => setPage('sdk')}>SDK</button>
<button class=${page === 'surfaces' ? 'active' : ''} onClick=${() => setPage('surfaces')}>Surfaces</button>
<div style="flex:1" />
<${ShellControls} ...${{
bannerOn, setBannerOn, bannerVariant, setBannerVariant, bannerText, setBannerText,
@@ -590,6 +659,7 @@
${page === 'primitives' && html`<${PrimitivesPage} />`}
${page === 'shell' && html`<${ShellPage} />`}
${page === 'sdk' && html`<${SDKPage} />`}
${page === 'surfaces' && html`<${SurfacesPage} />`}
</div>
</div>
<//>