feat: improve UF2 flow

src/routes/(app)/config/+layout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
+  import type { Snippet } from "svelte";
+  import PageTransition from "./PageTransition.svelte";
   import Navigation from "./Navigation.svelte";
 
   let { children }: { children?: Snippet } = $props();
@@ -8,5 +9,9 @@
 <Navigation />
 
 {#if children}
-  {@render children()}
+  <PageTransition>
+    {#if children}
+      {@render children()}
+    {/if}
+  </PageTransition>
 {/if}

src/routes/(app)/config/PageTransition.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import { fly } from "svelte/transition";
+  import { afterNavigate, beforeNavigate } from "$app/navigation";
+  import { expoIn, expoOut } from "svelte/easing";
+  import type { Snippet } from "svelte";
+
+  let { children }: { children: Snippet } = $props();
+
+  let inDirection = $state(0);
+  let outDirection = $state(0);
+  let outroEnd: undefined | (() => void) = $state(undefined);
+  let animationDone: Promise<void>;
+
+  let isNavigating = $state(false);
+
+  const routeOrder = [
+    "/config/chords/",
+    "/config/layout/",
+    "/config/settings/",
+  ];
+
+  beforeNavigate((navigation) => {
+    const from = navigation.from?.url.pathname;
+    const to = navigation.to?.url.pathname;
+    if (from === to) return;
+    isNavigating = true;
+
+    if (!(from && to && routeOrder.includes(from) && routeOrder.includes(to))) {
+      inDirection = 0;
+      outDirection = 0;
+    } else {
+      const fromIndex = routeOrder.indexOf(from);
+      const toIndex = routeOrder.indexOf(to);
+
+      inDirection = fromIndex > toIndex ? -1 : 1;
+      outDirection = fromIndex > toIndex ? 1 : -1;
+    }
+
+    animationDone = new Promise((resolve) => {
+      outroEnd = resolve;
+    });
+  });
+
+  afterNavigate(async () => {
+    await animationDone;
+    isNavigating = false;
+  });
+</script>
+
+{#if !isNavigating}
+  <main
+    in:fly={{ x: inDirection * 24, duration: 150, easing: expoOut }}
+    out:fly={{ x: outDirection * 24, duration: 150, easing: expoIn }}
+    onoutroend={outroEnd}
+  >
+    {@render children()}
+  </main>
+{/if}
+
+<style lang="scss">
+  main {
+    padding: 0;
+    width: 100%;
+  }
+</style>

src/routes/(app)/config/settings/+page.svelte

@@ -315,7 +315,7 @@
   }
 
   input[type="checkbox"] {
-    font-size: 12px;
+    font-size: 12px !important;
   }
 
   fieldset {