From fec29bcc0e76c36f9ea9e8fc242ab3422fb4c395 Mon Sep 17 00:00:00 2001
From: juancwu <git@juancwu.dev>
Date: Sat, 11 Apr 2026 15:38:20 +0000
Subject: [PATCH] feat: space card for spaces list

---
 internal/handler/space.go                 |  9 +++++-
 internal/misc/currency/currency.go        |  8 +++++
 internal/{ => misc}/timezone/timezones.go |  0
 internal/ui/blocks/page_header.templ      |  8 +++++
 internal/ui/blocks/space_card.templ       | 38 +++++++++++++++++++++++
 internal/ui/pages/app_settings.templ      |  6 ++--
 internal/ui/pages/spaces.templ            | 31 ++++++++++++++++--
 7 files changed, 92 insertions(+), 8 deletions(-)
 create mode 100644 internal/misc/currency/currency.go
 rename internal/{ => misc}/timezone/timezones.go (100%)
 create mode 100644 internal/ui/blocks/page_header.templ
 create mode 100644 internal/ui/blocks/space_card.templ

diff --git a/internal/handler/space.go b/internal/handler/space.go
index 30a22d9..e6f1312 100644
--- a/internal/handler/space.go
+++ b/internal/handler/space.go
@@ -5,7 +5,9 @@ import (
 
 	"git.juancwu.dev/juancwu/budgit/internal/service"
 	"git.juancwu.dev/juancwu/budgit/internal/ui"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/blocks"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/pages"
+	"github.com/shopspring/decimal"
 )
 
 type spaceHandler struct {
@@ -17,5 +19,10 @@ func NewSpaceHandler(spaceService *service.SpaceService) *spaceHandler {
 }
 
 func (h *spaceHandler) SpacesPage(w http.ResponseWriter, r *http.Request) {
-	ui.Render(w, r, pages.Spaces())
+	ui.Render(w, r, pages.Spaces([]blocks.SpaceCardInfo{
+		{
+			ID: "test-1", Name: "My Space",
+			MemberCount: 3, TotalBalance: decimal.NewFromFloat(123.23),
+		},
+	}))
 }
diff --git a/internal/misc/currency/currency.go b/internal/misc/currency/currency.go
new file mode 100644
index 0000000..0b9ebfe
--- /dev/null
+++ b/internal/misc/currency/currency.go
@@ -0,0 +1,8 @@
+package currency
+
+type Currency string
+
+const (
+	CAD Currency = "cad"
+	USD Currency = "usd"
+)
diff --git a/internal/timezone/timezones.go b/internal/misc/timezone/timezones.go
similarity index 100%
rename from internal/timezone/timezones.go
rename to internal/misc/timezone/timezones.go
diff --git a/internal/ui/blocks/page_header.templ b/internal/ui/blocks/page_header.templ
new file mode 100644
index 0000000..e044bdb
--- /dev/null
+++ b/internal/ui/blocks/page_header.templ
@@ -0,0 +1,8 @@
+package blocks
+
+templ PageHeader(heading, subHeading string) {
+	<div class="mb-8">
+		<h1 class="text-3xl font-bold">{ heading }</h1>
+		<p class="text-muted-foreground mt-2">{ subHeading }</p>
+	</div>
+}
diff --git a/internal/ui/blocks/space_card.templ b/internal/ui/blocks/space_card.templ
new file mode 100644
index 0000000..b2b559a
--- /dev/null
+++ b/internal/ui/blocks/space_card.templ
@@ -0,0 +1,38 @@
+package blocks
+
+import "github.com/shopspring/decimal"
+import "strings"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+import "fmt"
+import "git.juancwu.dev/juancwu/budgit/internal/misc/currency"
+
+type SpaceCardInfo struct {
+	ID           string
+	Name         string
+	MemberCount  int
+	TotalBalance decimal.Decimal
+	Currency     currency.Currency
+}
+
+templ SpaceCard(info SpaceCardInfo) {
+	<a href="#" 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">
+						<span>{ info.TotalBalance.StringFixedBank(2) }</span>
+						<span>•</span>
+						<span>{ fmt.Sprintf("%d members", info.MemberCount) }</span>
+					</p>
+				</div>
+			</div>
+			<div class="h-full flex items-center justify-center">
+				@icon.ChevronRight()
+			</div>
+		</div>
+	</a>
+}
diff --git a/internal/ui/pages/app_settings.templ b/internal/ui/pages/app_settings.templ
index 01fec07..f99dfef 100644
--- a/internal/ui/pages/app_settings.templ
+++ b/internal/ui/pages/app_settings.templ
@@ -8,15 +8,13 @@ import (
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/label"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/blocks"
 )
 
 templ AppSettings(hasPassword bool, errorMsg string) {
 	@layouts.App("Settings") {
 		<div class="container max-w-2xl px-6 py-8">
-			<div class="mb-8">
-				<h1 class="text-3xl font-bold">Settings</h1>
-				<p class="text-muted-foreground mt-2">Manage your account settings</p>
-			</div>
+			@blocks.PageHeader("Settings", "Manage your account settings")
 			@card.Card() {
 				@card.Header() {
 					@card.Title() {
diff --git a/internal/ui/pages/spaces.templ b/internal/ui/pages/spaces.templ
index d2c90db..836878b 100644
--- a/internal/ui/pages/spaces.templ
+++ b/internal/ui/pages/spaces.templ
@@ -1,9 +1,34 @@
 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/button"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
+import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
 
-templ Spaces() {
-	@layouts.App("Dashboard") {
-		<div>Spaces</div>
+templ Spaces(spaces []blocks.SpaceCardInfo) {
+	@layouts.App("Spaces") {
+		<div class="container px-6 py-8">
+			<div class="mb-8 w-full flex justify-between items-center">
+				<div>
+					<h1 class="text-3xl font-bold">Spaces</h1>
+					<p class="text-muted-foreground mt-2">Manage and monitor your expenses across collaborative spaces.</p>
+				</div>
+				<div>
+					@button.Button(button.Props{
+						Class: "flex gap-2 items-center",
+						Href:  routeurl.URL("page.app.create-space"),
+					}) {
+						@icon.Plus()
+						Create space
+					}
+				</div>
+			</div>
+			<div class="">
+				for _, space := range spaces {
+					@blocks.SpaceCard(space)
+				}
+			</div>
+		</div>
 	}
 }