1 files changed, 33 insertions, 40 deletions
diff --git a/src/app.js b/src/app.js
index e1a606a..60b0ac9 100644
--- a/src/app.js
+++ b/src/app.js
@@ -375,49 +375,39 @@ function setupFooter() {
   return h('div', { class: 'footer small muted center' },
     h('div', { class: 'row gap6', style: 'justify-content:center' }, lang));
 }
+// The footer is the display preferences alone: the language this reads in,
+// and the currency amounts are shown in. Everything else that used to sit
+// here (credits, How it works, support, install, the theme, the commit) is
+// on Settings → About (Adam, 2026-11-15).
 function footer() {
-  return h(
-    'div',
-    { class: 'footer small muted center' },
-    h(
-      'div',
-      {},
-      t('footerMadeBy') + ' ',
-      h('a', { href: 'https://adamsoltys.com', target: '_blank', rel: 'noopener' }, 'Adam Soltys'),
-      h('span', { class: 'faint' }, ' · '),
-      t('footerSourceOn') + ' ',
-      h('a', { href: 'https://git.coinos.io/coinosv3.git/', target: '_blank', rel: 'noopener' }, 'git.coinos.io')
-    ),
-    h(
-      'div',
-      { style: 'margin-top:4px' },
-      h('button', { class: 'linklike', style: 'font-weight:400', onClick: openHowItWorks }, t('howItWorks')),
-      // the hat shop: needs a wallet to pay from, so only once one is open
+  return h('div', { class: 'footer small muted center' },
+    h('div', { class: 'row gap6', style: 'justify-content:center' }, languagePicker(), currencyPicker()));
+}
+
+function aboutSettingsView() {
+  const row = (label, onClick, attrs = {}) => h('button', { class: 'btn-block', onClick, ...attrs }, label);
+  return h('div', { class: 'col', style: 'gap:16px' },
+    h('div', { class: 'card col about-card', style: 'gap:10px' },
+      h('h3', {}, t('aboutTitle')),
+      h('p', { class: 'small muted', style: 'margin:0' },
+        t('footerMadeBy').replace(/^./, (c) => c.toUpperCase()) + ' ',
+        h('a', { href: 'https://adamsoltys.com', target: '_blank', rel: 'noopener' }, 'Adam Soltys'),
+        '. ' + t('footerSourceOn').replace(/^./, (c) => c.toUpperCase()) + ' ',
+        h('a', { href: 'https://git.coinos.io/coinosv3.git/', target: '_blank', rel: 'noopener' }, 'git.coinos.io'), '.'),
+      row(t('howItWorks'), openHowItWorks),
+      // the hat shop pays from the wallet, so only once one is open
       activeAccount() && FEATURES.some((f) => f.openHatShop)
-        ? h('span', {}, h('span', { class: 'faint' }, ' · '),
-            h('button', { class: 'linklike', style: 'font-weight:400', onClick: () => { clearFeatureNav(); ui.screen = 'wallet'; featureHook('openHatShop'); } }, t('footerSupport')))
-        : null,
-      // Chrome no longer prompts to install on its own — surface our own link
-      // once it reports the app is installable. We render from a persisted flag
-      // (not the live event) so the link is present on the first paint after a
-      // refresh, avoiding a layout shift when beforeinstallprompt fires late.
-      installable()
-        ? h('span', {}, h('span', { class: 'faint' }, ' · '),
-            h('button', { class: 'linklike', style: 'font-weight:400', onClick: triggerInstall }, t('installApp')))
+        ? row(t('footerSupport'), () => { clearFeatureNav(); ui.screen = 'wallet'; featureHook('openHatShop'); }, { id: 'about-support' })
         : null,
-      h('span', { class: 'faint' }, ' · '),
-      h('button', { class: 'linklike', style: 'font-weight:400', onClick: toggleTheme }, resolvedTheme() === 'dark' ? t('lightMode') : t('darkMode'))
-    ),
-    // Display preferences live together: the language this reads in, and the
-    // money amounts are shown in. (The currency sat under Settings → Network
-    // for exactly one day, where nobody found it.)
-    h('div', { class: 'row gap6', style: 'margin-top:8px;justify-content:center' }, languagePicker(), currencyPicker()),
-    // The commit stamp settles "is my PWA fresh?" AND "what code is this?" in
-    // one glance — its own last line, so it never wraps the credits on mobile.
-    h('div', { class: 'faint', style: 'margin-top:6px' },
-      'Running git commit ',
-      h('a', { class: 'faint', href: 'https://git.coinos.io/coinosv3.git/commit/?id={{COMMIT}}', target: '_blank', rel: 'noopener' }, '{{COMMIT}}'))
-  );
+      // Chrome no longer prompts to install by itself: our own button, once
+      // it has said the app is installable (a persisted flag, see installable)
+      installable() ? row(t('installApp'), triggerInstall) : null,
+      row(resolvedTheme() === 'dark' ? t('lightMode') : t('darkMode'), toggleTheme, { id: 'about-theme' }),
+      // "is my PWA fresh?" and "what code is this?" in one line
+      h('div', { class: 'small faint', style: 'margin-top:2px' },
+        'Running git commit ',
+        h('a', { class: 'faint', href: 'https://git.coinos.io/coinosv3.git/commit/?id={{COMMIT}}', target: '_blank', rel: 'noopener' }, '{{COMMIT}}'))),
+    h('button', { class: 'btn-ghost btn-block', onClick: () => { ui.settingsPage = null; render(); } }, t('back')));
 }
 
 const THEME_KEY = 'btc-wallet-theme';
@@ -3257,6 +3247,7 @@ function settingsTab() {
     case 'nostr': return nostrSettingsView();
     case 'notifications': return page(featureAll('notifySettingsCards').reverse());
     case 'advanced': return advancedSettingsView();
+    case 'about': return aboutSettingsView();
   }
   const I = (d) => '<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round">' + d + '</svg>';
   const TILE_ICONS = {
@@ -3267,6 +3258,7 @@ function settingsTab() {
     // a till receipt: paper with a torn foot and two lines of figures
     pos: I('<path d="M6 3h12v18l-2-1.5-2 1.5-2-1.5-2 1.5-2-1.5L6 21z"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="9" y1="12" x2="15" y2="12"/><line x1="12" y1="16" x2="15" y2="16"/>'),
     notifications: I('<path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/>'),
+    about: I('<circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16.5"/><circle cx="12" cy="7.8" r=".6" fill="currentColor"/>'),
     advanced: I('<line x1="4" y1="8" x2="20" y2="8"/><line x1="4" y1="16" x2="20" y2="16"/><circle cx="9" cy="8" r="2.2" fill="var(--surface,#fff)"/><circle cx="15" cy="16" r="2.2" fill="var(--surface,#fff)"/>'),
   };
   const tile = (id, label, desc) =>
@@ -3292,6 +3284,7 @@ function settingsTab() {
       tile('nostr', t('nostrSettings'), t('settingsNostrDesc')),
       tile('notifications', t('settingsNotifications'), t('settingsNotifDesc')),
       tile('advanced', t('advancedSettings'), t('settingsAdvancedDesc')),
+      tile('about', t('aboutTitle'), t('settingsAboutDesc')),
     ]),
     h('button', { class: 'btn-ghost btn-block', style: 'margin-top:6px', onClick: () => { ui.tab = wallet.offline ? 'settings' : 'history'; render(); } }, t('back'))
   );