// Private workspace dock: one bar shared by Home, Health, Sessions, Stocks and // Royalties. Navigation only: no stored credentials, no tracking. The only // requests it makes are the sign-out on Lock and the browser loading a page // ahead when asked to (below). // 14/09/26, his ask ("no buffers, auto pages smoothly", then "a cool custom // loading bar which matches the colour of the page"): a hop between the five // pages should feel like switching tabs in an app. // - the bar slides in once per tab, then just stays, above everything // - clicking another page puts that page's loader up at once, in its colour, // and the arriving page keeps it up until its data is in (the loader script // in each page's head, styled in workspace.css) // - resting the pointer on a tab lets Chrome load that page ahead, so the click // is instant (other browsers ignore this) // - Lock also clears the device cookie that opens Health and Sessions // - a page brought back from memory after a Lock reloads to its gate (() => { if (document.querySelector('.aw-workspace-nav')) return; // Inline since 14/09/26 (the middleware puts it in the page), so there is no script // URL to read the site from; the pages are always on the site itself. const cs = document.currentScript; const origin = cs && cs.src ? new URL(cs.src).origin : location.origin; // [key, label, path, icon]: the icons are the Home tiles' own strokes // Home sits in the middle of the bar as the anchor (Alfie, 13/09/26). // Order is his call: Health, Stocks, Home, Sessions, Royalties (swapped 13/09/26). const TABS = [ ['health', 'Health', '/health', ''], ['stocks', 'Stocks', '/nine-dc90e261/', ''], ['home', 'Home', '/home/', ''], ['sess', 'Sessions', '/sessions', ''], ['royal', 'Royalties', '/admin/', ''], ]; // Each page's colour as r,g,b: the same values as the dock tabs and the loader script in each page's head. const COL = { health: '0,215,174', stocks: '157,123,255', home: '236,236,244', sess: '0,169,252', royal: '241,178,0' }; const trim = p => p.replace(/\/+$/, ''); const here = trim(location.pathname); const title = document.title.split('|')[0].trim().toLowerCase(); const current = TABS.find(t => here === trim(t[2])) || TABS.find(t => title.includes(t[1].toLowerCase())); const nav = document.createElement('nav'); nav.className = 'aw-workspace-nav'; nav.setAttribute('aria-label', 'Workspace'); if (current) nav.dataset.page = current[0]; // Slide in on the first private page of a tab only. From then on the bar is // already there, so it stays put instead of arriving again on every page. let seen = false; try { seen = sessionStorage.getItem('aw_dock') === '1'; sessionStorage.setItem('aw_dock', '1'); } catch (_) {} if (seen) nav.classList.add('aw-still'); for (const [key, label, path, icon] of TABS) { const a = document.createElement('a'); a.className = 'aw-' + key; a.href = origin + path; a.innerHTML = '' + label + ''; if (current && key === current[0]) a.setAttribute('aria-current', 'page'); nav.append(a); } document.body.append(nav); // Royalties keeps its whole app hidden until it is unlocked, and hides it again // on Lock. Follow that, so the dock never shows on the sign-in form. It lives on // body, not inside #app, because #app animates in with a transform and a fixed // bar inside a transformed box is pinned to the box, not the screen. While a // remembered device unlocks (the gate is "quiet" under the loader) the dock // stays, like on every other page. const app = document.getElementById('app'), gate = document.getElementById('gate'); if (app) { const sync = () => { nav.hidden = getComputedStyle(app).display === 'none' && !(gate && gate.classList.contains('quiet')); }; const mo = new MutationObserver(sync); mo.observe(app, { attributes: true, attributeFilter: ['style', 'class'] }); if (gate) mo.observe(gate, { attributes: true, attributeFilter: ['style', 'class'] }); sync(); } // Which localStorage key means "this device is signed in" on each page. const KEYS = { health: 'aw_health_key', sess: 'aw_sessions_key', royal: 'aw_roy_key', home: 'aw9k', stocks: 'aw9k' }; const has = n => { try { return !!localStorage.getItem(n); } catch (_) { return false; } }; const anyKey = () => Object.keys(KEYS).some(k => has(KEYS[k])); const signout = () => { try { return fetch(origin + '/api/signout', { method: 'POST', keepalive: true, cache: 'no-store' }).catch(() => {}); } catch (_) { return Promise.resolve(); } }; // Lock (Home and Stocks have the button) clears localStorage and reloads. The // cookie is HttpOnly, so only the server can clear it; keepalive lets the // request finish across that reload. const lock = document.getElementById('lockBtn'); if (lock) lock.addEventListener('click', () => { signout(); }, true); // Arrived by cookie on a device that holds no key at all: a Lock whose // sign-out never got through, or a cookie on its own. Sign out and reload to // the gate. Once per tab, so a cookie that will not clear can never loop. if (current && (current[0] === 'health' || current[0] === 'sess') && !anyKey()) { let tried = false; try { tried = sessionStorage.getItem('aw_signout') === '1'; sessionStorage.setItem('aw_signout', '1'); } catch (_) {} if (!tried) { signout().then(() => location.replace(location.pathname)); return; } } // Health and Sessions have nothing live to fetch: they are ready once they are here. if (current && (current[0] === 'health' || current[0] === 'sess') && window.awReady) window.awReady(); // ---- Leaving a page ------------------------------------------------------------ // Clicking another private page (a dock tab or a Home tile) moves the dock // highlight and dims this page a little straight away, so the click always // answers. Only if the next page has not arrived after 0.65s does the loader // come up in that page's colour, and the next page then carries its bar on. A // switch that never happens (cancelled, offline) gives the page back after 12s, // and so does coming back to this page with the back button. const keyFor = path => { const p = trim(path); const t = TABS.find(x => trim(x[2]) === p); return t ? t[0] : null; }; const mark = k => { if (k) nav.dataset.page = k; else delete nav.dataset.page; nav.querySelectorAll('a').forEach(a => { if (k && a.classList.contains('aw-' + k)) a.setAttribute('aria-current', 'page'); else a.removeAttribute('aria-current'); }); }; let leaveTimer = 0, slowTimer = 0; const unleave = () => { clearTimeout(leaveTimer); clearTimeout(slowTimer); document.querySelectorAll('.aw-load.aw-leave').forEach(e => e.remove()); document.documentElement.classList.remove('aw-leaving'); try { sessionStorage.removeItem('aw_hop'); } catch (_) {} mark(current ? current[0] : null); }; const leave = k => { const t = Date.now(); const handOver = shown => { try { sessionStorage.setItem('aw_hop', JSON.stringify(shown ? { t, k, shown: 1 } : { t, k })); } catch (_) {} }; handOver(false); let el = document.querySelector('.aw-load.aw-leave'); if (!el) { el = document.createElement('div'); el.className = 'aw-load aw-leave'; el.setAttribute('aria-hidden', 'true'); el.innerHTML = ''; document.documentElement.appendChild(el); } el.classList.remove('on'); el.style.setProperty('--aw-l', COL[k]); document.documentElement.classList.add('aw-leaving'); mark(k); clearTimeout(slowTimer); clearTimeout(leaveTimer); slowTimer = setTimeout(() => { el.classList.add('on'); // Only tell the next page to carry the loader on once this page has really // drawn it. Safari, and so every iPhone browser, stops drawing the old page // the moment a link starts loading: nothing added here is ever seen, and the // next page would flash a loader out of nowhere. Two frames prove it drew. requestAnimationFrame(() => requestAnimationFrame(() => handOver(true))); }, 650); leaveTimer = setTimeout(unleave, 12000); }; document.addEventListener('click', e => { if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return; const a = e.target && e.target.closest ? e.target.closest('a[href]') : null; if (!a || (a.target && a.target !== '_self') || a.hasAttribute('download')) return; let u; try { u = new URL(a.href, location.href); } catch (_) { return; } if (u.origin !== location.origin || trim(u.pathname) === here) return; const k = keyFor(u.pathname); if (k) leave(k); }); // Back/forward can bring a page back from memory without asking the server. // Take the leaving loader down, and if this device was locked since, reload so // the gate shows instead of the old content. addEventListener('pageshow', e => { if (!e.persisted) return; unleave(); if (current && !has(KEYS[current[0]])) location.reload(); }); // ---- Load the next page ahead (Chrome, Edge) ------------------------------------ // Resting the pointer on a tab for a moment (or pressing it, on a phone) lets the // browser build that page in the background, so the click itself is instant. // Browsers without speculation rules, or with page preloading switched off, // simply ignore this. A page built ahead checks, the moment it is shown, that // the device is still signed in. try { if (current && HTMLScriptElement.supports && HTMLScriptElement.supports('speculationrules')) { const s = document.createElement('script'); s.type = 'speculationrules'; s.textContent = JSON.stringify({ prerender: [{ source: 'list', urls: TABS.filter(t => t[0] !== current[0]).map(t => origin + t[2]), eagerness: 'moderate' }] }); document.head.append(s); } } catch (_) {} if (document.prerendering) { document.addEventListener('prerenderingchange', () => { try { sessionStorage.removeItem('aw_hop'); } catch (_) {} if (current && !has(KEYS[current[0]])) location.reload(); }, { once: true }); } })();