feat: tauri serial polyfill

src/routes/+layout.svelte

@@ -57,7 +57,7 @@
       } satisfies RegisterSWOptions)
     }
 
-    if ($userPreferences.autoConnect && (await canAutoConnect())) await initSerial()
+    if (browser && $userPreferences.autoConnect && (await canAutoConnect())) await initSerial()
   })
 
   $: webManifestLink = pwaInfo ? pwaInfo.webManifest.linkTag : ""
@@ -76,7 +76,7 @@
   <slot />
 </main>
 
-{#if browser && !("serial" in navigator)}
+{#if !import.meta.env.TAURI_FAMILY && browser && !("serial" in navigator)}
   <BrowserWarning />
 {/if}
 

src/routes/BrowserWarning.svelte

@@ -17,19 +17,10 @@
     >{$LL.browserWarning.INFO_BROWSER_SUFFIX()}
   </p>
   <div>
-    <a href="https://www.chromium.org/getting-involved/download-chromium/" target="_blank" class="chrome"
-      >{$LL.browserWarning.DOWNLOAD_CHROMIUM()}</a
+    <a href="https://github.com/Theaninova/dotio/releases" target="_blank"
+      >{$LL.browserWarning.DOWNLOAD_APP()}</a
     >
   </div>
-  <h5>{$LL.browserWarning.OTHER_OPTIONS()}</h5>
-  <div>
-    <a href="https://www.google.com/chrome/" target="_blank" class="chrome">Chrome</a>
-    <a href="https://www.microsoft.com/en-us/edge/download?form=MA13FJ" target="_blank" class="edge"
-      >Microsoft Edge</a
-    >
-    <a href="https://www.opera.com/" target="_blank" class="opera">Opera</a>
-    <a href="https://vivaldi.com/download/" class="vivaldi">Vivaldi</a>
-  </div>
 </dialog>
 
 <style lang="scss">
@@ -77,22 +68,6 @@
 
       background: var(--md-sys-color-on-error);
     }
-
-    &.chrome::before {
-      mask: url("/browsers/googlechrome.svg");
-    }
-
-    &.edge::before {
-      mask: url("/browsers/microsoftedge.svg");
-    }
-
-    &.opera::before {
-      mask: url("/browsers/opera.svg");
-    }
-
-    &.vivaldi::before {
-      mask: url("/browsers/vivaldi.svg");
-    }
   }
 
   dialog::backdrop {

src/routes/Profile.svelte

@@ -12,6 +12,18 @@
     await loadLocaleAsync(locale)
     setLocale(locale)
   })()
+
+  function switchTheme() {
+    const mode = $theme.mode === "light" ? "dark" : "light"
+    if (document.startViewTransition) {
+      document.startViewTransition(async () => {
+        $theme.mode = mode
+        await tick()
+      })
+    } else {
+      $theme.mode = mode
+    }
+  }
 </script>
 
 <section>
@@ -26,12 +38,7 @@
     <button
       title={$theme.mode === "light" ? $LL.profile.theme.LIGHT_MODE() : $LL.profile.theme.DARK_MODE()}
       class="icon"
-      on:click={() => {
-        document.startViewTransition(async () => {
-          $theme.mode = $theme.mode === "light" ? "dark" : "light"
-          await tick()
-        })
-      }}
+      on:click={switchTheme}
     >
       {#if $theme.mode === "light"}
         light_mode