feat(stage-tamagotchi): debugger for inlay window, supported to setVibrancy & setBackgroundMaterial

Author: nekomeowww

apps/stage-tamagotchi/src/main/services/electron/window.ts

@@ -40,4 +40,16 @@ export function createWindowService(params: { context: ReturnType<typeof createC
       params.window.setIgnoreMouseEvents(...opts)
     }
   })
+
+  defineInvokeHandler(params.context, electron.window.setVibrancy, (vibrancy, options) => {
+    if (params.window.webContents.id === options?.raw.ipcMainEvent.sender.id) {
+      params.window.setVibrancy(vibrancy[0])
+    }
+  })
+
+  defineInvokeHandler(params.context, electron.window.setBackgroundMaterial, (backgroundMaterial, options) => {
+    if (params.window.webContents.id === options?.raw.ipcMainEvent.sender.id) {
+      params.window.setBackgroundMaterial(backgroundMaterial[0])
+    }
+  })
 }

apps/stage-tamagotchi/src/main/windows/inlay/index.ts

@@ -8,6 +8,7 @@ import icon from '../../../../resources/icon.png?asset'
 import { baseUrl, getElectronMainDirname, load, withHashRoute } from '../../libs/electron/location'
 import { currentDisplayBounds, mapForBreakpoints, resolutionBreakpoints, widthFrom } from '../shared/display'
 import { spotlightLikeWindowConfig } from '../shared/window'
+import { setupInlayWindowInvokes } from './rpc/index.electron'
 
 export async function setupInlayWindow() {
   const window = new BrowserWindow({
@@ -62,5 +63,7 @@ export async function setupInlayWindow() {
 
   await load(window, withHashRoute(baseUrl(resolve(getElectronMainDirname(), '..', 'renderer')), '/inlay'))
 
+  setupInlayWindowInvokes({ inlayWindow: window })
+
   return window
 }

apps/stage-tamagotchi/src/main/windows/inlay/rpc/index.electron.ts

@@ -0,0 +1,19 @@
+import type { BrowserWindow } from 'electron'
+
+import { createContext } from '@moeru/eventa/adapters/electron/main'
+import { ipcMain } from 'electron'
+
+import { createWindowService } from '../../../services/electron'
+
+export async function setupInlayWindowInvokes(params: {
+  inlayWindow: BrowserWindow
+}) {
+  // TODO: once we refactored eventa to support window-namespaced contexts,
+  // we can remove the setMaxListeners call below since eventa will be able to dispatch and
+  // manage events within eventa's context system.
+  ipcMain.setMaxListeners(0)
+
+  const { context } = createContext(ipcMain, params.inlayWindow)
+
+  createWindowService({ context, window: params.inlayWindow })
+}

apps/stage-tamagotchi/src/main/windows/shared/window.ts

@@ -29,7 +29,7 @@ export function transparentWindowConfig(): BrowserWindowConstructorOptions {
 
 export function blurryWindowConfig(): BrowserWindowConstructorOptions {
   return {
-    vibrancy: 'under-window',
+    vibrancy: 'hud',
     backgroundMaterial: 'acrylic',
   }
 }

apps/stage-tamagotchi/src/renderer/pages/inlay/index.vue

@@ -1,6 +1,85 @@
+<script setup lang="ts">
+import type { BackgroundMaterialType, VibrancyType } from '../../../shared/electron/window'
+
+import { FieldSelect } from '@proj-airi/ui'
+import { ref, watch } from 'vue'
+
+import { electron } from '../../../shared/electron'
+import { useElectronEventaInvoke } from '../../composables/electron-vueuse'
+
+const setVibrancy = useElectronEventaInvoke(electron.window.setVibrancy)
+const setBackgroundMaterial = useElectronEventaInvoke(electron.window.setBackgroundMaterial)
+
+const vibrancy = ref<NonNullable<VibrancyType>>()
+const backgroundMaterial = ref<NonNullable<BackgroundMaterialType>>()
+
+watch(
+  vibrancy,
+  (newVibrancy) => {
+    setVibrancy([newVibrancy ?? null])
+  },
+)
+
+watch(
+  backgroundMaterial,
+  (newBackgroundMaterial) => {
+    if (!newBackgroundMaterial)
+      return
+
+    setBackgroundMaterial([newBackgroundMaterial])
+  },
+)
+</script>
+
 <template>
-  <div class="drag-region">
-    <h1>Spotlight</h1>
-    <p>This is the Spotlight page.</p>
+  <div class="p-4">
+    <div class="drag-region" />
+
+    <div class="py-4">
+      <h1>Spotlight</h1>
+      <p>This is the Spotlight page.</p>
+    </div>
+
+    <div class="space-y-2">
+      <FieldSelect
+        v-model="vibrancy"
+        label="Vibrancy"
+        description="Set the vibrancy effect of the window."
+        :options="[
+          { label: 'titlebar', value: 'titlebar' },
+          { label: 'selection', value: 'selection' },
+          { label: 'menu', value: 'menu' },
+          { label: 'popover', value: 'popover' },
+          { label: 'sidebar', value: 'sidebar' },
+          { label: 'header', value: 'header' },
+          { label: 'sheet', value: 'sheet' },
+          { label: 'window', value: 'window' },
+          { label: 'hud', value: 'hud' },
+          { label: 'fullscreen-ui', value: 'fullscreen-ui' },
+          { label: 'tooltip', value: 'tooltip' },
+          { label: 'content', value: 'content' },
+          { label: 'under-window', value: 'under-window' },
+          { label: 'under-page', value: 'under-page' },
+        ]"
+      />
+
+      <FieldSelect
+        v-model="backgroundMaterial"
+        label="Background Material"
+        description="Set the background material of the window."
+        :options="[
+          { label: 'auto', value: 'auto' },
+          { label: 'none', value: 'none' },
+          { label: 'mica', value: 'mica' },
+          { label: 'acrylic', value: 'acrylic' },
+          { label: 'tabbed', value: 'tabbed' },
+        ]"
+      />
+    </div>
   </div>
 </template>
+
+<route lang="yaml">
+meta:
+  layout: plain
+</route>

apps/stage-tamagotchi/src/shared/electron/window.ts

@@ -7,8 +7,15 @@ export const startLoopGetBounds = defineInvokeEventa('eventa:event:electron:wind
 
 const getBounds = defineInvokeEventa<ReturnType<BrowserWindow['getBounds']>>('eventa:invoke:electron:window:get-bounds')
 const setIgnoreMouseEvents = defineInvokeEventa<void, [boolean, { forward: boolean }]>('eventa:invoke:electron:window:set-ignore-mouse-events')
+const setVibrancy = defineInvokeEventa<void, Parameters<BrowserWindow['setVibrancy']>>('eventa:invoke:electron:window:set-vibrancy')
+const setBackgroundMaterial = defineInvokeEventa<void, Parameters<BrowserWindow['setBackgroundMaterial']>>('eventa:invoke:electron:window:set-background-material')
+
+export type VibrancyType = Parameters<BrowserWindow['setVibrancy']>[0]
+export type BackgroundMaterialType = Parameters<BrowserWindow['setBackgroundMaterial']>[0]
 
 export const window = {
   getBounds,
   setIgnoreMouseEvents,
+  setVibrancy,
+  setBackgroundMaterial,
 }