From bf9f4a7aad0797f26b5db9ff106e73a3c06d7c3d Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Tue, 8 Jul 2025 01:07:03 +0800
Subject: [PATCH] refactor(stage-web,stage-ui): toast from vue-sonner &
 re-structure

---
 apps/stage-web/package.json                   |  1 +
 apps/stage-web/src/App.vue                    |  5 +++++
 .../Dialogs/Onboarding/MobileOnboarding.vue   |  8 +++----
 .../Dialogs/Onboarding/Onboarding.vue         | 10 ++++-----
 .../Dialogs/Onboarding/OnboardingDialog.vue   |  2 +-
 .../{ => Widgets}/Dialogs/Onboarding/index.ts |  0
 .../components/{ => Widgets}/Dialogs/index.ts |  0
 .../Toasters/ToasterPWAUpdateReady.story.vue  | 22 +++++++++++++++++++
 .../Toasters/ToasterPWAUpdateReady.vue        | 13 +++++++++++
 .../src/components/Widgets/Toasters/index.ts  |  1 +
 .../stage-ui/src/components/Widgets/index.ts  |  2 ++
 packages/stage-ui/src/components/index.ts     |  1 -
 12 files changed, 54 insertions(+), 11 deletions(-)
 rename packages/stage-ui/src/components/{ => Widgets}/Dialogs/Onboarding/MobileOnboarding.vue (98%)
 rename packages/stage-ui/src/components/{ => Widgets}/Dialogs/Onboarding/Onboarding.vue (97%)
 rename packages/stage-ui/src/components/{ => Widgets}/Dialogs/Onboarding/OnboardingDialog.vue (91%)
 rename packages/stage-ui/src/components/{ => Widgets}/Dialogs/Onboarding/index.ts (100%)
 rename packages/stage-ui/src/components/{ => Widgets}/Dialogs/index.ts (100%)
 create mode 100644 packages/stage-ui/src/components/Widgets/Toasters/ToasterPWAUpdateReady.story.vue
 create mode 100644 packages/stage-ui/src/components/Widgets/Toasters/ToasterPWAUpdateReady.vue
 create mode 100644 packages/stage-ui/src/components/Widgets/Toasters/index.ts

diff --git a/apps/stage-web/package.json b/apps/stage-web/package.json
index 2201f445f..3b2a04d94 100644
--- a/apps/stage-web/package.json
+++ b/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"
diff --git a/apps/stage-web/src/App.vue b/apps/stage-web/src/App.vue
index b9e5d3c0f..84e1a2ca4 100644
--- a/apps/stage-web/src/App.vue
+++ b/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"
diff --git a/packages/stage-ui/src/components/Dialogs/Onboarding/MobileOnboarding.vue b/packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/MobileOnboarding.vue
similarity index 98%
rename from packages/stage-ui/src/components/Dialogs/Onboarding/MobileOnboarding.vue
rename to packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/MobileOnboarding.vue
index fce3f222b..79bdfd5b4 100644
--- a/packages/stage-ui/src/components/Dialogs/Onboarding/MobileOnboarding.vue
+++ b/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
diff --git a/packages/stage-ui/src/components/Dialogs/Onboarding/Onboarding.vue b/packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/Onboarding.vue
similarity index 97%
rename from packages/stage-ui/src/components/Dialogs/Onboarding/Onboarding.vue
rename to packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/Onboarding.vue
index 7e0ce0740..46d92fe6a 100644
--- a/packages/stage-ui/src/components/Dialogs/Onboarding/Onboarding.vue
+++ b/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') }}
diff --git a/packages/stage-ui/src/components/Dialogs/Onboarding/OnboardingDialog.vue b/packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/OnboardingDialog.vue
similarity index 91%
rename from packages/stage-ui/src/components/Dialogs/Onboarding/OnboardingDialog.vue
rename to packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/OnboardingDialog.vue
index 4c670d2be..9fbe9e350 100644
--- a/packages/stage-ui/src/components/Dialogs/Onboarding/OnboardingDialog.vue
+++ b/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>
diff --git a/packages/stage-ui/src/components/Dialogs/Onboarding/index.ts b/packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/index.ts
similarity index 100%
rename from packages/stage-ui/src/components/Dialogs/Onboarding/index.ts
rename to packages/stage-ui/src/components/Widgets/Dialogs/Onboarding/index.ts
diff --git a/packages/stage-ui/src/components/Dialogs/index.ts b/packages/stage-ui/src/components/Widgets/Dialogs/index.ts
similarity index 100%
rename from packages/stage-ui/src/components/Dialogs/index.ts
rename to packages/stage-ui/src/components/Widgets/Dialogs/index.ts
diff --git a/packages/stage-ui/src/components/Widgets/Toasters/ToasterPWAUpdateReady.story.vue b/packages/stage-ui/src/components/Widgets/Toasters/ToasterPWAUpdateReady.story.vue
new file mode 100644
index 000000000..61fe033d3
--- /dev/null
+++ b/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>
diff --git a/packages/stage-ui/src/components/Widgets/Toasters/ToasterPWAUpdateReady.vue b/packages/stage-ui/src/components/Widgets/Toasters/ToasterPWAUpdateReady.vue
new file mode 100644
index 000000000..a440ad0da
--- /dev/null
+++ b/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>
diff --git a/packages/stage-ui/src/components/Widgets/Toasters/index.ts b/packages/stage-ui/src/components/Widgets/Toasters/index.ts
new file mode 100644
index 000000000..6ea05d199
--- /dev/null
+++ b/packages/stage-ui/src/components/Widgets/Toasters/index.ts
@@ -0,0 +1 @@
+export { default as ToasterPWAUpdateReady } from './ToasterPWAUpdateReady.vue'
diff --git a/packages/stage-ui/src/components/Widgets/index.ts b/packages/stage-ui/src/components/Widgets/index.ts
index ede210188..f7e52285c 100644
--- a/packages/stage-ui/src/components/Widgets/index.ts
+++ b/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'
diff --git a/packages/stage-ui/src/components/index.ts b/packages/stage-ui/src/components/index.ts
index 2c3b5cdc6..ce5e14091 100644
--- a/packages/stage-ui/src/components/index.ts
+++ b/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'