x/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(components): extract breadcrumb into sub-components

Browse Source 
fix(docs): document breadcrumb components

refactor(sdk): migrate to new navigation components
feat(sdk): create isolated sidebar component

breaking(components): deprecate old topbar component

feat(components): create new topbar components

feat(components): create user dropdown

feat(components): create breadcrumb

feat(components): create navigation items

docs(components): document new components

perf(components): improve performance of sidebar

test(components): add test for navigation components
This commit is contained in:
Prad Nu
2026-01-05 18:41:05 -05:00
parent 22bd6bb70a
commit 30ed4e9ec7
11 changed files with 1223 additions and 1147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
layouts/app.templ
View File

@@ -7,63 +7,145 @@ type WalletUser struct {
Address string
}
// DashboardLayout renders the dashboard with sidebar and topbar
// DashboardLayout renders the dashboard using wa-page component
templ DashboardLayout(title string, user WalletUser, activeTab string) {
@Base(title) {
@components.SidebarStyles()
@components.TopBarStyles()
<!-- Sidebar -->
@components.Sidebar(
components.DefaultSidebarItems(activeTab),
components.SecondarySidebarItems(),
)
<!-- Main App Area -->
<div class="app-layout">
<!-- Top Bar -->
@components.TopBar(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(),
SelectedChainID: "sonr",
SelectedAccountID: "main",
})
<!-- Main Content -->
<main id="main-content" class="main-content">
@pageStyles()
<wa-page mobile-breakpoint="920">
<div slot="header">
<a href="/dashboard" class="header-logo">
<wa-icon name="cube"></wa-icon>
<span>Sonr</span>
</a>
<wa-button data-toggle-nav variant="neutral" appearance="plain" class="wa-mobile-only">
<wa-icon name="bars"></wa-icon>
</wa-button>
@components.UserDropdown(components.NavUser{Name: user.Name, Address: user.Address})
</div>
<nav slot="navigation">
@components.NavigationItems(activeTab)
</nav>
<main>
{ children... }
</main>
</div>
<style>
.main-content {
padding: 24px;
background: var(--wa-color-surface-alt);
min-height: calc(100vh - 56px);
}
</style>
</wa-page>
}
}
// AppLayout is a simplified layout without sidebar (for non-dashboard pages)
// AppLayout is a simplified layout without navigation (for non-dashboard pages)
templ AppLayout(title string, user WalletUser) {
@Base(title) {
@components.TopBarStyles()
<!-- Top Bar -->
@components.TopBar(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(),
SelectedChainID: "sonr",
SelectedAccountID: "main",
})
<!-- Main Content -->
<main class="main-content">
{ children... }
</main>
<style>
.main-content {
padding: 24px;
background: var(--wa-color-surface-alt);
min-height: calc(100vh - 56px);
}
</style>
@pageStyles()
<wa-page>
<!-- Header: Logo + User Avatar -->
<div slot="header">
<a href="/dashboard" class="header-logo">
<wa-icon name="cube"></wa-icon>
<span>Sonr</span>
</a>
@components.UserDropdown(components.NavUser{Name: user.Name, Address: user.Address})
</div>
<!-- Main Content -->
<main>
{ children... }
</main>
</wa-page>
}
}
templ pageStyles() {
<style>
/* Header Logo */
.header-logo {
display: flex;
align-items: center;
gap: var(--wa-space-s);
text-decoration: none;
color: var(--wa-color-neutral-900);
font-weight: 600;
font-size: var(--wa-font-size-l);
}
.header-logo wa-icon {
font-size: 24px;
color: var(--wa-color-primary);
}
/* Navigation Items */
.nav-item {
display: flex;
align-items: center;
gap: var(--wa-space-s);
padding: var(--wa-space-s) var(--wa-space-m);
border-radius: var(--wa-radius-m);
color: var(--wa-color-neutral-600);
text-decoration: none;
font-size: var(--wa-font-size-s);
font-weight: 500;
transition: all 0.15s ease;
}
.nav-item:hover {
background: var(--wa-color-neutral-100);
color: var(--wa-color-neutral-900);
}
.nav-item.active {
background: var(--wa-color-primary-subtle);
color: var(--wa-color-primary);
}
.nav-item wa-icon {
font-size: 18px;
}
/* Navigation Section */
.nav-section {
margin-top: var(--wa-space-l);
padding-top: var(--wa-space-l);
border-top: 1px solid var(--wa-color-neutral-200);
}
.nav-section-title {
padding: var(--wa-space-xs) var(--wa-space-m);
font-size: var(--wa-font-size-xs);
font-weight: 600;
color: var(--wa-color-neutral-500);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* User Menu */
.user-menu-header {
padding: var(--wa-space-m) var(--wa-space-l);
}
.user-menu-header strong {
display: block;
font-size: var(--wa-font-size-s);
color: var(--wa-color-neutral-900);
}
.user-menu-header span {
font-size: var(--wa-font-size-xs);
color: var(--wa-color-neutral-500);
font-family: var(--wa-font-mono);
}
/* Page customizations */
wa-page {
--menu-width: 240px;
}
wa-page[view='mobile'] {
--menu-width: auto;
}
/* Main content padding */
wa-page main {
padding: var(--wa-space-l);
background: var(--wa-color-surface-alt);
min-height: 100%;
}
</style>
}

80
layouts/app_templ.go
View File

@@ -15,7 +15,7 @@ type WalletUser struct {
Address string
}
// DashboardLayout renders the dashboard with sidebar and topbar
// DashboardLayout renders the dashboard using wa-page component
func DashboardLayout(title string, user WalletUser, activeTab string) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -49,44 +49,27 @@ func DashboardLayout(title string, user WalletUser, activeTab string) templ.Comp
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = components.SidebarStyles().Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = pageStyles().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " ")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " <wa-page mobile-breakpoint=\"920\"><div slot=\"header\"><a href=\"/dashboard\" class=\"header-logo\"><wa-icon name=\"cube\"></wa-icon> <span>Sonr</span></a> <wa-button data-toggle-nav variant=\"neutral\" appearance=\"plain\" class=\"wa-mobile-only\"><wa-icon name=\"bars\"></wa-icon></wa-button>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = components.TopBarStyles().Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = components.UserDropdown(components.NavUser{Name: user.Name, Address: user.Address}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " <!-- Sidebar --> ")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "</div><nav slot=\"navigation\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = components.Sidebar(
components.DefaultSidebarItems(activeTab),
components.SecondarySidebarItems(),
).Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = components.NavigationItems(activeTab).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, " <!-- Main App Area --> <div class=\"app-layout\"><!-- Top Bar -->")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = components.TopBar(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(),
SelectedChainID: "sonr",
SelectedAccountID: "main",
}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<!-- Main Content --><main id=\"main-content\" class=\"main-content\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</nav><main>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -94,7 +77,7 @@ func DashboardLayout(title string, user WalletUser, activeTab string) templ.Comp
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "</main></div><style>\n\t\t\t.main-content {\n\t\t\t\tpadding: 24px;\n\t\t\t\tbackground: var(--wa-color-surface-alt);\n\t\t\t\tmin-height: calc(100vh - 56px);\n\t\t\t}\n\t\t</style>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "</main></wa-page>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -108,7 +91,7 @@ func DashboardLayout(title string, user WalletUser, activeTab string) templ.Comp
})
}
// AppLayout is a simplified layout without sidebar (for non-dashboard pages)
// AppLayout is a simplified layout without navigation (for non-dashboard pages)
func AppLayout(title string, user WalletUser) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -142,25 +125,19 @@ func AppLayout(title string, user WalletUser) templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = components.TopBarStyles().Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = pageStyles().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " <!-- Top Bar --> ")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, " <wa-page><!-- Header: Logo + User Avatar --><div slot=\"header\"><a href=\"/dashboard\" class=\"header-logo\"><wa-icon name=\"cube\"></wa-icon> <span>Sonr</span></a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = components.TopBar(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(),
SelectedChainID: "sonr",
SelectedAccountID: "main",
}).Render(ctx, templ_7745c5c3_Buffer)
templ_7745c5c3_Err = components.UserDropdown(components.NavUser{Name: user.Name, Address: user.Address}).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, " <!-- Main Content --> <main class=\"main-content\">")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</div><!-- Main Content --><main>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -168,7 +145,7 @@ func AppLayout(title string, user WalletUser) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "</main><style>\n\t\t\t.main-content {\n\t\t\t\tpadding: 24px;\n\t\t\t\tbackground: var(--wa-color-surface-alt);\n\t\t\t\tmin-height: calc(100vh - 56px);\n\t\t\t}\n\t\t</style>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "</main></wa-page>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -182,4 +159,33 @@ func AppLayout(title string, user WalletUser) templ.Component {
})
}
func pageStyles() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var5 := templ.GetChildren(ctx)
if templ_7745c5c3_Var5 == nil {
templ_7745c5c3_Var5 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<style>\n\t\t/* Header Logo */\n\t\t.header-logo {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--wa-space-s);\n\t\t\ttext-decoration: none;\n\t\t\tcolor: var(--wa-color-neutral-900);\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: var(--wa-font-size-l);\n\t\t}\n\t\t\n\t\t.header-logo wa-icon {\n\t\t\tfont-size: 24px;\n\t\t\tcolor: var(--wa-color-primary);\n\t\t}\n\t\t\n\t\t/* Navigation Items */\n\t\t.nav-item {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--wa-space-s);\n\t\t\tpadding: var(--wa-space-s) var(--wa-space-m);\n\t\t\tborder-radius: var(--wa-radius-m);\n\t\t\tcolor: var(--wa-color-neutral-600);\n\t\t\ttext-decoration: none;\n\t\t\tfont-size: var(--wa-font-size-s);\n\t\t\tfont-weight: 500;\n\t\t\ttransition: all 0.15s ease;\n\t\t}\n\t\t\n\t\t.nav-item:hover {\n\t\t\tbackground: var(--wa-color-neutral-100);\n\t\t\tcolor: var(--wa-color-neutral-900);\n\t\t}\n\t\t\n\t\t.nav-item.active {\n\t\t\tbackground: var(--wa-color-primary-subtle);\n\t\t\tcolor: var(--wa-color-primary);\n\t\t}\n\t\t\n\t\t.nav-item wa-icon {\n\t\t\tfont-size: 18px;\n\t\t}\n\t\t\n\t\t/* Navigation Section */\n\t\t.nav-section {\n\t\t\tmargin-top: var(--wa-space-l);\n\t\t\tpadding-top: var(--wa-space-l);\n\t\t\tborder-top: 1px solid var(--wa-color-neutral-200);\n\t\t}\n\t\t\n\t\t.nav-section-title {\n\t\t\tpadding: var(--wa-space-xs) var(--wa-space-m);\n\t\t\tfont-size: var(--wa-font-size-xs);\n\t\t\tfont-weight: 600;\n\t\t\tcolor: var(--wa-color-neutral-500);\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.05em;\n\t\t}\n\t\t\n\t\t/* User Menu */\n\t\t.user-menu-header {\n\t\t\tpadding: var(--wa-space-m) var(--wa-space-l);\n\t\t}\n\t\t\n\t\t.user-menu-header strong {\n\t\t\tdisplay: block;\n\t\t\tfont-size: var(--wa-font-size-s);\n\t\t\tcolor: var(--wa-color-neutral-900);\n\t\t}\n\t\t\n\t\t.user-menu-header span {\n\t\t\tfont-size: var(--wa-font-size-xs);\n\t\t\tcolor: var(--wa-color-neutral-500);\n\t\t\tfont-family: var(--wa-font-mono);\n\t\t}\n\t\t\n\t\t/* Page customizations */\n\t\twa-page {\n\t\t\t--menu-width: 240px;\n\t\t}\n\t\t\n\t\twa-page[view='mobile'] {\n\t\t\t--menu-width: auto;\n\t\t}\n\t\t\n\t\t/* Main content padding */\n\t\twa-page main {\n\t\t\tpadding: var(--wa-space-l);\n\t\t\tbackground: var(--wa-color-surface-alt);\n\t\t\tmin-height: 100%;\n\t\t}\n\t</style>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
var _ = templruntime.GeneratedTemplate

18
layouts/base.templ
View File

@@ -7,12 +7,17 @@ templ Base(title string) {
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="color-scheme" content="light dark"/>
<title>{ title } - Sonr Motr Wallet</title>
<!-- Web Awesome Components -->
<script>
(function() {
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
if (prefersDark) document.documentElement.classList.add('wa-theme-dark');
})();
</script>
<script src="https://kit.webawesome.com/47c7425b971f443c.js" crossorigin="anonymous"></script>
<!-- HTMX -->
<script src="https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha5/dist/htmx.min.js"></script>
<!-- D3.js for charts -->
<script src="https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.1/preload.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style>
:root {
@@ -30,8 +35,13 @@ templ Base(title string) {
}
</style>
</head>
<body>
<body hx-ext="preload">
{ children... }
<script>
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
document.documentElement.classList.toggle('wa-theme-dark', e.matches);
});
</script>
</body>
</html>
}

8
layouts/base_templ.go
View File

@@ -30,20 +30,20 @@ func Base(title string) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\" class=\"wa-cloak\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<!doctype html><html lang=\"en\" class=\"wa-cloak\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta name=\"color-scheme\" content=\"light dark\"><title>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(title)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `layouts/base.templ`, Line: 10, Col: 17}
return templ.Error{Err: templ_7745c5c3_Err, FileName: `layouts/base.templ`, Line: 11, Col: 17}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Sonr Motr Wallet</title><!-- Web Awesome Components --><script src=\"https://kit.webawesome.com/47c7425b971f443c.js\" crossorigin=\"anonymous\"></script><!-- HTMX --><script src=\"https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha5/dist/htmx.min.js\"></script><!-- D3.js for charts --><script src=\"https://cdn.jsdelivr.net/npm/d3@7\"></script><style>\n\t\t\t\t:root {\n\t\t\t\t\t--wa-color-primary: #17c2ff;\n\t\t\t\t\t--sidebar-width: 64px;\n\t\t\t\t}\n\t\t\t\thtml, body {\n\t\t\t\t\tmin-height: 100%;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tcursor: default;\n\t\t\t\t}\n\t\t\t\twa-button, a, [onclick], [hx-get], [hx-post] {\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\t\t\t</style></head><body>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Sonr Motr Wallet</title><script>\n\t\t\t\t(function() {\n\t\t\t\t\tconst prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;\n\t\t\t\t\tif (prefersDark) document.documentElement.classList.add('wa-theme-dark');\n\t\t\t\t})();\n\t\t\t</script><script src=\"https://kit.webawesome.com/47c7425b971f443c.js\" crossorigin=\"anonymous\"></script><script src=\"https://cdn.jsdelivr.net/npm/htmx.org@4.0.0-alpha5/dist/htmx.min.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/htmx-ext-preload@2.1.1/preload.js\"></script><script src=\"https://cdn.jsdelivr.net/npm/d3@7\"></script><style>\n\t\t\t\t:root {\n\t\t\t\t\t--wa-color-primary: #17c2ff;\n\t\t\t\t\t--sidebar-width: 64px;\n\t\t\t\t}\n\t\t\t\thtml, body {\n\t\t\t\t\tmin-height: 100%;\n\t\t\t\t\tpadding: 0;\n\t\t\t\t\tmargin: 0;\n\t\t\t\t\tcursor: default;\n\t\t\t\t}\n\t\t\t\twa-button, a, [onclick], [hx-get], [hx-post] {\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\t\t\t</style></head><body hx-ext=\"preload\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@@ -51,7 +51,7 @@ func Base(title string) templ.Component {
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</body></html>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "<script>\n\t\t\t\twindow.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {\n\t\t\t\t\tdocument.documentElement.classList.toggle('wa-theme-dark', e.matches);\n\t\t\t\t});\n\t\t\t</script></body></html>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}