Get some typescript stuff working

src/app.d.ts

@@ -1,3 +1,5 @@
+import '@poppanator/sveltekit-svg/dist/svg'
+
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {
@@ -5,7 +7,9 @@ declare global {
 		// interface Error {}
 		// interface Locals {}
 		// interface PageData {}
-		// interface PageState {}
+		interface PageState {
+  		modal?: string,
+		}
 		// interface Platform {}
 	}
 }

src/app/state.ts

@@ -1,30 +1,57 @@
+import type {ComponentType} from 'svelte'
 import {readable, writable} from 'svelte/store'
-import type {FlyParams} from 'svelte/types'
+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})
+export const fly = (node: Element, params?: FlyParams | undefined) => baseFly(node, {y: 20, ...params})
 
 // Toast
 
-export const toast = writable(null)
+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
 
-// TODO: fix memory leak here by listening to history somehow
 export const modals = new Map()
 
-export const pushModal = (component, props) => {
-  const id = Math.random()
+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
 
 export const spaces = readable([

src/routes/+layout.svelte

@@ -15,7 +15,7 @@
       noBanner: true,
       title: 'Welcome to Flotilla!',
       description: 'Log in with your Nostr account or sign up to join.',
-      methods: "connect,extension,local",
+      methods: ['connect', 'extension', 'local'],
       onAuth(npub: string) {
         console.log(npub)
       }
@@ -24,7 +24,7 @@
     nl.launch()
   }
 
-  let modal
+  let modal: HTMLDialogElement
 
   $: {
     if ($page.state.modal) {
@@ -56,9 +56,11 @@
 </dialog>
 
 {#if $toast}
-  <div transition:fly class="toast">
-    <div class="alert">
-      <span>{$toast.message}</span>
+  {#key $toast.id}
+    <div transition:fly class="toast">
+      <div class="alert">
+        <span>{$toast.message}</span>
+      </div>
     </div>
-  </div>
+  {/key}
 {/if}

svelte.config.js

@@ -1,3 +1,4 @@
+import * as path from "path"
 import adapter from '@sveltejs/adapter-auto';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
@@ -11,7 +12,13 @@ const config = {
 		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter()
+		adapter: adapter(),
+		alias: {
+      'src': "src",
+      'app': "src/app",
+      'lib': "src/lib",
+      'assets': "src/assets",
+    },
 	}
 };
 

vite.config.ts

@@ -1,4 +1,3 @@
-import * as path from "path"
 import {sveltekit} from '@sveltejs/kit/vite'
 import svg from '@poppanator/sveltekit-svg'
 import {defineConfig} from 'vite'
@@ -23,12 +22,4 @@ export default defineConfig({
       },
     })
 	],
-  resolve: {
-    alias: {
-      'src': path.resolve(__dirname, "src"),
-      'app': path.resolve(__dirname, "src/app"),
-      'lib': path.resolve(__dirname, "src/lib"),
-      'assets': path.resolve(__dirname, "src/assets"),
-    },
-  },
 });