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

@@ -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,34 +124,42 @@
 
 <!-- Add Expense Dialog -->
 <q-dialog v-model="expenseDialog.show" position="top">
-  <q-card class="q-pa-lg lnbits__dialog-card">
+  <q-card v-if="expenseDialog.show" class="q-pa-lg q-pt-xl 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">
+      <div class="text-h6 q-mb-md">Add Expense</div>
+
       <q-input
-          v-model="expenseDialog.description"
+        filled
-          label="Description"
+        dense
+        v-model.trim="expenseDialog.description"
+        label="Description *"
         placeholder="e.g., Groceries for the house"
-          required
+      ></q-input>
-        />
+
       <q-input
+        filled
+        dense
         v-model.number="expenseDialog.amount"
         type="number"
-          label="Amount (sats)"
+        label="Amount (sats) *"
-          required
         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"
+        label="Expense Category *"
-          required
+      ></q-select>
-        />
+
       <q-select
+        filled
+        dense
         v-model="expenseDialog.isEquity"
         :options="[
           {label: 'Liability (Castle owes me)', value: false},
@@ -161,14 +169,17 @@
         option-value="value"
         emit-value
         map-options
-          label="Type"
+        label="Type *"
-          required
+      ></q-select>
-        />
+
       <q-input
-          v-model="expenseDialog.reference"
+        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
@@ -176,25 +187,29 @@
         <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
       </div>
     </q-form>
-    </q-card-section>
   </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 v-if="payDialog.show" class="q-pa-lg q-pt-xl 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">
+      <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)"
+        label="Amount to pay (sats) *"
-          required
         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
@@ -202,7 +217,6 @@
         <q-btn v-close-popup flat color="grey" class="q-ml-auto">Cancel</q-btn>
       </div>
     </q-form>
-    </q-card-section>
   </q-card>
 </q-dialog>