From e08de71e96e35a90761293279c66dd286713a629 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 22 Mar 2026 23:46:52 +0900
Subject: [PATCH] improve whats new dialog

---
 package-lock.json                             |  92 ++++++------
 package.json                                  |   4 +-
 src/components/onboarding/SpotlightDialog.vue |  11 +-
 src/components/onboarding/WhatsNewDialog.vue  | 109 ++++++---------
 src/localization/en.json                      |  12 +-
 src/shared/constants/whatsNewReleases.js      |  73 +++++-----
 src/stores/vrcxUpdater.js                     | 131 ++++++++++++------
 7 files changed, 225 insertions(+), 207 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 36f9e922..c8e8ca47 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,11 +22,11 @@
                 "@internationalized/date": "^3.12.0",
                 "@pinia/testing": "^1.0.3",
                 "@sentry/vite-plugin": "^4.9.1",
-                "@sentry/vue": "^10.44.0",
+                "@sentry/vue": "^10.45.0",
                 "@sigma/edge-curve": "^3.1.0",
                 "@sigma/node-border": "^3.0.0",
                 "@tailwindcss/vite": "^4.2.2",
-                "@tanstack/vue-query": "^5.92.10",
+                "@tanstack/vue-query": "^5.94.5",
                 "@tanstack/vue-table": "^8.21.3",
                 "@tanstack/vue-virtual": "^3.13.23",
                 "@types/node": "^24.12.0",
@@ -3233,54 +3233,54 @@
             "license": "MIT"
         },
         "node_modules/@sentry-internal/browser-utils": {
-            "version": "10.44.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-10.44.0.tgz",
-            "integrity": "sha512-z9xz3T/v+MnfHY6kdUCmOZI8CiAl3LlKYtGH2p3rAsrxhwX+BTnUp01VhMVnEZIDgUXNt3AhJac+4kcDIPu1Hg==",
+            "version": "10.45.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-10.45.0.tgz",
+            "integrity": "sha512-ZPZpeIarXKScvquGx2AfNKcYiVNDA4wegMmjyGVsTA2JPmP0TrJoO3UybJS6KGDeee8V3I3EfD/ruauMm7jOFQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@sentry/core": "10.44.0"
+                "@sentry/core": "10.45.0"
             },
             "engines": {
                 "node": ">=18"
             }
         },
         "node_modules/@sentry-internal/feedback": {
-            "version": "10.44.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-10.44.0.tgz",
-            "integrity": "sha512-yNS2EGK1bNm8YUI+Orzpa7yr05Da+b1VEe/9x7dl7gTjw/+tfutoXlG6Y+iFZBB3gQ9QU+nxZAhU+KcxiPEURw==",
+            "version": "10.45.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/feedback/-/feedback-10.45.0.tgz",
+            "integrity": "sha512-vCSurazFVq7RUeYiM5X326jA5gOVrWYD6lYX2fbjBOMcyCEhDnveNxMT62zKkZDyNT/jyD194nz/cjntBUkyWA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@sentry/core": "10.44.0"
+                "@sentry/core": "10.45.0"
             },
             "engines": {
                 "node": ">=18"
             }
         },
         "node_modules/@sentry-internal/replay": {
-            "version": "10.44.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-10.44.0.tgz",
-            "integrity": "sha512-KDmoqBsRmkaoc+eKLR2CbScd2eBmLcw+1+D441lLttAO3WWhvYyCaYdu/HIGGUoybuSgt+IcpCJdi7hFuCvYqw==",
+            "version": "10.45.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/replay/-/replay-10.45.0.tgz",
+            "integrity": "sha512-vjosRoGA1bzhVAEO1oce+CsRdd70quzBeo7WvYqpcUnoLe/Rv8qpOMqWX3j26z7XfFHMExWQNQeLxmtYOArvlw==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@sentry-internal/browser-utils": "10.44.0",
-                "@sentry/core": "10.44.0"
+                "@sentry-internal/browser-utils": "10.45.0",
+                "@sentry/core": "10.45.0"
             },
             "engines": {
                 "node": ">=18"
             }
         },
         "node_modules/@sentry-internal/replay-canvas": {
-            "version": "10.44.0",
-            "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-10.44.0.tgz",
-            "integrity": "sha512-RA7XgYZWHY7M+vaHvuMxDFT51wCs4puS2smElM5oh+j3YqbFXY7P16fOCwIAGoyI4gVsj8aTeBgVqUmrmzhAXQ==",
+            "version": "10.45.0",
+            "resolved": "https://registry.npmjs.org/@sentry-internal/replay-canvas/-/replay-canvas-10.45.0.tgz",
+            "integrity": "sha512-nvq/AocdZTuD7y0KSiWi3gVaY0s5HOFy86mC/v1kDZmT/jsBAzN5LDkk/f1FvsWma1peqQmpUqxvhC+YIW294Q==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@sentry-internal/replay": "10.44.0",
-                "@sentry/core": "10.44.0"
+                "@sentry-internal/replay": "10.45.0",
+                "@sentry/core": "10.45.0"
             },
             "engines": {
                 "node": ">=18"
@@ -3297,17 +3297,17 @@
             }
         },
         "node_modules/@sentry/browser": {
-            "version": "10.44.0",
-            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.44.0.tgz",
-            "integrity": "sha512-UpMx5forbVKieNULma3gT2SsLYqsYT4nLXa6s1io/Y8BFej9sH2dD5ExA8TrkQThQwAWFI3qKsQzYnF+EX/Bfg==",
+            "version": "10.45.0",
+            "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-10.45.0.tgz",
+            "integrity": "sha512-e/a8UMiQhqqv706McSIcG6XK+AoQf9INthi2pD+giZfNRTzXTdqHzUT5OIO5hg8Am6eF63nDJc+vrYNPhzs51Q==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@sentry-internal/browser-utils": "10.44.0",
-                "@sentry-internal/feedback": "10.44.0",
-                "@sentry-internal/replay": "10.44.0",
-                "@sentry-internal/replay-canvas": "10.44.0",
-                "@sentry/core": "10.44.0"
+                "@sentry-internal/browser-utils": "10.45.0",
+                "@sentry-internal/feedback": "10.45.0",
+                "@sentry-internal/replay": "10.45.0",
+                "@sentry-internal/replay-canvas": "10.45.0",
+                "@sentry/core": "10.45.0"
             },
             "engines": {
                 "node": ">=18"
@@ -3508,9 +3508,9 @@
             }
         },
         "node_modules/@sentry/core": {
-            "version": "10.44.0",
-            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.44.0.tgz",
-            "integrity": "sha512-aa7CiDaNFZvHpqd97LJhuskolfJ/4IH5xyuVVLnv7l6B0v9KTwskPUxb0tH1ej3FxuzfH+i8iTiTFuqpfHS3QA==",
+            "version": "10.45.0",
+            "resolved": "https://registry.npmjs.org/@sentry/core/-/core-10.45.0.tgz",
+            "integrity": "sha512-s69UXxvefeQxuZ5nY7/THtTrIEvJxNVCp3ns4kwoCw1qMpgpvn/296WCKVmM7MiwnaAdzEKnAvLAwaxZc2nM7Q==",
             "dev": true,
             "license": "MIT",
             "engines": {
@@ -3532,14 +3532,14 @@
             }
         },
         "node_modules/@sentry/vue": {
-            "version": "10.44.0",
-            "resolved": "https://registry.npmjs.org/@sentry/vue/-/vue-10.44.0.tgz",
-            "integrity": "sha512-XAjvUPhfqkEULt3kly4fSmwQ7fi9XuBWU8Hq9Fme3WN3Ti5q1lTqFBvxlpGeUDKzb2g/J9NVRq9G10m7d438Fg==",
+            "version": "10.45.0",
+            "resolved": "https://registry.npmjs.org/@sentry/vue/-/vue-10.45.0.tgz",
+            "integrity": "sha512-p6ghTgQtiCBZ+Yw0B2xmC69S8AdCRRsYvbTHW7MJYspwNnJDs7rqgCBqOxNhvr3tsKdDuEOEHLtf/5hbKi+8xQ==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
-                "@sentry/browser": "10.44.0",
-                "@sentry/core": "10.44.0"
+                "@sentry/browser": "10.45.0",
+                "@sentry/core": "10.45.0"
             },
             "engines": {
                 "node": ">=18"
@@ -3953,9 +3953,9 @@
             }
         },
         "node_modules/@tanstack/query-core": {
-            "version": "5.91.0",
-            "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.91.0.tgz",
-            "integrity": "sha512-FYXN8Kk9Q5VKuV6AIVaNwMThSi0nvAtR4X7HQoigf6ePOtFcavJYVIzgFhOVdtbBQtCJE3KimDIMMJM2DR1hjw==",
+            "version": "5.94.5",
+            "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.94.5.tgz",
+            "integrity": "sha512-Vx1JJiBURW/wdNGP45afjrqn0LfxYwL7K/bSrQvNRtyLGF1bxQPgUXCpzscG29e+UeFOh9hz1KOVala0N+bZiA==",
             "dev": true,
             "license": "MIT",
             "funding": {
@@ -3989,14 +3989,14 @@
             }
         },
         "node_modules/@tanstack/vue-query": {
-            "version": "5.92.10",
-            "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.92.10.tgz",
-            "integrity": "sha512-ukRbUTcVZAHksOhZeLDbhysLFTkCQuKYdhfSR6DiDSX8W30z3prTLjCDOpgicO3tV9BMnzGZkQmguy9EOb2aVw==",
+            "version": "5.94.5",
+            "resolved": "https://registry.npmjs.org/@tanstack/vue-query/-/vue-query-5.94.5.tgz",
+            "integrity": "sha512-xmnOj1fP0JvUqGrkHmdIY/3FyO4L0IjJBCqOFxnnMIJjrsvCvlpjp/XpI1Zv4eLuV0e8l1LIOOuEvN40ckVuOA==",
             "dev": true,
             "license": "MIT",
             "dependencies": {
                 "@tanstack/match-sorter-utils": "^8.19.4",
-                "@tanstack/query-core": "5.91.0",
+                "@tanstack/query-core": "5.94.5",
                 "@vue/devtools-api": "^6.6.3",
                 "vue-demi": "^0.14.10"
             },
@@ -7523,9 +7523,9 @@
             }
         },
         "node_modules/flatted": {
-            "version": "3.4.1",
-            "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.1.tgz",
-            "integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==",
+            "version": "3.4.2",
+            "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+            "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
             "dev": true,
             "license": "ISC"
         },
diff --git a/package.json b/package.json
index 0212ab6b..565a8756 100644
--- a/package.json
+++ b/package.json
@@ -51,11 +51,11 @@
         "@internationalized/date": "^3.12.0",
         "@pinia/testing": "^1.0.3",
         "@sentry/vite-plugin": "^4.9.1",
-        "@sentry/vue": "^10.44.0",
+        "@sentry/vue": "^10.45.0",
         "@sigma/edge-curve": "^3.1.0",
         "@sigma/node-border": "^3.0.0",
         "@tailwindcss/vite": "^4.2.2",
-        "@tanstack/vue-query": "^5.92.10",
+        "@tanstack/vue-query": "^5.94.5",
         "@tanstack/vue-table": "^8.21.3",
         "@tanstack/vue-virtual": "^3.13.23",
         "@types/node": "^24.12.0",
diff --git a/src/components/onboarding/SpotlightDialog.vue b/src/components/onboarding/SpotlightDialog.vue
index c0383b0d..f7f71fab 100644
--- a/src/components/onboarding/SpotlightDialog.vue
+++ b/src/components/onboarding/SpotlightDialog.vue
@@ -1,7 +1,7 @@
 <template>
     <Dialog v-model:open="isOpen">
         <DialogContent
-            class="border-none! bg-background/85 shadow-[0_0_0_1px_hsl(from_var(--border)_h_s_l/0.5),0_24px_48px_hsl(from_var(--background)_h_s_l/0.4)] backdrop-blur-xl backdrop-saturate-[1.4] sm:max-w-xl"
+            class="border border-border bg-background/85 shadow-lg backdrop-blur-xl backdrop-saturate-[1.4] sm:max-w-xl"
             :show-close-button="false"
             @escape-key-down="handleDismiss"
             @pointer-down-outside="handleDismiss"
@@ -14,11 +14,11 @@
                 <p class="mt-1.5 text-sm text-muted-foreground">{{ t('onboarding.welcome.subtitle') }}</p>
             </div>
 
-            <div class="my-4 grid grid-cols-4 gap-2.5">
+            <div class="my-4 grid auto-rows-fr grid-cols-4 gap-2.5">
                 <div
                     v-for="(feature, index) in features"
                     :key="feature.key"
-                    class="flex animate-[featureAppear_0.4s_ease-out_both] cursor-default flex-col items-center rounded-[10px] border border-transparent bg-muted/50 px-2 py-3.5 pb-3 text-center transition-all duration-250 hover:-translate-y-0.5 hover:border-primary/25 hover:bg-muted/80 hover:shadow-[0_4px_16px_hsl(from_var(--primary)_h_s_l/0.08)]"
+                    class="flex h-full animate-[featureAppear_0.4s_ease-out_both] cursor-default flex-col items-center rounded-[10px] border border-transparent bg-muted/50 px-2 py-3.5 pb-3 text-center transition-all duration-250 hover:-translate-y-0.5 hover:border-primary/25 hover:bg-muted/80 hover:shadow-[0_4px_16px_hsl(from_var(--primary)_h_s_l/0.08)]"
                     :style="{ animationDelay: `${0.1 + index * 0.1}s` }">
                     <div
                         class="mb-2.5 flex size-10 items-center justify-center rounded-[10px] transition-all duration-250"
@@ -28,10 +28,10 @@
                         }">
                         <component :is="feature.icon" class="size-5" />
                     </div>
-                    <div class="mb-1 text-[13px] font-semibold">
+                    <div class="mb-1 w-full text-[13px] font-semibold leading-snug">
                         {{ t(`onboarding.welcome.features.${feature.key}.title`) }}
                     </div>
-                    <div class="text-[11.5px] leading-snug text-muted-foreground">
+                    <div class="w-full text-[11.5px] leading-snug text-muted-foreground">
                         {{ t(`onboarding.welcome.features.${feature.key}.description`) }}
                     </div>
                 </div>
@@ -39,7 +39,6 @@
 
             <div class="flex flex-col items-center">
                 <Button class="w-full text-sm font-semibold" size="lg" @click="handleDismiss">
-                    <Sparkles class="mr-1.5 size-4" />
                     {{ t('onboarding.welcome.cta') }}
                 </Button>
             </div>
diff --git a/src/components/onboarding/WhatsNewDialog.vue b/src/components/onboarding/WhatsNewDialog.vue
index d85c17af..d76ec113 100644
--- a/src/components/onboarding/WhatsNewDialog.vue
+++ b/src/components/onboarding/WhatsNewDialog.vue
@@ -1,46 +1,31 @@
 <template>
     <Dialog v-model:open="whatsNewDialog.visible">
         <DialogContent
-            class="border-none! bg-background/88 p-5 shadow-[0_0_0_1px_hsl(from_var(--border)_h_s_l/0.5),0_24px_48px_hsl(from_var(--background)_h_s_l/0.4)] backdrop-blur-xl backdrop-saturate-[1.4] sm:max-w-2xl"
+            class="border border-border bg-background/88 p-5 shadow-lg backdrop-blur-xl backdrop-saturate-[1.4] sm:max-w-xl"
             :show-close-button="false"
             @escape-key-down="handleDismiss"
             @pointer-down-outside="handleDismiss"
             @interact-outside.prevent>
+            <!-- Title -->
             <div class="pt-1 text-center">
                 <div class="mb-2 flex justify-center">
                     <img :src="vrcxLogo" alt="VRCX" class="size-12 rounded-xl" />
                 </div>
 
-                <div class="flex flex-col items-center gap-2">
-                    <h2 class="m-0 text-[23px] font-bold tracking-tight">
-                        {{ releaseTitle }}
-                    </h2>
-                    <Badge
-                        v-if="releaseLabel"
-                        variant="secondary"
-                        class="rounded-full px-2.5 py-0.5 text-[11px] tracking-[0.08em]">
-                        {{ releaseLabel }}
-                    </Badge>
-                </div>
-
-                <Button
-                    variant="link"
-                    size="sm"
-                    class="mt-2 h-auto gap-1 px-0 text-muted-foreground hover:text-foreground"
-                    @click="handleViewDetails">
-                    {{ t('onboarding.whatsnew.common.view_details') }}
-                    <ChevronRight class="size-4" />
-                </Button>
+                <h2 class="m-0 text-[23px] font-bold tracking-tight">
+                    {{ t(whatsNewDialog.titleKey || 'onboarding.whatsnew.title') }}
+                </h2>
             </div>
 
-            <div class="mt-2 grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <!-- Feature Cards -->
+            <div class="my-2 grid auto-rows-fr grid-cols-4 gap-2.5">
                 <div
                     v-for="(feature, index) in whatsNewDialog.items"
                     :key="feature.key"
-                    class="group flex animate-[whatsNewAppear_0.45s_ease-out_both] cursor-default flex-col rounded-[12px] border border-transparent bg-muted/55 px-3 py-3.5 text-left transition-all duration-250 hover:-translate-y-0.5 hover:border-primary/20 hover:bg-muted/80 hover:shadow-[0_4px_18px_hsl(from_var(--primary)_h_s_l/0.08)]"
-                    :style="{ animationDelay: `${0.08 + index * 0.06}s` }">
+                    class="flex h-full animate-[featureAppear_0.4s_ease-out_both] cursor-default flex-col items-center rounded-[10px] border border-transparent bg-muted/50 px-2 py-3.5 pb-3 text-center transition-all duration-250 hover:-translate-y-0.5 hover:border-primary/25 hover:bg-muted/80 hover:shadow-[0_4px_16px_hsl(from_var(--primary)_h_s_l/0.08)]"
+                    :style="{ animationDelay: `${0.1 + index * 0.1}s` }">
                     <div
-                        class="mb-3 flex size-10 items-center justify-center rounded-[10px] transition-all duration-250"
+                        class="mb-2.5 flex size-10 items-center justify-center rounded-[10px] transition-all duration-250"
                         :style="{
                             background: `hsl(${resolveHue(feature.icon)} 60% 50% / 0.12)`,
                             color: `hsl(${resolveHue(feature.icon)} 60% 55%)`
@@ -48,47 +33,53 @@
                         <component :is="resolveIcon(feature.icon)" class="size-5" />
                     </div>
 
-                    <div class="mb-1 text-sm font-semibold">
+                    <div class="mb-1 w-full text-[13px] font-semibold leading-snug">
                         {{ t(feature.titleKey) }}
                     </div>
 
-                    <div class="text-[12.5px] leading-snug text-muted-foreground">
+                    <div class="w-full text-[11.5px] leading-snug text-muted-foreground">
                         {{ t(feature.descriptionKey) }}
                     </div>
                 </div>
             </div>
 
-            <div class="mt-1 rounded-[12px] border border-border/60 bg-muted/30 px-3 py-3">
-                <div class="mb-2 flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
-                    <HeartHandshake class="size-4 text-muted-foreground" />
+            <!-- Support (subdued footer-like) -->
+            <div class="mx-auto mt-4 w-fit max-w-[340px]">
+                <div class="mb-2 text-[11.5px] font-medium tracking-[0.02em] text-muted-foreground/75">
                     <span>{{ t('onboarding.whatsnew.common.support') }}</span>
                 </div>
 
-                <div class="flex flex-col gap-3">
+                <div class="flex flex-col gap-1 text-left">
                     <div
                         v-for="supporter in supporters"
                         :key="supporter.name"
-                        class="flex flex-wrap items-center gap-2">
-                        <span class="min-w-20 text-sm font-medium text-foreground">
+                        class="flex flex-wrap items-center gap-1">
+                        <span class="text-[13px] font-semibold text-foreground/90">
                             {{ supporter.name }}
                         </span>
-
-                        <Button
-                            v-for="link in supporter.links"
-                            :key="link.label"
-                            variant="outline"
-                            size="sm"
-                            class="h-8 rounded-full px-3 text-xs font-medium"
-                            @click="openExternalLink(link.url)">
-                            {{ link.label }}
-                            <ExternalLink class="size-3.5" />
-                        </Button>
+                        <template v-for="link in supporter.links" :key="link.label">
+                            <span class="text-[11px] text-muted-foreground/40">·</span>
+                            <button
+                                class="cursor-pointer border-0 bg-transparent p-0 text-[12px] font-medium text-muted-foreground/80 transition-colors duration-200 hover:text-foreground"
+                                @click="openExternalLink(link.url)">
+                                {{ link.label }}
+                            </button>
+                        </template>
                     </div>
                 </div>
             </div>
 
+            <!-- View Changelog -->
+            <div class="mt-2 flex justify-center">
+                <button
+                    class="cursor-pointer border-0 bg-transparent text-xs text-muted-foreground/70 transition-colors duration-200 hover:text-foreground"
+                    @click="handleViewChangelog">
+                    {{ t('onboarding.whatsnew.common.view_changelog') }} →
+                </button>
+            </div>
+
+            <!-- CTA -->
             <Button class="mt-1 h-11 w-full text-sm font-semibold" size="lg" @click="handleDismiss">
-                <Sparkles class="size-4" />
                 {{ t('onboarding.whatsnew.common.got_it') }}
             </Button>
         </DialogContent>
@@ -96,21 +87,11 @@
 </template>
 
 <script setup>
-    import { computed, markRaw } from 'vue';
-    import {
-        ChevronRight,
-        ExternalLink,
-        HeartHandshake,
-        LayoutDashboard,
-        Search,
-        Sparkles,
-        Activity,
-        Images
-    } from 'lucide-vue-next';
+    import { markRaw } from 'vue';
+    import { LayoutDashboard, Search, Activity, Images } from 'lucide-vue-next';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { Badge } from '@/components/ui/badge';
     import { Dialog, DialogContent } from '@/components/ui/dialog';
     import { Button } from '@/components/ui/button';
     import { openExternalLink } from '../../shared/utils';
@@ -122,14 +103,6 @@
     const { whatsNewDialog } = storeToRefs(vrcxUpdaterStore);
     const { closeWhatsNewDialog, openChangeLogDialogOnly } = vrcxUpdaterStore;
 
-    const releaseLabel = computed(() => whatsNewDialog.value.version || '');
-    const releaseTitle = computed(() => {
-        const releaseKey = whatsNewDialog.value.releaseKey;
-        return releaseKey
-            ? t(`onboarding.whatsnew.releases.${releaseKey}.title`)
-            : t('onboarding.whatsnew.title');
-    });
-
     const supporters = [
         {
             name: 'Map1en',
@@ -169,7 +142,7 @@
         return hueMap[iconName] ?? '210';
     }
 
-    async function handleViewDetails() {
+    async function handleViewChangelog() {
         closeWhatsNewDialog();
         await openChangeLogDialogOnly();
     }
@@ -180,10 +153,10 @@
 </script>
 
 <style>
-    @keyframes whatsNewAppear {
+    @keyframes featureAppear {
         from {
             opacity: 0;
-            transform: translateY(12px) scale(0.97);
+            transform: translateY(12px) scale(0.95);
         }
         to {
             opacity: 1;
diff --git a/src/localization/en.json b/src/localization/en.json
index c019000e..3ca36076 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -2986,28 +2986,28 @@
             "cta": "Got It",
             "common": {
                 "got_it": "Got It",
-                "view_details": "View detailed changelog",
+                "view_changelog": "View changelog",
                 "support": "Support VRCX"
             },
             "releases": {
-                "v2026_04_a": {
+                "2026_04_05": {
                     "title": "What's New in VRCX",
                     "items": {
                         "quick_search": {
                             "title": "Quick Search",
-                            "description": "Find friends, worlds, avatars, and groups from one search."
+                            "description": "Find users, worlds, and avatars in seconds."
                         },
                         "dashboard": {
                             "title": "Dashboard",
-                            "description": "Build a workspace with widgets that fit how you work."
+                            "description": "Build a workspace that fits how you use VRCX."
                         },
                         "activity_insights": {
                             "title": "Activity Insights",
-                            "description": "See activity heatmaps, overlap, and the worlds you visit most."
+                            "description": "See shared online time, top worlds, and activity trends."
                         },
                         "my_avatars": {
                             "title": "My Avatars",
-                            "description": "Browse, manage, and edit your avatars in one place."
+                            "description": "Browse and manage your avatars with less friction."
                         }
                     }
                 }
diff --git a/src/shared/constants/whatsNewReleases.js b/src/shared/constants/whatsNewReleases.js
index bffd41d3..93321ad0 100644
--- a/src/shared/constants/whatsNewReleases.js
+++ b/src/shared/constants/whatsNewReleases.js
@@ -1,66 +1,67 @@
-const whatsNewReleases = {
-    v2026_04_a: {
-        titleKey: 'onboarding.whatsnew.releases.v2026_04_a.title',
-        releaseLabel: '2026.04',
+const whatsNewReleases = Object.freeze({
+    '2026.04.05': {
         items: [
             {
                 key: 'quick_search',
-                icon: 'search',
-                titleKey:
-                    'onboarding.whatsnew.releases.v2026_04_a.items.quick_search.title',
-                descriptionKey:
-                    'onboarding.whatsnew.releases.v2026_04_a.items.quick_search.description'
+                icon: 'search'
             },
             {
                 key: 'dashboard',
-                icon: 'layout-dashboard',
-                titleKey:
-                    'onboarding.whatsnew.releases.v2026_04_a.items.dashboard.title',
-                descriptionKey:
-                    'onboarding.whatsnew.releases.v2026_04_a.items.dashboard.description'
+                icon: 'layout-dashboard'
             },
             {
                 key: 'activity_insights',
-                icon: 'activity',
-                titleKey:
-                    'onboarding.whatsnew.releases.v2026_04_a.items.activity_insights.title',
-                descriptionKey:
-                    'onboarding.whatsnew.releases.v2026_04_a.items.activity_insights.description'
+                icon: 'activity'
             },
             {
                 key: 'my_avatars',
-                icon: 'images',
-                titleKey:
-                    'onboarding.whatsnew.releases.v2026_04_a.items.my_avatars.title',
-                descriptionKey:
-                    'onboarding.whatsnew.releases.v2026_04_a.items.my_avatars.description'
+                icon: 'images'
             }
         ]
     }
-};
+});
 
 /**
  * @param {string} version
  * @returns {string}
  */
-function getWhatsNewReleaseKey(version) {
-    const match = String(version || '').match(/(\d{4})\.(\d{2})(?:\.\d{2})?/);
-    if (!match) {
-        return '';
-    }
-    return `v${match[1]}_${match[2]}_a`;
+function normalizeReleaseVersion(version) {
+    const normalizedVersion = String(version || '')
+        .replace(/^VRCX\s+/, '')
+        .trim();
+    return /^\d{4}\.\d{2}\.\d{2}$/.test(normalizedVersion)
+        ? normalizedVersion
+        : '';
 }
 
 /**
  * @param {string} version
- * @returns {{titleKey: string, releaseLabel?: string, items: Array<{key: string, icon: string, titleKey: string, descriptionKey: string}>} | null}
+ * @returns {{titleKey: string, items: Array<{key: string, icon: string, titleKey: string, descriptionKey: string}>} | null}
  */
 function getWhatsNewRelease(version) {
-    const releaseKey = String(version || '');
-    if (!releaseKey) {
+    const normalizedVersion = normalizeReleaseVersion(version);
+    if (!normalizedVersion) {
         return null;
     }
-    return whatsNewReleases[releaseKey] ?? null;
+    const release = whatsNewReleases[normalizedVersion];
+    if (!release) {
+        return null;
+    }
+
+    const i18nKey = normalizedVersion.replaceAll('.', '_');
+    const baseKey = `onboarding.whatsnew.releases.${i18nKey}`;
+    return {
+        titleKey: `${baseKey}.title`,
+        items: release.items.map((item) => ({
+            ...item,
+            titleKey: `${baseKey}.items.${item.key}.title`,
+            descriptionKey: `${baseKey}.items.${item.key}.description`
+        }))
+    };
 }
 
-export { getWhatsNewRelease, getWhatsNewReleaseKey, whatsNewReleases };
+export {
+    getWhatsNewRelease,
+    normalizeReleaseVersion,
+    whatsNewReleases
+};
diff --git a/src/stores/vrcxUpdater.js b/src/stores/vrcxUpdater.js
index e1ed2f25..505cf6ef 100644
--- a/src/stores/vrcxUpdater.js
+++ b/src/stores/vrcxUpdater.js
@@ -7,7 +7,7 @@ import { logWebRequest } from '../services/appConfig';
 import { branches } from '../shared/constants';
 import {
     getWhatsNewRelease,
-    getWhatsNewReleaseKey
+    normalizeReleaseVersion
 } from '../shared/constants/whatsNewReleases';
 import { changeLogRemoveLinks } from '../shared/utils';
 
@@ -15,6 +15,12 @@ import configRepository from '../services/config';
 
 import * as workerTimers from 'worker-timers';
 
+const emptyWhatsNewDialog = () => ({
+    visible: false,
+    titleKey: '',
+    items: []
+});
+
 export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
     const { t } = useI18n();
 
@@ -40,12 +46,7 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
         buildName: '',
         changeLog: ''
     });
-    const whatsNewDialog = ref({
-        visible: false,
-        version: '',
-        releaseKey: '',
-        items: []
-    });
+    const whatsNewDialog = ref(emptyWhatsNewDialog());
     const pendingVRCXUpdate = ref(false);
     const pendingVRCXInstall = ref('');
     const updateInProgress = ref(false);
@@ -82,10 +83,25 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
         await initBranch();
         await loadVrcxId();
 
-        if (await compareAppVersion()) {
-            await showWhatsNewDialog();
+        let checkedForUpdatesDuringAnnouncement = false;
+        if (await shouldAnnounceCurrentVersion()) {
+            const shown = await showWhatsNewDialog();
+            if (shown) {
+                await markCurrentVersionAsSeen();
+            } else if (isRecognizedStableReleaseVersion()) {
+                const result = await showChangeLogDialog({ prefetch: true });
+                checkedForUpdatesDuringAnnouncement = result.checkedForUpdates;
+                if (result.shown) {
+                    await markCurrentVersionAsSeen();
+                }
+            }
+        } else {
+            await syncCurrentVersionState();
         }
-        if (autoUpdateVRCX.value !== 'Off') {
+        if (
+            autoUpdateVRCX.value !== 'Off' &&
+            !checkedForUpdatesDuringAnnouncement
+        ) {
             await checkForVRCXUpdate();
         }
     }
@@ -130,51 +146,58 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
         await configRepository.setString('VRCX_branch', branch.value);
     }
 
-    async function compareAppVersion() {
+    async function hasVersionChanged() {
         const lastVersion = await configRepository.getString(
             'VRCX_lastVRCXVersion',
             ''
         );
-        if (lastVersion !== currentVersion.value) {
-            await configRepository.setString(
-                'VRCX_lastVRCXVersion',
-                currentVersion.value
-            );
-            return branch.value === 'Stable' && lastVersion;
+        return lastVersion !== currentVersion.value;
+    }
+
+    async function markCurrentVersionAsSeen() {
+        await configRepository.setString(
+            'VRCX_lastVRCXVersion',
+            currentVersion.value
+        );
+    }
+
+    async function syncCurrentVersionState() {
+        if (await hasVersionChanged()) {
+            await markCurrentVersionAsSeen();
+            return true;
         }
         return false;
     }
 
-    /**
-     * @returns {string}
-     */
-    function getCurrentWhatsNewReleaseKey() {
-        return getWhatsNewReleaseKey(currentVersion.value);
+    async function shouldAnnounceCurrentVersion() {
+        if (branch.value !== 'Stable' || !isRecognizedStableReleaseVersion()) {
+            return false;
+        }
+        const lastVersion = await configRepository.getString(
+            'VRCX_lastVRCXVersion',
+            ''
+        );
+        return Boolean(lastVersion) && lastVersion !== currentVersion.value;
+    }
+
+    function isRecognizedStableReleaseVersion() {
+        return Boolean(normalizeReleaseVersion(currentVersion.value));
     }
 
     /**
      * @returns {Promise<boolean>}
      */
     async function showWhatsNewDialog() {
-        const releaseKey = getCurrentWhatsNewReleaseKey();
-        const release = getWhatsNewRelease(releaseKey);
+        const release = getWhatsNewRelease(currentVersion.value);
 
         if (!release) {
-            whatsNewDialog.value = {
-                visible: false,
-                version: '',
-                releaseKey: '',
-                items: []
-            };
+            whatsNewDialog.value = emptyWhatsNewDialog();
             return false;
         }
 
-        const displayVersion = currentVersion.value.replace(/^VRCX\s+/, '');
-
         whatsNewDialog.value = {
             visible: true,
-            version: release.releaseLabel || displayVersion,
-            releaseKey,
+            titleKey: release.titleKey,
             items: release.items.map((item) => ({ ...item }))
         };
 
@@ -242,9 +265,8 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
             currentVersion.value === 'VRCX Nightly Build' ||
             currentVersion.value === 'VRCX Build'
         ) {
-            changeLogDialog.value.changeLog = '-';
             // ignore custom builds
-            return;
+            return false;
         }
         if (branch.value === 'Beta') {
             // move Beta users to stable
@@ -269,7 +291,7 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
             json = JSON.parse(response.data);
         } catch (error) {
             console.error('Failed to check for VRCX update', error);
-            return;
+            return false;
         } finally {
             checkingForVRCXUpdate.value = false;
         }
@@ -279,7 +301,7 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
                     message: `${response.status} ${response.data}`
                 })
             );
-            return;
+            return false;
         }
         pendingVRCXUpdate.value = false;
         logWebRequest('[EXTERNAL GET]', url, `(${response.status})`, json);
@@ -290,7 +312,7 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
             setLatestAppVersion(releaseName);
             VRCXUpdateDialog.value.updatePendingIsLatest = false;
             if (autoUpdateVRCX.value === 'Off') {
-                return;
+                return true;
             }
             if (releaseName === pendingVRCXInstall.value) {
                 // update already downloaded
@@ -300,7 +322,7 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
                     json.assets
                 );
                 if (!downloadUrl) {
-                    return;
+                    return true;
                 }
                 pendingVRCXUpdate.value = true;
                 if (updateToastRelease.value !== releaseName) {
@@ -325,7 +347,9 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
                     );
                 }
             }
+            return true;
         }
+        return false;
     }
     async function showVRCXUpdateDialog() {
         const D = VRCXUpdateDialog.value;
@@ -441,9 +465,31 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
             break;
         }
     }
-    function showChangeLogDialog() {
+    async function showChangeLogDialog(options = {}) {
+        const { prefetch = false } = options;
+
+        if (prefetch) {
+            const loaded = await ensureChangeLogReady();
+            if (!loaded) {
+                return { shown: false, checkedForUpdates: true };
+            }
+            changeLogDialog.value.visible = true;
+            return { shown: true, checkedForUpdates: true };
+        }
+
         changeLogDialog.value.visible = true;
-        checkForVRCXUpdate();
+        void ensureChangeLogReady();
+        return { shown: true, checkedForUpdates: true };
+    }
+
+    async function ensureChangeLogReady() {
+        if (
+            changeLogDialog.value.buildName &&
+            changeLogDialog.value.changeLog
+        ) {
+            return true;
+        }
+        return checkForVRCXUpdate();
     }
     function restartVRCX(isUpgrade) {
         if (!LINUX) {
@@ -486,7 +532,6 @@ export const useVRCXUpdaterStore = defineStore('VRCXUpdater', () => {
         setAutoUpdateVRCX,
         setBranch,
 
-        compareAppVersion,
         showWhatsNewDialog,
         closeWhatsNewDialog,
         openChangeLogDialogOnly,