refactor(stage-web,stage-ui): toast from vue-sonner & re-structure

apps/stage-web/package.json

@@ -77,6 +77,7 @@
     "vue-demi": "^0.14.10",
     "vue-i18n": "^11.1.9",
     "vue-router": "^4.5.1",
+    "vue-sonner": "^2.0.1",
     "xsschema": "catalog:",
     "yauzl": "^3.2.0",
     "zod": "^3.25.74"

apps/stage-web/src/App.vue

@@ -7,6 +7,9 @@ import { storeToRefs } from 'pinia'
 import { computed, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterView } from 'vue-router'
+import { Toaster } from 'vue-sonner'
+
+import 'vue-sonner/style.css'
 
 const i18n = useI18n()
 const settings = storeToRefs(useSettings())
@@ -76,6 +79,8 @@ function handleSetupSkipped() {
     <RouterView />
   </StageTransitionGroup>
 
+  <Toaster position="top-right" />
+
   <!-- First Time Setup Dialog -->
   <OnboardingDialog
     v-model="shouldShowSetup"

packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/MobileOnboarding.vue

@@ -8,10 +8,10 @@ import { useI18n } from 'vue-i18n'
 
 import onboardingLogo from '../../../assets/onboarding.png'
 
-import { Callout } from '../../Layouts'
-import { RadioCardDetail } from '../../Menu'
-import { Button } from '../../Misc'
-import { ProviderAccountIdInput } from '../../Providers'
+import { Callout } from '../../../Layouts'
+import { RadioCardDetail } from '../../../Menu'
+import { Button } from '../../../Misc'
+import { ProviderAccountIdInput } from '../../../Providers'
 
 interface Emits {
   (e: 'configured'): void

packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/Onboarding.vue

@@ -8,9 +8,9 @@ import { useI18n } from 'vue-i18n'
 
 import onboardingLogo from '../../../assets/onboarding.png'
 
-import { RadioCardDetail } from '../../Menu'
-import { Button } from '../../Misc'
-import { ProviderAccountIdInput } from '../../Providers'
+import { RadioCardDetail } from '../../../Menu'
+import { Button } from '../../../Misc'
+import { ProviderAccountIdInput } from '../../../Providers'
 
 interface Emits {
   (e: 'configured'): void
@@ -215,8 +215,8 @@ onMounted(() => {
 <template>
   <!-- Header -->
   <div class="mb-2 text-center md:mb-8">
-    <div class="mb-1 flex justify-center md:mb-4">
-      <img :src="onboardingLogo" w="20 md:25">
+    <div class="my-0 mb-1 flex justify-center lg:mb-8 lg:mt-8 md:mb-4">
+      <img :src="onboardingLogo" w="20 md:25 lg:50">
     </div>
     <h2 class="mb-0 text-lg text-neutral-800 font-bold md:mb-2 md:text-2xl dark:text-neutral-100">
       {{ t('settings.dialogs.onboarding.title') }}

packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/OnboardingDialog.vue

@@ -20,7 +20,7 @@ const isDesktop = useMediaQuery('(min-width: 768px)')
   <DialogRoot v-if="isDesktop" :open="showDialog" @update:open="value => showDialog = value">
     <DialogPortal>
       <DialogOverlay class="data-[state=open]:animate-fadeIn data-[state=closed]:animate-fadeOut fixed inset-0 z-[9999] bg-black/50 backdrop-blur-sm" />
-      <DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-[9999] mx-0 my-4 max-h-[calc(100%-4rem)] max-w-2xl w-[92vw] transform overflow-y-scroll rounded-lg bg-white p-4 shadow-xl backdrop-blur-md scrollbar-none md:mx-4 -translate-x-1/2 -translate-y-1/2 dark:bg-neutral-900 md:p-8">
+      <DialogContent class="data-[state=open]:animate-contentShow data-[state=closed]:animate-contentHide fixed left-1/2 top-1/2 z-[9999] mx-0 my-4 max-h-[calc(100%-4rem)] max-w-2xl w-[92vw] transform overflow-y-scroll rounded-lg bg-white p-4 shadow-xl outline-none backdrop-blur-md scrollbar-none md:mx-4 -translate-x-1/2 -translate-y-1/2 dark:bg-neutral-900 md:p-8">
         <Onboarding @configured="emit('configured')" @skipped="emit('skipped')" />
       </DialogContent>
     </DialogPortal>

packages/stage-ui/src/components/Widgets/Toasters/ToasterPWAUpdateReady.story.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import ToasterPWAUpdateReady from './ToasterPWAUpdateReady.vue'
+</script>
+
+<template>
+  <Story
+    title="Toaster PWA Update Ready"
+    group="widgets"
+    :layout="{ type: 'grid', width: '100%' }"
+  >
+    <template #controls>
+      <ThemeColorsHueControl />
+    </template>
+
+    <Variant
+      id="default"
+      title="Default"
+    >
+      <ToasterPWAUpdateReady />
+    </Variant>
+  </Story>
+</template>

packages/stage-ui/src/components/Widgets/Toasters/ToasterPWAUpdateReady.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <div w-full>
+    <div>
+      {{ t('toaster.pwaUpdateReady.message') }}
+    </div>
+  </div>
+</template>

packages/stage-ui/src/components/Widgets/Toasters/index.ts

@@ -0,0 +1 @@
+export { default as ToasterPWAUpdateReady } from './ToasterPWAUpdateReady.vue'

packages/stage-ui/src/components/Widgets/index.ts

@@ -1 +1,3 @@
+export * from './Dialogs'
 export { default as PoppingSubtitles } from './PoppingSubtitles.web.vue'
+export * from './Toasters'

packages/stage-ui/src/components/index.ts

@@ -1,5 +1,4 @@
 export * from './DataGui'
-export * from './Dialogs'
 export * from './Gadgets'
 export * from './Graphics'
 export * from './Layouts'