Break out some utils

src/app/components/PrimaryNav.svelte

@@ -6,9 +6,9 @@
 </style>
 
 <script lang="ts">
-  import Icon from "lib/components/Icon.svelte"
-  import PrimaryNavItem from "lib/components/PrimaryNavItem.svelte"
-  import {spaces} from "app/state"
+  import Icon from "@lib/components/Icon.svelte"
+  import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
+  import {spaces} from "@app/state"
 </script>
 
 <div class="relative w-14 bg-base-100">

src/app/components/SecondaryNav.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import Icon from "lib/components/Icon.svelte"
-  import SecondaryNavItem from "lib/components/SecondaryNavItem.svelte"
+  import Icon from "@lib/components/Icon.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
 </script>
 
 <div class="flex w-60 flex-col gap-1 bg-base-300 px-2 py-4">

src/app/modal.ts

@@ -0,0 +1,21 @@
+import type {ComponentType} from "svelte"
+import {readable, writable} from "svelte/store"
+import {randomId} from "@welshman/lib"
+import {pushState} from "$app/navigation"
+
+export const modals = new Map()
+
+export const pushModal = (component: ComponentType, props: Record<string, any>) => {
+  const id = randomId()
+
+  // TODO: fix memory leak here by listening to history somehow
+  modals.set(id, {component, props})
+  pushState("", {modal: id})
+
+  return id
+}
+
+export const popModal = (id: string) => {
+  modals.delete(id)
+  history.back()
+}

src/app/state.ts

@@ -1,62 +1,4 @@
-import type {ComponentType} from "svelte"
-import {readable, writable} from "svelte/store"
-import type {FlyParams} from "svelte/transition"
-import {fly as baseFly} from "svelte/transition"
-import {randomId} from "@welshman/lib"
-import {pushState} from "$app/navigation"
-
-// Animations
-
-export const fly = (node: Element, params?: FlyParams | undefined) =>
-  baseFly(node, {y: 20, ...params})
-
-// Toast
-
-export type Toast = {
-  id: number
-  message: string
-  options: ToastOptions
-}
-
-export type ToastOptions = {
-  timeout?: number
-}
-
-export const toast = writable<Toast | null>(null)
-
-export const pushToast = (
-  {message = "", id = Math.random()}: Partial<Toast>,
-  options: ToastOptions,
-) => {
-  toast.set({id, message, options})
-
-  setTimeout(() => popToast(id), options.timeout || 5000)
-
-  return id
-}
-
-export const popToast = (id: number) => toast.update($t => ($t?.id === id ? null : $t))
-
-// Modals
-
-export const modals = new Map()
-
-export const pushModal = (component: ComponentType, props: Record<string, any>) => {
-  const id = randomId()
-
-  // TODO: fix memory leak here by listening to history somehow
-  modals.set(id, {component, props})
-  pushState("", {modal: id})
-
-  return id
-}
-
-export const popModal = (id: string) => {
-  modals.delete(id)
-  history.back()
-}
-
-// App state
+import {readable} from "svelte/store"
 
 export const spaces = readable([
   {

src/app/toast.ts

@@ -0,0 +1,27 @@
+import {writable} from "svelte/store"
+import {randomId} from "@welshman/lib"
+
+export type Toast = {
+  id: string
+  message: string
+  options: ToastOptions
+}
+
+export type ToastOptions = {
+  timeout?: number
+}
+
+export const toast = writable<Toast | null>(null)
+
+export const pushToast = (
+  {message = "", id = randomId()}: Partial<Toast>,
+  options: ToastOptions,
+) => {
+  toast.set({id, message, options})
+
+  setTimeout(() => popToast(id), options.timeout || 5000)
+
+  return id
+}
+
+export const popToast = (id: string) => toast.update($t => ($t?.id === id ? null : $t))