From 64bd541013e5f23bb3f5e0f88374b148b7614308 Mon Sep 17 00:00:00 2001
From: sneak <sneak@sneak.berlin>
Date: Wed, 25 Feb 2026 18:38:33 +0700
Subject: [PATCH] Global title bar on all screens, screen name in DEBUG banner

Move "AutistMask by @sneak" to a global title bar that appears
on every screen. Per-view headings demoted to h2 sub-headings.
Settings button moved to bottom of main view alongside Add
wallet. In DEBUG mode, the red banner now shows the current
screen name in parentheses (e.g. "DEBUG / INSECURE (main)").
---
 src/popup/index.html | 78 ++++++++++++++++++--------------------------
 src/popup/index.js   |  7 ++++
 2 files changed, 38 insertions(+), 47 deletions(-)
diff --git a/src/popup/index.html b/src/popup/index.html
index a9fabff..7361124 100644
--- a/src/popup/index.html
+++ b/src/popup/index.html
@@ -8,12 +8,24 @@
     </head>
     <body class="bg-bg text-fg font-mono text-sm">
         <div id="app" class="p-2">
+            <!-- ============ GLOBAL TITLE BAR ============ -->
+            <div
+                class="flex justify-between items-center border-b border-border pb-1 mb-2"
+            >
+                <h1>
+                    <span class="font-bold">AutistMask</span> by
+                    <a
+                        href="https://sneak.berlin"
+                        target="_blank"
+                        class="underline decoration-dashed"
+                        >@sneak</a
+                    >
+                </h1>
+            </div>
+
             <!-- ============ WELCOME / FIRST USE ============ -->
             <div id="view-welcome" class="view hidden">
-                <h1 class="font-bold border-b border-border pb-1 mb-3">
-                    Welcome to AutistMask
-                </h1>
-                <p class="mb-3">To get started, add a wallet.</p>
+                <p class="mb-3">Welcome! To get started, add a wallet.</p>
                 <button
                     id="btn-welcome-add"
                     class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -24,9 +36,7 @@
 
             <!-- ============ ADD WALLET (unified create/import) ============ -->
             <div id="view-add-wallet" class="view hidden">
-                <h1 class="font-bold border-b border-border pb-1 mb-3">
-                    Add Wallet
-                </h1>
+                <h2 class="font-bold mb-2">Add Wallet</h2>
                 <p class="mb-2">
                     Enter your 12 or 24 word recovery phrase below, or click the
                     button to roll the die for a new one.
@@ -108,9 +118,7 @@
 
             <!-- ============ IMPORT PRIVATE KEY ============ -->
             <div id="view-import-key" class="view hidden">
-                <h1 class="font-bold border-b border-border pb-1 mb-3">
-                    Import Private Key
-                </h1>
+                <h2 class="font-bold mb-2">Import Private Key</h2>
                 <p class="mb-2">
                     Paste your private key below. This wallet will have a single
                     address.
@@ -165,38 +173,22 @@
 
             <!-- ============ MAIN VIEW: ALL WALLETS & ADDRESSES ============ -->
             <div id="view-main" class="view hidden">
-                <div
-                    class="flex justify-between items-center border-b border-border pb-1 mb-2"
-                >
-                    <h1>
-                        <span class="font-bold">AutistMask</span> by
-                        <a
-                            href="https://sneak.berlin"
-                            target="_blank"
-                            class="underline decoration-dashed"
-                            >@sneak</a
-                        >
-                    </h1>
-                    <button
-                        id="btn-settings"
-                        class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer"
-                        title="Settings"
-                    >
-                        Settings
-                    </button>
-                </div>
-
                 <!-- wallet list -->
                 <div id="wallet-list"></div>
 
-                <!-- add wallet button -->
-                <div class="mt-3 border-t border-border pt-2">
+                <div class="mt-3 border-t border-border pt-2 flex gap-2">
                     <button
                         id="btn-main-add-wallet"
                         class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
                     >
                         + Add wallet
                     </button>
+                    <button
+                        id="btn-settings"
+                        class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
+                    >
+                        Settings
+                    </button>
                 </div>
             </div>
 
@@ -205,7 +197,7 @@
                 <div
                     class="flex justify-between items-center border-b border-border pb-1 mb-2"
                 >
-                    <h1 class="font-bold" id="address-title">Address</h1>
+                    <h2 class="font-bold" id="address-title">Address</h2>
                     <button
                         id="btn-address-back"
                         class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer"
@@ -275,7 +267,7 @@
 
             <!-- ============ SEND ============ -->
             <div id="view-send" class="view hidden">
-                <h1 class="font-bold border-b border-border pb-1 mb-3">Send</h1>
+                <h2 class="font-bold mb-2">Send</h2>
                 <div class="mb-2">
                     <label class="block mb-1">What to send</label>
                     <select
@@ -340,9 +332,7 @@
 
             <!-- ============ RECEIVE ============ -->
             <div id="view-receive" class="view hidden">
-                <h1 class="font-bold border-b border-border pb-1 mb-3">
-                    Receive
-                </h1>
+                <h2 class="font-bold mb-2">Receive</h2>
                 <p class="mb-2">
                     Share this address with the sender. Make sure you only use
                     this address to receive Ethereum tokens.
@@ -372,9 +362,7 @@
 
             <!-- ============ ADD TOKEN ============ -->
             <div id="view-add-token" class="view hidden">
-                <h1 class="font-bold border-b border-border pb-1 mb-3">
-                    Add Token
-                </h1>
+                <h2 class="font-bold mb-2">Add Token</h2>
                 <p class="mb-2">
                     Enter the contract address of the token you want to track.
                     You can find this on the token's page on Etherscan.
@@ -423,9 +411,7 @@
 
             <!-- ============ SETTINGS ============ -->
             <div id="view-settings" class="view hidden">
-                <h1 class="font-bold border-b border-border pb-1 mb-3">
-                    Settings
-                </h1>
+                <h2 class="font-bold mb-2">Settings</h2>
 
                 <h2 class="font-bold mb-1">Network</h2>
                 <p class="text-xs text-muted mb-1">
@@ -458,9 +444,7 @@
 
             <!-- ============ APPROVAL ============ -->
             <div id="view-approve" class="view hidden">
-                <h1 class="font-bold border-b border-border pb-1 mb-3">
-                    A website is requesting access
-                </h1>
+                <h2 class="font-bold mb-2">A website is requesting access</h2>
                 <div class="mb-2">
                     <div class="text-xs text-muted mb-1">
                         From:
diff --git a/src/popup/index.js b/src/popup/index.js
index e494a6a..5ee60c7 100644
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -37,6 +37,12 @@ function showView(name) {
             el.classList.toggle("hidden", v !== name);
         }
     }
+    if (DEBUG) {
+        const banner = document.getElementById("debug-banner");
+        if (banner) {
+            banner.textContent = "DEBUG / INSECURE (" + name + ")";
+        }
+    }
 }
 
 // Browser-agnostic storage API
@@ -373,6 +379,7 @@ function backFromWalletAdd() {
 async function init() {
     if (DEBUG) {
         const banner = document.createElement("div");
+        banner.id = "debug-banner";
         banner.textContent = "DEBUG / INSECURE";
         banner.style.cssText =
             "background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";
