feat(browser): add Google iframe browser app

public/browser-app.js

@@ -0,0 +1,65 @@
+/* Small iframe browser. Cross-origin pages decide whether they allow embedding. */
+(() => {
+  const HOME = 'https://www.google.com/webhp?igu=1';
+  const pages = [HOME];
+  let position = 0;
+  const t = key => LifeI18n.t(`browser.${key}`);
+  const container = () => document.querySelector('#content-browser');
+  const current = () => pages[position];
+
+  function address(value) {
+    const input = String(value || '').trim();
+    if (!input) return HOME;
+    if (/^[a-z][a-z\d+.-]*:/i.test(input) && !/^https?:\/\//i.test(input)) return null;
+    let url;
+    try {
+      if (/^https?:\/\//i.test(input)) url = new URL(input);
+      else if (/^[^\s/]+\.[^\s]+/.test(input)) url = new URL(`https://${input}`);
+      else return `https://www.google.com/search?igu=1&q=${encodeURIComponent(input)}`;
+    } catch { return null; }
+    if (!['http:', 'https:'].includes(url.protocol) || !url.hostname) return null;
+    if (url.protocol === 'http:') url.protocol = 'https:';
+    if (['google.com', 'www.google.com'].includes(url.hostname.toLowerCase())) {
+      if (url.pathname === '/') url.pathname = '/webhp';
+      if (['/webhp', '/search'].includes(url.pathname)) url.searchParams.set('igu', '1');
+    }
+    return url.href;
+  }
+
+  function updateChrome(node, navigate = false) {
+    const frame = node.querySelector('iframe'), input = node.querySelector('.browser-address');
+    if (!frame) return;
+    if (navigate || !frame.getAttribute('src')) frame.src = current();
+    if (input && document.activeElement !== input) input.value = current();
+    node.querySelector('[data-action="back"]').disabled = position === 0;
+    node.querySelector('[data-action="forward"]').disabled = position === pages.length - 1;
+    node.querySelector('.browser-external').href = current();
+    node.querySelector('.browser-hint-link').href = current();
+  }
+
+  function go(value) {
+    const url = address(value);
+    if (!url) { toast(t('invalid')); return; }
+    if (url !== current()) { pages.splice(position + 1); pages.push(url); position = pages.length - 1; }
+    const node = container(); if (node) updateChrome(node, true);
+  }
+
+  window.browserApp = node => {
+    if (node.querySelector('.browser-shell') && node.dataset.browserLocale === lang()) { updateChrome(node); return; }
+    node.dataset.browserLocale = lang();
+    node.innerHTML = `<div class="browser-shell"><form class="browser-toolbar"><button type="button" data-action="back" aria-label="${t('back')}" title="${t('back')}">←</button><button type="button" data-action="forward" aria-label="${t('forward')}" title="${t('forward')}">→</button><button type="button" data-action="reload" aria-label="${t('reload')}" title="${t('reload')}">↻</button><label class="sr-only" for="browser-address">${t('address')}</label><input id="browser-address" class="browser-address" type="text" inputmode="url" autocomplete="off" spellcheck="false" aria-label="${t('address')}" placeholder="${t('placeholder')}"><button type="submit" class="browser-go">${t('go')}</button><a class="browser-external" target="_blank" rel="noopener noreferrer" aria-label="${t('external')}" title="${t('external')}">↗</a></form><div class="browser-frame-wrap"><iframe title="${t('frame')}" referrerpolicy="no-referrer" sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"></iframe></div><p class="browser-hint">${t('embedHint')} <a class="browser-hint-link" target="_blank" rel="noopener noreferrer">${t('external')}</a></p></div>`;
+    const toolbar = node.querySelector('.browser-toolbar');
+    toolbar.addEventListener('submit', event => { event.preventDefault(); go(node.querySelector('.browser-address').value); });
+    toolbar.addEventListener('click', event => {
+      const action = event.target.closest('[data-action]')?.dataset.action;
+      if (action === 'back' && position > 0) { position--; updateChrome(node, true); }
+      if (action === 'forward' && position < pages.length - 1) { position++; updateChrome(node, true); }
+      if (action === 'reload') updateChrome(node, true);
+    });
+    updateChrome(node, true);
+  };
+
+  const style = document.createElement('style');
+  style.textContent = `#content-browser{padding:0;overflow:hidden}.browser-shell{height:100%;min-height:0;display:flex;flex-direction:column}.browser-toolbar{display:flex;align-items:center;gap:6px;padding:10px;background:var(--panel);border-bottom:1px solid var(--line)}.browser-toolbar button,.browser-external{flex:none;display:grid;place-items:center;min-width:34px;height:34px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--ink);text-decoration:none;font-size:18px}.browser-toolbar button:disabled{opacity:.38;cursor:default}.browser-toolbar .browser-go{font-size:12px;padding:0 11px;background:var(--accent);color:var(--bg);border-color:var(--accent)}.browser-address{flex:1;min-width:0;height:36px;border:1px solid var(--line);border-radius:8px;background:var(--panel2);color:var(--ink);padding:0 11px;font:13px Manrope,system-ui;outline:none}.browser-address:focus{border-color:var(--accent)}.browser-frame-wrap{flex:1;min-height:0;background:#fff}.browser-frame-wrap iframe{display:block;width:100%;height:100%;border:0}.browser-hint{margin:0;padding:7px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.4}.browser-hint a{color:var(--accent)}@media(max-width:650px){.browser-toolbar{gap:4px;padding:8px}.browser-toolbar button,.browser-external{min-width:30px;height:32px}.browser-address{font-size:12px}.browser-hint{padding:7px 9px;font-size:11px}}`;
+  document.head.append(style);
+})();