feat: create accounts

internal/ui/pages/space_create_account.templ

@@ -0,0 +1,24 @@
+package pages
+
+import "git.juancwu.dev/juancwu/budgit/internal/ui/forms"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+
+type SpaceCreateAccountPageProps struct {
+	SpaceID   string
+	SpaceName string
+	Form      forms.CreateAccountProps
+}
+
+templ SpaceCreateAccountPage(props SpaceCreateAccountPageProps) {
+	@layouts.App("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>
+				<p class="text-muted-foreground mt-2">
+					Add a new account to { props.SpaceName }.
+				</p>
+			</div>
+			@forms.CreateAccount(props.Form)
+		</div>
+	}
+}

internal/ui/pages/space_overview.templ

@@ -2,6 +2,7 @@ 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/sidebar"
 
 import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
@@ -22,9 +23,19 @@ templ SpaceOverview(props SpaceOverviewProps) {
 				<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>
+				<div class="flex items-center justify-between mb-4">
+					<h2 class="text-xl font-semibold">Accounts</h2>
+					@button.Button(button.Props{
+						Variant: button.VariantDefault,
+						Href:    routeurl.URL("page.app.spaces.space.accounts.create", "spaceID", props.SpaceID),
+						Class:   "flex gap-2 items-center",
+					}) {
+						@icon.Plus()
+						New Account
+					}
+				</div>
 				if len(props.Accounts) == 0 {
-					<p class="text-muted-foreground text-sm">No accounts yet.</p>
+					<p class="text-muted-foreground text-sm">No accounts yet. Create one to get started.</p>
 				} else {
 					<div>
 						for _, account := range props.Accounts {