fix: warn users if no device is connected

fix: can't backup without a device

src/routes/Footer.svelte

@@ -8,6 +8,7 @@
   import {loadLocaleAsync} from "../i18n/i18n-util.async"
   import {tick} from "svelte"
   import SyncOverlay from "./SyncOverlay.svelte"
+  import {serialPort} from "$lib/serial/connection"
 
   let locale = (browser && (localStorage.getItem("locale") as Locales)) || detectLocale()
   $: if (browser)
@@ -46,9 +47,14 @@
       >
     </li>
   </ul>
-
-  <SyncOverlay />
-
+  <div>
+    {#if !$serialPort}
+      <div class="warning">
+        <span class="icon">warning</span>{$LL.deviceManager.NO_DEVICE()}
+      </div>
+    {/if}
+    <SyncOverlay />
+  </div>
   <ul>
     <li>
       <input use:action={{title: $LL.profile.theme.COLOR_SCHEME()}} type="color" bind:value={$theme.color} />
@@ -87,6 +93,14 @@
     opacity: 0;
   }
 
+  .warning {
+    color: var(--md-sys-color-error);
+    gap: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
   input[type="color"] {
     cursor: pointer;
 
@@ -116,9 +130,10 @@
   }
 
   footer {
-    display: flex;
+    display: grid;
     align-items: center;
-    justify-content: space-between;
+    justify-content: center;
+    grid-template-columns: 1fr auto 1fr;
 
     width: 100%;
     padding: 8px;
@@ -137,6 +152,10 @@
     padding: 0;
 
     list-style: none;
+
+    &:last-child {
+      justify-content: flex-end;
+    }
   }
 
   ul:last-child {

src/routes/Navigation.svelte

@@ -50,15 +50,13 @@
         <PwaStatus />
       {/await}
     {/if}
-    {#if $serialPort}
-      <button use:action={{title: $LL.backup.TITLE()}} use:popup={BackupPopup} class="icon {$syncStatus}">
-        {#if $userPreferences.backup}
-          history
-        {:else}
-          history_toggle_off
-        {/if}
-      </button>
-    {/if}
+    <button use:action={{title: $LL.backup.TITLE()}} use:popup={BackupPopup} class="icon {$syncStatus}">
+      {#if $userPreferences.backup}
+        history
+      {:else}
+        history_toggle_off
+      {/if}
+    </button>
     <button
       bind:this={connectButton}
       use:action={{title: $LL.deviceManager.TITLE()}}

src/routes/config/+layout.svelte

@@ -1,17 +0,0 @@
-<script>
-  import {serialPort} from "$lib/serial/connection"
-  import {LL} from "../../i18n/i18n-svelte"
-</script>
-
-{#if $serialPort}
-  <slot />
-{:else}
-  <p>{$LL.deviceManager.NO_DEVICE()}</p>
-{/if}
-
-<style lang="scss">
-  p {
-    margin: auto;
-    opacity: 0.4;
-  }
-</style>

src/routes/config/layout/+page.svelte

@@ -30,7 +30,7 @@
       onHidden(instance) {
         instance.destroy()
       },
-      onDestroy(instance) {
+      onDestroy() {
         shareComponent.$destroy()
       },
     }).show()