Move extension download from Settings to Terminals page

Makes more sense there — creating a terminal key and installing the
extension are the same setup workflow, not two unrelated things on
separate pages.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/pages/Settings.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react'
-import { MonitorCog, Download } from 'lucide-react'
+import { MonitorCog } from 'lucide-react'
 import {
   fetchSettings, updateSettings, testNewbookConnection,
-  fetchKioskPasswordStatus, setKioskPassword, extensionDownloadUrl,
+  fetchKioskPasswordStatus, setKioskPassword,
 } from '../api'
 import type { AppSettings } from '../types'
 
@@ -120,20 +120,6 @@ export default function Settings() {
         </button>
       </div>
 
-      <div className="section-title">Push Extension</div>
-      <p className="field-hint" style={{ marginBottom: 10 }}>
-        Standalone Chrome extension — adds a "Send to Check-In Tablet" button when a NewBook booking
-        is open. Not published anywhere yet, so it needs installing manually on each reception PC:
-        download, unzip, then <code>chrome://extensions</code> → enable Developer mode → Load
-        unpacked → select the unzipped folder. It'll need a Terminal API key from the Terminals page
-        to actually authorize pushes — create one there first.
-      </p>
-      <div style={{ marginBottom: 24 }}>
-        <a className="btn" href={extensionDownloadUrl()} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none' }}>
-          <Download size={16} strokeWidth={1.75} /> Download Extension (.zip)
-        </a>
-      </div>
-
       <div className="section-title">Kiosk Tablets</div>
       <p className="field-hint" style={{ marginBottom: 10 }}>
         A shared password every check-in tablet uses to set itself up at <code>/tablet-checkin/kiosk</code> —

frontend/src/pages/Terminals.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { RefreshCw, KeyRound, Ban, Trash2, Copy } from 'lucide-react'
+import { RefreshCw, KeyRound, Ban, Trash2, Copy, Download } from 'lucide-react'
-import { fetchTerminals, createTerminal, revokeTerminal, deleteTerminal } from '../api'
+import { fetchTerminals, createTerminal, revokeTerminal, deleteTerminal, extensionDownloadUrl } from '../api'
 import type { Terminal } from '../types'
 
 export default function Terminals() {
@@ -69,6 +69,19 @@ export default function Terminals() {
         (hotel-owned hardware gets a device credential, same trust tier as the tablets themselves).
       </p>
 
+      <div className="card" style={{ marginBottom: 20 }}>
+        <div style={{ fontWeight: 600, marginBottom: 6 }}>Chrome Extension</div>
+        <p className="field-hint" style={{ marginBottom: 10 }}>
+          Not published anywhere yet, so it needs installing manually on each reception PC: download,
+          unzip, then <code>chrome://extensions</code> → enable Developer mode → Load unpacked →
+          select the unzipped folder. It'll need a terminal key from below to actually authorize
+          pushes — create one first if you haven't already.
+        </p>
+        <a className="btn" href={extensionDownloadUrl()} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, textDecoration: 'none' }}>
+          <Download size={16} strokeWidth={1.75} /> Download Extension (.zip)
+        </a>
+      </div>
+
       {error && <div className="error-banner">{error}</div>}
 
       {revealedKey && (