Fix mobile tabs and chat sticker modal

apps/web/src/App.vue

@@ -182,12 +182,16 @@ main.shellLogin {
     display: none;
   }
   .mobile-tabbar {
-    position: sticky;
-    top: 49px;
-    z-index: 9;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 12;
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 0;
+    padding-bottom: env(safe-area-inset-bottom);
+    border-top: 1px solid var(--line);
     border-bottom: 1px solid var(--line);
     background: rgba(7, 9, 15, 0.94);
     backdrop-filter: blur(6px);
@@ -215,7 +219,10 @@ main.shellLogin {
     box-shadow: inset 0 -1px 0 var(--neon-cyan), var(--shadow-cyan);
   }
   main {
-    padding: 16px;
+    padding: 16px 16px calc(76px + env(safe-area-inset-bottom));
+  }
+  .footbar {
+    padding-bottom: calc(76px + env(safe-area-inset-bottom));
   }
 }
 </style>

apps/web/src/components/ChatDrawer.vue

@@ -103,6 +103,9 @@ async function sendContent(content: string): Promise<void> {
     await loadMissingProfiles();
     await scrollBottom();
   } catch (e) {
+    if (e instanceof Error && /connect|signer|auth|missing remote|aborted/i.test(e.message)) {
+      await auth.restoreSavedSigner();
+    }
     error.value = e instanceof Error ? e.message : "Could not send";
   }
 }
@@ -144,8 +147,8 @@ async function scrollBottom(): Promise<void> {
       <span>
         Logged in, but the signer is not active in this tab. Reading works; sending needs a restored signer.
       </span>
-      <button class="thin" :disabled="auth.restoringSigner" @click="auth.restoreSavedSigner()">
-        {{ auth.restoringSigner ? "restoring" : "restore" }}
+      <button class="thin" :disabled="auth.busy" @click="auth.reconnectRemoteApp()">
+        {{ auth.busy ? "opening" : "reconnect" }}
       </button>
     </div>
     <div v-if="error" class="notice err">{{ error }}</div>
@@ -171,18 +174,31 @@ async function scrollBottom(): Promise<void> {
       </article>
     </div>
 
+    <div v-if="showStickers" class="sticker-modal" @click.self="showStickers = false">
+      <section class="sticker-dialog" aria-label="chat stickers">
+        <div class="sticker-head">
+          <div>
+            <div class="label">stickers</div>
+            <strong class="glow-amber">{{ CHAT_STICKERS.length }} signed insults</strong>
+          </div>
+          <button type="button" class="thin" aria-label="close stickers" @click="showStickers = false">×</button>
+        </div>
+        <div class="sticker-tray">
+          <button
+            v-for="sticker in CHAT_STICKERS"
+            :key="sticker.label"
+            type="button"
+            :disabled="!canSend"
+            @click="sendSticker(sticker)"
+          >
+            <span>{{ sticker.label }}</span>
+            <small>{{ sticker.text }}</small>
+          </button>
+        </div>
+      </section>
+    </div>
+
     <form class="composer" @submit.prevent="send">
-      <div v-if="showStickers" class="sticker-tray">
-        <button
-          v-for="sticker in CHAT_STICKERS"
-          :key="sticker.label"
-          type="button"
-          :disabled="!canSend"
-          @click="sendSticker(sticker)"
-        >
-          {{ sticker.label }}
-        </button>
-      </div>
       <div class="composer-tools">
         <button
           type="button"
@@ -214,12 +230,11 @@ async function scrollBottom(): Promise<void> {
 }
 .chat-drawer {
   position: fixed;
-  top: 76px;
+  top: 0;
   right: 0;
   z-index: 20;
   width: min(430px, 92vw);
-  height: calc(100dvh - 92px);
-  max-height: 820px;
+  height: 100dvh;
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr) auto;
   gap: 12px;
@@ -356,7 +371,6 @@ p.sticker.gif {
     rgba(255, 255, 255, 0.025);
 }
 .composer {
-  position: relative;
   display: grid;
   grid-template-columns: 78px minmax(0, 1fr) 64px;
   gap: 8px;
@@ -364,35 +378,73 @@ p.sticker.gif {
   padding-top: 10px;
   border-top: 1px solid var(--line);
 }
-.sticker-tray {
-  grid-column: 1 / -1;
-}
 .composer-tools {
   min-width: 0;
 }
-.sticker-tray {
+.sticker-modal {
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: calc(100% + 8px);
-  z-index: 2;
+  inset: 0;
+  z-index: 3;
   display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
+  align-items: end;
+  padding: 16px;
+  background: rgba(0, 0, 0, 0.46);
+}
+.sticker-dialog {
+  min-height: 0;
+  max-height: min(520px, calc(100% - 24px));
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr);
+  gap: 10px;
+  padding: 12px;
+  border: 1px solid var(--neon-magenta);
+  background: rgba(7, 9, 15, 0.98);
+  box-shadow: var(--shadow-magenta);
+}
+.sticker-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  gap: 12px;
+}
+.sticker-head strong {
+  display: block;
+  margin-top: 2px;
+  font-size: 14px;
+}
+.sticker-tray {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 6px;
-  max-height: min(260px, 42dvh);
+  min-height: 0;
   overflow: auto;
-  padding: 8px;
-  border: 1px solid var(--line);
-  background: rgba(255, 255, 255, 0.025);
+  padding-right: 2px;
 }
 .sticker-tray button {
   min-width: 0;
-  padding: 7px 8px;
+  min-height: 74px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding: 9px 10px;
   color: var(--neon-amber);
   border-color: var(--line-bright);
   font-size: 10px;
+  text-align: left;
   overflow-wrap: anywhere;
 }
+.sticker-tray button span {
+  color: var(--neon-cyan);
+}
+.sticker-tray button small {
+  color: var(--fg-1);
+  font-size: 10px;
+  line-height: 1.25;
+  text-transform: none;
+  letter-spacing: 0.02em;
+}
 .sticker-toggle {
   width: 100%;
   height: 58px;
@@ -432,8 +484,8 @@ textarea {
     top: auto;
     bottom: 0;
     width: 100vw;
-    height: min(72dvh, 560px);
-    max-height: calc(100dvh - 118px);
+    height: 100dvh;
+    max-height: none;
     padding: 14px 14px calc(14px + env(safe-area-inset-bottom));
     transform: translateY(105%);
     border-left: 0;
@@ -449,9 +501,14 @@ textarea {
     grid-template-columns: 72px minmax(0, 1fr) 58px;
     gap: 6px;
   }
+  .sticker-modal {
+    padding: 10px;
+  }
+  .sticker-dialog {
+    max-height: calc(100% - 12px);
+  }
   .sticker-tray {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    max-height: 108px;
+    grid-template-columns: 1fr;
   }
 }
 </style>

apps/web/src/services/signer.ts

@@ -96,6 +96,11 @@ export async function loginWithRemoteApp(): Promise<string> {
   return connectRemoteApp({ openApp: true });
 }
 
+export async function reconnectRemoteApp(): Promise<string> {
+  clearSigner();
+  return connectRemoteApp({ openApp: true });
+}
+
 export async function resumeRemoteAppLogin(): Promise<string> {
   return connectRemoteApp({ openApp: false });
 }

apps/web/src/stores/auth.ts

@@ -70,6 +70,24 @@ export const useAuthStore = defineStore("auth", () => {
     }
   }
 
+  async function reconnectRemoteApp(): Promise<void> {
+    error.value = null;
+    busy.value = true;
+    try {
+      await signer.reconnectRemoteApp();
+      const r = await api.login();
+      token.value = r.token;
+      npub.value = r.npub;
+      api.saveToken(r.token, r.npub);
+    } catch (e) {
+      signer.clearSigner();
+      error.value = e instanceof Error ? e.message : "Remote signer reconnect failed";
+      throw e;
+    } finally {
+      busy.value = false;
+    }
+  }
+
   async function resumeRemoteAppLogin(): Promise<void> {
     error.value = null;
     busy.value = true;
@@ -120,6 +138,7 @@ export const useAuthStore = defineStore("auth", () => {
     loginExtension,
     loginBunker,
     loginRemoteApp,
+    reconnectRemoteApp,
     resumeRemoteAppLogin,
     restoreSavedSigner,
     hasPendingRemoteAppLogin: signer.hasPendingRemoteAppLogin,