From 2d7d4cf0917820ca42f34dc600307981674dad5d Mon Sep 17 00:00:00 2001
From: wukko <me@wukko.me>
Date: Tue, 23 Jul 2024 16:04:43 +0600
Subject: [PATCH] web: add an update notification

---
 web/i18n/en/notification.json                 |   4 +
 .../components/misc/UpdateNotification.svelte | 102 ++++++++++++++++++
 web/src/components/sidebar/Sidebar.svelte     |   1 +
 web/src/routes/+layout.svelte                 |   5 +
 web/svelte.config.js                          |   3 +
 5 files changed, 115 insertions(+)
 create mode 100644 web/i18n/en/notification.json
 create mode 100644 web/src/components/misc/UpdateNotification.svelte

diff --git a/web/i18n/en/notification.json b/web/i18n/en/notification.json
new file mode 100644
index 00000000..a9b32139
--- /dev/null
+++ b/web/i18n/en/notification.json
@@ -0,0 +1,4 @@
+{
+    "update.title": "update is available!",
+    "update.subtext": "press to reload"
+}
diff --git a/web/src/components/misc/UpdateNotification.svelte b/web/src/components/misc/UpdateNotification.svelte
new file mode 100644
index 00000000..0e2c93db
--- /dev/null
+++ b/web/src/components/misc/UpdateNotification.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+    import { t } from "$lib/i18n/translations";
+
+    import IconComet from "@tabler/icons-svelte/IconComet.svelte";
+</script>
+
+<div id="update-notification">
+    <button class="update-button" on:click={() => window.location.reload()}>
+        <div class="update-icon">
+            <IconComet />
+        </div>
+        <div class="update-text">
+            <div>{$t("notification.update.title")}</div>
+            <div class="subtext">{$t("notification.update.subtext")}</div>
+        </div>
+    </button>
+</div>
+
+<style>
+    #update-notification {
+        position: absolute;
+        display: flex;
+        justify-content: end;
+        align-items: center;
+        width: 100%;
+        pointer-events: none;
+        z-index: 2;
+    }
+
+    .update-button {
+        padding: 8px 16px 8px 8px;
+        pointer-events: all;
+        gap: 8px;
+        margin: var(--padding);
+        margin-top: calc(env(safe-area-inset-top) + var(--padding));
+        box-shadow:
+            var(--button-box-shadow),
+            0 0 10px 0px var(--button-elevated-hover);
+        border-radius: 14px;
+        animation: slide-in-top 0.4s;
+    }
+
+    .update-icon {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: var(--button-elevated-hover);
+        padding: 2px;
+        border-radius: 6px;
+    }
+
+    .update-icon :global(svg) {
+        stroke-width: 1.5px;
+        width: 24px;
+        height: 24px;
+        will-change: transform;
+    }
+
+    .update-text {
+        display: flex;
+        flex-direction: column;
+        text-align: left;
+        font-size: 13px;
+    }
+
+    .subtext {
+        padding: 0;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    .update-text,
+    .subtext {
+        line-height: 1.2;
+    }
+
+    @keyframes slide-in-top {
+        from {
+            transform: translateY(-150px);
+        }
+        100% {
+            transform: none;
+        }
+    }
+
+    @media screen and (max-width: 535px) {
+        #update-notification {
+            bottom: var(--sidebar-height-mobile);
+            justify-content: center;
+            animation: slide-in-bottom 0.4s;
+        }
+
+        @keyframes slide-in-bottom {
+            from {
+                transform: translateY(300px);
+            }
+            100% {
+                transform: none;
+            }
+        }
+    }
+</style>
diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte
index 29ad6248..862071c6 100644
--- a/web/src/components/sidebar/Sidebar.svelte
+++ b/web/src/components/sidebar/Sidebar.svelte
@@ -83,6 +83,7 @@
             bottom: 0;
             justify-content: center;
             align-items: flex-start;
+            z-index: 3;
         }
 
         #sidebar::before {
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index ed8ed818..741ec386 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { afterNavigate } from "$app/navigation";
+    import { updated } from "$app/stores";
 
     import env from "$lib/env";
     import settings from "$lib/state/settings";
@@ -13,6 +14,7 @@
     import Sidebar from "$components/sidebar/Sidebar.svelte";
     import NotchSticker from "$components/misc/NotchSticker.svelte";
     import DialogHolder from "$components/dialog/DialogHolder.svelte";
+    import UpdateNotification from "$components/misc/UpdateNotification.svelte";
 
     $: reduceMotion =
         $settings.appearance.reduceMotion || device.prefers.reducedMotion;
@@ -49,6 +51,9 @@
         data-reduce-motion={reduceMotion}
         data-reduce-transparency={reduceTransparency}
     >
+        {#if $updated}
+            <UpdateNotification />
+        {/if}
         {#if device.is.iPhone && app.is.installed}
             <NotchSticker />
         {/if}
diff --git a/web/svelte.config.js b/web/svelte.config.js
index fe1f30ee..87d6c9df 100644
--- a/web/svelte.config.js
+++ b/web/svelte.config.js
@@ -29,6 +29,9 @@ const config = {
             precompress: false,
             strict: true
         }),
+        version: {
+            pollInterval: 60000
+        },
         paths: {
             relative: false
         },