From 75363526994156c31b1da9b80f5796343a7f396e Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Mon, 10 Mar 2025 00:43:25 +0800
Subject: [PATCH] style(stage-web): better menu component

---
 .../src/components/Layouts/Header.vue         |  4 +-
 .../src/components/Layouts/HeaderLink.vue     |  2 +-
 .../src/components/Layouts/MobileHeader.vue   | 24 ++++++-
 .../src/components/Menu/IconStatusItem.vue    |  2 +-
 apps/stage-web/src/layouts/default.vue        | 17 ++++-
 .../pages/settings/modules/consciousness.vue  | 66 +++----------------
 6 files changed, 50 insertions(+), 65 deletions(-)

diff --git a/apps/stage-web/src/components/Layouts/Header.vue b/apps/stage-web/src/components/Layouts/Header.vue
index a8ce50a5a..8106c4500 100644
--- a/apps/stage-web/src/components/Layouts/Header.vue
+++ b/apps/stage-web/src/components/Layouts/Header.vue
@@ -6,7 +6,9 @@ import HeaderLink from './HeaderLink.vue'
 
 <template>
   <header mb-1 w-full gap-2>
-    <HeaderLink />
+    <div w-full>
+      <HeaderLink />
+    </div>
     <RouterLink
       class="m-1 block max-h-[10lh] min-h-[1lh] rounded-lg bg-zinc-100 p-2 text-lg text-zinc-500 outline-none dark:bg-zinc-800 dark:text-zinc-400"
       to="/settings"
diff --git a/apps/stage-web/src/components/Layouts/HeaderLink.vue b/apps/stage-web/src/components/Layouts/HeaderLink.vue
index 53b9b4575..e9d297c04 100644
--- a/apps/stage-web/src/components/Layouts/HeaderLink.vue
+++ b/apps/stage-web/src/components/Layouts/HeaderLink.vue
@@ -10,7 +10,7 @@ const dark = useDark()
 
 <template>
   <RouterLink
-    to="/" flex="~ 1" w-full items-center
+    to="/" flex="~" items-center
     gap-2 px-2 text-nowrap text-2xl outline-none
   >
     <template v-if="dark">
diff --git a/apps/stage-web/src/components/Layouts/MobileHeader.vue b/apps/stage-web/src/components/Layouts/MobileHeader.vue
index 7b8f3732d..f517661b4 100644
--- a/apps/stage-web/src/components/Layouts/MobileHeader.vue
+++ b/apps/stage-web/src/components/Layouts/MobileHeader.vue
@@ -1,10 +1,30 @@
+<script setup lang="ts">
+import { useDark } from '@vueuse/core'
+
+import LogoDark from '../../assets/logo-dark.svg'
+import Logo from '../../assets/logo.svg'
+
+const dark = useDark()
+</script>
+
 <template>
-  <header mb-1 w-full gap-2>
+  <header mb-1 mt-2 w-full gap-2>
     <div flex="~ 1" w-full items-center justify-center gap-2 px-2 text-nowrap text-lg>
-      <div i-solar:cat-outline text="[#ed869d]" />
+      <template v-if="dark">
+        <img :src="LogoDark" h-8 w-8 class="theme-colored">
+      </template>
+      <template v-else>
+        <img :src="Logo" h-8 w-8 class="theme-colored">
+      </template>
       <div font-cute>
         <span>アイリ</span>
       </div>
     </div>
   </header>
 </template>
+
+<style scoped>
+.theme-colored {
+  filter: hue-rotate(calc(var(--theme-colors-hue, 0) * 1deg));
+}
+</style>
diff --git a/apps/stage-web/src/components/Menu/IconStatusItem.vue b/apps/stage-web/src/components/Menu/IconStatusItem.vue
index 76be5d475..e50f6ddba 100644
--- a/apps/stage-web/src/components/Menu/IconStatusItem.vue
+++ b/apps/stage-web/src/components/Menu/IconStatusItem.vue
@@ -25,7 +25,7 @@ const props = defineProps<{
       class="menu-icon-status-item-link"
       bg="neutral-50 dark:neutral-800"
       transition="all ease-in-out duration-200"
-      relative w-full items-center overflow-hidden rounded-lg p-5 text-left
+      relative h-full w-full items-center overflow-hidden rounded-lg p-5 text-left
       :to=" props.to"
     >
       <div z-1 flex-1>
diff --git a/apps/stage-web/src/layouts/default.vue b/apps/stage-web/src/layouts/default.vue
index b9b574415..fd507333d 100644
--- a/apps/stage-web/src/layouts/default.vue
+++ b/apps/stage-web/src/layouts/default.vue
@@ -1,15 +1,26 @@
 <script setup lang="ts">
+import { useScreenSafeArea } from '@vueuse/core'
 import { RouterView } from 'vue-router'
 
 import HeaderLink from '../components/Layouts/HeaderLink.vue'
+
+const { top, right, bottom, left } = useScreenSafeArea()
 </script>
 
 <template>
-  <div p-2>
-    <div mb-1 w-full gap-2 p-2>
+  <div
+    p-2
+    :style="{
+      paddingTop: `${top}px`,
+      paddingRight: `${right}px`,
+      paddingBottom: `${bottom}px`,
+      paddingLeft: `${left}px`,
+    }"
+  >
+    <div mb-4 w-full gap-2 class="px-0 py-1 md:px-3 md:py-3">
       <HeaderLink />
     </div>
-    <div p-5 flex="~ col gap-4">
+    <div class="px-3 py-2 md:px-5 md:py-5" flex="~ col gap-4">
       <RouterView />
     </div>
   </div>
diff --git a/apps/stage-web/src/pages/settings/modules/consciousness.vue b/apps/stage-web/src/pages/settings/modules/consciousness.vue
index e62a858b6..565629d5b 100644
--- a/apps/stage-web/src/pages/settings/modules/consciousness.vue
+++ b/apps/stage-web/src/pages/settings/modules/consciousness.vue
@@ -21,7 +21,7 @@ const router = useRouter()
   <div bg="neutral-100 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4>
     <div flex="~ col gap-4">
       <div>
-        <h2 text-2xl>
+        <h2 class="text-lg md:text-2xl">
           Provider
         </h2>
         <div text="neutral-400 dark:neutral-400">
@@ -36,66 +36,18 @@ const router = useRouter()
         -->
         <fieldset flex="~ row gap-4" :style="{ 'scrollbar-width': 'none' }" min-w-0 of-x-scroll scroll-smooth>
           <label
-            bg="neutral-200 dark:neutral-800"
+            v-for="(_, index) in 10"
+            :key="index"
+            border="2px solid"
+            :class="[
+              index === 0 ? 'bg-primary-50/50 dark:bg-primary-900' : 'bg-white dark:bg-neutral-900',
+              index === 0 ? 'border-primary-300 dark:border-primary-800' : 'border-neutral-200 dark:border-neutral-800',
+            ]"
             flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
           >
             <input type="radio" name="provider" value="provider-1">
             <div flex="~ col" min-h-16 w-full items-center justify-center>
-              Provider 1
-            </div>
-          </label>
-          <label
-            bg="neutral-200 dark:neutral-800"
-            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
-          >
-            <input type="radio" name="provider" value="provider-1">
-            <div flex="~ col" min-h-16 w-full items-center justify-center>
-              Provider 1
-            </div>
-          </label>
-          <label
-            bg="neutral-200 dark:neutral-800"
-            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
-          >
-            <input type="radio" name="provider" value="provider-1">
-            <div flex="~ col" min-h-16 w-full items-center justify-center>
-              Provider 1
-            </div>
-          </label>
-          <label
-            bg="neutral-200 dark:neutral-800"
-            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
-          >
-            <input type="radio" name="provider" value="provider-1">
-            <div flex="~ col" min-h-16 w-full items-center justify-center>
-              Provider 1
-            </div>
-          </label>
-          <label
-            bg="neutral-200 dark:neutral-800"
-            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
-          >
-            <input type="radio" name="provider" value="provider-1">
-            <div flex="~ col" min-h-16 w-full items-center justify-center>
-              Provider 1
-            </div>
-          </label>
-          <label
-            bg="neutral-200 dark:neutral-800"
-            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
-          >
-            <input type="radio" name="provider" value="provider-1">
-            <div flex="~ col" min-h-16 w-full items-center justify-center>
-              Provider 1
-            </div>
-          </label>
-          <label
-            bg="neutral-200 dark:neutral-800"
-            flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
-          >
-            <input type="radio" name="provider" value="provider-1">
-            <div flex="~ col" min-h-16 w-full items-center justify-center>
-              Provider 1
+              Provider {{ index + 1 }}
             </div>
           </label>
         </fieldset>