From 9d55044d4321233f6ffdbada737bccb5894a0f2a Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 11 Apr 2024 13:35:06 -0700
Subject: service worker for pwa

---
 .../(app)/[username]/(profile)/+layout.svelte      |  6 +++--
 src/routes/(app)/[username]/(profile)/+page.svelte | 28 ++++++++++++++++------
 src/routes/+layout.svelte                          | 17 +++++++++++++
 3 files changed, 42 insertions(+), 9 deletions(-)

(limited to 'src/routes')

diff --git a/src/routes/(app)/[username]/(profile)/+layout.svelte b/src/routes/(app)/[username]/(profile)/+layout.svelte
index 5752491b..11e33dbf 100644
--- a/src/routes/(app)/[username]/(profile)/+layout.svelte
+++ b/src/routes/(app)/[username]/(profile)/+layout.svelte
@@ -168,14 +168,16 @@
         </a>
       {/if}
 
+      {#if user.username !== subject.username}
       <button
         type="button"
         on:click={toggleDetails}
         class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex justify-center w-full"
       >
-        <Icon icon="edit" style="w-8 mr-2" />
-        <div class="mt-1">{$t("user.details")}</div>
+        <Icon icon="profile" style="w-8 mr-2" />
+        <div class="mt-1">{$t("user.info")}</div>
       </button>
+      {/if}
 
       {#if user?.admin && user.username !== subject.username}
         <form class="w-full flex" on:submit|preventDefault={reset}>
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index f0ab743a..9443c063 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -102,6 +102,21 @@
   let reset = () =>
     (dragDisabled =
       user?.username !== subject?.username || window.innerWidth < 768);
+
+  let installPrompt;
+  onMount(() => {
+    if (!browser) return;
+    window.addEventListener("beforeinstallprompt", (event) => {
+      event.preventDefault();
+      installPrompt = event;
+    });
+  });
+
+  let install = async () => {
+    if (!installPrompt) return;
+    await installPrompt.prompt();
+    installPrompt = null;
+  };
 </script>
 
 <svelte:window on:resize={reset} />
@@ -148,18 +163,17 @@
         </button>
       </a>
 
-      <a href={`/${user.username}/items/create`} class="contents">
+      {#if installPrompt}
         <button
-          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-primary grow basis-full"
+          class="rounded-2xl border py-5 px-6 font-bold hover:opacity-80 flex bg-black text-white grow basis-full fixed bottom-16"
+          on:click={install}
         >
           <div class="mx-auto flex gap-2">
-            <Icon icon="plus" style="w-8 mx-auto" />
-            <div class="my-auto text-xl whitespace-nowrap">
-              {$t("items.add")}
-            </div>
+            <Icon icon="save" style="w-8 mx-auto invert" />
+            <div class="my-auto text-xl whitespace-nowrap">Install app</div>
           </div>
         </button>
-      </a>
+      {/if}
     </div>
   {/if}
 
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 545018ed..43e573ef 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,23 @@
   import { PUBLIC_DOMAIN } from "$env/static/public";
   import "../app.css";
   import { loading, t } from "$lib/translations";
+  import { onMount } from "svelte";
+  import { dev } from "$app/environment";
+
+    onMount(() => {
+    if ("serviceWorker" in navigator) {
+      navigator.serviceWorker
+        .register("/service-worker.js", {
+          type: dev ? "module" : "classic",
+        })
+        .then((registration) => {
+          console.log("SW registered: ", registration);
+        })
+        .catch((registrationError) => {
+          console.log("SW registration failed: ", registrationError);
+        });
+    }
+  });
 
   export let data;
   let { pathname } = data;
-- 
cgit v1.2.3