Add feature: auto hide controls island

apps/stage-tamagotchi/src/renderer/components/stage-islands/controls-island/index.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { defineInvoke } from '@moeru/eventa'
 import { useElectronEventaContext, useElectronEventaInvoke, useElectronMouseInElement } from '@proj-airi/electron-vueuse'
-import { useSettings, useSettingsAudioDevice } from '@proj-airi/stage-ui/stores/settings'
+import { useControlsIslandAutohide, useControlsIslandCollapse } from '@proj-airi/stage-ui/composables'
+import { useSettings, useSettingsAudioDevice, useSettingsControlsIsland } from '@proj-airi/stage-ui/stores/settings'
 import { useTheme } from '@proj-airi/ui'
-import { refDebounced, useIntervalFn } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
 import { computed, reactive, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -29,9 +29,11 @@ const { t } = useI18n()
 
 const settingsAudioDeviceStore = useSettingsAudioDevice()
 const settingsStore = useSettings()
+const settingsControlsIslandStore = useSettingsControlsIsland()
 const context = useElectronEventaContext()
 const { enabled } = storeToRefs(settingsAudioDeviceStore)
-const { alwaysOnTop, controlsIslandIconSize } = storeToRefs(settingsStore)
+const { alwaysOnTop } = storeToRefs(settingsStore)
+const { autoHideControlsIsland, autoHideDelay, autoShowDelay, autoHideOpacity } = storeToRefs(settingsControlsIslandStore)
 const openSettings = useElectronEventaInvoke(electronOpenSettings)
 const openChat = useElectronEventaInvoke(electronOpenChat)
 const isLinux = useElectronEventaInvoke(electron.app.isLinux)
@@ -46,7 +48,10 @@ const blockingOverlays = reactive(new Set<string>())
 const isBlocked = computed(() => blockingOverlays.size > 0)
 
 function setOverlay(key: string, active: boolean) {
-  active ? blockingOverlays.add(key) : blockingOverlays.delete(key)
+  if (active)
+    blockingOverlays.add(key)
+  else
+    blockingOverlays.delete(key)
 }
 
 // Expose for parent (e.g. to disable click-through when a dialog is open)
@@ -56,12 +61,31 @@ defineExpose({
 })
 
 const { isOutside } = useElectronMouseInElement(islandRef)
-const isOutsideAfter2seconds = refDebounced(isOutside, 1500)
 
-watch(isOutsideAfter2seconds, (outside) => {
-  if (outside && expanded.value && !isBlocked.value) {
-    expanded.value = false
-  }
+// Auto-hide / Auto-show behavior
+const { isHidden, hiddenOpacity } = useControlsIslandAutohide({
+  autoHideControlsIsland,
+  autoHideDelay,
+  autoShowDelay,
+  autoHideOpacity,
+  isOutside,
+  isBlocked,
+  expanded,
+})
+
+// Auto-collapse behavior
+const { startCollapse, stopCollapse } = useControlsIslandCollapse({
+  autoHideDelay,
+  autoHideControlsIsland,
+  expanded,
+  isBlocked,
+})
+
+// Watch mouse position to trigger collapse
+watch(isOutside, (val) => {
+  stopCollapse()
+  if (val)
+    startCollapse()
 })
 
 watch(expanded, (isExpanded) => {
@@ -70,12 +94,6 @@ watch(expanded, (isExpanded) => {
   }
 })
 
-useIntervalFn(() => {
-  if (expanded.value && isOutside.value && !isBlocked.value) {
-    expanded.value = false
-  }
-}, 1500)
-
 // Apply alwaysOnTop on mount and when it changes
 watch(alwaysOnTop, (val) => {
   setAlwaysOnTop(val)
@@ -85,31 +103,13 @@ function toggleAlwaysOnTop() {
   alwaysOnTop.value = !alwaysOnTop.value
 }
 
-// Grouped classes for icon / border / padding and combined style class
-const adjustStyleClasses = computed(() => {
-  let isLarge: boolean
-
-  // Determine size based on setting
-  switch (controlsIslandIconSize.value) {
-    case 'large':
-      isLarge = true
-      break
-    case 'small':
-      isLarge = false
-      break
-    case 'auto':
-    default:
-      // Fixed to large for better visibility in the new layout,
-      // can be changed to windowHeight based check if absolutely needed.
-      isLarge = true
-      break
-  }
-
-  const icon = isLarge ? 'size-5' : 'size-3'
-  const border = isLarge ? 'border-2' : 'border-0'
-  const padding = isLarge ? 'p-2' : 'p-0.5'
-  return { icon, border, padding, button: `${border} ${padding}` }
-})
+// Static style classes for icon / border / padding
+const adjustStyleClasses = {
+  icon: 'size-5',
+  border: 'border-2',
+  padding: 'p-2',
+  button: 'border-2 p-2',
+}
 
 /**
  * This is a know issue (or expected behavior maybe) to Electron.
@@ -125,7 +125,14 @@ function refreshWindow() {
 </script>
 
 <template>
-  <div ref="islandRef" fixed bottom-2 right-2>
+  <div
+    ref="islandRef"
+    fixed bottom-2 right-2
+    :style="autoHideControlsIsland ? { opacity: isHidden ? hiddenOpacity : 1 } : {}"
+    :class="[
+      autoHideControlsIsland ? 'transition-opacity duration-300' : '',
+    ]"
+  >
     <div flex flex-col items-end gap-1>
       <!-- iOS Style Drawer Panel -->
       <Transition

packages/stage-pages/src/components/settings-general-fields.vue

@@ -1,21 +1,23 @@
 <script setup lang="ts">
 import { all } from '@proj-airi/i18n'
+import { isStageTamagotchi } from '@proj-airi/stage-shared'
 import { useAnalytics } from '@proj-airi/stage-ui/composables/use-analytics'
 import { isPosthogAvailableInBuild } from '@proj-airi/stage-ui/stores/analytics'
-import { useSettings } from '@proj-airi/stage-ui/stores/settings'
-import { FieldCheckbox, FieldCombobox, useTheme } from '@proj-airi/ui'
+import { useSettings, useSettingsControlsIsland } from '@proj-airi/stage-ui/stores/settings'
+import { FieldCheckbox, FieldCombobox, FieldRange, useTheme } from '@proj-airi/ui'
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 const props = withDefaults(defineProps<{
-  needsControlsIslandIconSizeSetting?: boolean
+  needsAutoHideControlsIslandSetting?: boolean
 }>(), {
-  needsControlsIslandIconSizeSetting: import.meta.env.RUNTIME_ENVIRONMENT === 'electron',
+  needsAutoHideControlsIslandSetting: isStageTamagotchi(),
 })
 
 const settings = useSettings()
+const settingsControlsIsland = useSettingsControlsIsland()
 
-const showControlsIsland = computed(() => props.needsControlsIslandIconSizeSetting)
+const showAutoHideControlsIsland = computed(() => props.needsAutoHideControlsIslandSetting)
 const showAnalyticsSettings = computed(() => isPosthogAvailableInBuild())
 const analyticsToggleValue = computed({
   get: () => showAnalyticsSettings.value ? settings.analyticsEnabled : false,
@@ -59,24 +61,62 @@ const languages = computed(() => {
       :options="languages"
     />
 
-    <FieldCombobox
-      v-if="showControlsIsland"
-      v-model="settings.controlsIslandIconSize"
+    <FieldCheckbox
+      v-if="showAutoHideControlsIsland"
+      v-model="settingsControlsIsland.autoHideControlsIsland"
       v-motion
       :initial="{ opacity: 0, y: 10 }"
       :enter="{ opacity: 1, y: 0 }"
-      :duration="250 + (4 * 10)"
-      :delay="4 * 50"
-      :class="['transition-all', 'ease-in-out', 'duration-250']"
-      :label="t('settings.controls-island.icon-size.title')"
-      :description="t('settings.controls-island.icon-size.description')"
-      :options="[
-        { value: 'auto', label: t('settings.controls-island.icon-size.auto') },
-        { value: 'large', label: t('settings.controls-island.icon-size.large') },
-        { value: 'small', label: t('settings.controls-island.icon-size.small') },
-      ]"
+      :duration="250 + (5 * 10)"
+      :delay="5 * 50"
+      label="Auto-hide controls island"
+      description="Hide controls island after mouse leaves, show after mouse enters"
     />
 
+    <template v-if="showAutoHideControlsIsland && settingsControlsIsland.autoHideControlsIsland">
+      <FieldRange
+        v-model.number="settingsControlsIsland.autoHideDelay"
+        v-motion
+        :initial="{ opacity: 0, y: 10 }"
+        :enter="{ opacity: 1, y: 0 }"
+        :duration="250 + (6 * 10)"
+        :delay="6 * 50"
+        :min="0"
+        :max="5"
+        :step="0.1"
+        :format-value="v => `${v}s`"
+        label="Hide delay"
+      />
+
+      <FieldRange
+        v-model.number="settingsControlsIsland.autoShowDelay"
+        v-motion
+        :initial="{ opacity: 0, y: 10 }"
+        :enter="{ opacity: 1, y: 0 }"
+        :duration="250 + (7 * 10)"
+        :delay="7 * 50"
+        :min="0"
+        :max="5"
+        :step="0.1"
+        :format-value="v => `${v}s`"
+        label="Show delay"
+      />
+
+      <FieldRange
+        v-model.number="settingsControlsIsland.autoHideOpacity"
+        v-motion
+        :initial="{ opacity: 0, y: 10 }"
+        :enter="{ opacity: 1, y: 0 }"
+        :duration="250 + (8 * 10)"
+        :delay="8 * 50"
+        :min="0"
+        :max="100"
+        :step="1"
+        :format-value="v => `${v}%`"
+        label="Hidden opacity"
+      />
+    </template>
+
     <FieldCheckbox
       v-model="analyticsToggleValue"
       v-motion

packages/stage-ui/src/composables/index.ts

@@ -8,6 +8,7 @@ export * from './use-async-state'
 export * from './use-breakpoints'
 export * from './use-build-info'
 export * from './use-chat-session/summary'
+export * from './use-controls-island-autohide'
 export * from './use-optimistic'
 export * from './use-scroll-to-hash'
 export * from './vision'