juancwu/budgit
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: breadcrumbs

Browse source
This commit is contained in:
juancwu 2026-05-03 18:47:43 +00:00
commit 88c8596512
11 changed files with 140 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

40
internal/handler/space.go
View file

@ -260,6 +260,13 @@ func (h *spaceHandler) SpaceAccountPage(w http.ResponseWriter, r *http.Request)
return
}
space, err := h.spaceService.GetSpace(spaceID)
if err != nil {
slog.Error("failed to load space", "error", err, "space_id", spaceID)
ui.RenderError(w, r, "Failed to load account", http.StatusInternalServerError)
return
}
recent, err := h.transactionService.ListByAccount(accountID, 5, 0)
if err != nil {
slog.Error("failed to load recent transactions", "error", err, "account_id", accountID)
@ -268,6 +275,7 @@ func (h *spaceHandler) SpaceAccountPage(w http.ResponseWriter, r *http.Request)
ui.Render(w, r, pages.SpaceAccountPage(pages.SpaceAccountPageProps{
SpaceID: spaceID,
SpaceName: space.Name,
AccountID: accountID,
AccountName: account.Name,
AccountBalance: account.Balance,
@ -290,6 +298,13 @@ func (h *spaceHandler) SpaceAccountTransactionsPage(w http.ResponseWriter, r *ht
return
}
space, err := h.spaceService.GetSpace(spaceID)
if err != nil {
slog.Error("failed to load space", "error", err, "space_id", spaceID)
ui.RenderError(w, r, "Failed to load transactions", http.StatusInternalServerError)
return
}
const perPage = 25
page := 1
if p := strings.TrimSpace(r.URL.Query().Get("page")); p != "" {
@ -323,6 +338,7 @@ func (h *spaceHandler) SpaceAccountTransactionsPage(w http.ResponseWriter, r *ht
ui.Render(w, r, pages.SpaceAccountTransactionsPage(pages.SpaceAccountTransactionsPageProps{
SpaceID: spaceID,
SpaceName: space.Name,
AccountID: accountID,
AccountName: account.Name,
Transactions: txns,
@ -450,8 +466,16 @@ func (h *spaceHandler) SpaceAccountSettingsPage(w http.ResponseWriter, r *http.R
return
}
space, err := h.spaceService.GetSpace(spaceID)
if err != nil {
slog.Error("failed to load space", "error", err, "space_id", spaceID)
ui.RenderError(w, r, "Failed to load account settings", http.StatusInternalServerError)
return
}
ui.Render(w, r, pages.SpaceAccountSettingsPage(pages.SpaceAccountSettingsPageProps{
SpaceID: spaceID,
SpaceName: space.Name,
AccountID: accountID,
AccountName: account.Name,
UpdateForm: forms.UpdateAccountProps{
@ -559,8 +583,16 @@ func (h *spaceHandler) SpaceCreateBillPage(w http.ResponseWriter, r *http.Reques
return
}
space, err := h.spaceService.GetSpace(spaceID)
if err != nil {
slog.Error("failed to load space", "error", err, "space_id", spaceID)
ui.RenderError(w, r, "Failed to load page", http.StatusInternalServerError)
return
}
ui.Render(w, r, pages.SpaceCreateBillPage(pages.SpaceCreateBillPageProps{
SpaceID: spaceID,
SpaceName: space.Name,
AccountID: accountID,
AccountName: account.Name,
Form: forms.CreateBillProps{
@ -587,8 +619,16 @@ func (h *spaceHandler) SpaceCreateDepositPage(w http.ResponseWriter, r *http.Req
return
}
space, err := h.spaceService.GetSpace(spaceID)
if err != nil {
slog.Error("failed to load space", "error", err, "space_id", spaceID)
ui.RenderError(w, r, "Failed to load page", http.StatusInternalServerError)
return
}
ui.Render(w, r, pages.SpaceCreateDepositPage(pages.SpaceCreateDepositPageProps{
SpaceID: spaceID,
SpaceName: space.Name,
AccountID: accountID,
AccountName: account.Name,
Form: forms.CreateDepositProps{

28
internal/ui/layouts/app.templ
View file

@ -15,6 +15,12 @@ import (
)
templ App(title string, sidebarContent ...templ.Component) {
@AppWithBreadcrumb(title, defaultBreadcrumb(title), sidebarContent...) {
{ children... }
}
}
templ AppWithBreadcrumb(title string, breadcrumbContent templ.Component, sidebarContent ...templ.Component) {
{{ cfg := ctxkeys.Config(ctx) }}
@Base(SEOProps{
Title: title,
@ -80,15 +86,7 @@ templ App(title string, sidebarContent ...templ.Component) {
<div class="flex h-14 items-center px-6">
<div class="flex items-center gap-4">
@sidebar.Trigger()
@breadcrumb.Breadcrumb() {
@breadcrumb.List() {
@breadcrumb.Item() {
@breadcrumb.Page() {
{ title }
}
}
}
}
@breadcrumbContent
</div>
<div class="ml-auto flex items-center gap-4">
{{ user := ctxkeys.User(ctx) }}
@ -107,6 +105,18 @@ templ App(title string, sidebarContent ...templ.Component) {
}
}
templ defaultBreadcrumb(title string) {
@breadcrumb.Breadcrumb() {
@breadcrumb.List() {
@breadcrumb.Item() {
@breadcrumb.Page() {
{ title }
}
}
}
}
}
templ AppAccountDropdown(user *model.User) {
{{ displayName := user.Email }}
{{

64
internal/ui/pages/breadcrumbs.templ Normal file
View file

@ -0,0 +1,64 @@
package pages
import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
import "git.juancwu.dev/juancwu/budgit/internal/ui/components/breadcrumb"
templ spaceLeafBreadcrumb(spaceName string) {
@breadcrumb.Breadcrumb() {
@breadcrumb.List() {
@breadcrumb.Item() {
@breadcrumb.Page() {
{ spaceName }
}
}
}
}
}
templ spaceChildBreadcrumb(spaceID, spaceName, leaf string) {
@breadcrumb.Breadcrumb() {
@breadcrumb.List() {
@breadcrumb.Item() {
@breadcrumb.Link(breadcrumb.LinkProps{
Href: routeurl.URL("page.app.spaces.space.overview", "spaceID", spaceID),
}) {
{ spaceName }
}
}
@breadcrumb.Separator()
@breadcrumb.Item() {
@breadcrumb.Page() {
{ leaf }
}
}
}
}
}
templ accountChildBreadcrumb(spaceID, spaceName, accountID, accountName, leaf string) {
@breadcrumb.Breadcrumb() {
@breadcrumb.List() {
@breadcrumb.Item() {
@breadcrumb.Link(breadcrumb.LinkProps{
Href: routeurl.URL("page.app.spaces.space.overview", "spaceID", spaceID),
}) {
{ spaceName }
}
}
@breadcrumb.Separator()
@breadcrumb.Item() {
@breadcrumb.Link(breadcrumb.LinkProps{
Href: routeurl.URL("page.app.spaces.space.accounts.account.overview", "spaceID", spaceID, "accountID", accountID),
}) {
{ accountName }
}
}
@breadcrumb.Separator()
@breadcrumb.Item() {
@breadcrumb.Page() {
{ leaf }
}
}
}
}
}

3
internal/ui/pages/space_account.templ
View file

@ -12,6 +12,7 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/utils"
type SpaceAccountPageProps struct {
SpaceID string
SpaceName string
AccountID string
AccountName string
AccountBalance decimal.Decimal
@ -27,7 +28,7 @@ templ SpaceAccountPage(props SpaceAccountPageProps) {
balanceTextClasses = append(balanceTextClasses, "text-red-600 dark:text-red-400")
}
}}
@layouts.App("Space Account", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID, props.AccountName)) {
@layouts.AppWithBreadcrumb("Space Account", accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Overview"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID)) {
<div class="container px-6 py-8 mx-auto space-y-8">
<div class="grid gap-4 grid-cols-1 md:grid-cols-12">
@card.Card(card.Props{

6
internal/ui/pages/space_account_settings.templ
View file

@ -10,17 +10,19 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
type SpaceAccountSettingsPageProps struct {
SpaceID string
SpaceName string
AccountID string
AccountName string
UpdateForm forms.UpdateAccountProps
}
templ SpaceAccountSettingsPage(props SpaceAccountSettingsPageProps) {
@layouts.App(
@layouts.AppWithBreadcrumb(
"Account Settings",
accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Settings"),
spaceOverviewSidebarContent(),
spaceSpecificSidebarContent(props.SpaceID),
spaceAccountSidebarContent(props.SpaceID, props.AccountID, props.AccountName),
spaceAccountSidebarContent(props.SpaceID, props.AccountID),
) {
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
<div>

3
internal/ui/pages/space_account_transactions.templ
View file

@ -12,6 +12,7 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/components/pagination"
type SpaceAccountTransactionsPageProps struct {
SpaceID string
SpaceName string
AccountID string
AccountName string
Transactions []*model.Transaction
@ -22,7 +23,7 @@ type SpaceAccountTransactionsPageProps struct {
}
templ SpaceAccountTransactionsPage(props SpaceAccountTransactionsPageProps) {
@layouts.App("Transactions", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID, props.AccountName)) {
@layouts.AppWithBreadcrumb("Transactions", accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Transactions"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID)) {
<div class="container px-6 py-8 mx-auto space-y-8">
<div class="flex items-start justify-between flex-wrap gap-4">
<div>

2
internal/ui/pages/space_create_account.templ
View file

@ -10,7 +10,7 @@ type SpaceCreateAccountPageProps struct {
}
templ SpaceCreateAccountPage(props SpaceCreateAccountPageProps) {
@layouts.App("Create Account", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
@layouts.AppWithBreadcrumb("Create Account", spaceChildBreadcrumb(props.SpaceID, props.SpaceName, "Create Account"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
<div>
<h1 class="text-3xl font-bold">Create Account</h1>

3
internal/ui/pages/space_create_bill.templ
View file

@ -5,13 +5,14 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
type SpaceCreateBillPageProps struct {
SpaceID string
SpaceName string
AccountID string
AccountName string
Form forms.CreateBillProps
}
templ SpaceCreateBillPage(props SpaceCreateBillPageProps) {
@layouts.App("Pay Bills", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID, props.AccountName)) {
@layouts.AppWithBreadcrumb("Pay Bills", accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Pay Bills"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID)) {
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
<div>
<h1 class="text-3xl font-bold">Pay Bills</h1>

3
internal/ui/pages/space_create_deposit.templ
View file

@ -5,13 +5,14 @@ import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
type SpaceCreateDepositPageProps struct {
SpaceID string
SpaceName string
AccountID string
AccountName string
Form forms.CreateDepositProps
}
templ SpaceCreateDepositPage(props SpaceCreateDepositPageProps) {
@layouts.App("Deposit Funds", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID, props.AccountName)) {
@layouts.AppWithBreadcrumb("Deposit Funds", accountChildBreadcrumb(props.SpaceID, props.SpaceName, props.AccountID, props.AccountName, "Deposit Funds"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID), spaceAccountSidebarContent(props.SpaceID, props.AccountID)) {
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
<div>
<h1 class="text-3xl font-bold">Deposit Funds</h1>

6
internal/ui/pages/space_overview.templ
View file

@ -16,7 +16,7 @@ type SpaceOverviewProps struct {
}
templ SpaceOverview(props SpaceOverviewProps) {
@layouts.App("Space Overview", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
@layouts.AppWithBreadcrumb("Space Overview", spaceLeafBreadcrumb(props.SpaceName), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
<div class="container px-6 py-8 mx-auto">
<div class="mb-8">
<h1 class="text-3xl font-bold">{ props.SpaceName }</h1>
@ -78,10 +78,10 @@ templ spaceSpecificSidebarContent(spaceID string) {
}
}
templ spaceAccountSidebarContent(spaceID, accountID, accountName string) {
templ spaceAccountSidebarContent(spaceID, accountID string) {
@sidebar.Group() {
@sidebar.GroupLabel() {
{ accountName }
Account
}
@sidebar.Menu() {
@sidebar.MenuItem() {

2
internal/ui/pages/space_settings.templ
View file

@ -16,7 +16,7 @@ type SpaceSettingsPageProps struct {
}
templ SpaceSettingsPage(props SpaceSettingsPageProps) {
@layouts.App("Space Settings", spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
@layouts.AppWithBreadcrumb("Space Settings", spaceChildBreadcrumb(props.SpaceID, props.SpaceName, "Settings"), spaceOverviewSidebarContent(), spaceSpecificSidebarContent(props.SpaceID)) {
<div class="container max-w-3xl px-6 py-8 mx-auto space-y-8">
<div>
<h1 class="text-3xl font-bold">Space Settings</h1>