From 36a920df51ce431ed648ae69d762158421cc2221 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Tue, 6 Aug 2024 13:10:10 -0700
Subject: [PATCH] Break out some utils

---
 src/app/components/PrimaryNav.svelte   |  6 +--
 src/app/components/SecondaryNav.svelte |  4 +-
 src/app/modal.ts                       | 21 +++++++++
 src/app/state.ts                       | 60 +-------------------------
 src/app/toast.ts                       | 27 ++++++++++++
 src/lib/components/Icon.svelte         | 24 +++++------
 src/lib/index.ts                       |  2 +-
 src/lib/transition.ts                  |  5 +++
 src/routes/+layout.svelte              | 12 +++---
 src/routes/+page.svelte                |  2 +-
 svelte.config.js                       |  8 ++--
 11 files changed, 84 insertions(+), 87 deletions(-)
 create mode 100644 src/app/modal.ts
 create mode 100644 src/app/toast.ts
 create mode 100644 src/lib/transition.ts

diff --git a/src/app/components/PrimaryNav.svelte b/src/app/components/PrimaryNav.svelte
index ca661470..0a3fe386 100644
--- a/src/app/components/PrimaryNav.svelte
+++ b/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">
diff --git a/src/app/components/SecondaryNav.svelte b/src/app/components/SecondaryNav.svelte
index 4e2768b9..ea873052 100644
--- a/src/app/components/SecondaryNav.svelte
+++ b/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">
diff --git a/src/app/modal.ts b/src/app/modal.ts
new file mode 100644
index 00000000..a72dbc16
--- /dev/null
+++ b/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()
+}
diff --git a/src/app/state.ts b/src/app/state.ts
index cd1002a8..e905f3d2 100644
--- a/src/app/state.ts
+++ b/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([
   {
diff --git a/src/app/toast.ts b/src/app/toast.ts
new file mode 100644
index 00000000..4d555f84
--- /dev/null
+++ b/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))
diff --git a/src/lib/components/Icon.svelte b/src/lib/components/Icon.svelte
index aafb7f7a..b3df4ba0 100644
--- a/src/lib/components/Icon.svelte
+++ b/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
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 856f2b6c..8b137891 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -1 +1 @@
-// place files you want to import through the `$lib` alias in this folder.
+
diff --git a/src/lib/transition.ts b/src/lib/transition.ts
new file mode 100644
index 00000000..b9ddc612
--- /dev/null
+++ b/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})
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7463e404..7e6c4c03 100644
--- a/src/routes/+layout.svelte
+++ b/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")
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 990de2e8..bd0e53f1 100644
--- a/src/routes/+page.svelte
+++ b/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">
diff --git a/svelte.config.js b/svelte.config.js
index 6695d41e..73246338 100644
--- a/svelte.config.js
+++ b/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",
     },
   },
 }