ENH - migrate Home Screen widgets to Sky UI

frontend/src/components/SpringboardWidget.contract.test.ts

@@ -0,0 +1,49 @@
+import { readFileSync } from 'node:fs'
+
+import { describe, expect, it } from 'vitest'
+
+const source = readFileSync(
+  new URL('./SpringboardWidget.vue', import.meta.url),
+  'utf8',
+)
+
+describe('SpringboardWidget UI contract', () => {
+  it('uses the Sky widget frame without a Konsta surface', () => {
+    expect(source).toContain('<SkyWidgetFrame')
+    expect(source).not.toContain("from 'konsta/vue'")
+    expect(source).not.toContain('<k-glass')
+    expect(source).not.toContain('<k-badge')
+  })
+
+  it('keeps the full widget surface clickable without affecting layout', () => {
+    expect(source).toContain('class="home-widget-open"')
+    expect(source).toContain('@click.stop="openWidget"')
+    expect(source).toContain('position: absolute;')
+    expect(source).toContain('background: transparent;')
+  })
+
+  it('shows the reactive clock time in the calendar header', () => {
+    expect(source).toContain('class="widget-date-time"')
+    expect(source).toContain('{{ clock.time.value }}')
+    expect(source).toContain('font-variant-numeric: tabular-nums;')
+  })
+
+  it('reuses weather artwork and music metadata from the owning apps', () => {
+    expect(source).toContain('<WeatherConditionIcon')
+    expect(source).toContain('music.current.value?.artwork')
+    expect(source).toContain('music.progress.value')
+  })
+
+  it.each([
+    'sunny',
+    'clear',
+    'partly_cloudy',
+    'cloudy',
+    'rain',
+    'thunder',
+    'fog',
+    'snow',
+  ])('provides an adaptive %s weather surface', (condition) => {
+    expect(source).toContain(`data-weather-condition='${condition}'`)
+  })
+})

frontend/src/services/widgetServices.ts

@@ -64,6 +64,7 @@ export function useWeatherService() {
         : phone.t('Common.loading'),
     ),
     forecast: computed(() => weather.forecast),
+    loading: computed(() => weather.isLoading),
     location: computed(() =>
       phone.t(
         `Apps.weather.regions.${weather.forecast?.region ?? 'los_santos'}`,
@@ -75,17 +76,16 @@ export function useWeatherService() {
 export function useMusicService() {
   const music = useMusicStore()
   return {
-    current: computed(
-      () =>
-        music.currentTrack ?? {
-          artist: 'Music',
-          title: 'Not Playing',
-        },
-    ),
+    current: computed(() => music.currentTrack),
     next(): void {
       void music.next()
     },
     playing: computed(() => music.isPlaying),
+    progress: computed(() =>
+      music.duration > 0
+        ? Math.max(0, Math.min(100, (music.currentTime / music.duration) * 100))
+        : 0,
+    ),
     toggle(): void {
       void music.toggle()
     },

frontend/src/stores/phone.ts

@@ -3964,10 +3964,12 @@ const defaultLocales: LocaleTree = {
       weather: {
         name: 'Weather',
         description: 'Current conditions, location, and high and low.',
+        range: 'H: {high}° L: {low}°',
       },
       music: {
         name: 'Now Playing',
         description: 'Music controls and the current track.',
+        empty: 'No recently played music',
       },
       wallet: {
         name: 'Wallet',

sky_phone/config/locales/en.lua

@@ -125,8 +125,8 @@ Locales["en"] = {
                 categories = { essentials = "Essentials", information = "Information", media = "Media", finance = "Finance", people = "People" },
                 clock = { name = "Clock", description = "The current time, with an optional date.", showDate = "Show Date" },
                 date = { name = "Date", description = "Weekday, month, and date at a glance." },
-                weather = { name = "Weather", description = "Current conditions, location, and high and low." },
-                music = { name = "Now Playing", description = "Music controls and the current track." },
+                weather = { name = "Weather", description = "Current conditions, location, and high and low.", range = "H: {high}° L: {low}°" },
+                music = { name = "Now Playing", description = "Music controls and the current track.", empty = "No recently played music" },
                 wallet = { name = "Wallet", description = "Your current bank or cash balance.", balance = "Displayed Balance", bank = "Bank", cash = "Cash" },
                 transactions = { name = "Transactions", description = "Your latest incoming and outgoing payments." },
                 contacts = { name = "Favorites", description = "Call or message your favorite contacts.", choose = "Favorite Contacts" },