feat(ui): modal contract — pinned title+tabs, scrolling middle, pinned footer

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/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>