chore: refactor add expense dialog to its own ui block

internal/ui/blocks/dialogs/add_transaction.templ

@@ -0,0 +1,33 @@
+package dialogs
+
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/dialog"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/button"
+import "git.juancwu.dev/juancwu/budgit/internal/ui/components/expense"
+import "git.juancwu.dev/juancwu/budgit/internal/model"
+
+templ AddTransaction(space *model.Space, tags []*model.Tag, listsWithItems []model.ListWithUncheckedItems, methods []*model.PaymentMethod) {
+	@dialog.Dialog(dialog.Props{ID: "add-transaction-dialog"}) {
+		@dialog.Trigger() {
+			@button.Button() {
+				Add Transaction
+			}
+		}
+		@dialog.Content() {
+			@dialog.Header() {
+				@dialog.Title() {
+					Add Transaction
+				}
+				@dialog.Description() {
+					Add a new expense or top-up to your space.
+				}
+			}
+			@expense.AddExpenseForm(expense.AddExpenseFormProps{
+				Space:          space,
+				Tags:           tags,
+				ListsWithItems: listsWithItems,
+				PaymentMethods: methods,
+				DialogID:       "add-transaction-dialog",
+			})
+		}
+	}
+}

internal/ui/pages/app_space_expenses.templ

@@ -11,6 +11,7 @@ import (
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/icon"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/components/pagination"
 	"git.juancwu.dev/juancwu/budgit/internal/ui/layouts"
+	"git.juancwu.dev/juancwu/budgit/internal/ui/blocks/dialogs"
 )
 
 templ SpaceExpensesPage(space *model.Space, expenses []*model.ExpenseWithTagsAndMethod, balance int, allocated int, tags []*model.Tag, listsWithItems []model.ListWithUncheckedItems, methods []*model.PaymentMethod, currentPage, totalPages int) {
@@ -18,30 +19,7 @@ templ SpaceExpensesPage(space *model.Space, expenses []*model.ExpenseWithTagsAnd
 		<div class="space-y-4">
 			<div class="flex justify-between items-center">
 				<h1 class="text-2xl font-bold">Expenses</h1>
-				@dialog.Dialog(dialog.Props{ID: "add-expense-dialog"}) {
+				@dialogs.AddTransaction(space, tags, listsWithItems, methods)
-					@dialog.Trigger() {
-						@button.Button() {
-							Add Expense
-						}
-					}
-					@dialog.Content() {
-						@dialog.Header() {
-							@dialog.Title() {
-								Add Transaction
-							}
-							@dialog.Description() {
-								Add a new expense or top-up to your space.
-							}
-						}
-						@expense.AddExpenseForm(expense.AddExpenseFormProps{
-							Space:          space,
-							Tags:           tags,
-							ListsWithItems: listsWithItems,
-							PaymentMethods: methods,
-							DialogID:       "add-expense-dialog",
-						})
-					}
-				}
 			</div>
 			// Balance Card
 			@expense.BalanceCard(space.ID, balance, allocated, false)