chore(stage-ui): pwa toaster prompt

apps/stage-web/src/stores/pwa.ts

@@ -24,7 +24,7 @@ export const usePWAStore = defineStore('pwa', () => {
     const updateSW = registerSW({
       onNeedRefresh: () => {
         const id = nanoid()
-        toast(markRaw(h(ToasterPWAUpdateReady, { id, onUpdate: () => updateSW() })), {
+        toast.custom(markRaw(h(ToasterPWAUpdateReady, { id, onUpdate: () => updateSW() })), {
           id,
           duration: 30000,
           position: isMobile.value ? 'top-center' : 'bottom-right',

packages/stage-ui/src/components/scenarios/toasters/toaster-pwa-update-ready.story.vue

@@ -16,7 +16,7 @@ function handlePopToast() {
   const id = nanoid()
 
   // eslint-disable-next-line no-console
-  toast(markRaw(h(ToasterPWAUpdateReady, { id, onUpdate: () => console.debug('Update initiated', id) })), {
+  toast.custom(markRaw(h(ToasterPWAUpdateReady, { id, onUpdate: () => console.debug('Update initiated', id) })), {
     id,
     duration: 30000,
     position: isMobile.value ? 'top-center' : 'bottom-right',

packages/stage-ui/src/components/scenarios/toasters/toaster-pwa-update-ready.vue

@@ -25,12 +25,25 @@ function handleNotNow() {
 
 <template>
   <div
-    w-full flex flex-col gap-1 rounded-xl
+    :class="[
+      'px-4 py-3',
+      'backdrop-blur-md shadow-md',
+      'bg-neutral-100/80 dark:bg-neutral-800/80',
+      'w-full flex flex-col gap-1 rounded-2xl',
+    ]"
   >
-    <div mb-1 text-nowrap>
+    <div
+      :class="[
+        'mb-1 text-nowrap',
+      ]"
+    >
       {{ t('base.toaster.pwaUpdateReady.message') }}
     </div>
-    <div w-full flex items-center gap-2>
+    <div
+      :class="[
+        'w-full flex items-center gap-2',
+      ]"
+    >
       <Button w-full size="sm" variant="secondary" @click="() => handleNotNow()">
         <div i-solar:close-circle-line-duotone />
         <div text-nowrap>

packages/stage-ui/src/components/scenarios/toasters/toaster-root.vue

@@ -17,7 +17,15 @@ provide(ToasterRootInjectionKey, {
 </template>
 
 <style>
+[data-sonner-toast=""] {
+  --border-radius: 1rem;
+}
+
 [data-sonner-toast=""] [data-content=""] {
   width: 100%;
 }
+
+li[data-sonner-toast=""][data-styled='true'] {
+  padding: 12px;
+}
 </style>