From a5aaced4208d4a39db51517e78c696e6c01b733b Mon Sep 17 00:00:00 2001
From: Tiago Vasconcelos <talvasconcelos@gmail.com>
Date: Sun, 8 Mar 2026 22:12:32 +0000
Subject: [PATCH] node page dialogs

---
 lnbits/templates/pages/node.vue | 271 ++++++++++++++------------------
 1 file changed, 117 insertions(+), 154 deletions(-)

diff --git a/lnbits/templates/pages/node.vue b/lnbits/templates/pages/node.vue
index 56f5acc23..fc5961c1e 100644
--- a/lnbits/templates/pages/node.vue
+++ b/lnbits/templates/pages/node.vue
@@ -103,164 +103,127 @@
               </q-card-section>
             </q-tab-panel>
             <q-tab-panel name="channels">
-              <q-dialog v-model="connectPeerDialog.show" position="top">
-                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-                  <q-form class="q-gutter-md">
-                    <q-input
-                      dense
-                      type="text"
-                      filled
-                      v-model="connectPeerDialog.data.uri"
-                      label="Node URI"
-                      hint="pubkey@host:port"
-                    ></q-input>
+              <lnbits-dialog
+                :show="connectPeerDialog.show"
+                :action="{
+                  label: $t('connect'),
+                  handler: connectPeer
+                }"
+                :cancel-label="$t('cancel')"
+                @update:model-value="connectPeerDialog.show = $event"
+              >
+                <q-form class="q-gutter-md">
+                  <q-input
+                    dense
+                    type="text"
+                    filled
+                    v-model="connectPeerDialog.data.uri"
+                    label="Node URI"
+                    hint="pubkey@host:port"
+                  ></q-input>
+                </q-form>
+              </lnbits-dialog>
 
-                    <div class="row q-mt-lg">
-                      <q-btn
-                        :label="$t('connect')"
-                        color="primary"
-                        @click="connectPeer"
-                      ></q-btn>
-                      <q-btn
-                        v-close-popup
-                        flat
-                        color="grey"
-                        class="q-ml-auto"
-                        :label="$t('cancel')"
-                      ></q-btn>
-                    </div>
-                  </q-form>
-                </q-card>
-              </q-dialog>
+              <lnbits-dialog
+                :show="setFeeDialog.show"
+                title="Set Channel Fee"
+                :action="{
+                  label: $t('set'),
+                  handler: () => setChannelFee(setFeeDialog.channel_id)
+                }"
+                :cancel-label="$t('cancel')"
+                @update:model-value="setFeeDialog.show = $event"
+              >
+                <p class="text-caption" v-text="setFeeDialog.channel_id"></p>
+                <q-separator></q-separator>
+                <q-form class="q-gutter-md">
+                  <q-input
+                    dense
+                    type="number"
+                    filled
+                    v-model.number="setFeeDialog.data.fee_ppm"
+                    label="Fee Rate PPM"
+                  ></q-input>
+                  <q-input
+                    dense
+                    type="number"
+                    filled
+                    v-model.number="setFeeDialog.data.fee_base_msat"
+                    label="Fee Base msat"
+                  ></q-input>
+                </q-form>
+              </lnbits-dialog>
 
-              <q-dialog v-model="setFeeDialog.show">
-                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-                  <label class="text-h6">Set Channel Fee</label>
-                  <p class="text-caption" v-text="setFeeDialog.channel_id"></p>
-                  <q-separator></q-separator>
-                  <q-form class="q-gutter-md">
-                    <q-input
-                      dense
-                      type="number"
-                      filled
-                      v-model.number="setFeeDialog.data.fee_ppm"
-                      label="Fee Rate PPM"
-                    ></q-input>
-                    <q-input
-                      dense
-                      type="number"
-                      filled
-                      v-model.number="setFeeDialog.data.fee_base_msat"
-                      label="Fee Base msat"
-                    ></q-input>
+              <lnbits-dialog
+                :show="openChannelDialog.show"
+                :action="{
+                  label: $t('open'),
+                  handler: openChannel
+                }"
+                :cancel-label="$t('cancel')"
+                @update:model-value="openChannelDialog.show = $event"
+              >
+                <q-form class="q-gutter-md">
+                  <q-input
+                    dense
+                    type="text"
+                    filled
+                    v-model="openChannelDialog.data.peer_id"
+                    label="Peer ID"
+                  ></q-input>
+                  <q-input
+                    dense
+                    type="number"
+                    filled
+                    v-model.number="openChannelDialog.data.funding_amount"
+                    label="Funding Amount"
+                  ></q-input>
+                  <q-expansion-item icon="warning" label="Advanced">
+                    <q-card>
+                      <q-card-section>
+                        <div class="column q-gutter-md">
+                          <q-input
+                            dense
+                            type="number"
+                            filled
+                            v-model.number="openChannelDialog.data.push_amount"
+                            label="Push Amount"
+                            hint="This gifts sats to the other side!"
+                          ></q-input>
 
-                    <div class="row q-mt-lg">
-                      <q-btn
-                        :label="$t('set')"
-                        color="primary"
-                        @click="setChannelFee(setFeeDialog.channel_id)"
-                      ></q-btn>
-                      <q-btn
-                        v-close-popup
-                        flat
-                        color="grey"
-                        class="q-ml-auto"
-                        :label="$t('cancel')"
-                      ></q-btn>
-                    </div>
-                  </q-form>
-                </q-card>
-              </q-dialog>
+                          <q-input
+                            dense
+                            type="number"
+                            filled
+                            v-model.number="openChannelDialog.data.fee_rate"
+                            label="Fee Rate"
+                          ></q-input>
+                        </div>
+                      </q-card-section>
+                    </q-card>
+                  </q-expansion-item>
+                </q-form>
+              </lnbits-dialog>
 
-              <q-dialog v-model="openChannelDialog.show">
-                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-                  <q-form class="q-gutter-md">
-                    <q-input
-                      dense
-                      type="text"
-                      filled
-                      v-model="openChannelDialog.data.peer_id"
-                      label="Peer ID"
-                    ></q-input>
-                    <q-input
-                      dense
-                      type="number"
-                      filled
-                      v-model.number="openChannelDialog.data.funding_amount"
-                      label="Funding Amount"
-                    ></q-input>
-                    <q-expansion-item icon="warning" label="Advanced">
-                      <q-card>
-                        <q-card-section>
-                          <div class="column q-gutter-md">
-                            <q-input
-                              dense
-                              type="number"
-                              filled
-                              v-model.number="
-                                openChannelDialog.data.push_amount
-                              "
-                              label="Push Amount"
-                              hint="This gifts sats to the other side!"
-                            ></q-input>
-
-                            <q-input
-                              dense
-                              type="number"
-                              filled
-                              v-model.number="openChannelDialog.data.fee_rate"
-                              label="Fee Rate"
-                            ></q-input>
-                          </div>
-                        </q-card-section>
-                      </q-card>
-                    </q-expansion-item>
-
-                    <div class="row q-mt-lg">
-                      <q-btn
-                        :label="$t('open')"
-                        color="primary"
-                        @click="openChannel"
-                      ></q-btn>
-                      <q-btn
-                        v-close-popup
-                        flat
-                        color="grey"
-                        class="q-ml-auto"
-                        :label="$t('cancel')"
-                      ></q-btn>
-                    </div>
-                  </q-form>
-                </q-card>
-              </q-dialog>
-
-              <q-dialog v-model="closeChannelDialog.show" position="top">
-                <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
-                  <q-form class="q-gutter-md">
-                    <div>
-                      <q-checkbox
-                        v-model="closeChannelDialog.data.force"
-                        label="Force"
-                      />
-                    </div>
-
-                    <div class="row q-mt-lg">
-                      <q-btn
-                        :label="$t('close')"
-                        color="primary"
-                        @click="closeChannel"
-                      ></q-btn>
-                      <q-btn
-                        v-close-popup
-                        flat
-                        color="grey"
-                        class="q-ml-auto"
-                        :label="$t('cancel')"
-                      ></q-btn>
-                    </div>
-                  </q-form>
-                </q-card>
-              </q-dialog>
+              <lnbits-dialog
+                :show="closeChannelDialog.show"
+                title="Close Channel"
+                :action="{
+                  label: $t('close'),
+                  handler: closeChannel
+                }"
+                :cancel-label="$t('cancel')"
+                @update:model-value="closeChannelDialog.show = $event"
+              >
+                <q-form class="q-gutter-md">
+                  <div>
+                    <q-checkbox
+                      v-model="closeChannelDialog.data.force"
+                      label="Force"
+                    />
+                  </div>
+                </q-form>
+              </lnbits-dialog>
 
               <q-card-section class="q-pa-none">
                 <div class="row q-col-gutter-lg">