feat(stage-tamagotchi): allow visible on all workspace (#223)

* feat(stage-tamagotchi): allow visible on all workspace

* fix: set default visibility to `true`

Co-authored-by: Neko <neko@ayaka.moe>

---------

Co-authored-by: Neko <neko@ayaka.moe>

apps/stage-tamagotchi/locales/en.yml

@@ -55,6 +55,9 @@ settings:
     chinese: 简体中文
     english: English
     title: Language
+  allow-visible-on-all-workspaces:
+    title: Cross-Space Visibility
+    description: Allow the window to be visible on all workspaces, macOS only.
   live2d:
     change-model:
       from-file: Load from File

apps/stage-tamagotchi/locales/zh-CN.yml

@@ -41,6 +41,9 @@ settings:
     chinese: 简体中文
     english: English
     title: 语言
+  allow-visible-on-all-workspaces:
+    title: 跨桌面可见性
+    description: 允许窗口在所有虚拟桌面中可见，仅限 macOS。
   live2d:
     change-model:
       from-file: 从文件加载

apps/stage-tamagotchi/src-tauri/capabilities/default.json

@@ -14,6 +14,7 @@
     "core:window:allow-start-dragging",
     "core:window:allow-set-focus",
     "core:window:allow-set-minimizable",
+    "core:window:allow-set-visible-on-all-workspaces",
     "mcp:default",
     "global-shortcut:allow-is-registered",
     "global-shortcut:allow-register",

apps/stage-tamagotchi/src/App.vue

@@ -1,15 +1,17 @@
 <script setup lang="ts">
 import { useMcpStore, useSettings } from '@proj-airi/stage-ui/stores'
 import { listen } from '@tauri-apps/api/event'
+import { Window } from '@tauri-apps/api/window'
+import { platform } from '@tauri-apps/plugin-os'
 import { useEventListener } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import { onMounted, watch } from 'vue'
+import { computed, onMounted, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { RouterView } from 'vue-router'
 
 import { useWindowControlStore } from './stores/window-controls'
 
-const { language, themeColorsHue, themeColorsHueDynamic } = storeToRefs(useSettings())
+const { language, themeColorsHue, themeColorsHueDynamic, allowVisibleOnAllWorkspaces } = storeToRefs(useSettings())
 const i18n = useI18n()
 const windowControlStore = useWindowControlStore()
 const mcpStore = useMcpStore()
@@ -38,6 +40,20 @@ watch(themeColorsHueDynamic, () => {
 listen('mcp_plugin_destroyed', () => {
   mcpStore.connected = false
 })
+
+const isMac = computed(() => platform() === 'macos')
+
+if (isMac.value) {
+  watch(allowVisibleOnAllWorkspaces, async (value) => {
+    const window = await Window.getByLabel('main')
+
+    if (!window) {
+      return
+    }
+
+    window.setVisibleOnAllWorkspaces(value)
+  })
+}
 </script>
 
 <template>

apps/stage-tamagotchi/src/pages/settings/appearance/general.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { useSettings } from '@proj-airi/stage-ui/stores'
 import { useDark } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 
 import CheckBar from '../../../components/Settings/CheckBar.vue'
 
 const settings = useSettings()
+const { allowVisibleOnAllWorkspaces } = storeToRefs(settings)
 
 const dark = useDark()
 </script>
@@ -23,6 +25,19 @@ const dark = useDark()
     text="settings.theme"
     transition="all ease-in-out duration-250"
   />
+  <CheckBar
+    v-model="allowVisibleOnAllWorkspaces"
+    v-motion
+    mb-2
+    :initial="{ opacity: 0, y: 10 }"
+    :enter="{ opacity: 1, y: 0 }"
+    :duration="250 + (2 * 10)"
+    :delay="2 * 50"
+    icon-on="i-solar:check-circle-bold"
+    icon-off="i-solar:close-circle-bold"
+    text="settings.allow-visible-on-all-workspaces.title"
+    transition="all ease-in-out duration-250"
+  />
   <!-- Language Setting -->
   <div
     v-motion

packages/stage-ui/src/stores/settings.ts

@@ -34,6 +34,8 @@ export const useSettings = defineStore('settings', () => {
   const themeColorsHue = useLocalStorage('settings/theme/colors/hue', DEFAULT_THEME_COLORS_HUE)
   const themeColorsHueDynamic = useLocalStorage('settings/theme/colors/hue-dynamic', false)
 
+  const allowVisibleOnAllWorkspaces = useLocalStorage('settings/allow-visible-on-all-workspaces', true)
+
   function setThemeColorsHue(hue = DEFAULT_THEME_COLORS_HUE) {
     themeColorsHue.value = hue
     themeColorsHueDynamic.value = false
@@ -99,6 +101,8 @@ export const useSettings = defineStore('settings', () => {
     selectedAudioDevice,
     selectedAudioDeviceId,
 
+    allowVisibleOnAllWorkspaces,
+
     setThemeColorsHue,
     applyPrimaryColorFrom,
     isColorSelectedForPrimary,