replace safari persiting popup with dedicated component

index.js

@@ -10,40 +10,6 @@ try {
   console.error("failed to register service worker: ", error);
 }
 
-try {
-  navigator.storage.persisted().then((persistent) => {
-    if (!persistent && navigator.vendor === "Apple Computer, Inc.") {
-      const question =
-        "S'schaut so aus als würdest du an Safari-Browser benutzn. S'isch " +
-        "leida aba so, dass dea manchmoi selbstständig oanfach Datn löscht, " +
-        "wenn ma a Seitn z'lang nit heanimmt. Des is füa an Watterblock " +
-        "natürlich eha schlecht.\n" +
-        "\n" +
-        "Wennst magst kannt ma aba probian ob ma des Löschn fian Block " +
-        "ausschaltn kenna. Wennst magst klick oanfach auf \"Ok\"!\n" +
-        "\n" +
-        "Wenns gangen is kimsch danach glei zum Block, und falls nit " +
-        "bekommst dazu no a extra Nachricht.";
-
-      const failure =
-        "S'isch leida nit gangen, Safari hat na gsagt. Du kansch entweda an " +
-        "andern Browser heanemmen, oder halt damit Leben wenn Safari deine " +
-        "Datn löscht.\n" +
-        "\n" +
-        "#JustSafariThings";
-
-      if (window.confirm(question)) {
-        navigator.storage.persist().then((persistent) => {
-          if (!persistent)
-            window.alert(failure);
-        });
-      }
-    }
-  });
-} catch (error) {
-  console.error("failed to try to persist in safary: ", error);
-}
-
 m.route.prefix = "";
 m.route(document.body, "/", {
   "/": {

ui/safari-persist.js

@@ -0,0 +1,65 @@
+"use strict";
+
+export default class SafariPersist {
+  #safari = navigator.vendor === "Apple Computer, Inc.";
+  /** @type {?boolean} */
+  #persisted = null;
+
+  oninit() {
+    if (this.#safari) {
+      try {
+        navigator.storage.persisted()
+          .then(p => {
+            this.#persisted = p;
+            m.redraw();
+          });
+      } catch (error) {
+        console.error("failed to determine persistence state: ", error);
+      }
+    }
+  }
+
+  view() {
+    if (!this.#safari || this.#persisted !== false)
+      return null;
+
+    return m("li.item.-text._alternate._apply", [
+      m("p", m("strong", "Obacht, Safari-Nutza!")),
+      m("p", [
+        "S'isch leida so, dass da Safari manchmoi oanfach von sich aus ",
+        "entscheidet Datn z'löschn, de in iam gspeichat sen. Des berifft ",
+        "a die Datn vom Watterblock.",
+      ]),
+      m("p", [
+        "Is natürlich eha bled, aba als Webseitn-Entwickla kann ma da leida ",
+        "praktisch gar nix machn. Es gibt zwar a Option um des Löschn aus ",
+        "z'schaltn, aba bei dea kann Safari oanfach „na“ sagn, wenn es will.",
+      ]),
+      m("p", [
+        "Dea Knopf direkt unta dem Text machat genau des. Kannst probian ",
+        "wennst willst. Falls es geht verschwindet de Meldung. Falls nit ",
+        "gregst an Fehla anzoagt. Dann bleibt da leida nur mehr Browser ",
+        "wechsln oda mit eventuellem Datnverlust z'lebn.",
+      ]),
+      m("p", m(
+        "button.wb-button._positioned",
+        { onclick: () => this.#onpersist() },
+        "Datn persistieren",
+      )),
+    ]);
+  }
+
+  #onpersist() {
+    try {
+      navigator.storage.persist().then(p => {
+        this.#persisted = p;
+        m.redraw();
+
+        if (!p)
+          window.alert("Safari hat leida na gsagt.");
+      });
+    } catch (error) {
+      console.error("failed to attempt to persist: ", error);
+    }
+  }
+}

ui/session_list.js

@@ -1,5 +1,6 @@
 "use strict";
 
+import SafariPersist from "./safari-persist.js";
 import Session from "/models/session.js";
 
 export default class SessionList {
@@ -7,6 +8,7 @@ export default class SessionList {
   view({attrs: { models, onSelect, onDelete } }) {
     return m("section.wb-session-list", [
       m("ol", [
+        m(SafariPersist),
         models.length === 0
           ? m("li.item.-text._alternate._apply", "Du hast no koane Sätz…")
           : null,