Toasts (#45)

* locales

* add toasts and update deps

* changelog

* lock file

frontend/src/lib/toast.ts

@@ -0,0 +1,37 @@
+import { toast, type SvelteToastOptions } from '@zerodevx/svelte-toast'
+
+export enum NotifyType {
+	Success = 'success',
+	Error = 'error',
+}
+
+const themeMapping: Record<NotifyType, SvelteToastOptions['theme']> = {
+	[NotifyType.Success]: {
+		'--toastBackground': 'var(--ui-clr-primary)',
+		'--toastBarBackground': 'var(--ui-clr-primary-alt)',
+	},
+	[NotifyType.Error]: {
+		'--toastBackground': 'var(--ui-clr-error)',
+		'--toastBarBackground': 'var(--ui-clr-error-alt)',
+	},
+}
+
+function notifyFN(message: string, type: NotifyType = NotifyType.Success) {
+	const options: SvelteToastOptions = {
+		duration: 5_000,
+		theme: {
+			...themeMapping[type],
+			'--toastBarHeight': '0.25rem',
+			'--toastMinHeight': 'auto',
+			'--toastMsgPadding': '0.5rem',
+			'--toastBorderRadius': '0',
+		},
+	}
+
+	toast.push(message, options)
+}
+
+export const notify = {
+	success: (message: string) => notifyFN(message, NotifyType.Success),
+	error: (message: string) => notifyFN(message, NotifyType.Error),
+}

frontend/src/lib/ui/ShowNote.svelte

@@ -3,7 +3,6 @@
 </script>
 
 <script lang="ts">
-	import copy from 'copy-to-clipboard'
 	import DOMPurify from 'dompurify'
 	import { saveAs } from 'file-saver'
 	import prettyBytes from 'pretty-bytes'
@@ -11,6 +10,7 @@
 
 	import type { FileDTO, NotePublic } from '$lib/api'
 	import Button from '$lib/ui/Button.svelte'
+	import { copy } from '$lib/utils'
 
 	export let note: DecryptedNote
 

frontend/src/lib/ui/TextInput.svelte

@@ -1,10 +1,7 @@
 <script lang="ts">
-	import copyToClipboard from 'copy-to-clipboard'
-	import { t } from 'svelte-intl-precompile'
-	import { fade } from 'svelte/transition'
-
 	import { Crypto, Hex } from '$lib/crypto'
 	import Icon from '$lib/ui/Icon.svelte'
+	import { copy as copyFN } from '$lib/utils'
 
 	export let label: string = ''
 	export let value: any
@@ -15,8 +12,6 @@
 	const initialType = $$restProps.type
 	const isPassword = initialType === 'password'
 	let hidden = true
-	let notification: string | null = null
-	let notificationTimeout: NodeJS.Timeout | null = null
 
 	$: valid = validate(value)
 
@@ -28,23 +23,9 @@
 	function toggle() {
 		hidden = !hidden
 	}
-	function copyFN() {
-		copyToClipboard(value.toString())
-		notify($t('home.copied_to_clipboard'))
-	}
 	function randomFN() {
 		value = Hex.encode(Crypto.getRandomBytes(20))
 	}
-
-	function notify(msg: string, delay: number = 2000) {
-		if (notificationTimeout) {
-			clearTimeout(notificationTimeout)
-		}
-		notificationTimeout = setTimeout(() => {
-			notification = null
-		}, delay)
-		notification = msg
-	}
 </script>
 
 <label>
@@ -63,12 +44,9 @@
 			<Icon class="icon" icon="dice" on:click={randomFN} />
 		{/if}
 		{#if copy}
-			<Icon class="icon" icon="copy" on:click={copyFN} />
+			<Icon class="icon" icon="copy" on:click={() => copyFN(value.toString())} />
 		{/if}
 	</div>
-	{#if notification}
-		<div class="notification" transition:fade><small>{notification}</small></div>
-	{/if}
 </label>
 
 <style>
@@ -118,11 +96,4 @@
 	.icons > :global(.icon:hover) {
 		border-color: var(--ui-clr-primary);
 	}
-
-	.notification {
-		text-align: right;
-		position: absolute;
-		right: 0;
-		bottom: -1.5em;
-	}
 </style>

frontend/src/lib/utils.ts

@@ -0,0 +1,11 @@
+import copyToClipboard from 'copy-to-clipboard'
+import { t } from 'svelte-intl-precompile'
+import { get } from 'svelte/store'
+
+import { notify } from './toast'
+
+export function copy(value: string) {
+	copyToClipboard(value)
+	const msg = get(t)('common.copied_to_clipboard')
+	notify.success(msg)
+}

frontend/src/lib/views/Create.svelte

@@ -7,6 +7,7 @@
 	import { create, PayloadToLargeError } from '$lib/api'
 	import { Crypto, Hex } from '$lib/crypto'
 	import { status } from '$lib/stores/status'
+	import { notify } from '$lib/toast'
 	import AdvancedParameters from '$lib/ui/AdvancedParameters.svelte'
 	import Button from '$lib/ui/Button.svelte'
 	import FileUpload from '$lib/ui/FileUpload.svelte'
@@ -29,7 +30,6 @@
 	let timeExpiration = false
 	let description = ''
 	let loading: string | null = null
-	let error: string | null = null
 
 	$: if (!advanced) {
 		note.views = 1
@@ -56,7 +56,6 @@
 
 	async function submit() {
 		try {
-			error = null
 			loading = $t('common.encrypting')
 
 			const password = Hex.encode(Crypto.getRandomBytes(32))
@@ -82,14 +81,15 @@
 				password: password,
 				id: response.id,
 			}
+			notify.success($t('home.messages.note_created'))
 		} catch (e) {
 			if (e instanceof PayloadToLargeError) {
-				error = $t('home.errors.note_to_big')
+				notify.error($t('home.errors.note_to_big'))
 			} else if (e instanceof EmptyContentError) {
-				error = $t('home.errors.empty_content')
+				notify.error($t('home.errors.empty_content'))
 			} else {
 				console.error(e)
-				error = $t('home.errors.note_error')
+				notify.error($t('home.errors.note_error'))
 			}
 		} finally {
 			loading = null
@@ -138,10 +138,6 @@
 				</div>
 			</div>
 
-			{#if error}
-				<div class="error-text">{error}</div>
-			{/if}
-
 			<p>
 				<br />
 				{#if loading}
@@ -175,8 +171,4 @@
 	.grow {
 		flex: 1;
 	}
-
-	.error-text {
-		margin-top: 0.5rem;
-	}
 </style>