diff --git a/src/app.d.ts b/src/app.d.ts index 743f07b2..90e425f2 100644 --- a/src/app.d.ts +++ b/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 {} } } diff --git a/src/app/state.ts b/src/app/state.ts index 2bae1d34..f780f9bf 100644 --- a/src/app/state.ts +++ b/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(null) + +export const pushToast = ({message = "", id = Math.random()}: Partial, 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) => { + 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([ diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 73bf35cc..67fab138 100644 --- a/src/routes/+layout.svelte +++ b/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 @@ {#if $toast} -
-
- {$toast.message} + {#key $toast.id} +
+
+ {$toast.message} +
-
+ {/key} {/if} diff --git a/svelte.config.js b/svelte.config.js index 0866566f..eb329039 100644 --- a/svelte.config.js +++ b/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", + }, } }; diff --git a/vite.config.ts b/vite.config.ts index 899f9edb..25d14f96 100644 --- a/vite.config.ts +++ b/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"), - }, - }, });