feat: list accounts in space overview

internal/handler/space.go

@@ -115,5 +115,25 @@ func (h *spaceHandler) SpaceOverviewPage(w http.ResponseWriter, r *http.Request)
 		return
 	}
 
-	ui.Render(w, r, pages.SpaceOverview(space.Name))
+	accounts, err := h.accountService.GetAccountsForSpace(spaceID)
+	if err != nil {
+		slog.Error("failed to fetch accounts for space", "error", err, "spaceID", spaceID)
+		ui.RenderError(w, r, "Failed to load accounts", http.StatusInternalServerError)
+		return
+	}
+
+	accountCards := make([]blocks.AccountCardInfo, 0, len(accounts))
+	for _, a := range accounts {
+		accountCards = append(accountCards, blocks.AccountCardInfo{
+			ID:      a.ID,
+			Name:    a.Name,
+			Balance: a.Balance,
+		})
+	}
+
+	ui.Render(w, r, pages.SpaceOverview(pages.SpaceOverviewProps{
+		SpaceID:   space.ID,
+		SpaceName: space.Name,
+		Accounts:  accountCards,
+	}))
 }

internal/ui/blocks/account_card.templ

@@ -0,0 +1,32 @@
+package blocks
+
+import "github.com/shopspring/decimal"
+import "strings"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+
+type AccountCardInfo struct {
+	ID      string
+	Name    string
+	Balance decimal.Decimal
+}
+
+templ AccountCard(info AccountCardInfo) {
+	<div class="px-2 py-2 block rounded-md hover:bg-sidebar-accent">
+		<div class="flex items-center justify-between">
+			<div class="flex gap-4 items-center">
+				<div class="w-10 h-10 shrink-0 overflow-hidden rounded-md bg-muted flex items-center justify-center">
+					{ strings.ToUpper(string(info.Name[0])) }
+				</div>
+				<div>
+					<p class="font-semibold">{ info.Name }</p>
+					<p class="text-xs text-muted-foreground">
+						${ info.Balance.StringFixedBank(2) }
+					</p>
+				</div>
+			</div>
+			<div class="h-full flex items-center justify-center">
+				@icon.ChevronRight()
+			</div>
+		</div>
+	</div>
+}

internal/ui/layouts/app.templ

@@ -3,6 +3,7 @@ package layouts
 import (
 	"git.juancwu.dev/juancwu/budgit/internal/ctxkeys"
 	"git.juancwu.dev/juancwu/budgit/internal/model"
+	"git.juancwu.dev/juancwu/budgit/internal/routeurl"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/blocks"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/avatar"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/breadcrumb"
@@ -11,10 +12,9 @@ import (
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/sidebar"
 	"strings"
-	"git.juancwu.dev/juancwu/budgit/internal/routeurl"
 )
 
-templ App(title string) {
+templ App(title string, sidebarContent ...templ.Component) {
 	{{ cfg := ctxkeys.Config(ctx) }}
 	@Base(SEOProps{
 		Title:       title,
@@ -41,32 +41,8 @@ templ App(title string) {
 					}
 				}
 				@sidebar.Content() {
-					@sidebar.Group() {
+					for _, content := range sidebarContent {
-						@sidebar.GroupLabel() {
+						@content
-							Overview
-						}
-						@sidebar.Menu() {
-							@sidebar.MenuItem() {
-								@sidebar.MenuButton(sidebar.MenuButtonProps{
-									Href:     routeurl.URL("page.app.spaces"),
-									IsActive: ctxkeys.URLPath(ctx) == routeurl.URL("page.app.spaces"),
-									Tooltip:  "My spaces",
-								}) {
-									@icon.User()
-									<span>My spaces</span>
-								}
-							}
-							@sidebar.MenuItem() {
-								@sidebar.MenuButton(sidebar.MenuButtonProps{
-									Href:     routeurl.URL("page.app.shared-with-me"),
-									IsActive: ctxkeys.URLPath(ctx) == routeurl.URL("page.app.shared-with-me"),
-									Tooltip:  "Shared with me",
-								}) {
-									@icon.Users()
-									<span>Shared with me</span>
-								}
-							}
-						}
 					}
 				}
 				@sidebar.Footer() {

internal/ui/pages/page_app_spaces_space_overview.templ

@@ -1,9 +0,0 @@
-package pages
-
-import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
-
-templ SpaceOverview(spaceName string) {
-	@layouts.App("Space Overview") {
-		<div>space overview: { spaceName }</div>
-	}
-}

internal/ui/pages/space_overview.templ

@@ -0,0 +1,58 @@
+package pages
+
+import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/blocks"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/sidebar"
+
+import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
+import "git.juancwu.dev/juancwu/budgit/internal/ctxkeys"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+
+type SpaceOverviewProps struct {
+	SpaceID   string
+	SpaceName string
+	Accounts  []blocks.AccountCardInfo
+}
+
+templ SpaceOverview(props SpaceOverviewProps) {
+	@layouts.App("Space Overview", 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>
+				<p class="text-muted-foreground mt-2">Space overview</p>
+			</div>
+			<div class="mb-8">
+				<h2 class="text-xl font-semibold mb-4">Accounts</h2>
+				if len(props.Accounts) == 0 {
+					<p class="text-muted-foreground text-sm">No accounts yet.</p>
+				} else {
+					<div>
+						for _, account := range props.Accounts {
+							@blocks.AccountCard(account)
+						}
+					</div>
+				}
+			</div>
+		</div>
+	}
+}
+
+templ spaceSpecificSidebarContent(spaceID string) {
+	@sidebar.Group() {
+		@sidebar.GroupLabel() {
+			Space
+		}
+		@sidebar.Menu() {
+			@sidebar.MenuItem() {
+				@sidebar.MenuButton(sidebar.MenuButtonProps{
+					Href:     routeurl.URL("page.app.spaces.space.overview", "spaceID", spaceID),
+					IsActive: ctxkeys.URLPath(ctx) == routeurl.URL("page.app.spaces.space.overview", "spaceID", spaceID),
+					Tooltip:  "Space Overview",
+				}) {
+					@icon.LayoutDashboard()
+					<span>Space Overview</span>
+				}
+			}
+		}
+	}
+}

internal/ui/pages/spaces.templ

@@ -1,13 +1,17 @@
 package pages
 
-import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+import (
-import "git.juancwu.dev/juancwu/budgit/internal/ui/blocks"
+	"git.juancwu.dev/juancwu/budgit/internal/ctxkeys"
-import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+	"git.juancwu.dev/juancwu/budgit/internal/routeurl"
-import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/blocks"
-import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/components/sidebar"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+)
 
 templ Spaces(spaces []blocks.SpaceCardInfo) {
-	@layouts.App("Spaces") {
+	@layouts.App("Spaces", spaceOverviewSidebarContent()) {
 		<div class="container px-6 py-8 mx-auto">
 			<div class="mb-8 w-full flex justify-between items-center">
 				<div>
@@ -32,3 +36,33 @@ templ Spaces(spaces []blocks.SpaceCardInfo) {
 		</div>
 	}
 }
+
+templ spaceOverviewSidebarContent() {
+	@sidebar.Group() {
+		@sidebar.GroupLabel() {
+			Overview
+		}
+		@sidebar.Menu() {
+			@sidebar.MenuItem() {
+				@sidebar.MenuButton(sidebar.MenuButtonProps{
+					Href:     routeurl.URL("page.app.spaces"),
+					IsActive: ctxkeys.URLPath(ctx) == routeurl.URL("page.app.spaces"),
+					Tooltip:  "My spaces",
+				}) {
+					@icon.User()
+					<span>My spaces</span>
+				}
+			}
+			@sidebar.MenuItem() {
+				@sidebar.MenuButton(sidebar.MenuButtonProps{
+					Href:     routeurl.URL("page.app.shared-with-me"),
+					IsActive: ctxkeys.URLPath(ctx) == routeurl.URL("page.app.shared-with-me"),
+					Tooltip:  "Shared with me",
+				}) {
+					@icon.Users()
+					<span>Shared with me</span>
+				}
+			}
+		}
+	}
+}