feat: re-introduce background sync

src/routes/+layout.svelte

@@ -23,7 +23,6 @@
   import Footer from "./Footer.svelte"
   import {runLayoutDetection} from "$lib/os-layout.js"
   import PageTransition from "./PageTransition.svelte"
-  import SyncOverlay from "./SyncOverlay.svelte"
   import {restoreFromFile} from "$lib/backup/backup"
   import {goto} from "$app/navigation"
 
@@ -77,8 +76,6 @@
   <meta name="theme-color" content={data.themeColor} />
 </svelte:head>
 
-<SyncOverlay />
-
 <Navigation />
 
 <!-- <PickChangesDialog /> -->

src/routes/Footer.svelte

@@ -7,6 +7,7 @@
   import {detectLocale, locales} from "../i18n/i18n-util"
   import {loadLocaleAsync} from "../i18n/i18n-util.async"
   import {tick} from "svelte"
+  import SyncOverlay from "./SyncOverlay.svelte"
 
   let locale = (browser && (localStorage.getItem("locale") as Locales)) || detectLocale()
   $: if (browser)
@@ -45,6 +46,9 @@
       >
     </li>
   </ul>
+
+  <SyncOverlay />
+
   <ul>
     <li>
       <input use:action={{title: $LL.profile.theme.COLOR_SCHEME()}} type="color" bind:value={$theme.color} />

src/routes/SyncOverlay.svelte

@@ -1,49 +1,30 @@
 <script lang="ts">
   import {syncProgress, syncStatus} from "$lib/serial/connection"
   import LL from "../i18n/i18n-svelte"
-
-  $: if (dialog) toggleDialog($syncStatus)
-
-  async function toggleDialog(status: "uploading" | "downloading" | string) {
-    // debounce
-    await new Promise(resolve => setTimeout(resolve, 150))
-    if ($syncStatus !== status) return
-
-    if (!dialog.open && ($syncStatus === "uploading" || $syncStatus === "downloading")) {
-      message = $syncStatus
-      dialog.showModal()
-      dialog.animate([{opacity: 0}, {opacity: 1}], {duration: 250, easing: "ease"})
-    } else if (dialog.open) {
-      const animation = dialog.animate([{opacity: 1}, {opacity: 0}], {duration: 250, easing: "ease"})
-      animation.addEventListener("finish", () => {
-        dialog.close()
-      })
-    }
-  }
-
-  let message: "downloading" | "uploading"
-  let dialog: HTMLDialogElement
+  import {fly} from "svelte/transition"
 </script>
 
-<dialog bind:this={dialog}>
-  {#if message === "downloading"}
-    <h2>{$LL.sync.TITLE_READ()}</h2>
-  {:else}
-    <h2>{$LL.sync.TITLE_WRITE()}</h2>
-  {/if}
-  <progress max={$syncProgress?.max ?? 1} value={$syncProgress?.current ?? 1}></progress>
-</dialog>
+{#if $syncStatus !== "done"}
+  <div transition:fly={{y: 40}}>
+    <progress max={$syncProgress?.max ?? 1} value={$syncProgress?.current ?? 1}></progress>
+    {#if $syncStatus === "downloading"}
+      <div>{$LL.sync.TITLE_READ()}</div>
+    {:else}
+      <div>{$LL.sync.TITLE_WRITE()}</div>
+    {/if}
+  </div>
+{/if}
 
 <style lang="scss">
-  dialog::backdrop {
-    background: rgba(0 0 0 / 70%);
+  div {
+    font-size: 12px;
   }
 
   progress {
     overflow: hidden;
     width: 100%;
-    height: 16px;
-    border-radius: 8px;
+    height: 8px;
+    border-radius: 4px;
   }
 
   progress::-webkit-progress-bar {
@@ -53,15 +34,4 @@
   progress::-webkit-progress-value {
     background: var(--md-sys-color-primary);
   }
-
-  dialog {
-    max-width: 14cm;
-    padding: 2cm;
-
-    color: white;
-
-    background: none;
-    border: none;
-    outline: none;
-  }
 </style>