feat: create accounts

internal/ui/forms/create_account.templ

@@ -0,0 +1,68 @@
+package forms
+
+import "git.juancwu.dev/juancwu/budgit/internal/routeurl"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/card"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/form"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/input"
+
+type CreateAccountProps struct {
+	SpaceID string
+
+	Name string
+
+	NameErr    string
+	GeneralErr string
+}
+
+templ CreateAccount(props CreateAccountProps) {
+	<form hx-post={ routeurl.URL("action.app.spaces.space.accounts.create", "spaceID", props.SpaceID) }>
+		@card.Card(card.Props{Class: "rounded-sm"}) {
+			@card.Content(card.ContentProps{Class: "p-4 space-y-4"}) {
+				if props.GeneralErr != "" {
+					@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
+						{ props.GeneralErr }
+					}
+				}
+				@form.Item() {
+					@form.Label(form.LabelProps{For: "name"}) {
+						Account Name
+					}
+					@input.Input(input.Props{
+						ID:          "name",
+						Name:        "name",
+						Type:        input.TypeText,
+						Placeholder: "e.g. Checking",
+						Class:       "rounded-sm",
+						Value:       props.Name,
+						HasError:    props.NameErr != "",
+						Required:    true,
+						Attributes: templ.Attributes{
+							"autocomplete": "off",
+							"autofocus":    "",
+						},
+					})
+					if props.NameErr != "" {
+						@form.Message(form.MessageProps{Variant: form.MessageVariantError}) {
+							{ props.NameErr }
+						}
+					}
+					@form.Description() {
+						You can rename the account later. Starts with a $0.00 balance.
+					}
+				}
+			}
+			@card.Footer(card.FooterProps{Class: "flex justify-end gap-2"}) {
+				@button.Button(button.Props{
+					Variant: button.VariantGhost,
+					Href:    routeurl.URL("page.app.spaces.space.overview", "spaceID", props.SpaceID),
+				}) {
+					Cancel
+				}
+				@button.Button(button.Props{Type: button.TypeSubmit}) {
+					Create Account
+				}
+			}
+		}
+	</form>
+}

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 {