From 447d718030d41b5ab9a8d31dc5c87c5aea8c0dd0 Mon Sep 17 00:00:00 2001
From: Neko <neko@ayaka.moe>
Date: Tue, 31 Mar 2026 08:17:29 +0800
Subject: [PATCH] fix(stage-ui,stage-tamagotchi): bring back i18n, improved
 settings data ui (#1525)

* fix(stage-ui,stage-tamagotchi): bring back i18n, improved settings data ui

* fix(stage-layouts): extra height / top
---
 .../data/components/desktop-folder-section.vue         |  6 +++---
 .../settings/data/components/desktop-reset-section.vue |  2 +-
 .../src/renderer/pages/settings/data/index.vue         |  2 +-
 packages/i18n/src/locales/en/settings.yaml             | 10 ++++++++++
 packages/stage-layouts/src/layouts/settings.vue        |  8 +++++++-
 .../pages/settings/data/components/danger-section.vue  | 10 +++++-----
 6 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-folder-section.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-folder-section.vue
index 3ab32857d..228f431a7 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-folder-section.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-folder-section.vue
@@ -31,13 +31,13 @@ async function triggerOpenDesktopUserDataFolder() {
 </script>
 
 <template>
-  <div :class="['border-2 border-sky-200/80 rounded-xl bg-sky-50/80 p-4 shadow-sm', 'dark:border-sky-500/40 dark:bg-sky-500/10']">
+  <div :class="['border-2 border-neutral-200/50 rounded-xl bg-white/70 p-4 shadow-sm', 'dark:border-neutral-800/60 dark:bg-neutral-900/60']">
     <div :class="['grid grid-cols-1 items-start gap-3 md:grid-cols-[minmax(0,1fr)_auto]']">
       <div :class="['flex flex-col gap-1 md:max-w-[560px]']">
-        <div :class="['text-lg text-sky-700 font-medium dark:text-sky-200']">
+        <div :class="['text-lg font-medium']">
           {{ t('settings.pages.data.sections.desktop-folder.title') }}
         </div>
-        <p :class="['text-sm text-sky-700/80 dark:text-sky-200/80']">
+        <p :class="['text-sm text-neutral-600 dark:text-neutral-400']">
           {{ t('settings.pages.data.sections.desktop-folder.description') }}
         </p>
       </div>
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-reset-section.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-reset-section.vue
index 069f7a2fd..95ca7a4d0 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-reset-section.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/data/components/desktop-reset-section.vue
@@ -23,7 +23,7 @@ async function resetDesktopState() {
 </script>
 
 <template>
-  <div :class="['border-2 border-amber-300/80 rounded-xl bg-amber-50/80 p-4 shadow-sm', 'dark:border-amber-500/60 dark:bg-amber-500/10']">
+  <div :class="['border-2 border-amber-300/10 rounded-xl bg-amber-50/80 p-4 shadow-sm', 'dark:border-amber-500/10 dark:bg-amber-500/10']">
     <div :class="['grid grid-cols-1 items-start gap-3 md:grid-cols-[minmax(0,1fr)_auto]']">
       <div :class="['flex flex-col gap-1 md:max-w-[560px]']">
         <div :class="['text-lg text-amber-700 font-medium dark:text-amber-200']">
diff --git a/apps/stage-tamagotchi/src/renderer/pages/settings/data/index.vue b/apps/stage-tamagotchi/src/renderer/pages/settings/data/index.vue
index d075691c4..19de38610 100644
--- a/apps/stage-tamagotchi/src/renderer/pages/settings/data/index.vue
+++ b/apps/stage-tamagotchi/src/renderer/pages/settings/data/index.vue
@@ -14,10 +14,10 @@ const { statusMessage, statusTone, handleStatus } = createDataSettingsStatusStat
 
 <template>
   <div :class="['flex flex-col gap-4 pb-4']">
+    <DesktopFolderSection @status="handleStatus" />
     <StatusBanner v-if="statusMessage" :message="statusMessage" :tone="statusTone" />
     <ChatsSection @status="handleStatus" />
     <ModelsModulesSection @status="handleStatus" />
-    <DesktopFolderSection @status="handleStatus" />
     <DesktopResetSection @status="handleStatus" />
     <DangerSection @status="handleStatus" />
   </div>
diff --git a/packages/i18n/src/locales/en/settings.yaml b/packages/i18n/src/locales/en/settings.yaml
index 1e48dbf04..e1e7612f4 100644
--- a/packages/i18n/src/locales/en/settings.yaml
+++ b/packages/i18n/src/locales/en/settings.yaml
@@ -257,6 +257,10 @@ pages:
         title: Delete all data
         description: Wipe every local setting, provider config, and model.
         delete: Delete all data
+      desktop-folder:
+        title: Open app data folder
+        description: Open AIRI's data folder in your file manager.
+        open: Open folder
       desktop:
         title: Reset desktop settings & states
         description: Clear AIRI desktop settings and runtime state.
@@ -823,6 +827,9 @@ pages:
       openai:
         description: openai.com
         title: OpenAI
+      azure-openai:
+        description: Azure OpenAI API
+        title: Azure OpenAI
       openai-compatible:
         description: OpenAI Compatible
         title: OpenAI Compatible
@@ -835,6 +842,9 @@ pages:
       openrouter:
         description: openrouter.ai
         title: OpenRouter
+      openrouter-audio-speech:
+        description: openrouter.ai
+        title: OpenRouter
       perplexity:
         description: perplexity.ai
         title: Perplexity
diff --git a/packages/stage-layouts/src/layouts/settings.vue b/packages/stage-layouts/src/layouts/settings.vue
index 22ac3ff08..cbbb18f67 100644
--- a/packages/stage-layouts/src/layouts/settings.vue
+++ b/packages/stage-layouts/src/layouts/settings.vue
@@ -90,7 +90,13 @@ onMounted(() => updateThemeColor())
       <HeaderLink />
     </div>
     <!-- Content -->
-    <div class="max-h-[calc(100%-40px)] px-3 py-0 sm:max-h-[calc(100%-56px)] 2xl:max-w-screen-2xl md:py-0 xl:px-4" flex="~ col" mx-auto h-full min-h-0>
+    <div
+      :class="[
+        'px-3 py-0 2xl:max-w-screen-2xl md:py-0 xl:px-4',
+        isStageTamagotchi() ? 'sm:max-h-[calc(100%)] max-h-[calc(100%)]' : 'sm:max-h-[calc(100%-56px)] max-h-[calc(100%-40px)]',
+        'flex flex-col mx-auto h-full min-h-0',
+      ]"
+    >
       <PageHeader
         :title="routeHeaderMetadata?.title || ''"
         :subtitle="routeHeaderMetadata?.subtitle"
diff --git a/packages/stage-pages/src/pages/settings/data/components/danger-section.vue b/packages/stage-pages/src/pages/settings/data/components/danger-section.vue
index 228813cb0..b96b3214a 100644
--- a/packages/stage-pages/src/pages/settings/data/components/danger-section.vue
+++ b/packages/stage-pages/src/pages/settings/data/components/danger-section.vue
@@ -34,7 +34,7 @@ async function deleteAll() {
 </script>
 
 <template>
-  <div :class="['border-2 border-red-300/80 rounded-xl bg-red-50/80 p-4 shadow-sm', 'dark:border-red-500/60 dark:bg-red-500/10']">
+  <div :class="['border-2 border-red-300/10 rounded-xl bg-red-50/80 p-4 shadow-sm', 'dark:border-red-500/10 dark:bg-red-500/10']">
     <div :class="['flex flex-col gap-3']">
       <div>
         <div :class="['text-lg text-red-600 font-semibold dark:text-red-300']">
@@ -45,9 +45,9 @@ async function deleteAll() {
         </p>
       </div>
 
-      <div :class="['flex flex-col gap-3']">
-        <div :class="['grid gap-3 md:grid-cols-2']">
-          <div :class="['grid grid-cols-1 items-start gap-2 p-3 md:grid-cols-[minmax(0,1fr)_auto]']">
+      <div :class="['flex flex-col gap-5']">
+        <div :class="['grid gap-5']">
+          <div :class="['grid grid-cols-1 items-start gap-2 md:grid-cols-[minmax(0,1fr)_auto]']">
             <div :class="['flex flex-col gap-1 md:max-w-[560px]']">
               <div :class="['text-sm text-red-700 font-medium dark:text-red-200']">
                 {{ t('settings.pages.data.sections.providers.title') }}
@@ -69,7 +69,7 @@ async function deleteAll() {
             </div>
           </div>
 
-          <div :class="['grid grid-cols-1 items-start gap-2 p-3 md:grid-cols-[minmax(0,1fr)_auto]']">
+          <div :class="['grid grid-cols-1 items-start gap-2 md:grid-cols-[minmax(0,1fr)_auto]']">
             <div :class="['flex flex-col gap-1 md:max-w-[560px]']">
               <div :class="['text-sm text-red-700 font-medium dark:text-red-200']">
                 {{ t('settings.pages.data.sections.all.title') }}