fix(stage-pocket): position of status icons

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>

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>

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"