offline mode

3 files changed, 24 insertions, 2 deletions

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 40f28444..748dfdba 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -16,11 +16,14 @@
     theme as themeStore,
     fiat,
     rate as rateStore,
+    cachedUser,
+    offline,
   } from "$lib/store";
   import { page } from "$app/stores";
   import { browser } from "$app/environment";
   import LoadingSplash from "$comp/LoadingSplash.svelte";
   import AppHeader from "$comp/AppHeader.svelte";
+  import OfflineBanner from "$comp/OfflineBanner.svelte";
   import Nostr from "$comp/Nostr.svelte";
   import Password from "$comp/Password.svelte";
   import { s, f, toFiat, success, getCookie, warning, post } from "$lib/utils";
@@ -41,6 +44,9 @@
   $effect(() => {
     theme = $themeStore;
   });
+  $effect(() => {
+    if (user) $cachedUser = user;
+  });
 
   afterNavigate(() => {
     document.cookie = `pathname=${$page.url.pathname}; path=/; max-age=86400`;
@@ -172,6 +178,12 @@
 
   onMount(async () => {
     if (browser) {
+      $offline = !navigator.onLine;
+      const goOnline = () => ($offline = false);
+      const goOffline = () => ($offline = true);
+      window.addEventListener("online", goOnline);
+      window.addEventListener("offline", goOffline);
+
       checkSocket();
       $pin = getCookie("pin");
 
@@ -274,6 +286,7 @@
 <SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 
 <main class="pb-4 min-h-dvh" data-theme={theme}>
+  <OfflineBanner />
   <AppHeader {user} {subject} />
   {#if !$loading}
     {@render children?.()}
diff --git a/src/routes/(app)/[username]/(profile)/+page.svelte b/src/routes/(app)/[username]/(profile)/+page.svelte
index 2bde3e08..9c0d2203 100644
--- a/src/routes/(app)/[username]/(profile)/+page.svelte
+++ b/src/routes/(app)/[username]/(profile)/+page.svelte
@@ -5,7 +5,7 @@
   import Balance from "$comp/Balance.svelte";
   import Spinner from "$comp/Spinner.svelte";
   import { t } from "$lib/translations";
-  import { installPrompt, password } from "$lib/store";
+  import { installPrompt, password, cachedAccounts, cachedRates } from "$lib/store";
   import { afterNavigate, goto, invalidate, preloadData } from "$app/navigation";
   import { page } from "$app/stores";
   import { versions, post, fail, getCookie } from "$lib/utils";
@@ -84,6 +84,12 @@
   $effect(() => {
     if (user) user.savings = 0;
   });
+  $effect(() => {
+    if (accounts?.length) $cachedAccounts = accounts;
+  });
+  $effect(() => {
+    if (rates) $cachedRates = rates;
+  });
   let { host } = $derived($page.url);
 </script>
 
diff --git a/src/routes/(app)/payments/[...page]/+page.svelte b/src/routes/(app)/payments/[...page]/+page.svelte
index 1d5a0407..afce7711 100644
--- a/src/routes/(app)/payments/[...page]/+page.svelte
+++ b/src/routes/(app)/payments/[...page]/+page.svelte
@@ -3,7 +3,7 @@
   import Payments from "$comp/Payments.svelte";
   import { onMount } from "svelte";
   import { format } from "date-fns";
-  import { newPayment } from "$lib/store";
+  import { newPayment, cachedPayments } from "$lib/store";
   import { t } from "$lib/translations";
   import { get, f, s, si, sat, loc, sats, types } from "$lib/utils";
   import { page } from "$app/stores";
@@ -55,6 +55,9 @@
       invalidate(`/users/${user.username}`);
     }
   });
+  $effect(() => {
+    if (payments?.length && (!p || p === "1")) $cachedPayments = payments;
+  });
 
   let path = $derived(
     $page.params.page