add offline switch to in-app help

public/index.html

@@ -381,6 +381,16 @@
             <span class="switch-track" aria-hidden="true"></span>
           </label>
           <h3 data-i18n="storage-help.offline-title">Ohne Internet unterwegs</h3>
+          <label for="info-offline-cache-toggle" class="switch-row compact-switch">
+            <span>
+              <strong data-i18n="offline.open-app">App ohne Internet öffnen</strong>
+              <small data-i18n="offline.open-app-hint">Damit kannst du Wegwichtel auch ohne Internet öffnen. Wähle danach die Strecken aus, die du mitnehmen möchtest.</small>
+            </span>
+            <input id="info-offline-cache-toggle" type="checkbox" role="switch" aria-checked="false" aria-describedby="info-offline-cache-status">
+            <span class="switch-track" aria-hidden="true"></span>
+          </label>
+          <output id="info-offline-cache-status" aria-live="polite"></output>
+          <button id="info-offline-cache-refresh" type="button" hidden data-i18n="offline.renew-app">Gespeicherte App erneuern</button>
           <p data-i18n="storage-help.offline-data">Mit „App ohne Internet öffnen“ speicherst du Wegwichtel auf diesem Gerät. Danach kannst du einzelne Strecken mit „Für unterwegs speichern“ mitnehmen. Warte vor dem Losgehen, bis alles gespeichert ist.</p>
           <p data-i18n="storage-help.export-data">Mit „Weg als Datei herunterladen“ kannst du den Weg in einer anderen Wander-App öffnen. Bilder und Tonaufnahmen sind in dieser Datei nicht enthalten.</p>
           <h3 data-i18n="storage-help.drafts-title">Deine eigenen Strecken</h3>

public/js/offline-cache.js

@@ -2,9 +2,9 @@ globalThis.Wegwichtel ??= {};
 (function (ns) {
   'use strict';
 
-  const toggle = document.getElementById('offline-cache-toggle');
-  const status = document.getElementById('offline-cache-status');
-  const refresh = document.getElementById('offline-cache-refresh');
+  const toggles = ['offline-cache-toggle', 'info-offline-cache-toggle'].map(id => document.getElementById(id)).filter(Boolean);
+  const statuses = ['offline-cache-status', 'info-offline-cache-status'].map(id => document.getElementById(id)).filter(Boolean);
+  const refreshButtons = ['offline-cache-refresh', 'info-offline-cache-refresh'].map(id => document.getElementById(id)).filter(Boolean);
   const enter = document.getElementById('bootstrap-enter');
   let controller = null;
   let task = null;
@@ -15,16 +15,20 @@ globalThis.Wegwichtel ??= {};
   const supported = () => Boolean(globalThis.isSecureContext && navigator.serviceWorker && globalThis.caches);
 
   function announce(message) {
-    if (status) status.textContent = message;
+    for (const status of statuses) status.textContent = message;
+  }
+
+  function setToggleState(enabled) {
+    for (const toggle of toggles) {
+      toggle.checked = enabled;
+      toggle.setAttribute('aria-checked', String(enabled));
+    }
   }
 
   async function updateControls() {
     const saved = supported() ? await ns.OfflineStore.state() : null;
-    if (toggle) {
-      toggle.checked = Boolean(saved);
-      toggle.setAttribute('aria-checked', String(Boolean(saved)));
-    }
-    if (refresh) {
+    setToggleState(Boolean(saved));
+    for (const refresh of refreshButtons) {
       refresh.hidden = !saved;
       refresh.disabled = Boolean(task);
     }
@@ -100,7 +104,7 @@ globalThis.Wegwichtel ??= {};
       }
     })();
     if (enter) enter.disabled = true;
-    if (refresh) refresh.disabled = true;
+    for (const refresh of refreshButtons) refresh.disabled = true;
     return task;
   }
 
@@ -225,7 +229,7 @@ globalThis.Wegwichtel ??= {};
       });
     }
     if (!supported()) {
-      if (toggle) toggle.disabled = true;
+      for (const toggle of toggles) toggle.disabled = true;
       announce(ns.I18n.t("offline.error.unsupported"));
       return;
     }
@@ -240,11 +244,14 @@ globalThis.Wegwichtel ??= {};
     } else {
       announce(ns.I18n.t("offline.error.save-app-first"));
     }
-    toggle?.addEventListener('change', () => {
-      toggle.setAttribute('aria-checked', String(toggle.checked));
-      void (toggle.checked ? download() : disable()).catch(() => {});
-    });
-    refresh?.addEventListener('click', () => { void download().catch(() => {}); });
+    for (const toggle of toggles) {
+      toggle.addEventListener('change', () => {
+        void (toggle.checked ? download() : disable()).catch(() => {});
+      });
+    }
+    for (const refresh of refreshButtons) {
+      refresh.addEventListener('click', () => { void download().catch(() => {}); });
+    }
   }
 
   ns.OfflineCache = Object.freeze({