From 4bd83d6937b685be81c6549a37fa529d4baff00d Mon Sep 17 00:00:00 2001
From: padreug <padreug@aiolabs.dev>
Date: Wed, 22 Oct 2025 13:10:33 +0200
Subject: [PATCH] Enhances expense and pay dialogs

Improves the UI of the "Add Expense" and "Pay Balance" dialogs by using `q-input` and `q-select` components with `filled` and `dense` properties.

This provides a cleaner and more modern look and feel.
Ensures dialog content is only rendered when the dialog is visible.
---
 templates/castle/index.html | 166 +++++++++++++++++++-----------------
 1 file changed, 90 insertions(+), 76 deletions(-)

diff --git a/templates/castle/index.html b/templates/castle/index.html
index 4b7e57e..ed3cbf7 100644
--- a/templates/castle/index.html
+++ b/templates/castle/index.html
@@ -46,7 +46,7 @@
           </q-btn>
         </div>
         <div v-else>
-          <q-spinner color="primary" size="md" />
+          <q-spinner color="primary" size="md"></q-spinner>
           Loading balance...
         </div>
       </q-card-section>
@@ -114,7 +114,7 @@
           </q-item>
         </q-list>
         <div v-else>
-          <q-spinner color="primary" size="sm" />
+          <q-spinner color="primary" size="sm"></q-spinner>
           Loading accounts...
         </div>
       </q-card-section>
@@ -124,85 +124,99 @@
 
 <!-- Add Expense Dialog -->
 <q-dialog v-model="expenseDialog.show" position="top">
-  <q-card class="q-pa-lg lnbits__dialog-card">
-    <q-card-section>
-      <h6 class="q-my-none q-mb-md">Add Expense</h6>
-      <q-form @submit="submitExpense" class="q-gutter-md">
-        <q-input
-          v-model="expenseDialog.description"
-          label="Description"
-          placeholder="e.g., Groceries for the house"
-          required
-        />
-        <q-input
-          v-model.number="expenseDialog.amount"
-          type="number"
-          label="Amount (sats)"
-          required
-          min="1"
-        />
-        <q-select
-          v-model="expenseDialog.expenseAccount"
-          :options="expenseAccounts"
-          option-label="name"
-          option-value="id"
-          emit-value
-          map-options
-          label="Expense Category"
-          required
-        />
-        <q-select
-          v-model="expenseDialog.isEquity"
-          :options="[
-            {label: 'Liability (Castle owes me)', value: false},
-            {label: 'Equity (My contribution)', value: true}
-          ]"
-          option-label="label"
-          option-value="value"
-          emit-value
-          map-options
-          label="Type"
-          required
-        />
-        <q-input
-          v-model="expenseDialog.reference"
-          label="Reference (optional)"
-          placeholder="e.g., Receipt #123"
-        />
-        <div class="row q-mt-lg">
-          <q-btn unelevated color="primary" type="submit" :loading="expenseDialog.loading">
-            Submit Expense
-          </q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
-        </div>
-      </q-form>
-    </q-card-section>
+  <q-card v-if="expenseDialog.show" class="q-pa-lg q-pt-xl lnbits__dialog-card">
+    <q-form @submit="submitExpense" class="q-gutter-md">
+      <div class="text-h6 q-mb-md">Add Expense</div>
+
+      <q-input
+        filled
+        dense
+        v-model.trim="expenseDialog.description"
+        label="Description *"
+        placeholder="e.g., Groceries for the house"
+      ></q-input>
+
+      <q-input
+        filled
+        dense
+        v-model.number="expenseDialog.amount"
+        type="number"
+        label="Amount (sats) *"
+        min="1"
+      ></q-input>
+
+      <q-select
+        filled
+        dense
+        v-model="expenseDialog.expenseAccount"
+        :options="expenseAccounts"
+        option-label="name"
+        option-value="id"
+        emit-value
+        map-options
+        label="Expense Category *"
+      ></q-select>
+
+      <q-select
+        filled
+        dense
+        v-model="expenseDialog.isEquity"
+        :options="[
+          {label: 'Liability (Castle owes me)', value: false},
+          {label: 'Equity (My contribution)', value: true}
+        ]"
+        option-label="label"
+        option-value="value"
+        emit-value
+        map-options
+        label="Type *"
+      ></q-select>
+
+      <q-input
+        filled
+        dense
+        v-model.trim="expenseDialog.reference"
+        label="Reference (optional)"
+        placeholder="e.g., Receipt #123"
+      ></q-input>
+
+      <div class="row q-mt-lg">
+        <q-btn unelevated color="primary" type="submit" :loading="expenseDialog.loading">
+          Submit Expense
+        </q-btn>
+        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+      </div>
+    </q-form>
   </q-card>
 </q-dialog>
 
 <!-- Pay Balance Dialog -->
 <q-dialog v-model="payDialog.show" position="top">
-  <q-card class="q-pa-lg lnbits__dialog-card">
-    <q-card-section>
-      <h6 class="q-my-none q-mb-md">Pay Balance</h6>
-      <p v-if="balance">Amount owed: <strong>{% raw %}{{ formatSats(Math.abs(balance.balance)) }}{% endraw %} sats</strong></p>
-      <q-form @submit="submitPayment" class="q-gutter-md">
-        <q-input
-          v-model.number="payDialog.amount"
-          type="number"
-          label="Amount to pay (sats)"
-          required
-          min="1"
-          :max="balance ? Math.abs(balance.balance) : 0"
-        />
-        <div class="row q-mt-lg">
-          <q-btn unelevated color="primary" type="submit" :loading="payDialog.loading">
-            Generate Invoice
-          </q-btn>
-          <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
-        </div>
-      </q-form>
-    </q-card-section>
+  <q-card v-if="payDialog.show" class="q-pa-lg q-pt-xl lnbits__dialog-card">
+    <q-form @submit="submitPayment" class="q-gutter-md">
+      <div class="text-h6 q-mb-md">Pay Balance</div>
+
+      <div v-if="balance" class="q-mb-md">
+        Amount owed: <strong>{% raw %}{{ formatSats(Math.abs(balance.balance)) }}{% endraw %} sats</strong>
+      </div>
+
+      <q-input
+        filled
+        dense
+        v-model.number="payDialog.amount"
+        type="number"
+        label="Amount to pay (sats) *"
+        min="1"
+        :max="balance ? Math.abs(balance.balance) : 0"
+      ></q-input>
+
+      <div class="row q-mt-lg">
+        <q-btn unelevated color="primary" type="submit" :loading="payDialog.loading">
+          Generate Invoice
+        </q-btn>
+        <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
+      </div>
+    </q-form>
   </q-card>
 </q-dialog>