From 8cb45b3fdf79631fcba469b6a3527cd1f27f7b18 Mon Sep 17 00:00:00 2001 From: Prad Nukala Date: Mon, 5 Jan 2026 16:17:24 -0500 Subject: [PATCH] refactor(ui): migrate to new topbar component --- components/navbar.templ | 200 +++++++++++++++---------------------- components/navbar_templ.go | 180 ++++++--------------------------- layouts/app.templ | 66 +++++++----- layouts/app_templ.go | 49 +++++---- layouts/base.templ | 4 + layouts/base_templ.go | 2 +- 6 files changed, 190 insertions(+), 311 deletions(-) diff --git a/components/navbar.templ b/components/navbar.templ index ddde2ac..0094e24 100644 --- a/components/navbar.templ +++ b/components/navbar.templ @@ -26,23 +26,13 @@ type NavUser struct { 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 type NavContext struct { User NavUser Blockchains []Blockchain Accounts []Account - Tabs []NavTab SelectedChainID string SelectedAccountID string - ActiveTab string } // 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 func DefaultNavContext() NavContext { return NavContext{ User: NavUser{Name: "Sonr Wallet", Address: "sonr1x9f...7k2m"}, Blockchains: DefaultBlockchains(), Accounts: DefaultAccounts(), - Tabs: DashboardTabs(""), SelectedChainID: "sonr", SelectedAccountID: "main", - ActiveTab: "overview", } } @@ -109,24 +86,21 @@ func getSelectedAccountName(accounts []Account, id string) string { return "Account" } -// AppHeader renders the header section for wa-page header slot -templ AppHeader(navCtx NavContext) { -
-
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 22, "\" style=\"--size:32px;cursor:pointer;\">
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } var templ_7745c5c3_Var17 string templ_7745c5c3_Var17, templ_7745c5c3_Err = templ.JoinStringErrs(navCtx.User.Name) 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)) if templ_7745c5c3_Err != nil { @@ -388,13 +365,13 @@ func AppHeader(navCtx NavContext) templ.Component { var templ_7745c5c3_Var18 string templ_7745c5c3_Var18, templ_7745c5c3_Err = templ.JoinStringErrs(navCtx.User.Address) 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)) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, "
Settings Sign Out
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 24, " Connections Devices Settings Sign Out") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -402,8 +379,8 @@ func AppHeader(navCtx NavContext) templ.Component { }) } -// AppSubheader renders the tabs section for wa-page subheader slot -func AppSubheader(tabs []NavTab) templ.Component { +// TopBarStyles renders the CSS for the top bar +func TopBarStyles() 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 { @@ -424,104 +401,7 @@ func AppSubheader(tabs []NavTab) templ.Component { templ_7745c5c3_Var19 = templ.NopComponent } ctx = templ.ClearChildren(ctx) - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "") - 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, "") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 25, "") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/layouts/app.templ b/layouts/app.templ index a740071..dc728c9 100644 --- a/layouts/app.templ +++ b/layouts/app.templ @@ -7,43 +7,63 @@ type WalletUser struct { 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) { @Base(title) { - @components.AppNavStyles() - - @components.AppHeader(components.NavContext{ + @components.SidebarStyles() + @components.TopBarStyles() + + @components.Sidebar( + components.DefaultSidebarItems(activeTab), + components.SecondarySidebarItems(), + ) + +
+ + @components.TopBar(components.NavContext{ User: components.NavUser{Name: user.Name, Address: user.Address}, Blockchains: components.DefaultBlockchains(), Accounts: components.DefaultAccounts(), - Tabs: components.DashboardTabs(activeTab), SelectedChainID: "sonr", SelectedAccountID: "main", - ActiveTab: activeTab, }) - @components.AppSubheader(components.DashboardTabs(activeTab)) -
+ +
{ children... }
- +
+ } } -// 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) { @Base(title) { - @components.AppNavStyles() - - @components.AppHeader(components.NavContext{ - User: components.NavUser{Name: user.Name, Address: user.Address}, - Blockchains: components.DefaultBlockchains(), - Accounts: components.DefaultAccounts(), - SelectedChainID: "sonr", - SelectedAccountID: "main", - }) -
- { children... } -
- + @components.TopBarStyles() + + @components.TopBar(components.NavContext{ + User: components.NavUser{Name: user.Name, Address: user.Address}, + Blockchains: components.DefaultBlockchains(), + Accounts: components.DefaultAccounts(), + SelectedChainID: "sonr", + SelectedAccountID: "main", + }) + +
+ { children... } +
+ } } diff --git a/layouts/app_templ.go b/layouts/app_templ.go index 87cf2e6..19fc113 100644 --- a/layouts/app_templ.go +++ b/layouts/app_templ.go @@ -15,7 +15,7 @@ type WalletUser struct { 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 { 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,31 +49,44 @@ func DashboardLayout(title string, user WalletUser, activeTab string) templ.Comp }() } 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 { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, " ") if templ_7745c5c3_Err != nil { 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, " ") + 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, "
") + 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(), - Tabs: components.DashboardTabs(activeTab), SelectedChainID: "sonr", SelectedAccountID: "main", - ActiveTab: activeTab, }).Render(ctx, templ_7745c5c3_Buffer) if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } - templ_7745c5c3_Err = components.AppSubheader(components.DashboardTabs(activeTab)).Render(ctx, templ_7745c5c3_Buffer) - if templ_7745c5c3_Err != nil { - return templ_7745c5c3_Err - } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -81,7 +94,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, 3, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 5, "
") if templ_7745c5c3_Err != nil { 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 { 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 @@ -129,15 +142,15 @@ func AppLayout(title string, user WalletUser) templ.Component { }() } 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 { return templ_7745c5c3_Err } - templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 4, " ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 6, " ") if templ_7745c5c3_Err != nil { 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}, Blockchains: components.DefaultBlockchains(), Accounts: components.DefaultAccounts(), @@ -147,7 +160,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, 5, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 7, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } @@ -155,7 +168,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, 6, "
") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 8, "
") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err } diff --git a/layouts/base.templ b/layouts/base.templ index 9f8fca3..b9aa000 100644 --- a/layouts/base.templ +++ b/layouts/base.templ @@ -8,12 +8,16 @@ templ Base(title string) { { title } - Sonr Motr Wallet + + + ") + templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 2, " - Sonr Motr Wallet") if templ_7745c5c3_Err != nil { return templ_7745c5c3_Err }