1 files changed, 62 insertions, 5 deletions

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d25f570a..d3956c83 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,28 +1,79 @@
 <script>
   import { run } from "svelte/legacy";
-
   import { browser } from "$app/environment";
   import { PUBLIC_DOMAIN } from "$env/static/public";
   import "../app.css";
   import { loading, t } from "$lib/translations";
   import { onMount } from "svelte";
+  import V3Banner from "$comp/V3Banner.svelte";
   import { installPrompt, theme as themeStore } from "$lib/store";
 
+
+const map = { light: 'lofi', dark: 'black', system: 'system' };
+
   let { data, children } = $props();
   let { pathname, theme } = $state(data);
   $effect(() => ($themeStore = data.theme));
   $effect(() => (theme = $themeStore));
+$effect(() => {
+  const v = map[theme] ?? theme;
+  if (!v || v === 'system') {
+    document.documentElement.removeAttribute('data-theme');
+  } else {
+    document.documentElement.setAttribute('data-theme', v);
+  }
+});
 
   let host = PUBLIC_DOMAIN.includes("localhost")
     ? `http://${PUBLIC_DOMAIN}`
     : `https://${PUBLIC_DOMAIN}`;
 
+  function clearBadge() {
+    if ("clearAppBadge" in navigator) {
+      navigator.clearAppBadge().catch(() => {});
+    }
+  }
+
   onMount(() => {
     if (!browser) return;
+
+    // Handle install prompt
     window.addEventListener("beforeinstallprompt", (event) => {
       event.preventDefault();
       $installPrompt = event;
     });
+
+    clearBadge(); // first load
+    document.addEventListener("visibilitychange", () => {
+      if (document.visibilityState === "visible") clearBadge();
+    });
+
+    let hasNotch = typeof window.AndroidNotch !== "undefined";
+    if (hasNotch) {
+      window.AndroidNotch.getInsetTop(
+        (px) => {
+          document.documentElement.style.setProperty(
+            "--safe-area-inset-top",
+            Math.round(px) + "px",
+          );
+        },
+        (err) => {
+          console.error("Failed to get notch inset:", err);
+        },
+      );
+
+      window.AndroidNotch.getInsetBottom(
+        (px) => {
+          document.documentElement.style.setProperty(
+            "--safe-area-inset-bottom",
+            24 + "px",
+          );
+        },
+        (err) => {
+          console.error("Failed to get bottom inset:", err);
+        },
+      );
+    }
   });
 </script>
 
@@ -32,23 +83,21 @@
   <meta name="twitter:title" content="coinos" />
 
   <meta property="og:image" content={`${host}/images/logo.webp`} />
-
   <meta property="og:type" content="website" />
   <meta property="og:description" content="An easy to use bitcoin web wallet" />
   <meta name="description" content="An easy to use bitcoin web wallet" />
 
   <meta name="keywords" content="coinos easy bitcoin web wallet" />
-
   <meta name="twitter:image" content={`${host}/images/logo.webp`} />
   <meta name="twitter:card" content="summary_large_image" />
-
   <meta property="og:url" content={host + pathname} />
   <meta name="twitter:site" content="@coinoswallet" />
   <meta name="twitter:creator" content="@coinoswallet" />
 </svelte:head>
 
 {#if !$loading}
-  <main data-theme={theme}>
+  <main>
+    <V3Banner />
     {@render children?.()}
   </main>
 {/if}
@@ -60,5 +109,13 @@
     --toastContainerBottom: 8rem;
     --toastContainerLeft: calc(50vw - 8rem);
     --toastBackground: #292929;
+
+    --safe-area-inset-top: 0px;
+    --safe-area-inset-bottom: 0px;
+  }
+
+  main {
+    padding-top: var(--safe-area-inset-top);
+    padding-bottom: var(--safe-area-inset-bottom);
   }
 </style>