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

refactor(ui): migrate to new topbar component

Browse Source
This commit is contained in:
Prad Nu
2026-01-05 16:17:24 -05:00
parent 4cb1b15642
commit 8cb45b3fdf
6 changed files with 190 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

200
components/navbar.templ
View File

@@ -26,23 +26,13 @@ type NavUser struct {
Address string Address string
} }
// NavTab represents a tab in the navigation
type NavTab struct {
ID string
Label string
Icon string
Active bool
}
// NavContext holds navigation state for the header // NavContext holds navigation state for the header
type NavContext struct { type NavContext struct {
User NavUser User NavUser
Blockchains []Blockchain Blockchains []Blockchain
Accounts []Account Accounts []Account
Tabs []NavTab
SelectedChainID string SelectedChainID string
SelectedAccountID string SelectedAccountID string
ActiveTab string
} }
// DefaultBlockchains returns the available blockchain networks // DefaultBlockchains returns the available blockchain networks
@@ -65,27 +55,14 @@ func DefaultAccounts() []Account {
} }
} }
// DashboardTabs returns the default dashboard tabs
func DashboardTabs(activeTab string) []NavTab {
return []NavTab{
{ID: "overview", Label: "Overview", Icon: "grid-2", Active: activeTab == "overview" || activeTab == ""},
{ID: "transactions", Label: "Transactions", Icon: "arrow-right-arrow-left", Active: activeTab == "transactions"},
{ID: "tokens", Label: "Tokens", Icon: "coins", Active: activeTab == "tokens"},
{ID: "nfts", Label: "NFTs", Icon: "image", Active: activeTab == "nfts"},
{ID: "activity", Label: "Activity", Icon: "chart-line", Active: activeTab == "activity"},
}
}
// DefaultNavContext returns the default navigation context // DefaultNavContext returns the default navigation context
func DefaultNavContext() NavContext { func DefaultNavContext() NavContext {
return NavContext{ return NavContext{
User: NavUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"}, User: NavUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"},
Blockchains: DefaultBlockchains(), Blockchains: DefaultBlockchains(),
Accounts: DefaultAccounts(), Accounts: DefaultAccounts(),
Tabs: DashboardTabs(""),
SelectedChainID: "sonr", SelectedChainID: "sonr",
SelectedAccountID: "main", SelectedAccountID: "main",
ActiveTab: "overview",
} }
} }
@@ -109,24 +86,21 @@ func getSelectedAccountName(accounts []Account, id string) string {
return "Account" return "Account"
} }
// AppHeader renders the header section for wa-page header slot // TopBar renders the header bar with breadcrumbs and user dropdown
templ AppHeader(navCtx NavContext) { templ TopBar(navCtx NavContext) {
<header slot="header" class="app-header"> <header class="topbar">
<nav class="header-nav"> <!-- Breadcrumb Navigation -->
<!-- Logo --> <nav class="topbar-nav">
<a href="/dashboard" class="nav-logo"> <span class="topbar-title">Sonr</span>
<wa-icon name="cube"></wa-icon> <span class="topbar-sep">/</span>
<span>Sonr</span>
</a>
<span class="nav-sep">/</span>
<!-- Chain Dropdown --> <!-- Chain Dropdown -->
<wa-dropdown> <wa-dropdown>
<button slot="trigger" class="nav-btn"> <button slot="trigger" class="topbar-btn">
{ getSelectedChainName(navCtx.Blockchains, navCtx.SelectedChainID) } { getSelectedChainName(navCtx.Blockchains, navCtx.SelectedChainID) }
<wa-icon name="chevron-down"></wa-icon> <wa-icon name="chevron-down"></wa-icon>
</button> </button>
<wa-menu> <wa-menu>
<small class="menu-label">Mainnets</small> <wa-menu-label>Mainnets</wa-menu-label>
for _, chain := range navCtx.Blockchains { for _, chain := range navCtx.Blockchains {
if !chain.Testnet { if !chain.Testnet {
<wa-menu-item value={ chain.ID }> <wa-menu-item value={ chain.ID }>
@@ -136,7 +110,7 @@ templ AppHeader(navCtx NavContext) {
} }
} }
<wa-divider></wa-divider> <wa-divider></wa-divider>
<small class="menu-label">Testnets</small> <wa-menu-label>Testnets</wa-menu-label>
for _, chain := range navCtx.Blockchains { for _, chain := range navCtx.Blockchains {
if chain.Testnet { if chain.Testnet {
<wa-menu-item value={ chain.ID }> <wa-menu-item value={ chain.ID }>
@@ -147,17 +121,17 @@ templ AppHeader(navCtx NavContext) {
} }
</wa-menu> </wa-menu>
</wa-dropdown> </wa-dropdown>
<span class="nav-sep">/</span> <span class="topbar-sep">/</span>
<!-- Account Dropdown --> <!-- Account Dropdown -->
<wa-dropdown> <wa-dropdown>
<button slot="trigger" class="nav-btn"> <button slot="trigger" class="topbar-btn">
{ getSelectedAccountName(navCtx.Accounts, navCtx.SelectedAccountID) } { getSelectedAccountName(navCtx.Accounts, navCtx.SelectedAccountID) }
<wa-icon name="chevron-down"></wa-icon> <wa-icon name="chevron-down"></wa-icon>
</button> </button>
<wa-menu> <wa-menu>
for _, account := range navCtx.Accounts { for _, account := range navCtx.Accounts {
<wa-menu-item value={ account.ID }> <wa-menu-item value={ account.ID }>
<wa-avatar slot="prefix" initials={ account.Initials } style={ "--size:16px;background:" + account.Color }></wa-avatar> <wa-avatar slot="prefix" initials={ account.Initials } style={ "--size:18px;background:" + account.Color }></wa-avatar>
{ account.Name } { account.Name }
</wa-menu-item> </wa-menu-item>
} }
@@ -169,122 +143,110 @@ templ AppHeader(navCtx NavContext) {
</wa-menu> </wa-menu>
</wa-dropdown> </wa-dropdown>
</nav> </nav>
<!-- User Avatar --> <!-- User Dropdown -->
<wa-dropdown> <wa-dropdown>
<wa-avatar slot="trigger" initials={ string(navCtx.User.Name[0]) } style="--size:28px;cursor:pointer;"></wa-avatar> <wa-avatar slot="trigger" initials={ string(navCtx.User.Name[0]) } style="--size:32px;cursor:pointer;"></wa-avatar>
<wa-menu> <wa-menu>
<div class="user-info"> <div class="user-menu-header">
<strong>{ navCtx.User.Name }</strong> <strong>{ navCtx.User.Name }</strong>
<span>{ navCtx.User.Address }</span> <span>{ navCtx.User.Address }</span>
</div> </div>
<wa-divider></wa-divider> <wa-divider></wa-divider>
<wa-menu-item value="settings"><wa-icon slot="prefix" name="gear"></wa-icon>Settings</wa-menu-item> <wa-menu-item value="connections">
<wa-menu-item value="logout"><wa-icon slot="prefix" name="arrow-right-from-bracket"></wa-icon>Sign Out</wa-menu-item> <wa-icon slot="prefix" name="plug"></wa-icon>
Connections
</wa-menu-item>
<wa-menu-item value="devices">
<wa-icon slot="prefix" name="mobile"></wa-icon>
Devices
</wa-menu-item>
<wa-menu-item value="settings">
<wa-icon slot="prefix" name="gear"></wa-icon>
Settings
</wa-menu-item>
<wa-divider></wa-divider>
<wa-menu-item value="logout">
<wa-icon slot="prefix" name="arrow-right-from-bracket"></wa-icon>
Sign Out
</wa-menu-item>
</wa-menu> </wa-menu>
</wa-dropdown> </wa-dropdown>
</header> </header>
} }
// AppSubheader renders the tabs section for wa-page subheader slot // TopBarStyles renders the CSS for the top bar
templ AppSubheader(tabs []NavTab) { templ TopBarStyles() {
<nav slot="subheader" class="tab-bar">
for _, tab := range tabs {
<a href={ templ.SafeURL("/dashboard?tab=" + tab.ID) } class={ "tab", templ.KV("active", tab.Active) }>
<wa-icon name={ tab.Icon }></wa-icon>
{ tab.Label }
</a>
}
</nav>
}
// AppNavStyles renders the CSS styles for the navigation components
templ AppNavStyles() {
<style> <style>
/* Reset wa-page slots */ /* Top Bar */
wa-page::part(header), wa-page::part(subheader) { .topbar {
background: var(--wa-color-surface);
padding: 0;
}
wa-page::part(header) { border-bottom: 1px solid var(--wa-color-neutral-200); }
wa-page::part(subheader) { border-bottom: none; }
wa-page::part(main-content) { background: var(--wa-color-surface-alt); }
/* Header Bar - Vercel style */
.app-header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 48px; height: 56px;
padding: 0 16px; padding: 0 24px;
background: var(--wa-color-surface);
border-bottom: 1px solid var(--wa-color-neutral-200);
} }
.header-nav {
.topbar-nav {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 0; gap: 0;
} }
.nav-logo {
display: flex; .topbar-title {
align-items: center;
gap: 6px;
padding: 6px 8px;
text-decoration: none;
color: var(--wa-color-primary);
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
border-radius: 6px; color: var(--wa-color-neutral-900);
padding: 6px 8px;
} }
.nav-logo:hover { background: var(--wa-color-neutral-100); }
.nav-logo wa-icon { font-size: 18px; } .topbar-sep {
.nav-sep { color: var(--wa-color-neutral-400); font-size: 18px; font-weight: 300; padding: 0 4px; } color: var(--wa-color-neutral-300);
.nav-btn { font-size: 16px;
padding: 0 4px;
}
.topbar-btn {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
padding: 6px 8px; padding: 6px 10px;
border: none; border: none;
background: none; background: transparent;
font: inherit; font: inherit;
font-size: 14px; font-size: 14px;
font-weight: 500; font-weight: 500;
color: var(--wa-color-neutral-700); color: var(--wa-color-neutral-700);
border-radius: 6px; border-radius: 6px;
cursor: pointer; cursor: pointer;
transition: background 0.15s;
} }
.nav-btn:hover { background: var(--wa-color-neutral-100); }
.nav-btn wa-icon { font-size: 12px; color: var(--wa-color-neutral-500); } .topbar-btn:hover {
.menu-label { display: block; padding: 6px 12px; font-size: 12px; color: var(--wa-color-neutral-500); text-transform: uppercase; letter-spacing: 0.5px; } background: var(--wa-color-neutral-100);
.user-info { padding: 10px 14px; }
.user-info strong { display: block; font-size: 14px; }
.user-info span { font-size: 12px; color: var(--wa-color-neutral-500); }
/* Tab Bar - Vercel style: content-width tabs, left-aligned */
.tab-bar {
display: flex;
align-items: stretch;
gap: 0;
padding: 0 16px;
border-bottom: 1px solid var(--wa-color-neutral-200);
} }
.tab {
display: inline-flex; .topbar-btn wa-icon {
align-items: center; font-size: 12px;
gap: 8px; color: var(--wa-color-neutral-400);
padding: 10px 12px; }
flex-shrink: 0;
width: auto; /* User Menu */
.user-menu-header {
padding: 12px 16px;
}
.user-menu-header strong {
display: block;
font-size: 14px; font-size: 14px;
font-weight: 500; color: var(--wa-color-neutral-900);
color: var(--wa-color-neutral-600); }
text-decoration: none;
border-bottom: 2px solid transparent; .user-menu-header span {
margin-bottom: -1px; font-size: 12px;
transition: color 0.15s; color: var(--wa-color-neutral-500);
font-family: var(--wa-font-mono);
} }
.tab:hover { color: var(--wa-color-neutral-900); }
.tab.active { color: var(--wa-color-neutral-900); border-bottom-color: var(--wa-color-neutral-900); }
.tab wa-icon { font-size: 15px; }
/* Content */
.content-container { max-width: 1200px; margin: 0 auto; padding: 24px; }
</style> </style>
} }

180
components/navbar_templ.go
View File

@@ -34,23 +34,13 @@ type NavUser struct {
Address string Address string
} }
// NavTab represents a tab in the navigation
type NavTab struct {
ID string
Label string
Icon string
Active bool
}
// NavContext holds navigation state for the header // NavContext holds navigation state for the header
type NavContext struct { type NavContext struct {
User NavUser User NavUser
Blockchains []Blockchain Blockchains []Blockchain
Accounts []Account Accounts []Account
Tabs []NavTab
SelectedChainID string SelectedChainID string
SelectedAccountID string SelectedAccountID string
ActiveTab string
} }
// DefaultBlockchains returns the available blockchain networks // DefaultBlockchains returns the available blockchain networks
@@ -73,27 +63,14 @@ func DefaultAccounts() []Account {
} }
} }
// DashboardTabs returns the default dashboard tabs
func DashboardTabs(activeTab string) []NavTab {
return []NavTab{
{ID: "overview", Label: "Overview", Icon: "grid-2", Active: activeTab == "overview" || activeTab == ""},
{ID: "transactions", Label: "Transactions", Icon: "arrow-right-arrow-left", Active: activeTab == "transactions"},
{ID: "tokens", Label: "Tokens", Icon: "coins", Active: activeTab == "tokens"},
{ID: "nfts", Label: "NFTs", Icon: "image", Active: activeTab == "nfts"},
{ID: "activity", Label: "Activity", Icon: "chart-line", Active: activeTab == "activity"},
}
}
// DefaultNavContext returns the default navigation context // DefaultNavContext returns the default navigation context
func DefaultNavContext() NavContext { func DefaultNavContext() NavContext {
return NavContext{ return NavContext{
User: NavUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"}, User: NavUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"},
Blockchains: DefaultBlockchains(), Blockchains: DefaultBlockchains(),
Accounts: DefaultAccounts(), Accounts: DefaultAccounts(),
Tabs: DashboardTabs(""),
SelectedChainID: "sonr", SelectedChainID: "sonr",
SelectedAccountID: "main", SelectedAccountID: "main",
ActiveTab: "overview",
} }
} }
@@ -117,8 +94,8 @@ func getSelectedAccountName(accounts []Account, id string) string {
return "Account" return "Account"
} }
// AppHeader renders the header section for wa-page header slot // TopBar renders the header bar with breadcrumbs and user dropdown
func AppHeader(navCtx NavContext) templ.Component { func TopBar(navCtx NavContext) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { 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 templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -139,20 +116,20 @@ func AppHeader(navCtx NavContext) templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent templ_7745c5c3_Var1 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<header slot=\"header\" class=\"app-header\"><nav class=\"header-nav\"><!-- Logo --><a href=\"/dashboard\" class=\"nav-logo\"><wa-icon name=\"cube\"></wa-icon> <span>Sonr</span></a> <span class=\"nav-sep\">/</span><!-- Chain Dropdown --><wa-dropdown><button slot=\"trigger\" class=\"nav-btn\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<header class=\"topbar\"><!-- Breadcrumb Navigation --><nav class=\"topbar-nav\"><span class=\"topbar-title\">Sonr</span> <span class=\"topbar-sep\">/</span><!-- Chain Dropdown --><wa-dropdown><button slot=\"trigger\" class=\"topbar-btn\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var2 string var templ_7745c5c3_Var2 string
templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(getSelectedChainName(navCtx.Blockchains, navCtx.SelectedChainID)) templ_7745c5c3_Var2, templ_7745c5c3_Err = templ.JoinStringErrs(getSelectedChainName(navCtx.Blockchains, navCtx.SelectedChainID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 125, Col: 71} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 99, Col: 71}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var2))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " <wa-icon name=\"chevron-down\"></wa-icon></button> <wa-menu><small class=\"menu-label\">Mainnets</small> ") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " <wa-icon name=\"chevron-down\"></wa-icon></button> <wa-menu><wa-menu-label>Mainnets</wa-menu-label> ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -165,7 +142,7 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var3 string var templ_7745c5c3_Var3 string
templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(chain.ID) templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(chain.ID)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 132, Col: 37} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 106, Col: 37}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -178,7 +155,7 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var4 string var templ_7745c5c3_Var4 string
templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Icon) templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Icon)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 133, Col: 48} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 107, Col: 48}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -191,7 +168,7 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var5 string var templ_7745c5c3_Var5 string
templ_7745c5c3_Var5, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("color:" + chain.Color) templ_7745c5c3_Var5, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("color:" + chain.Color)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 133, Col: 81} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 107, Col: 81}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -204,7 +181,7 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var6 string var templ_7745c5c3_Var6 string
templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Name) templ_7745c5c3_Var6, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 134, Col: 20} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 108, Col: 20}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var6))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -216,7 +193,7 @@ func AppHeader(navCtx NavContext) templ.Component {
} }
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<wa-divider></wa-divider> <small class=\"menu-label\">Testnets</small> ") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "<wa-divider></wa-divider> <wa-menu-label>Testnets</wa-menu-label> ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -229,7 +206,7 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var7 string var templ_7745c5c3_Var7 string
templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(chain.ID) templ_7745c5c3_Var7, templ_7745c5c3_Err = templ.JoinStringErrs(chain.ID)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 142, Col: 37} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 116, Col: 37}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var7))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -242,7 +219,7 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var8 string var templ_7745c5c3_Var8 string
templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Icon) templ_7745c5c3_Var8, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Icon)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 143, Col: 48} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 117, Col: 48}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var8))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -255,7 +232,7 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var9 string var templ_7745c5c3_Var9 string
templ_7745c5c3_Var9, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("color:" + chain.Color) templ_7745c5c3_Var9, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("color:" + chain.Color)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 143, Col: 81} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 117, Col: 81}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var9))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -268,7 +245,7 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var10 string var templ_7745c5c3_Var10 string
templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Name) templ_7745c5c3_Var10, templ_7745c5c3_Err = templ.JoinStringErrs(chain.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 144, Col: 20} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 118, Col: 20}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var10))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -280,14 +257,14 @@ func AppHeader(navCtx NavContext) templ.Component {
} }
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</wa-menu></wa-dropdown> <span class=\"nav-sep\">/</span><!-- Account Dropdown --><wa-dropdown><button slot=\"trigger\" class=\"nav-btn\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 14, "</wa-menu></wa-dropdown> <span class=\"topbar-sep\">/</span><!-- Account Dropdown --><wa-dropdown><button slot=\"trigger\" class=\"topbar-btn\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var11 string var templ_7745c5c3_Var11 string
templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(getSelectedAccountName(navCtx.Accounts, navCtx.SelectedAccountID)) templ_7745c5c3_Var11, templ_7745c5c3_Err = templ.JoinStringErrs(getSelectedAccountName(navCtx.Accounts, navCtx.SelectedAccountID))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 154, Col: 72} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 128, Col: 72}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var11))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -305,7 +282,7 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var12 string var templ_7745c5c3_Var12 string
templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(account.ID) templ_7745c5c3_Var12, templ_7745c5c3_Err = templ.JoinStringErrs(account.ID)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 159, Col: 38} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 133, Col: 38}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var12))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -318,7 +295,7 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var13 string var templ_7745c5c3_Var13 string
templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(account.Initials) templ_7745c5c3_Var13, templ_7745c5c3_Err = templ.JoinStringErrs(account.Initials)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 160, Col: 59} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 134, Col: 59}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var13))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -329,9 +306,9 @@ func AppHeader(navCtx NavContext) templ.Component {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var14 string var templ_7745c5c3_Var14 string
templ_7745c5c3_Var14, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("--size:16px;background:" + account.Color) templ_7745c5c3_Var14, templ_7745c5c3_Err = templruntime.SanitizeStyleAttributeValues("--size:18px;background:" + account.Color)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 160, Col: 111} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 134, Col: 111}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var14))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -344,7 +321,7 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var15 string var templ_7745c5c3_Var15 string
templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(account.Name) templ_7745c5c3_Var15, templ_7745c5c3_Err = templ.JoinStringErrs(account.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 161, Col: 21} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 135, Col: 21}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var15))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -355,27 +332,27 @@ func AppHeader(navCtx NavContext) templ.Component {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<wa-divider></wa-divider> <wa-menu-item value=\"__new__\"><wa-icon slot=\"prefix\" name=\"plus\"></wa-icon> New Account</wa-menu-item></wa-menu></wa-dropdown></nav><!-- User Avatar --><wa-dropdown><wa-avatar slot=\"trigger\" initials=\"") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 21, "<wa-divider></wa-divider> <wa-menu-item value=\"__new__\"><wa-icon slot=\"prefix\" name=\"plus\"></wa-icon> New Account</wa-menu-item></wa-menu></wa-dropdown></nav><!-- User Dropdown --><wa-dropdown><wa-avatar slot=\"trigger\" initials=\"")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var16 string var templ_7745c5c3_Var16 string
templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(string(navCtx.User.Name[0])) templ_7745c5c3_Var16, templ_7745c5c3_Err = templ.JoinStringErrs(string(navCtx.User.Name[0]))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 174, Col: 67} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 148, Col: 67}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var16))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\" style=\"--size:28px;cursor:pointer;\"></wa-avatar> <wa-menu><div class=\"user-info\"><strong>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\" style=\"--size:32px;cursor:pointer;\"></wa-avatar> <wa-menu><div class=\"user-menu-header\"><strong>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
var templ_7745c5c3_Var17 string var templ_7745c5c3_Var17 string
templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(navCtx.User.Name) templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(navCtx.User.Name)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 177, Col: 31} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 151, Col: 31}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var17))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
@@ -388,13 +365,13 @@ func AppHeader(navCtx NavContext) templ.Component {
var templ_7745c5c3_Var18 string var templ_7745c5c3_Var18 string
templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(navCtx.User.Address) templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(navCtx.User.Address)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 178, Col: 32} return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 152, Col: 32}
} }
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18)) _, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var18))
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</span></div><wa-divider></wa-divider> <wa-menu-item value=\"settings\"><wa-icon slot=\"prefix\" name=\"gear\"></wa-icon>Settings</wa-menu-item> <wa-menu-item value=\"logout\"><wa-icon slot=\"prefix\" name=\"arrow-right-from-bracket\"></wa-icon>Sign Out</wa-menu-item></wa-menu></wa-dropdown></header>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "</span></div><wa-divider></wa-divider> <wa-menu-item value=\"connections\"><wa-icon slot=\"prefix\" name=\"plug\"></wa-icon> Connections</wa-menu-item> <wa-menu-item value=\"devices\"><wa-icon slot=\"prefix\" name=\"mobile\"></wa-icon> Devices</wa-menu-item> <wa-menu-item value=\"settings\"><wa-icon slot=\"prefix\" name=\"gear\"></wa-icon> Settings</wa-menu-item> <wa-divider></wa-divider> <wa-menu-item value=\"logout\"><wa-icon slot=\"prefix\" name=\"arrow-right-from-bracket\"></wa-icon> Sign Out</wa-menu-item></wa-menu></wa-dropdown></header>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -402,8 +379,8 @@ func AppHeader(navCtx NavContext) templ.Component {
}) })
} }
// AppSubheader renders the tabs section for wa-page subheader slot // TopBarStyles renders the CSS for the top bar
func AppSubheader(tabs []NavTab) templ.Component { func TopBarStyles() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { 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 templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil { if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
@@ -424,104 +401,7 @@ func AppSubheader(tabs []NavTab) templ.Component {
templ_7745c5c3_Var19 = templ.NopComponent templ_7745c5c3_Var19 = templ.NopComponent
} }
ctx = templ.ClearChildren(ctx) ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<nav slot=\"subheader\" class=\"tab-bar\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "<style>\n\t\t/* Top Bar */\n\t\t.topbar {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\theight: 56px;\n\t\t\tpadding: 0 24px;\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-200);\n\t\t}\n\t\t\n\t\t.topbar-nav {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0;\n\t\t}\n\t\t\n\t\t.topbar-title {\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tcolor: var(--wa-color-neutral-900);\n\t\t\tpadding: 6px 8px;\n\t\t}\n\t\t\n\t\t.topbar-sep {\n\t\t\tcolor: var(--wa-color-neutral-300);\n\t\t\tfont-size: 16px;\n\t\t\tpadding: 0 4px;\n\t\t}\n\t\t\n\t\t.topbar-btn {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t\tpadding: 6px 10px;\n\t\t\tborder: none;\n\t\t\tbackground: transparent;\n\t\t\tfont: inherit;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-700);\n\t\t\tborder-radius: 6px;\n\t\t\tcursor: pointer;\n\t\t\ttransition: background 0.15s;\n\t\t}\n\t\t\n\t\t.topbar-btn:hover {\n\t\t\tbackground: var(--wa-color-neutral-100);\n\t\t}\n\t\t\n\t\t.topbar-btn wa-icon {\n\t\t\tfont-size: 12px;\n\t\t\tcolor: var(--wa-color-neutral-400);\n\t\t}\n\t\t\n\t\t/* User Menu */\n\t\t.user-menu-header {\n\t\t\tpadding: 12px 16px;\n\t\t}\n\t\t\n\t\t.user-menu-header strong {\n\t\t\tdisplay: block;\n\t\t\tfont-size: 14px;\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: 12px;\n\t\t\tcolor: var(--wa-color-neutral-500);\n\t\t\tfont-family: var(--wa-font-mono);\n\t\t}\n\t</style>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
for _, tab := range tabs {
var templ_7745c5c3_Var20 = []any{"tab", templ.KV("active", tab.Active)}
templ_7745c5c3_Err = templ.RenderCSSItems(ctx, templ_7745c5c3_Buffer, templ_7745c5c3_Var20...)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 26, "<a href=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var21 templ.SafeURL
templ_7745c5c3_Var21, templ_7745c5c3_Err = templ.JoinURLErrs(templ.SafeURL("/dashboard?tab=" + tab.ID))
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 192, Col: 54}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var21))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 27, "\" class=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var22 string
templ_7745c5c3_Var22, templ_7745c5c3_Err = templ.JoinStringErrs(templ.CSSClasses(templ_7745c5c3_Var20).String())
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 1, Col: 0}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var22))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 28, "\"><wa-icon name=\"")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var23 string
templ_7745c5c3_Var23, templ_7745c5c3_Err = templ.JoinStringErrs(tab.Icon)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 193, Col: 28}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var23))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 29, "\"></wa-icon> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
var templ_7745c5c3_Var24 string
templ_7745c5c3_Var24, templ_7745c5c3_Err = templ.JoinStringErrs(tab.Label)
if templ_7745c5c3_Err != nil {
return templ.Error{Err: templ_7745c5c3_Err, FileName: `components/navbar.templ`, Line: 194, Col: 15}
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var24))
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 30, "</a>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 31, "</nav>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return nil
})
}
// AppNavStyles renders the CSS styles for the navigation components
func AppNavStyles() 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_Var25 := templ.GetChildren(ctx)
if templ_7745c5c3_Var25 == nil {
templ_7745c5c3_Var25 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 32, "<style>\n\t\t/* Reset wa-page slots */\n\t\twa-page::part(header), wa-page::part(subheader) {\n\t\t\tbackground: var(--wa-color-surface);\n\t\t\tpadding: 0;\n\t\t}\n\t\twa-page::part(header) { border-bottom: 1px solid var(--wa-color-neutral-200); }\n\t\twa-page::part(subheader) { border-bottom: none; }\n\t\twa-page::part(main-content) { background: var(--wa-color-surface-alt); }\n\n\t\t/* Header Bar - Vercel style */\n\t\t.app-header {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: space-between;\n\t\t\theight: 48px;\n\t\t\tpadding: 0 16px;\n\t\t}\n\t\t.header-nav {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0;\n\t\t}\n\t\t.nav-logo {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 6px;\n\t\t\tpadding: 6px 8px;\n\t\t\ttext-decoration: none;\n\t\t\tcolor: var(--wa-color-primary);\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tborder-radius: 6px;\n\t\t}\n\t\t.nav-logo:hover { background: var(--wa-color-neutral-100); }\n\t\t.nav-logo wa-icon { font-size: 18px; }\n\t\t.nav-sep { color: var(--wa-color-neutral-400); font-size: 18px; font-weight: 300; padding: 0 4px; }\n\t\t.nav-btn {\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tgap: 4px;\n\t\t\tpadding: 6px 8px;\n\t\t\tborder: none;\n\t\t\tbackground: none;\n\t\t\tfont: inherit;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-700);\n\t\t\tborder-radius: 6px;\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.nav-btn:hover { background: var(--wa-color-neutral-100); }\n\t\t.nav-btn wa-icon { font-size: 12px; color: var(--wa-color-neutral-500); }\n\t\t.menu-label { display: block; padding: 6px 12px; font-size: 12px; color: var(--wa-color-neutral-500); text-transform: uppercase; letter-spacing: 0.5px; }\n\t\t.user-info { padding: 10px 14px; }\n\t\t.user-info strong { display: block; font-size: 14px; }\n\t\t.user-info span { font-size: 12px; color: var(--wa-color-neutral-500); }\n\n\t\t/* Tab Bar - Vercel style: content-width tabs, left-aligned */\n\t\t.tab-bar {\n\t\t\tdisplay: flex;\n\t\t\talign-items: stretch;\n\t\t\tgap: 0;\n\t\t\tpadding: 0 16px;\n\t\t\tborder-bottom: 1px solid var(--wa-color-neutral-200);\n\t\t}\n\t\t.tab {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tgap: 8px;\n\t\t\tpadding: 10px 12px;\n\t\t\tflex-shrink: 0;\n\t\t\twidth: auto;\n\t\t\tfont-size: 14px;\n\t\t\tfont-weight: 500;\n\t\t\tcolor: var(--wa-color-neutral-600);\n\t\t\ttext-decoration: none;\n\t\t\tborder-bottom: 2px solid transparent;\n\t\t\tmargin-bottom: -1px;\n\t\t\ttransition: color 0.15s;\n\t\t}\n\t\t.tab:hover { color: var(--wa-color-neutral-900); }\n\t\t.tab.active { color: var(--wa-color-neutral-900); border-bottom-color: var(--wa-color-neutral-900); }\n\t\t.tab wa-icon { font-size: 15px; }\n\n\t\t/* Content */\n\t\t.content-container { max-width: 1200px; margin: 0 auto; padding: 24px; }\n\t</style>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

66
layouts/app.templ
View File

@@ -7,43 +7,63 @@ type WalletUser struct {
Address string Address string
} }
// DashboardLayout renders the dashboard with header, tabs, and content // DashboardLayout renders the dashboard with sidebar and topbar
templ DashboardLayout(title string, user WalletUser, activeTab string) { templ DashboardLayout(title string, user WalletUser, activeTab string) {
@Base(title) { @Base(title) {
@components.AppNavStyles() @components.SidebarStyles()
<wa-page> @components.TopBarStyles()
@components.AppHeader(components.NavContext{ <!-- 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}, User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(), Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(), Accounts: components.DefaultAccounts(),
Tabs: components.DashboardTabs(activeTab),
SelectedChainID: "sonr", SelectedChainID: "sonr",
SelectedAccountID: "main", SelectedAccountID: "main",
ActiveTab: activeTab,
}) })
@components.AppSubheader(components.DashboardTabs(activeTab)) <!-- Main Content -->
<main class="content-container"> <main id="main-content" class="main-content">
{ children... } { children... }
</main> </main>
</wa-page> </div>
<style>
.main-content {
padding: 24px;
background: var(--wa-color-surface-alt);
min-height: calc(100vh - 56px);
}
</style>
} }
} }
// AppLayout is a simplified layout without tabs (for non-dashboard pages) // AppLayout is a simplified layout without sidebar (for non-dashboard pages)
templ AppLayout(title string, user WalletUser) { templ AppLayout(title string, user WalletUser) {
@Base(title) { @Base(title) {
@components.AppNavStyles() @components.TopBarStyles()
<wa-page> <!-- Top Bar -->
@components.AppHeader(components.NavContext{ @components.TopBar(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address}, User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(), Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(), Accounts: components.DefaultAccounts(),
SelectedChainID: "sonr", SelectedChainID: "sonr",
SelectedAccountID: "main", SelectedAccountID: "main",
}) })
<main class="content-container"> <!-- Main Content -->
{ children... } <main class="main-content">
</main> { children... }
</wa-page> </main>
<style>
.main-content {
padding: 24px;
background: var(--wa-color-surface-alt);
min-height: calc(100vh - 56px);
}
</style>
} }
} }

49
layouts/app_templ.go
View File

@@ -15,7 +15,7 @@ type WalletUser struct {
Address string Address string
} }
// DashboardLayout renders the dashboard with header, tabs, and content // DashboardLayout renders the dashboard with sidebar and topbar
func DashboardLayout(title string, user WalletUser, activeTab string) templ.Component { func DashboardLayout(title string, user WalletUser, activeTab string) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { 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 templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -49,31 +49,44 @@ func DashboardLayout(title string, user WalletUser, activeTab string) templ.Comp
}() }()
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = components.AppNavStyles().Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = components.SidebarStyles().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " <wa-page>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = components.AppHeader(components.NavContext{ templ_7745c5c3_Err = components.TopBarStyles().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " <!-- Sidebar --> ")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = components.Sidebar(
components.DefaultSidebarItems(activeTab),
components.SecondarySidebarItems(),
).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}, User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(), Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(), Accounts: components.DefaultAccounts(),
Tabs: components.DashboardTabs(activeTab),
SelectedChainID: "sonr", SelectedChainID: "sonr",
SelectedAccountID: "main", SelectedAccountID: "main",
ActiveTab: activeTab,
}).Render(ctx, templ_7745c5c3_Buffer) }).Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = components.AppSubheader(components.DashboardTabs(activeTab)).Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "<!-- Main Content --><main id=\"main-content\" class=\"main-content\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "<main class=\"content-container\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -81,7 +94,7 @@ func DashboardLayout(title string, user WalletUser, activeTab string) templ.Comp
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 3, "</main></wa-page>") 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>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -95,7 +108,7 @@ func DashboardLayout(title string, user WalletUser, activeTab string) templ.Comp
}) })
} }
// AppLayout is a simplified layout without tabs (for non-dashboard pages) // AppLayout is a simplified layout without sidebar (for non-dashboard pages)
func AppLayout(title string, user WalletUser) templ.Component { func AppLayout(title string, user WalletUser) templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) { 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 templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
@@ -129,15 +142,15 @@ func AppLayout(title string, user WalletUser) templ.Component {
}() }()
} }
ctx = templ.InitializeContext(ctx) ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = components.AppNavStyles().Render(ctx, templ_7745c5c3_Buffer) templ_7745c5c3_Err = components.TopBarStyles().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " <wa-page>") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " <!-- Top Bar --> ")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = components.AppHeader(components.NavContext{ templ_7745c5c3_Err = components.TopBar(components.NavContext{
User: components.NavUser{Name: user.Name, Address: user.Address}, User: components.NavUser{Name: user.Name, Address: user.Address},
Blockchains: components.DefaultBlockchains(), Blockchains: components.DefaultBlockchains(),
Accounts: components.DefaultAccounts(), Accounts: components.DefaultAccounts(),
@@ -147,7 +160,7 @@ func AppLayout(title string, user WalletUser) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "<main class=\"content-container\">") templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, " <!-- Main Content --> <main class=\"main-content\">")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
@@ -155,7 +168,7 @@ func AppLayout(title string, user WalletUser) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, "</main></wa-page>") 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>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }

4
layouts/base.templ
View File

@@ -8,12 +8,16 @@ templ Base(title string) {
<meta charset="utf-8"/> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>{ title } - Sonr Motr Wallet</title> <title>{ title } - Sonr Motr Wallet</title>
<!-- Web Awesome Components -->
<script src="https://kit.webawesome.com/47c7425b971f443c.js" crossorigin="anonymous"></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> <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> <script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<style> <style>
:root { :root {
--wa-color-primary: #17c2ff; --wa-color-primary: #17c2ff;
--sidebar-width: 64px;
} }
html, body { html, body {
min-height: 100%; min-height: 100%;

2
layouts/base_templ.go
View File

@@ -43,7 +43,7 @@ func Base(title string) templ.Component {
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Sonr Motr Wallet</title><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/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}\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><!-- 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>")
if templ_7745c5c3_Err != nil { if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err return templ_7745c5c3_Err
} }