feat: improvements

src/routes/(app)/PageTransition.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import { fly } from "svelte/transition";
+  import { afterNavigate, beforeNavigate } from "$app/navigation";
+  import { expoIn, expoOut } from "svelte/easing";
+
+  let inDirection = 0;
+  let outDirection = 0;
+  let outroEnd: undefined | (() => void) = undefined;
+  let animationDone: Promise<void>;
+
+  let isNavigating = 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 }}
+    on:outroend={outroEnd}
+  >
+    <slot />
+  </main>
+{/if}