cache with service worker

src/components/Reload.tsx

@@ -2,11 +2,20 @@ import { Show } from "solid-js";
 // eslint-disable-next-line import/no-unresolved
 import { useRegisterSW } from "virtual:pwa-register/solid";
 
+import close from "~/assets/icons/close.svg";
+import refresh from "~/assets/icons/refresh.svg";
+import { useI18n } from "~/i18n/context";
+
+import { SmallHeader } from "./layout";
+import { Button } from "./layout/Button";
+
 export function ReloadPrompt() {
+    const i18n = useI18n();
+
+    // useRegisterSW can also return an offlineReady thingy
     const {
-        offlineReady: [offlineReady, _setOfflineReady],
-        needRefresh: [needRefresh, _setNeedRefresh],
-        updateServiceWorker: _update
+        needRefresh: [needRefresh, setNeedRefresh],
+        updateServiceWorker
     } = useRegisterSW({
         immediate: true,
         onRegisteredSW(swUrl, r) {
@@ -17,27 +26,48 @@ export function ReloadPrompt() {
         }
     });
 
-    // const close = () => {
-    //     setOfflineReady(false)
-    //     setNeedRefresh(false)
-    // }
+    const dismissPrompt = () => {
+        setNeedRefresh(false);
+    };
+
+    async function updateSw() {
+        await updateServiceWorker();
+    }
 
     return (
-        <Show when={offlineReady() || needRefresh()}>
-            {/* <Card title="PWA settings">
-                <div>
-                    <Show
-                        fallback={<span>New content available, click on reload button to update.</span>}
-                        when={offlineReady()}
-                    >
-                        <span>App ready to work offline</span>
-                    </Show>
+        <Show when={needRefresh()}>
+            <div class="grid grid-cols-[auto_minmax(0,_1fr)_auto] gap-4 rounded-xl bg-neutral-950/50 p-4">
+                <div class="self-center">
+                    <img src={refresh} alt="refresh" class="h-8 w-8" />
                 </div>
-                <Show when={needRefresh()}>
-                    <Button onClick={() => updateServiceWorker(true)}>Reload</Button>
-                </Show>
-                <Button onClick={() => close()}>Close</Button>
-            </Card> */}
+                <div class="flex flex-row justify-between gap-4 max-md:items-center">
+                    <div class="flex flex-col">
+                        <SmallHeader>
+                            {i18n.t("reload.mutiny_update")}
+                        </SmallHeader>
+                        <p class="text-base font-light max-md:hidden">
+                            {i18n.t("reload.new_version_description")}
+                        </p>
+                    </div>
+                    <div class="flex items-center">
+                        <Button
+                            intent="blue"
+                            layout="xs"
+                            class="self-auto"
+                            onClick={updateSw}
+                        >
+                            {i18n.t("reload.reload")}
+                        </Button>
+                    </div>
+                </div>
+                <button
+                    tabindex="-1"
+                    onClick={dismissPrompt}
+                    class="w-8 self-center rounded-lg hover:bg-white/10 active:bg-m-blue"
+                >
+                    <img src={close} alt="Close" />
+                </button>
+            </div>
         </Show>
     );
 }