From a786e4c228735413d6e2145dbd74a94864e0d197 Mon Sep 17 00:00:00 2001
From: LemonNeko <self@lemonneko.moe>
Date: Thu, 9 Apr 2026 16:53:21 +0800
Subject: [PATCH] fix(stage-pocket): position of status icons

---
 .../components/websocket-status-button.vue    | 49 +++++--------------
 apps/stage-pocket/src/pages/index.vue         |  7 ++-
 .../Layouts/MobileInteractiveArea.vue         |  9 +++-
 3 files changed, 24 insertions(+), 41 deletions(-)

diff --git a/apps/stage-pocket/src/components/websocket-status-button.vue b/apps/stage-pocket/src/components/websocket-status-button.vue
index 20a19217a..fb848688f 100644
--- a/apps/stage-pocket/src/components/websocket-status-button.vue
+++ b/apps/stage-pocket/src/components/websocket-status-button.vue
@@ -3,7 +3,6 @@ import { useLampFlickerAnimation } from '@proj-airi/stage-ui/composables/use-lam
 import { useModsServerChannelStore } from '@proj-airi/stage-ui/stores/mods/api/channel-server'
 import { lampFlickerAnimationClass } from '@proj-airi/ui'
 import { storeToRefs } from 'pinia'
-import { TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger } from 'reka-ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
@@ -60,43 +59,19 @@ function openConnectionSettings() {
 </script>
 
 <template>
-  <div
-    class="fixed right-3 z-20"
-    :style="{ top: 'max(0.75rem, env(safe-area-inset-top, 0px))' }"
+  <button
+    type="button"
+    :class="buttonClass"
+    :aria-label="tooltipLabel"
+    :title="tooltipLabel"
+    @click="openConnectionSettings"
   >
-    <TooltipProvider :delay-duration="0" :skip-delay-duration="0">
-      <TooltipRoot>
-        <TooltipTrigger as-child>
-          <button
-            type="button"
-            :class="buttonClass"
-            :aria-label="tooltipLabel"
-            :title="tooltipLabel"
-            @click="openConnectionSettings"
-          >
-            <div
-              :class="iconClasses"
-              :style="flickerStyle"
-              @animationiteration="onAnimationIteration"
-            />
-          </button>
-        </TooltipTrigger>
-        <Transition name="pocket-ws-tooltip-fade">
-          <TooltipContent
-            :class="[
-              'border border-solid border-neutral-200/60 dark:border-neutral-800/10',
-              'bg-neutral-50/80 dark:bg-neutral-800/70',
-              'w-fit flex items-center px-1.5 py-1 rounded-lg backdrop-blur-md text-xs',
-            ]"
-            side="left"
-            :side-offset="4"
-          >
-            {{ tooltipLabel }}
-          </TooltipContent>
-        </Transition>
-      </TooltipRoot>
-    </TooltipProvider>
-  </div>
+    <div
+      :class="iconClasses"
+      :style="flickerStyle"
+      @animationiteration="onAnimationIteration"
+    />
+  </button>
 </template>
 
 <style scoped>
diff --git a/apps/stage-pocket/src/pages/index.vue b/apps/stage-pocket/src/pages/index.vue
index ac6d9e317..c0d451164 100644
--- a/apps/stage-pocket/src/pages/index.vue
+++ b/apps/stage-pocket/src/pages/index.vue
@@ -183,7 +183,6 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => {
     :top-color="sampledColor"
   >
     <div flex="~ col" relative z-2 h-100dvh w-100vw of-hidden py-safe>
-      <WebSocketStatusButton />
       <!-- header -->
       <div class="px-0 py-1 md:px-3 md:py-3" w-full gap-2>
         <Header class="hidden md:flex" />
@@ -204,7 +203,11 @@ watch([stream, () => vadLoaded.value], async ([s, loaded]) => {
           :scale="scale"
         />
         <InteractiveArea v-if="!isMobile" h="85dvh" absolute right-4 flex flex-1 flex-col max-w="500px" min-w="30%" />
-        <MobileInteractiveArea v-if="isMobile" @settings-open="handleSettingsOpen" />
+        <MobileInteractiveArea v-if="isMobile" @settings-open="handleSettingsOpen">
+          <template #status>
+            <WebSocketStatusButton />
+          </template>
+        </MobileInteractiveArea>
       </div>
     </div>
   </BackgroundProvider>
diff --git a/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue b/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
index a180eb3e9..126a9d61e 100644
--- a/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
+++ b/packages/stage-layouts/src/components/Layouts/MobileInteractiveArea.vue
@@ -169,8 +169,13 @@ onMounted(() => {
       <div top="50%" translate-y="[-50%]" fixed z-15 px-3>
         <ViewControlInputs ref="viewControlsInputs" :mode="viewControlsActiveMode" />
       </div>
-      <div translate-y="[-100%]" absolute right-0 w-full px-3 pb-3 font-sans>
-        <div flex="~ col" w-full gap-1>
+      <div translate-y="[-100%]" absolute left-0 px-3 pb-3 font-sans>
+        <div flex="~ col" gap-1>
+          <slot name="status" />
+        </div>
+      </div>
+      <div translate-y="[-100%]" absolute right-0 px-3 pb-3 font-sans>
+        <div flex="~ col" gap-1>
           <ActionAbout />
           <HearingConfigDialog
             v-model:show="hearingDialogOpen"