feat: implement toast notification system
- Create toast store wrapping svelte-sonner - Add Toaster component to root layout - Configure admin-aware positioning - Style toasts to match design system - Add helper functions for common toast types 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
6cb68d28ae
commit
1a155e5657
2 changed files with 205 additions and 0 deletions
85
src/lib/stores/toast.ts
Normal file
85
src/lib/stores/toast.ts
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import { toast as sonnerToast } from 'svelte-sonner'
|
||||
|
||||
export interface ToastOptions {
|
||||
duration?: number
|
||||
position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
|
||||
description?: string
|
||||
action?: {
|
||||
label: string
|
||||
onClick: () => void
|
||||
}
|
||||
cancel?: {
|
||||
label: string
|
||||
onClick: () => void
|
||||
}
|
||||
}
|
||||
|
||||
const defaultOptions: ToastOptions = {
|
||||
duration: 4000,
|
||||
position: 'bottom-right'
|
||||
}
|
||||
|
||||
export const toast = {
|
||||
success: (message: string, options?: ToastOptions) => {
|
||||
return sonnerToast.success(message, {
|
||||
...defaultOptions,
|
||||
...options
|
||||
})
|
||||
},
|
||||
|
||||
error: (message: string, options?: ToastOptions) => {
|
||||
return sonnerToast.error(message, {
|
||||
...defaultOptions,
|
||||
...options,
|
||||
duration: options?.duration ?? 6000 // Errors show longer by default
|
||||
})
|
||||
},
|
||||
|
||||
warning: (message: string, options?: ToastOptions) => {
|
||||
return sonnerToast.warning(message, {
|
||||
...defaultOptions,
|
||||
...options
|
||||
})
|
||||
},
|
||||
|
||||
info: (message: string, options?: ToastOptions) => {
|
||||
return sonnerToast.info(message, {
|
||||
...defaultOptions,
|
||||
...options
|
||||
})
|
||||
},
|
||||
|
||||
loading: (message: string, options?: ToastOptions) => {
|
||||
return sonnerToast.loading(message, {
|
||||
...defaultOptions,
|
||||
...options
|
||||
})
|
||||
},
|
||||
|
||||
promise: <T>(
|
||||
promise: Promise<T>,
|
||||
messages: {
|
||||
loading: string
|
||||
success: string | ((data: T) => string)
|
||||
error: string | ((error: any) => string)
|
||||
},
|
||||
options?: ToastOptions
|
||||
) => {
|
||||
return sonnerToast.promise(promise, messages, {
|
||||
...defaultOptions,
|
||||
...options
|
||||
})
|
||||
},
|
||||
|
||||
dismiss: (toastId?: string | number) => {
|
||||
return sonnerToast.dismiss(toastId)
|
||||
},
|
||||
|
||||
// Custom toast with full control
|
||||
custom: (component: any, options?: ToastOptions) => {
|
||||
return sonnerToast.custom(component, {
|
||||
...defaultOptions,
|
||||
...options
|
||||
})
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
import Header from '$components/Header.svelte'
|
||||
import Footer from '$components/Footer.svelte'
|
||||
import { generatePersonJsonLd } from '$lib/utils/metadata'
|
||||
import { Toaster } from 'svelte-sonner'
|
||||
|
||||
let { children } = $props()
|
||||
|
||||
|
|
@ -44,6 +45,15 @@
|
|||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Toast notifications -->
|
||||
<Toaster
|
||||
position={isAdminRoute ? 'top-right' : 'bottom-right'}
|
||||
toastOptions={{
|
||||
className: 'sonner-toast',
|
||||
duration: 4000
|
||||
}}
|
||||
/>
|
||||
|
||||
<style lang="scss">
|
||||
:global(html) {
|
||||
background: var(--bg-color);
|
||||
|
|
@ -84,4 +94,114 @@
|
|||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Toast styles */
|
||||
:global(.sonner-toaster) {
|
||||
font-family: $font-stack;
|
||||
}
|
||||
|
||||
:global(.sonner-toast) {
|
||||
background: var(--page-color) !important;
|
||||
color: var(--text-color) !important;
|
||||
border: 1px solid $grey-85 !important;
|
||||
border-radius: $corner-radius-lg !important;
|
||||
box-shadow: $card-shadow !important;
|
||||
font-size: $font-size-small !important;
|
||||
padding: $unit-2x !important;
|
||||
gap: $unit !important;
|
||||
max-width: 420px !important;
|
||||
|
||||
&[data-type='success'] {
|
||||
background: $blue-10 !important;
|
||||
border-color: $blue-40 !important;
|
||||
color: $blue-40 !important;
|
||||
|
||||
[data-icon] {
|
||||
color: $blue-50 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-type='error'] {
|
||||
background: #fef2f2 !important;
|
||||
border-color: $red-50 !important;
|
||||
color: $red-40 !important;
|
||||
|
||||
[data-icon] {
|
||||
color: $red-50 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-type='warning'] {
|
||||
background: $yellow-90 !important;
|
||||
border-color: $yellow-40 !important;
|
||||
color: $yellow-20 !important;
|
||||
|
||||
[data-icon] {
|
||||
color: $yellow-40 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-type='info'] {
|
||||
background: var(--page-color) !important;
|
||||
border-color: $grey-70 !important;
|
||||
color: var(--text-color) !important;
|
||||
|
||||
[data-icon] {
|
||||
color: $grey-40 !important;
|
||||
}
|
||||
}
|
||||
|
||||
&[data-type='loading'] {
|
||||
background: var(--page-color) !important;
|
||||
border-color: $primary-color !important;
|
||||
color: var(--text-color) !important;
|
||||
|
||||
[data-icon] {
|
||||
color: $primary-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:global(.sonner-toast-description) {
|
||||
color: var(--text-color-subdued) !important;
|
||||
font-size: $font-size-extra-small !important;
|
||||
margin-top: $unit-half !important;
|
||||
}
|
||||
|
||||
:global(.sonner-toast-action) {
|
||||
background: $primary-color !important;
|
||||
color: white !important;
|
||||
border: none !important;
|
||||
border-radius: $corner-radius-sm !important;
|
||||
padding: $unit-half $unit-2x !important;
|
||||
font-size: $font-size-extra-small !important;
|
||||
font-weight: $font-weight-med !important;
|
||||
transition: background-color 0.2s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: $blue-40 !important;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.sonner-toast-cancel) {
|
||||
background: transparent !important;
|
||||
color: $grey-40 !important;
|
||||
border: 1px solid $grey-70 !important;
|
||||
border-radius: $corner-radius-sm !important;
|
||||
padding: $unit-half $unit-2x !important;
|
||||
font-size: $font-size-extra-small !important;
|
||||
font-weight: $font-weight-med !important;
|
||||
transition: all 0.2s ease !important;
|
||||
|
||||
&:hover {
|
||||
background: $grey-95 !important;
|
||||
color: $grey-20 !important;
|
||||
border-color: $grey-60 !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Admin-specific toast positioning */
|
||||
.admin-route ~ :global(.sonner-toaster) {
|
||||
top: $unit-8x !important; // Account for admin navbar
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue