feat(stage-tamagotchi): use vibrancy hud for window widget, improved background

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

@@ -14,7 +14,7 @@ import { widgetsClearEvent, widgetsRemoveEvent, widgetsRenderEvent, widgetsUpdat
 import { baseUrl, getElectronMainDirname, load, withHashRoute } from '../../libs/electron/location'
 import { createReusableWindow } from '../../libs/electron/window-manager'
 import { createConfig } from '../shared/persistence'
-import { transparentWindowConfig } from '../shared/window'
+import { spotlightLikeWindowConfig, transparentWindowConfig } from '../shared/window'
 import { setupWidgetsWindowInvokes } from './rpc/index.electron'
 
 export interface WidgetsWindowManager {
@@ -55,6 +55,7 @@ function createWidgetsWindow() {
     // Top-level overlay style like other overlay windows
     type: 'panel',
     ...transparentWindowConfig(),
+    ...spotlightLikeWindowConfig(),
   })
 
   // Keep on top like caption/main overlays

apps/stage-tamagotchi/src/renderer/pages/devtools/widgets-calling.vue

@@ -34,6 +34,32 @@ const defaultWeatherProps = {
   wind: '3 m/s',
   precipitation: '40%',
 }
+
+const defaultMapProps = {
+  title: 'To Haneda Airport',
+  eta: '38 min',
+  distance: '27 km',
+  mode: 'Transit',
+  status: 'Light traffic',
+  originLabel: 'You',
+  destinationLabel: 'HND',
+  accent: '#22c55e',
+  origin: { x: 18, y: 70 },
+  destination: { x: 82, y: 26 },
+  route: [
+    { x: 18, y: 70 },
+    { x: 28, y: 62 },
+    { x: 42, y: 58 },
+    { x: 54, y: 50 },
+    { x: 64, y: 42 },
+    { x: 74, y: 34 },
+    { x: 82, y: 26 },
+  ],
+  stops: [
+    { x: 28, y: 62, label: 'Mita' },
+    { x: 54, y: 50, label: 'Shinagawa' },
+    { x: 74, y: 34, label: 'Tenkubashi' },
+  ],
 }
 
 const form = reactive<FormState>({
@@ -207,6 +233,16 @@ function applyWeatherPreset() {
   form.ttlSeconds = ''
   resetFeedback()
 }
+
+function applyMapPreset() {
+  form.componentName = 'map'
+  form.sizePreset = 'custom'
+  form.customCols = '3'
+  form.customRows = '2'
+  form.componentProps = JSON.stringify(defaultMapProps, null, 2)
+  form.ttlSeconds = ''
+  resetFeedback()
+}
 </script>
 
 <template>
@@ -220,13 +256,22 @@ function applyWeatherPreset() {
           Provide an existing id to mutate a widget or leave blank to spawn a new one.
         </p>
       </div>
-      <Button
-        variant="secondary"
-        :disabled="busy"
-        @click="applyWeatherPreset"
-      >
-        Weather Preset
-      </Button>
+      <div class="flex flex-wrap gap-2">
+        <Button
+          variant="secondary"
+          :disabled="busy"
+          @click="applyWeatherPreset"
+        >
+          Weather Preset
+        </Button>
+        <Button
+          variant="secondary"
+          :disabled="busy"
+          @click="applyMapPreset"
+        >
+          Map Preset
+        </Button>
+      </div>
     </div>
 
     <div class="grid gap-4 md:grid-cols-2">

apps/stage-tamagotchi/src/renderer/widgets/weather/components/Weather.vue

@@ -137,12 +137,11 @@ const resolvedIconClass = computed(() => weatherIconMap[resolvedIconKey.value].i
         'justify-between',
         'gap-3',
         'overflow-x-hidden overflow-y-scroll',
-        'rounded-2xl',
         'p-3',
         'bg-gradient-to-br',
-        'from-neutral-950',
-        'via-neutral-900',
-        'to-neutral-800',
+        'from-neutral-950/65',
+        'via-neutral-900/65',
+        'to-neutral-800/65',
         'text-white',
       ]"
     >