add install button

src/components/TopAppBar.svelte

@@ -9,6 +9,8 @@
   import { YoutubeIcon } from '~/components/icons';
   import { page } from '$app/stores';
   import { PAGE_TITLES } from '~/state/page_titles';
+  import { pwa_event_triggerer, pwa_install_event_fired } from '~/state/main';
+  import { OiDownload24 } from 'svelte-icons-pack/oi';
 
   type Props = {
     start?: import('svelte').Snippet;
@@ -109,6 +111,17 @@
         />
         <span>Project's Github Page</span>
       </a>
+      {#if $pwa_install_event_fired}
+        <button
+          class="will-close select-none gap-1 px-2 py-1 text-sm outline-none"
+          onclick={async () => {
+            if ($pwa_install_event_fired) await $pwa_event_triggerer.prompt();
+          }}
+        >
+          <Icon src={OiDownload24} class="-mt-1 text-base" />
+          Install
+        </button>
+      {/if}
       <div class="wont-close flex space-x-3 rounded-md px-2 py-1">
         <span class="mt-1">Set Theme</span>
         <ThemeChanger />

src/routes/+layout.svelte

@@ -10,6 +10,8 @@
   import { QueryClientProvider } from '@tanstack/svelte-query';
   import { SvelteQueryDevtools } from '@tanstack/svelte-query-devtools';
   import { queryClient } from '~/state/query';
+  import { pwa_event_triggerer, pwa_install_event_fired } from '~/state/main';
+  import { onMount } from 'svelte';
 
   interface Props {
     children?: import('svelte').Snippet;
@@ -19,6 +21,14 @@
 
   initializeStores();
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
+
+  onMount(() => {
+    window.addEventListener('beforeinstallprompt', (event) => {
+      event.preventDefault();
+      $pwa_event_triggerer = event;
+      $pwa_install_event_fired = true;
+    });
+  });
 </script>
 
 <svelte:head>

src/state/main.ts

@@ -0,0 +1,7 @@
+import { writable } from 'svelte/store';
+
+/**
+ * This should not be true if PWA is not installable or is already installed
+ */
+export let pwa_install_event_fired = writable(false);
+export let pwa_event_triggerer = writable<any | null>(null);