From 8f4c32b93f050db5754ccf0040147c3aff88aacd Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Wed, 22 Jul 2026 19:08:38 -0400
Subject: [PATCH] =?UTF-8?q?feat(ui):=20modal=20contract=20=E2=80=94=20pinn?=
 =?UTF-8?q?ed=20title+tabs,=20scrolling=20middle,=20pinned=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BaseModal becomes a flex column: title row and the new #header slot
(tabs) stay fixed at the top, #footer (action buttons) fixed at the
bottom, only the default slot scrolls (default max-h 90vh unless the
caller sets one). Wallet Settings migrates: tabs pinned, four duplicated
in-pane Close rows collapse into one pinned footer that carries the
active tab's primary action.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 neode-ui/src/components/BaseModal.vue         | 28 ++++++-
 .../src/components/WalletSettingsModal.vue    | 84 +++++++++----------
 2 files changed, 63 insertions(+), 49 deletions(-)

diff --git a/neode-ui/src/components/BaseModal.vue b/neode-ui/src/components/BaseModal.vue
index 2815b1bf..49a1f21e 100644
--- a/neode-ui/src/components/BaseModal.vue
+++ b/neode-ui/src/components/BaseModal.vue
@@ -8,10 +8,16 @@
         @click.self="close"
       >
         <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
+        <!-- Column layout (2026-07-22 modal contract): title row and the
+             optional #header slot (tabs) stay pinned at the top, the #footer
+             slot (action buttons) stays pinned at the bottom, and ONLY the
+             default slot scrolls. Callers that previously made the whole
+             card scroll via contentClass keep working — the inner region
+             simply never lets the card overflow. -->
         <div
           ref="modalRef"
-          class="glass-card p-6 w-full relative z-10"
-          :class="[maxWidth, contentClass]"
+          class="glass-card p-6 w-full relative z-10 flex flex-col"
+          :class="[maxWidth, contentClass, defaultMaxH]"
           role="dialog"
           aria-modal="true"
           @click.stop
@@ -28,8 +34,15 @@
               </svg>
             </button>
           </div>
-          <slot />
-          <slot name="footer" />
+          <div v-if="$slots.header" class="shrink-0">
+            <slot name="header" />
+          </div>
+          <div class="flex-1 min-h-0 overflow-y-auto">
+            <slot />
+          </div>
+          <div v-if="$slots.footer" class="shrink-0 pt-4">
+            <slot name="footer" />
+          </div>
         </div>
       </div>
     </Transition>
@@ -60,6 +73,13 @@ const emit = defineEmits<{
 const modalRef = ref<HTMLElement | null>(null)
 
 const zClass = computed(() => props.zIndex)
+// The pinned-footer layout needs a height bound or tall content pushes the
+// footer off-screen anyway. Callers that set their own max-h (e.g. the
+// Transactions modal's visual-viewport calc on mobile) keep authority —
+// adding a second max-h class would make the CSS winner order-dependent.
+const defaultMaxH = computed(() =>
+  props.contentClass.includes('max-h-') ? '' : 'max-h-[90vh]'
+)
 
 function close() {
   emit('close')
diff --git a/neode-ui/src/components/WalletSettingsModal.vue b/neode-ui/src/components/WalletSettingsModal.vue
index 580108bc..a9519d75 100644
--- a/neode-ui/src/components/WalletSettingsModal.vue
+++ b/neode-ui/src/components/WalletSettingsModal.vue
@@ -1,15 +1,18 @@
 <template>
-  <BaseModal :show="show" title="Wallet Settings" max-width="max-w-2xl" content-class="max-h-[90vh] overflow-y-auto" @close="close">
-    <!-- Protocol tabs -->
-    <div class="flex gap-1 mb-4 p-1 bg-white/5 rounded-lg">
-      <button
-        v-for="tab in tabs"
-        :key="tab.key"
-        @click="activeTab = tab.key"
-        class="flex-1 px-2 py-1.5 rounded text-xs font-medium transition-colors"
-        :class="activeTab === tab.key ? 'bg-white/15 text-white' : 'text-white/50 hover:text-white/80'"
-      >{{ tab.label }}</button>
-    </div>
+  <BaseModal :show="show" title="Wallet Settings" max-width="max-w-2xl" content-class="max-h-[90vh]" @close="close">
+    <!-- Protocol tabs — pinned via the header slot; only the pane below
+         scrolls (2026-07-22 modal contract). -->
+    <template #header>
+      <div class="flex gap-1 mb-4 p-1 bg-white/5 rounded-lg">
+        <button
+          v-for="tab in tabs"
+          :key="tab.key"
+          @click="activeTab = tab.key"
+          class="flex-1 px-2 py-1.5 rounded text-xs font-medium transition-colors"
+          :class="activeTab === tab.key ? 'bg-white/15 text-white' : 'text-white/50 hover:text-white/80'"
+        >{{ tab.label }}</button>
+      </div>
+    </template>
 
     <!-- ===================== Lightning Channels ===================== -->
     <div v-show="activeTab === 'channels'">
@@ -17,9 +20,6 @@
         Lightning channels on this node. Open a channel to a peer to send and receive Lightning payments.
       </p>
       <LightningChannelsPanel v-if="show" compact />
-      <div class="flex gap-3 mt-4">
-        <button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
-      </div>
     </div>
 
     <!-- ===================== Cashu Mints ===================== -->
@@ -75,16 +75,6 @@
         <div v-if="mintError" class="mb-3 alert-error">{{ mintError }}</div>
         <div v-if="mintsSavedOk" class="mb-3 text-xs text-green-400">Accepted mints saved.</div>
 
-        <div class="flex gap-3 mt-4">
-          <button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
-          <button
-            @click="saveMints"
-            :disabled="savingMints || mints.length === 0"
-            class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
-          >
-            {{ savingMints ? 'Saving…' : 'Save' }}
-          </button>
-        </div>
       </template>
     </div>
 
@@ -133,16 +123,6 @@
       <div v-if="fedError" class="mb-3 alert-error">{{ fedError }}</div>
       <div v-if="fedJoinedOk" class="mb-3 text-xs text-green-400">Federation joined.</div>
 
-      <div class="flex gap-3 mt-4">
-        <button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
-        <button
-          @click="joinFederation"
-          :disabled="!fedimintBackendReady || joiningFed || !inviteCode.trim()"
-          class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
-        >
-          {{ joiningFed ? 'Joining…' : 'Join federation' }}
-        </button>
-      </div>
 
       <p v-if="!fedimintBackendReady" class="text-[11px] text-white/40 text-center mt-3">
         Joining federations lands with the Fedimint client backend.
@@ -179,9 +159,6 @@
         Don't warn me each time before opening the external explorer
       </label>
 
-      <div class="flex gap-3 mt-6">
-        <button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
-      </div>
     </div>
 
     <!-- ===================== Ark ===================== -->
@@ -269,16 +246,33 @@
         <div v-if="arkError" class="mb-3 alert-error">{{ arkError }}</div>
         <div v-if="arkOk" class="mb-3 text-xs text-green-400">{{ arkOk }}</div>
 
-        <div class="flex gap-3 mt-4">
-          <button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
-          <button
-            @click="saveArkConfig"
-            :disabled="arkBusy || !arkConfig.ark_server.trim() || !arkConfig.esplora.trim()"
-            class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
-          >{{ savingArk ? 'Saving…' : 'Save' }}</button>
-        </div>
       </template>
     </div>
+    <!-- Pinned footer (2026-07-22 modal contract): Close always, plus the
+         active tab's primary action — the buttons never scroll away. -->
+    <template #footer>
+      <div class="flex gap-3">
+        <button @click="close" class="flex-1 glass-button px-4 py-2 rounded-lg text-sm">{{ t('common.close') }}</button>
+        <button
+          v-if="activeTab === 'cashu'"
+          @click="saveMints"
+          :disabled="savingMints || mints.length === 0"
+          class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
+        >{{ savingMints ? 'Saving…' : 'Save' }}</button>
+        <button
+          v-else-if="activeTab === 'fedimint'"
+          @click="joinFederation"
+          :disabled="!fedimintBackendReady || joiningFed || !inviteCode.trim()"
+          class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
+        >{{ joiningFed ? 'Joining…' : 'Join federation' }}</button>
+        <button
+          v-else-if="activeTab === 'ark' && arkStatus?.available"
+          @click="saveArkConfig"
+          :disabled="arkBusy || !arkConfig.ark_server.trim() || !arkConfig.esplora.trim()"
+          class="flex-1 glass-button glass-button-success px-4 py-2 rounded-lg text-sm font-medium disabled:opacity-50"
+        >{{ savingArk ? 'Saving…' : 'Save' }}</button>
+      </div>
+    </template>
   </BaseModal>
 </template>