From e644d3de4b041f9abd30bf0629afd3b27232f63f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?MisakaKumomi=20=E5=BE=A1=E5=9D=82=E4=BA=91=E8=A7=81?=
 <447f@misaka.org>
Date: Fri, 3 Apr 2026 02:11:47 +0800
Subject: [PATCH] feat: lang select now moved to top-right corner - AIRI-209
 (#1555)

* feat: lang select now moved to top-right corner - AIRI-209

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../dialogs/onboarding/step-welcome.vue       | 72 ++++++++++++++-----
 pnpm-lock.yaml                                |  7 +-
 2 files changed, 54 insertions(+), 25 deletions(-)

diff --git a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-welcome.vue b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-welcome.vue
index 544790f0d..4d0d2d58d 100644
--- a/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-welcome.vue
+++ b/packages/stage-ui/src/components/scenarios/dialogs/onboarding/step-welcome.vue
@@ -2,8 +2,15 @@
 import type { OnboardingStepNextHandler } from './types'
 
 import { all } from '@proj-airi/i18n'
-import { Button, FieldCombobox } from '@proj-airi/ui'
+import { Button } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
+import {
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuRoot,
+  DropdownMenuTrigger,
+} from 'reka-ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -39,7 +46,51 @@ function handleLocalSetup() {
 </script>
 
 <template>
-  <div h-full flex flex-col>
+  <div relative h-full flex flex-col>
+    <div :class="['absolute', 'right-0', 'top-0', 'z-10']">
+      <DropdownMenuRoot>
+        <DropdownMenuTrigger
+          :class="[
+            'h-8 w-8',
+            'flex items-center justify-center',
+            'rounded-lg',
+            'text-neutral-500 transition-colors duration-200',
+            'hover:bg-neutral-100/80 hover:text-neutral-700',
+            'dark:text-neutral-400 dark:hover:bg-neutral-800/80 dark:hover:text-neutral-200',
+          ]"
+          :aria-label="t('settings.language.title')"
+        >
+          <div class="i-lucide:globe" h-6 w-6 />
+        </DropdownMenuTrigger>
+        <DropdownMenuPortal>
+          <DropdownMenuContent
+            align="end"
+            side="bottom"
+            :side-offset="6"
+            :class="[
+              'z-10000 min-w-36 rounded-xl border p-1 shadow-lg outline-none backdrop-blur-md',
+              'border-neutral-200/80 bg-neutral-100/80 text-neutral-700',
+              'dark:border-neutral-700/60 dark:bg-neutral-800/80 dark:text-neutral-100',
+            ]"
+          >
+            <DropdownMenuItem
+              v-for="lang in languages"
+              :key="lang.value"
+              :class="[
+                'flex cursor-pointer select-none items-center rounded-lg px-3 py-2',
+                'text-sm leading-none outline-none',
+                'data-[highlighted]:bg-primary-50/80 dark:data-[highlighted]:bg-primary-900/40',
+                'transition-colors duration-150 ease-in-out',
+                lang.value === language ? 'text-primary-500 dark:text-primary-300' : '',
+              ]"
+              @select="() => language = lang.value"
+            >
+              {{ lang.label }}
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenuPortal>
+      </DropdownMenuRoot>
+    </div>
     <div :class="['mb-2', 'flex', 'flex-1', 'flex-col', 'justify-center', 'text-center', 'md:mb-8']">
       <div
         v-motion
@@ -69,23 +120,6 @@ function handleLocalSetup() {
       >
         {{ t('settings.dialogs.onboarding.description') }}
       </p>
-      <div
-        v-motion
-        :initial="{ opacity: 0, y: 10 }"
-        :enter="{ opacity: 1, y: 0 }"
-        :duration="500"
-        :delay="150"
-        :class="['mx-auto', 'mt-6', 'w-full', 'max-w-lg', 'rounded-2xl', 'bg-neutral-100/80', 'backdrop-blur-sm', 'dark:bg-neutral-800/80', 'p-4']"
-      >
-        <FieldCombobox
-          v-model="language"
-          :class="['w-full']"
-          :label="t('settings.language.title')"
-          :description="t('settings.language.description')"
-          :options="languages"
-          layout="horizontal"
-        />
-      </div>
     </div>
     <div :class="['flex', 'flex-col', 'gap-3', 'md:flex-row']">
       <Button
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 36fd37bd1..5a94812cd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -13530,9 +13530,6 @@ packages:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
 
-  jose@6.1.3:
-    resolution: {integrity: sha512-0TpaTfihd4QMNwrz/ob2Bp7X04yuxJkjRGi4aKmOqwhov54i6u79oCv7T+C7lo70MKH6BesI3vscD1yb/yzKXQ==}
-
   jose@6.2.2:
     resolution: {integrity: sha512-d7kPDd34KO/YnzaDOlikGpOurfF0ByC2sEV4cANCtdqLlTfBlw2p14O/5d/zv40gJPbIQxfES3nSx1/oYNyuZQ==}
 
@@ -20328,7 +20325,7 @@ snapshots:
       express: 5.2.1
       express-rate-limit: 8.2.1(express@5.2.1)
       hono: 4.12.2
-      jose: 6.1.3
+      jose: 6.2.2
       json-schema-typed: 8.0.2
       pkce-challenge: 5.0.1
       raw-body: 3.0.2
@@ -28173,8 +28170,6 @@ snapshots:
 
   jiti@2.6.1: {}
 
-  jose@6.1.3: {}
-
   jose@6.2.2: {}
 
   jpeg-js@0.4.4: {}