Put the header back in its corners, and give sound a control

The banner. It was a full-width bar with its own background and border, which
read as a second layer of chrome stretching past the content on both sides,
and because it reserved height at the top of the page it pushed the wordmark
out of the top-left corner and the icon rail down out of the top-right. It is
just the unit now, centred, sharing that line with both of them.

It is also thinner: a 468x60 full banner rather than a 728x90 leaderboard,
and 320x50 rather than 320x100 on a phone. Both are standard units. At 90px
the banner was deeper than the icon rail beside it, so it decided how far
down the whole page began; at 60px it is shorter than the rail and the
content offset is the rail's, not the banner's. The page below is unaffected
by whether an advert is there at all.

Below 980px the wordmark, the unit and the rail no longer fit on one line, so
the banner drops beneath them and the content clears both.

The mark. It was five shapes in a 32 pixel square: a chevron, an offset ghost
copy of that chevron, a full-width baseline, and a large filled block. That
is a drawing, not a mark, and the parts crowded each other so none of them
read. It is two shapes now, a chevron and the underscore cursor after it,
which is a shell prompt and the gesture anyone who has used a terminal
recognises.

The cursor blink faded to 0.15 opacity over an uneven 45/55 split, so it
ghosted rather than blinked. A terminal cursor is a hard square wave: fully
on, fully off, 530ms each way. Only the menu's title blinks now, because
something blinking in the corner of every screen is a distraction.

The menu title sat 16px right of the buttons underneath it. Centring the mark
and the name together as one box put the name off-centre, and the
absolutely-positioned mark overflowed the menu's padding, which moved the box
itself. It is a three column grid now, the third empty and the same width as
the first, so the wordmark is in the exact centre by construction with the
mark to its left. Measured 0px offset at six widths.

The corner wordmark is back on the menu. Leaving it off to avoid showing the
name twice made it look like it had gone missing, and it is the way back to
the menu from everywhere else, so it should be in the same place on every
screen.

Sound. The engine worked: one oscillator per keystroke, verified by counting
them. It was off by default and its only control was a line inside the
settings dialog, so the usual way to find it was to be told it existed. It is
a speaker in the top rail now, cycling off, click and mechanical, and it
defaults to mechanical. A browser will not start an audio context before a
user gesture and the first keystroke is one, so the first tone plays with the
first character: confirmed with a fresh profile under the default autoplay
policy, context running, six tones for six keystrokes.

The copies in the two settings panels are gone. One setting, one control.

3 browser tests pass, all 21 screen and viewport combinations clean, and the
margin rails still appear only above 1424px.

1 files changed, 30 insertions, 1 deletions

diff --git a/web/src/topRail.js b/web/src/topRail.js
index 0373f5b..6d8c8dc 100644
--- a/web/src/topRail.js
+++ b/web/src/topRail.js
@@ -1,4 +1,4 @@
-import { LANGUAGE_ICON, FRIENDS_ICON, ACCOUNT_ICON } from './screens/icons.js';
+import { LANGUAGE_ICON, FRIENDS_ICON, ACCOUNT_ICON, SOUND_ON_ICON, SOUND_OFF_ICON } from './screens/icons.js';
 import { LANGUAGES, languageLabel } from './languages.js';
 import { getSettings, updateSettings } from './settings.js';
 import { renderThemeButton } from './themeButton.js';
@@ -58,6 +58,12 @@ export function renderTopRail(root, { onShowAccount, onShowFriends, extras = []
 
     const cleanupTheme = renderThemeButton(icons);
 
+    // Keystroke sound. It was a line inside the settings dialog and off by
+    // default, so the usual way to discover it was to be told it existed.
+    const sound = document.createElement('div');
+    sound.className = 'sound-control';
+    icons.appendChild(sound);
+
     const friends = document.createElement('div');
     friends.className = 'friends-control';
     if (onShowFriends) {
@@ -152,6 +158,29 @@ export function renderTopRail(root, { onShowAccount, onShowFriends, extras = []
     const unsubscribeAuth = onAuthChange(paintAuthAndMeasure);
     window.addEventListener('resize', publishHeight);
 
+    // Sound ---------------------------------------------------------------
+    // On by default, set to the mechanical tone. The speaker here is how it
+    // gets turned off, which is why it is in the rail rather than buried in
+    // the settings dialog where it used to live.
+    const SOUND_THEMES = ['off', 'click', 'mech'];
+    const SOUND_LABELS = { off: 'Off', click: 'Click', mech: 'Mechanical' };
+
+    function paintSound() {
+        const current = getSettings().soundTheme || 'off';
+        const on = current !== 'off';
+        sound.innerHTML = `<button class="corner-icon-button${on ? ' active' : ''}" data-action="rail-sound"
+                aria-label="Keystroke sound: ${SOUND_LABELS[current]}"
+                data-tooltip="Keystroke sound: ${SOUND_LABELS[current]}. Click to cycle.">${on ? SOUND_ON_ICON : SOUND_OFF_ICON}</button>`;
+        attachTooltips(sound);
+        sound.querySelector('button').addEventListener('click', () => {
+            const now = getSettings().soundTheme || 'off';
+            const next = SOUND_THEMES[(SOUND_THEMES.indexOf(now) + 1) % SOUND_THEMES.length];
+            updateSettings({ soundTheme: next });
+            paintSound();
+        });
+    }
+    paintSound();
+
     // Friends ------------------------------------------------------------
     const friendsBtn = friends.querySelector('[data-action="rail-friends"]');
     if (friendsBtn) friendsBtn.addEventListener('click', onShowFriends);