From d67f33cd329c05672870f43cc130499e19ea2e5a Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Wed, 10 Dec 2025 01:15:34 +0800
Subject: [PATCH] chore(stage-web): update action button style, include about
 button

---
 AGENTS.md                                     |  2 +-
 .../src/components/Layouts/Header.vue         | 23 +++++++++++--------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/AGENTS.md b/AGENTS.md
index 33dee1f00..87658c135 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -84,7 +84,7 @@ Concise but detailed reference for contributors working across the `moeru-ai/air
 
 ## Styling & Components
 
-- Prefer UnoCSS class arrays/attributes for readability: `:class="['px-2','py-1','flex','items-center','bg-white/50','dark:bg-black/50']"`; avoid long inline `class=""`. Refactor legacy when you touch it; prefer attributes/arrays over inline Tailwind blobs.
+- Prefer Vue v-bind class arrays for readability when working with UnoCSS & tailwindcss: do `:class="['px-2','py-1','flex','items-center','bg-white/50','dark:bg-black/50']"`, don't do `class="px-2 py-1 flex items-center bg-white/50 dark:bg-black/50"`, don't do `px="2" py="1" flex="~ items-center" bg="white/50 dark:black/50"`; avoid long inline `class=""`. Refactor legacy when you touch it.
 - Use/extend UnoCSS shortcuts/rules in `uno.config.ts`; add new shortcuts/rules/plugins there when standardizing styles. Prefer UnoCSS over Tailwind.
 - Check `apps/stage-web/src/styles` for existing animations; reuse or extend before adding new ones. If you need config references, see `apps/stage-web/tsconfig.json` and `uno.config.ts`.
 - Build primitives on `@proj-airi/ui` (reka-ui) instead of raw DOM; see `packages/ui/src/components/Form` for patterns.
diff --git a/apps/stage-web/src/components/Layouts/Header.vue b/apps/stage-web/src/components/Layouts/Header.vue
index 68929ce3f..479ac351c 100644
--- a/apps/stage-web/src/components/Layouts/Header.vue
+++ b/apps/stage-web/src/components/Layouts/Header.vue
@@ -2,18 +2,23 @@
 import { RouterLink } from 'vue-router'
 
 import HeaderLink from './HeaderLink.vue'
+import ActionAbout from './InteractiveArea/Actions/About.vue'
 </script>
 
 <template>
-  <header mb-1 w-full gap-2>
-    <div w-full>
-      <HeaderLink />
+  <header mb-1 w-full flex items-center justify-between gap-2>
+    <HeaderLink />
+    <div flex items-center gap-2>
+      <ActionAbout />
+      <RouterLink
+        border="2 solid neutral-100/60 dark:neutral-800/30"
+        bg="neutral-50/70 dark:neutral-800/70"
+        w-fit flex items-center justify-center rounded-xl p-2 backdrop-blur-md
+        title="Settings"
+        to="/settings"
+      >
+        <div i-solar:settings-minimalistic-bold-duotone size-5 text="neutral-500 dark:neutral-400" />
+      </RouterLink>
     </div>
-    <RouterLink
-      class="m-1 block max-h-[10lh] min-h-[1lh] rounded-lg bg-neutral-100 p-2 text-lg text-neutral-500 outline-none dark:bg-neutral-800 dark:text-neutral-400"
-      to="/settings"
-    >
-      <div i-solar:settings-minimalistic-bold-duotone />
-    </RouterLink>
   </header>
 </template>