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))

src/lib/components/Icon.svelte

@@ -8,18 +8,18 @@
 <script lang="ts">
   import cx from "classnames"
   import {switcher} from "@welshman/lib"
-  import AddSquare from "assets/icons/Add Square.svg?dataurl"
-  import AddCircle from "assets/icons/Add Circle.svg?dataurl"
-  import AltArrowRight from "assets/icons/Alt Arrow Right.svg?dataurl"
-  import ClipboardText from "assets/icons/Clipboard Text.svg?dataurl"
-  import Compass from "assets/icons/Compass.svg?dataurl"
-  import CompassBig from "assets/icons/Compass Big.svg?dataurl"
-  import HandPills from "assets/icons/Hand Pills.svg?dataurl"
-  import HomeSmile from "assets/icons/Home Smile.svg?dataurl"
-  import Plain from "assets/icons/Plain.svg?dataurl"
-  import Settings from "assets/icons/Settings.svg?dataurl"
-  import UFO3 from "assets/icons/UFO 3.svg?dataurl"
-  import UserHeart from "assets/icons/User Heart.svg?dataurl"
+  import AddSquare from "@assets/icons/Add Square.svg?dataurl"
+  import AddCircle from "@assets/icons/Add Circle.svg?dataurl"
+  import AltArrowRight from "@assets/icons/Alt Arrow Right.svg?dataurl"
+  import ClipboardText from "@assets/icons/Clipboard Text.svg?dataurl"
+  import Compass from "@assets/icons/Compass.svg?dataurl"
+  import CompassBig from "@assets/icons/Compass Big.svg?dataurl"
+  import HandPills from "@assets/icons/Hand Pills.svg?dataurl"
+  import HomeSmile from "@assets/icons/Home Smile.svg?dataurl"
+  import Plain from "@assets/icons/Plain.svg?dataurl"
+  import Settings from "@assets/icons/Settings.svg?dataurl"
+  import UFO3 from "@assets/icons/UFO 3.svg?dataurl"
+  import UserHeart from "@assets/icons/User Heart.svg?dataurl"
 
   export let icon
   export let size = 5

src/lib/index.ts

@@ -1 +1 @@
-// place files you want to import through the `$lib` alias in this folder.
+

src/lib/transition.ts

@@ -0,0 +1,5 @@
+import type {FlyParams} from "svelte/transition"
+import {fly as baseFly} from "svelte/transition"
+
+export const fly = (node: Element, params?: FlyParams | undefined) =>
+  baseFly(node, {y: 20, ...params})

src/routes/+layout.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-  import "src/app.css"
+  import "@src/app.css"
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {onNavigate} from "$app/navigation"
-  import Icon from "lib/components/Icon.svelte"
-  import PrimaryNav from "app/components/PrimaryNav.svelte"
-  import SecondaryNav from "app/components/SecondaryNav.svelte"
-  import {fly, toast, modals, pushModal} from "app/state"
+  import {fly} from '@lib/transition'
+  import Icon from "@lib/components/Icon.svelte"
+  import {toast} from '@app/toast'
+  import {modals, pushModal} from '@app/modal'
+  import PrimaryNav from "@app/components/PrimaryNav.svelte"
+  import SecondaryNav from "@app/components/SecondaryNav.svelte"
 
   const login = async () => {
     const nl = await import("nostr-login")

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Icon from "lib/components/Icon.svelte"
+  import Icon from "@lib/components/Icon.svelte"
 </script>
 
 <div class="hero min-h-screen bg-base-200">

svelte.config.js

@@ -14,10 +14,10 @@ const config = {
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter(),
     alias: {
-      src: "src",
-      app: "src/app",
-      lib: "src/lib",
-      assets: "src/assets",
+      '@src': "src",
+      '@app': "src/app",
+      '@lib': "src/lib",
+      '@assets': "src/assets",
     },
   },
 }