feat: new blocking progress bar, fixes #18

feat: change cloud icon to history, fixes #15
fix: action search items overlap, fixes #16
feat: show tooltips immediately

src/routes/PageTransition.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import {fly} from "svelte/transition"
+  import {afterNavigate, beforeNavigate} from "$app/navigation"
+  import {expoIn, expoOut, quadIn, quadOut} 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
+    isNavigating = true
+
+    if (!(from && to && routeOrder.includes(from) && routeOrder.includes(to))) {
+      inDirection = 0
+      outDirection = 0
+      return
+    }
+
+    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}