4 files changed, 20 insertions, 15 deletions
diff --git a/src/lib/store.js b/src/lib/store.js
index 6245fb76..747afc4e 100644
--- a/src/lib/store.js
+++ b/src/lib/store.js
@@ -42,6 +42,7 @@ export let avatar = writable();
 export let banner = writable();
 export let event = writable();
 export let events = writable({});
+export let installPrompt = writable();
 export let invoice = writable();
 export let last = writable();
 export let loginRedirect = writable();
diff --git a/src/locales/en.json b/src/locales/en.json
index 93affb7f..fc6209fe 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -155,6 +155,7 @@
 		"subheader": "Latest Updates"
 	},
 	"user": {
+    "isntall": "Install app",
 		"info": "Info",
 		"noMessages": "You have not sent or received any messages yet",
 		"profilePage": "Profile page",
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 9443c063..81cee136 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -2,7 +2,6 @@
   import { browser } from "$app/environment";
   import { goto, invalidate } from "$app/navigation";
   import { btc, f, sat, post } from "$lib/utils";
-  import { onMount } from "svelte";
   import Icon from "$comp/Icon.svelte";
   import Balance from "$comp/Balance.svelte";
   import DeleteItem from "$comp/DeleteItem.svelte";
@@ -10,6 +9,7 @@
   import { fade } from "svelte/transition";
   import { cubicIn } from "svelte/easing";
   import { flip } from "svelte/animate";
+  import { installPrompt } from "$lib/store";
 
   import {
     dndzone,
@@ -103,19 +103,10 @@
     (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;
+    if (!$installPrompt) return;
+    await $installPrompt.prompt();
+    $installPrompt = null;
   };
 </script>
 
@@ -163,14 +154,14 @@
         </button>
       </a>
 
-      {#if installPrompt}
+      {#if $installPrompt}
         <button
           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="save" style="w-8 mx-auto invert" />
-            <div class="my-auto text-xl whitespace-nowrap">Install app</div>
+            <div class="my-auto text-xl whitespace-nowrap">{$t("user.install")}</div>
           </div>
         </button>
       {/if}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 545018ed..bfab47ab 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,6 +2,8 @@
   import { PUBLIC_DOMAIN } from "$env/static/public";
   import "../app.css";
   import { loading, t } from "$lib/translations";
+  import { onMount } from "svelte";
+  import { installPrompt } from "$lib/store";
 
   export let data;
   let { pathname } = data;
@@ -9,6 +11,16 @@
   let host = PUBLIC_DOMAIN.includes("localhost")
     ? `http://${PUBLIC_DOMAIN}`
     : `https://${PUBLIC_DOMAIN}`;
+
+
+  onMount(() => {
+    if (!browser) return;
+    window.addEventListener("beforeinstallprompt", (event) => {
+      event.preventDefault();
+      $installPrompt = event;
+    });
+  };
+
 </script>
 
 <svelte:head>