From e13fa6ca5109e2e24a2c9e7a97232c6ca17382f6 Mon Sep 17 00:00:00 2001
From: DerEchteAlec <bycraky@gmail.com>
Date: Thu, 13 Aug 2026 22:33:02 +0200
Subject: [PATCH] ENH - migrate Home Screen widgets to Sky UI

---
 .../SpringboardWidget.contract.test.ts        |  49 +
 frontend/src/components/SpringboardWidget.vue | 926 +++++++++++++-----
 frontend/src/services/widgetServices.ts       |  14 +-
 frontend/src/stores/phone.ts                  |   2 +
 sky_phone/config/locales/en.lua               |   4 +-
 5 files changed, 738 insertions(+), 257 deletions(-)
 create mode 100644 frontend/src/components/SpringboardWidget.contract.test.ts

diff --git a/frontend/src/components/SpringboardWidget.contract.test.ts b/frontend/src/components/SpringboardWidget.contract.test.ts
new file mode 100644
index 0000000..46d8cb0
--- /dev/null
+++ b/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}'`)
+  })
+})
diff --git a/frontend/src/components/SpringboardWidget.vue b/frontend/src/components/SpringboardWidget.vue
index a69d3d1..ddf5379 100644
--- a/frontend/src/components/SpringboardWidget.vue
+++ b/frontend/src/components/SpringboardWidget.vue
@@ -1,25 +1,19 @@
 <script setup lang="ts">
 import {
   Banknote,
-  Cloud,
-  CloudFog,
-  CloudLightning,
-  CloudRain,
-  CloudSun,
   MessageCircle,
-  MoonStar,
+  Music2,
   Pause,
   Phone,
   Play,
   SkipForward,
-  Snowflake,
-  Sun,
   WalletCards,
 } from 'lucide-vue-next'
-import { kBadge, kGlass } from 'konsta/vue'
-import { computed, onBeforeUnmount, ref, type Component } from 'vue'
+import { computed, onBeforeUnmount, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
+import WeatherConditionIcon from '@/components/WeatherConditionIcon.vue'
+import { WIDGET_REGISTRY_BY_KIND } from '@/config/widgets'
 import {
   useBankService,
   useClockService,
@@ -31,11 +25,15 @@ import { useCallsStore } from '@/stores/calls'
 import { useMessagesStore } from '@/stores/messages'
 import { usePhoneStore } from '@/stores/phone'
 import type { WidgetInstance } from '@/types/widgets'
+import { SkyWidgetFrame } from '@/ui'
 import {
   reorderDirectionFromKeyboard,
   type ReorderDirection,
 } from '@/utils/keyboard'
-import type { WeatherConditionId } from '@/types/weather'
+import {
+  springboardPageDragCompensation,
+  springboardSwipeIntent,
+} from '@/utils/springboardDrag'
 import { WIDGET_SPANS } from '@/utils/widgetLayout'
 
 const props = withDefaults(
@@ -76,16 +74,6 @@ let dragPageWidth = 0
 let pointerTarget: HTMLElement | null = null
 let pointerId: number | null = null
 
-const weatherIcons: Record<WeatherConditionId, Component> = {
-  sunny: Sun,
-  clear: MoonStar,
-  partly_cloudy: CloudSun,
-  cloudy: Cloud,
-  rain: CloudRain,
-  thunder: CloudLightning,
-  fog: CloudFog,
-  snow: Snowflake,
-}
 const span = computed(() => WIDGET_SPANS[props.instance.size])
 const placementStyle = computed(() =>
   props.preview
@@ -93,14 +81,18 @@ const placementStyle = computed(() =>
     : {
         gridColumn: `${props.instance.column + 1} / span ${span.value.columns}`,
         gridRow: `${props.instance.row + 1} / span ${span.value.rows}`,
-        translate: isDragging.value
-          ? `${dragOffset.value.x}px ${dragOffset.value.y}px`
-          : undefined,
         transform: isDragging.value
-          ? `translateX(${(phone.currentPage - dragStartPage) * dragPageWidth}px) scale(1.035)`
+          ? `translate3d(${springboardPageDragCompensation(dragStartPage, phone.currentPage, dragPageWidth)}px, 0, 0)`
           : undefined,
       },
 )
+const dragPointerStyle = computed(() =>
+  isDragging.value
+    ? {
+        transform: `translate3d(${dragOffset.value.x}px, ${dragOffset.value.y}px, 0) scale(1.035)`,
+      }
+    : undefined,
+)
 const forecastHigh = computed(() =>
   weather.forecast.value?.hourly.length
     ? Math.max(
@@ -115,12 +107,26 @@ const forecastLow = computed(() =>
       )
     : null,
 )
-const weatherIcon = computed(
-  () => weatherIcons[weather.forecast.value?.condition ?? 'partly_cloudy'],
+const weatherConditionId = computed(
+  () => weather.forecast.value?.condition ?? 'partly_cloudy',
 )
+const weatherDayPhase = computed(() => {
+  const timestamp = weather.forecast.value?.timestamp
+  if (timestamp === undefined) return 'day'
+  const hour = new Date(timestamp).getUTCHours()
+  return hour >= 7 && hour < 20 ? 'day' : 'night'
+})
 const visibleHourlyWeather = computed(
-  () => weather.forecast.value?.hourly.slice(0, 5) ?? [],
+  () =>
+    weather.forecast.value?.hourly.slice(
+      0,
+      props.instance.size === 'large' ? 5 : 3,
+    ) ?? [],
 )
+const widgetLabel = computed(() => {
+  const definition = WIDGET_REGISTRY_BY_KIND.get(props.instance.kind)
+  return phone.t(definition?.homeLabelKey ?? definition?.labelKey ?? '')
+})
 const balance = computed(() =>
   props.instance.settings.balanceSource === 'cash'
     ? bank.overview.value.cash
@@ -143,11 +149,6 @@ const visibleTransactions = computed(() =>
     props.instance.size === 'large' ? 5 : 2,
   ),
 )
-const removeBadgeColors = {
-  bg: 'bg-[#d1d1d6]',
-  text: 'text-black',
-}
-
 function formatMoney(value: number): string {
   return `${bank.overview.value.currency}${new Intl.NumberFormat(phone.lang, {
     maximumFractionDigits: 0,
@@ -180,6 +181,7 @@ function onPointerDown(event: PointerEvent): void {
   ) {
     return
   }
+  suppressClick.value = false
   pointerTarget = event.currentTarget as HTMLElement
   pointerId = event.pointerId
   pointerTarget.setPointerCapture(pointerId)
@@ -206,9 +208,12 @@ function onPointerMove(event: PointerEvent): void {
     return
   }
   if (
-    Math.hypot(event.clientX - pointerStart.x, event.clientY - pointerStart.y) >
-    8
+    springboardSwipeIntent(
+      event.clientX - pointerStart.x,
+      event.clientY - pointerStart.y,
+    ) !== 'pending'
   ) {
+    suppressClick.value = true
     clearHold()
   }
 }
@@ -317,183 +322,275 @@ onBeforeUnmount(() => {
     :style="placementStyle"
     :data-widget-id="instance.id"
   >
-    <k-glass
-      component="article"
-      class="home-widget"
-      :class="`home-widget--${instance.kind}`"
-      role="button"
-      tabindex="0"
-      :aria-keyshortcuts="
-        editMode ? 'ArrowLeft ArrowRight ArrowUp ArrowDown' : undefined
-      "
-      @click="openWidget"
-      @contextmenu.prevent
-      @keydown="onKeydown"
-      @keydown.enter="openWidget"
-      @lostpointercapture="cancelDrag"
-      @pointercancel="cancelDrag"
-      @pointerdown="onPointerDown"
-      @pointerleave="isDragging || clearHold()"
-      @pointermove="onPointerMove"
-      @pointerup="onPointerUp"
+    <SkyWidgetFrame
+      class="home-widget-drag-surface"
+      :label="widgetLabel"
+      :show-label="!preview"
+      :size="instance.size"
+      :style="dragPointerStyle"
     >
-      <template v-if="instance.kind === 'clock'">
-        <span class="widget-eyebrow">{{ clock.weekday.value }}</span>
-        <strong class="widget-clock">{{ clock.time.value }}</strong>
-        <small v-if="instance.settings.showDate !== false">{{
-          clock.date.value
-        }}</small>
-      </template>
-
-      <template v-else-if="instance.kind === 'date'">
-        <span class="widget-date-month">{{ clock.month.value }}</span>
-        <strong class="widget-date-day">{{ clock.day.value }}</strong>
-        <small>{{ clock.weekday.value }}</small>
-      </template>
-
-      <template v-else-if="instance.kind === 'weather'">
-        <div class="widget-weather-top">
-          <div>
-            <span class="widget-eyebrow">{{ weather.location.value }}</span>
-            <strong>{{ weather.forecast.value?.temperature ?? '--' }}°</strong>
-          </div>
-          <component
-            :is="weatherIcon"
-            :size="instance.size === 'small' ? 30 : 40"
-          />
-        </div>
-        <small>{{ weather.condition.value }}</small>
-        <small v-if="instance.size !== 'small'" class="widget-weather-range">
-          H: {{ forecastHigh ?? '--' }}° &nbsp; L: {{ forecastLow ?? '--' }}°
-        </small>
-        <div v-if="instance.size !== 'small'" class="widget-weather-hourly">
-          <div v-for="hour in visibleHourlyWeather" :key="hour.timestamp">
-            <time>{{ formatForecastHour(hour.timestamp) }}</time>
-            <component :is="weatherIcons[hour.condition]" :size="21" />
-            <strong>{{ hour.temperature }}°</strong>
-          </div>
-        </div>
-      </template>
-
-      <template v-else-if="instance.kind === 'music'">
-        <div class="widget-album" aria-hidden="true">
-          <span>SKY</span>
-        </div>
-        <div class="widget-music-copy">
-          <strong>{{ music.current.value.title }}</strong>
-          <small>{{ music.current.value.artist }}</small>
-        </div>
-        <div class="widget-music-controls" data-widget-control>
-          <button
-            type="button"
-            :aria-label="
-              phone.t(
-                music.playing.value
-                  ? 'Home.widgets.media.pause'
-                  : 'Home.widgets.media.play',
-              )
-            "
-            @click.stop="music.toggle"
-          >
-            <Pause v-if="music.playing.value" :size="20" fill="currentColor" />
-            <Play v-else :size="20" fill="currentColor" />
-          </button>
-          <button
-            type="button"
-            :aria-label="phone.t('ControlCenter.next')"
-            @click.stop="music.next"
-          >
-            <SkipForward :size="19" fill="currentColor" />
-          </button>
-        </div>
-      </template>
-
-      <template v-else-if="instance.kind === 'wallet'">
-        <div class="widget-wallet-icon"><WalletCards :size="22" /></div>
-        <span class="widget-eyebrow">{{
-          phone.t(
-            instance.settings.balanceSource === 'cash'
-              ? 'Home.widgetSystem.wallet.cash'
-              : 'Home.widgetSystem.wallet.bank',
-          )
-        }}</span>
-        <strong class="widget-balance">{{ formatMoney(balance) }}</strong>
-        <small>{{ bank.overview.value.playerName }}</small>
-      </template>
-
-      <template v-else-if="instance.kind === 'transactions'">
-        <header class="widget-list-header">
-          <span>{{ phone.t('Home.widgetSystem.transactions.name') }}</span>
-          <Banknote :size="19" />
-        </header>
+      <article
+        class="home-widget"
+        :class="[
+          `home-widget--${instance.kind}`,
+          {
+            'home-widget--music-empty':
+              instance.kind === 'music' && !music.current.value,
+          },
+        ]"
+        :data-weather-condition="
+          instance.kind === 'weather' ? weatherConditionId : undefined
+        "
+        :data-weather-period="
+          instance.kind === 'weather' ? weatherDayPhase : undefined
+        "
+        @click="openWidget"
+        @contextmenu.prevent
+        @lostpointercapture="cancelDrag"
+        @pointercancel="cancelDrag"
+        @pointerdown="onPointerDown"
+        @pointerleave="isDragging || clearHold()"
+        @pointermove="onPointerMove"
+        @pointerup="onPointerUp"
+      >
         <button
-          v-for="transaction in visibleTransactions"
-          :key="transaction.id"
+          v-if="interactive"
+          class="home-widget-open"
           type="button"
-          class="widget-transaction"
-          data-widget-control
+          :aria-label="widgetLabel"
+          :aria-keyshortcuts="
+            editMode ? 'ArrowLeft ArrowRight ArrowUp ArrowDown' : undefined
+          "
           @click.stop="openWidget"
-        >
-          <span>
-            <strong>{{ transaction.label }}</strong>
-            <small>{{ transaction.reference }}</small>
-          </span>
-          <b
-            :class="{
-              positive:
-                transaction.kind === 'deposit' ||
-                transaction.kind === 'transfer_in',
-            }"
-            >{{
-              transaction.kind === 'deposit' ||
-              transaction.kind === 'transfer_in'
-                ? '+'
-                : '−'
-            }}{{ formatMoney(transaction.amount) }}</b
-          >
-        </button>
-      </template>
+          @keydown="onKeydown"
+        />
+        <template v-if="instance.kind === 'clock'">
+          <span class="widget-eyebrow">{{ clock.weekday.value }}</span>
+          <strong class="widget-clock">{{ clock.time.value }}</strong>
+          <small v-if="instance.settings.showDate !== false">{{
+            clock.date.value
+          }}</small>
+        </template>
 
-      <template v-else-if="instance.kind === 'contacts'">
-        <header class="widget-list-header">
-          <span>{{ phone.t('Home.widgetSystem.contacts.name') }}</span>
-        </header>
-        <div class="widget-contacts">
-          <article v-for="contact in favoriteContacts" :key="contact.id">
-            <span class="widget-contact-avatar">{{
-              avatar(contact.name)
+        <template v-else-if="instance.kind === 'date'">
+          <div class="widget-date-header">
+            <span class="widget-date-weekday">{{ clock.weekday.value }}</span>
+            <time class="widget-date-time">{{ clock.time.value }}</time>
+          </div>
+          <strong class="widget-date-day">{{ clock.day.value }}</strong>
+          <small>{{ clock.month.value }}</small>
+        </template>
+
+        <template v-else-if="instance.kind === 'weather'">
+          <div v-if="weather.forecast.value" class="widget-weather-summary">
+            <span class="widget-weather-location">{{
+              weather.location.value
             }}</span>
-            <strong>{{ contact.name }}</strong>
-            <div data-widget-control>
+            <strong class="widget-weather-temperature"
+              >{{ weather.forecast.value?.temperature ?? '--' }}°</strong
+            >
+            <div class="widget-weather-current">
+              <WeatherConditionIcon
+                :condition="weather.forecast.value.condition"
+                :timestamp="weather.forecast.value.timestamp"
+                :size="23"
+              />
+              <div>
+                <small>{{ weather.condition.value }}</small>
+                <small class="widget-weather-range">
+                  {{
+                    phone.t('Home.widgetSystem.weather.range', {
+                      high: String(forecastHigh ?? '--'),
+                      low: String(forecastLow ?? '--'),
+                    })
+                  }}
+                </small>
+              </div>
+            </div>
+          </div>
+          <div v-else class="widget-weather-unavailable">
+            {{
+              phone.t(
+                weather.loading.value
+                  ? 'Common.loading'
+                  : 'Apps.weather.unavailable',
+              )
+            }}
+          </div>
+          <div
+            v-if="weather.forecast.value && instance.size !== 'small'"
+            class="widget-weather-hourly"
+          >
+            <div v-for="hour in visibleHourlyWeather" :key="hour.timestamp">
+              <time>{{ formatForecastHour(hour.timestamp) }}</time>
+              <WeatherConditionIcon
+                :condition="hour.condition"
+                :timestamp="hour.timestamp"
+                :size="21"
+              />
+              <strong>{{ hour.temperature }}°</strong>
+            </div>
+          </div>
+        </template>
+
+        <template v-else-if="instance.kind === 'music'">
+          <div class="widget-album" aria-hidden="true">
+            <img
+              v-if="music.current.value?.artwork"
+              :src="music.current.value.artwork"
+              alt=""
+              draggable="false"
+            />
+            <Music2 v-else :size="36" />
+          </div>
+          <div class="widget-music-body">
+            <Music2 class="widget-music-mark" :size="22" aria-hidden="true" />
+            <div v-if="music.current.value" class="widget-music-copy">
+              <strong>{{ music.current.value.title }}</strong>
+              <small>{{ music.current.value.artist }}</small>
+              <span class="widget-music-progress" aria-hidden="true">
+                <i :style="{ width: `${music.progress.value}%` }" />
+              </span>
+            </div>
+            <div v-else class="widget-music-placeholder" aria-hidden="true">
+              <span />
+              <span />
+            </div>
+            <div
+              v-if="music.current.value"
+              class="widget-music-controls"
+              data-widget-control
+            >
               <button
                 type="button"
-                :aria-label="phone.t('Apps.messages.call')"
-                @click.stop="callContact(contact.phone_number)"
+                :aria-label="
+                  phone.t(
+                    music.playing.value
+                      ? 'Home.widgets.media.pause'
+                      : 'Home.widgets.media.play',
+                  )
+                "
+                @click.stop="music.toggle"
               >
-                <Phone :size="15" fill="currentColor" />
+                <Pause
+                  v-if="music.playing.value"
+                  :size="20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                />
+                <Play
+                  v-else
+                  :size="20"
+                  fill="currentColor"
+                  aria-hidden="true"
+                />
               </button>
               <button
                 type="button"
-                :aria-label="phone.t('Apps.messages.messageAction')"
-                @click.stop="messageContact(contact.phone_number)"
+                :aria-label="phone.t('ControlCenter.next')"
+                @click.stop="music.next"
               >
-                <MessageCircle :size="15" fill="currentColor" />
+                <SkipForward
+                  :size="19"
+                  fill="currentColor"
+                  aria-hidden="true"
+                />
               </button>
             </div>
-          </article>
-        </div>
-      </template>
-    </k-glass>
+          </div>
+          <p v-if="!music.current.value" class="widget-music-empty">
+            {{ phone.t('Home.widgetSystem.music.empty') }}
+          </p>
+        </template>
+
+        <template v-else-if="instance.kind === 'wallet'">
+          <div class="widget-wallet-icon"><WalletCards :size="22" /></div>
+          <span class="widget-eyebrow">{{
+            phone.t(
+              instance.settings.balanceSource === 'cash'
+                ? 'Home.widgetSystem.wallet.cash'
+                : 'Home.widgetSystem.wallet.bank',
+            )
+          }}</span>
+          <strong class="widget-balance">{{ formatMoney(balance) }}</strong>
+          <small>{{ bank.overview.value.playerName }}</small>
+        </template>
+
+        <template v-else-if="instance.kind === 'transactions'">
+          <header class="widget-list-header">
+            <span>{{ phone.t('Home.widgetSystem.transactions.name') }}</span>
+            <Banknote :size="19" />
+          </header>
+          <button
+            v-for="transaction in visibleTransactions"
+            :key="transaction.id"
+            type="button"
+            class="widget-transaction"
+            data-widget-control
+            @click.stop="openWidget"
+          >
+            <span>
+              <strong>{{ transaction.label }}</strong>
+              <small>{{ transaction.reference }}</small>
+            </span>
+            <b
+              :class="{
+                positive:
+                  transaction.kind === 'deposit' ||
+                  transaction.kind === 'transfer_in',
+              }"
+              >{{
+                transaction.kind === 'deposit' ||
+                transaction.kind === 'transfer_in'
+                  ? '+'
+                  : '−'
+              }}{{ formatMoney(transaction.amount) }}</b
+            >
+          </button>
+        </template>
+
+        <template v-else-if="instance.kind === 'contacts'">
+          <header class="widget-list-header">
+            <span>{{ phone.t('Home.widgetSystem.contacts.name') }}</span>
+          </header>
+          <div class="widget-contacts">
+            <article v-for="contact in favoriteContacts" :key="contact.id">
+              <span class="widget-contact-avatar">{{
+                avatar(contact.name)
+              }}</span>
+              <strong>{{ contact.name }}</strong>
+              <div data-widget-control>
+                <button
+                  type="button"
+                  :aria-label="phone.t('Apps.messages.call')"
+                  @click.stop="callContact(contact.phone_number)"
+                >
+                  <Phone :size="15" fill="currentColor" />
+                </button>
+                <button
+                  type="button"
+                  :aria-label="phone.t('Apps.messages.messageAction')"
+                  @click.stop="messageContact(contact.phone_number)"
+                >
+                  <MessageCircle :size="15" fill="currentColor" />
+                </button>
+              </div>
+            </article>
+          </div>
+        </template>
+      </article>
+    </SkyWidgetFrame>
 
     <button
       v-if="editMode && !preview"
       class="home-widget-remove"
       type="button"
       :aria-label="phone.t('Home.widgetSystem.remove')"
+      :style="dragPointerStyle"
       @click.stop="emit('remove')"
       @pointerdown.stop
     >
-      <k-badge :colors="removeBadgeColors">−</k-badge>
+      <span aria-hidden="true">−</span>
     </button>
   </div>
 </template>
@@ -537,12 +634,14 @@ onBeforeUnmount(() => {
 }
 
 .home-widget {
+  position: relative;
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   padding: 15px;
   overflow: hidden;
   border: 0.75px solid rgb(255 255 255 / 17%);
-  border-radius: 25px;
+  border-radius: var(--sky-widget-radius-medium);
   outline: none;
   color: #fff;
   background: rgb(25 25 27 / 91%);
@@ -562,18 +661,46 @@ onBeforeUnmount(() => {
 
 .home-widget-shell--small .home-widget {
   padding: 13px;
-  border-radius: 23px;
+  border-radius: var(--sky-widget-radius-small);
 }
 
 .home-widget-shell--large .home-widget {
   padding: 18px;
-  border-radius: 28px;
+  border-radius: var(--sky-widget-radius-large);
 }
 
 .home-widget:active {
   filter: brightness(1.08);
 }
 
+.home-widget-open {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: inherit;
+  outline: none;
+  color: transparent;
+  background: transparent;
+  box-shadow: none;
+  appearance: none;
+  cursor: pointer;
+}
+
+.home-widget-open:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--sky-app-accent, #0a84ff);
+}
+
+.home-widget [data-widget-control] {
+  position: relative;
+  z-index: 2;
+}
+
 .home-widget small,
 .widget-eyebrow {
   color: rgb(255 255 255 / 62%);
@@ -609,19 +736,44 @@ onBeforeUnmount(() => {
 }
 
 .home-widget--date {
+  justify-content: flex-start;
   background: rgb(24 24 26 / 94%);
   color: #fff;
 }
 
 .home-widget--date small {
+  margin-top: auto;
   color: rgb(255 255 255 / 58%);
 }
 
-.widget-date-month {
+.widget-date-header {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.widget-date-weekday,
+.widget-date-time {
   color: #ff3b30;
   font-size: 12px;
   font-weight: 700;
+  line-height: 1;
+}
+
+.widget-date-weekday {
+  overflow: hidden;
+  text-overflow: ellipsis;
   text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.widget-date-time {
+  flex: none;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.1px;
 }
 
 .widget-date-day {
@@ -632,49 +784,202 @@ onBeforeUnmount(() => {
 }
 
 .home-widget--weather {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  background: rgb(34 42 78 / 95%);
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  color: #fff;
+  background:
+    radial-gradient(
+      circle at 72% 13%,
+      rgb(255 232 132 / 40%) 0 7%,
+      transparent 27%
+    ),
+    linear-gradient(170deg, #2878bb 0%, #274f8d 48%, #14233f 100%);
+  transition: background 0.35s ease;
 }
 
-.widget-weather-top {
+.home-widget--weather[data-weather-condition='sunny'] {
+  background:
+    radial-gradient(
+      circle at 75% 15%,
+      rgb(255 232 132 / 48%) 0 7%,
+      transparent 29%
+    ),
+    linear-gradient(170deg, #2878bb 0%, #274f8d 48%, #14233f 100%);
+}
+
+.home-widget--weather[data-weather-condition='clear'] {
+  background:
+    radial-gradient(
+      circle at 77% 19%,
+      rgb(191 207 255 / 13%) 0 2%,
+      transparent 3%
+    ),
+    radial-gradient(
+      circle at 24% 32%,
+      rgb(255 255 255 / 27%) 0 1px,
+      transparent 2px
+    ),
+    linear-gradient(165deg, #15183c 0%, #202c61 49%, #11172f 100%);
+}
+
+.home-widget--weather[data-weather-condition='clear'][data-weather-period='day'] {
+  background:
+    radial-gradient(
+      circle at 75% 15%,
+      rgb(255 232 132 / 38%) 0 6%,
+      transparent 27%
+    ),
+    linear-gradient(170deg, #2878bb 0%, #274f8d 48%, #14233f 100%);
+}
+
+.home-widget--weather[data-weather-condition='partly_cloudy'] {
+  background:
+    radial-gradient(
+      ellipse at 72% 22%,
+      rgb(255 255 255 / 33%),
+      transparent 34%
+    ),
+    linear-gradient(165deg, #506f91 0%, #354b6e 48%, #17233e 100%);
+}
+
+.home-widget--weather[data-weather-condition='cloudy'] {
+  background:
+    radial-gradient(
+      ellipse at 72% 22%,
+      rgb(255 255 255 / 24%),
+      transparent 34%
+    ),
+    linear-gradient(165deg, #536b82 0%, #34485e 48%, #172535 100%);
+}
+
+.home-widget--weather[data-weather-condition='rain'] {
+  background:
+    repeating-linear-gradient(
+      104deg,
+      transparent 0 22px,
+      rgb(188 236 255 / 9%) 23px 25px,
+      transparent 26px 49px
+    ),
+    linear-gradient(165deg, #354b69 0%, #253952 46%, #101b2d 100%);
+}
+
+.home-widget--weather[data-weather-condition='thunder'] {
+  background:
+    radial-gradient(circle at 75% 18%, rgb(220 233 255 / 45%), transparent 23%),
+    linear-gradient(165deg, #27334d 0%, #2d3155 48%, #11172b 100%);
+}
+
+.home-widget--weather[data-weather-condition='fog'] {
+  background:
+    linear-gradient(180deg, rgb(217 225 229 / 40%) 0 20%, transparent 55%),
+    linear-gradient(165deg, #596b75 0%, #40525e 48%, #21303b 100%);
+}
+
+.home-widget--weather[data-weather-condition='snow'] {
+  background:
+    radial-gradient(
+      circle at 20% 22%,
+      rgb(255 255 255 / 60%) 0 2px,
+      transparent 3px
+    ),
+    radial-gradient(
+      circle at 70% 36%,
+      rgb(255 255 255 / 47%) 0 2px,
+      transparent 3px
+    ),
+    linear-gradient(165deg, #55738e 0%, #3d5873 48%, #23364f 100%);
+}
+
+.widget-weather-summary {
   display: flex;
+  min-width: 0;
+  min-height: 0;
   align-items: flex-start;
-  justify-content: space-between;
-}
-
-.widget-weather-top > div {
-  display: flex;
   flex-direction: column;
 }
 
-.widget-weather-top strong {
-  font-size: 38px;
+.widget-weather-location {
+  max-width: 100%;
+  overflow: hidden;
+  font-size: 13px;
+  font-weight: 650;
+  line-height: 16px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.widget-weather-temperature {
+  margin-top: 1px;
+  font-size: 46px;
   font-weight: 400;
-  letter-spacing: -1.5px;
+  letter-spacing: -2.2px;
   line-height: 1;
 }
 
+.widget-weather-current {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin-top: auto;
+  align-items: flex-start;
+  flex-direction: column;
+}
+
+.widget-weather-current > div {
+  display: flex;
+  min-width: 0;
+  overflow: hidden;
+  flex: 1;
+  flex-direction: column;
+}
+
+.widget-weather-current :deep(.weather-condition-icon) {
+  flex: none;
+}
+
+.widget-weather-current small {
+  overflow: hidden;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 650;
+  line-height: 15px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .widget-weather-range {
-  margin-top: 3px;
-  color: rgb(255 255 255 / 86%) !important;
-  font-weight: 600 !important;
+  color: rgb(255 255 255 / 82%) !important;
+  font-size: 10px !important;
+  font-weight: 550 !important;
+  line-height: 13px !important;
+}
+
+.widget-weather-unavailable {
+  display: grid;
+  min-width: 0;
+  min-height: 0;
+  place-items: center;
+  color: rgb(255 255 255 / 72%);
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
 }
 
 .widget-weather-hourly {
   display: grid;
-  margin-top: 12px;
-  padding-top: 11px;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  border-top: 0.5px solid rgb(255 255 255 / 18%);
+  min-width: 0;
+  min-height: 0;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  border-left: 0.5px solid rgb(255 255 255 / 20%);
 }
 
 .widget-weather-hourly > div {
   display: grid;
   min-width: 0;
+  align-content: center;
   justify-items: center;
-  gap: 6px;
+  gap: 7px;
 }
 
 .widget-weather-hourly time {
@@ -690,19 +995,16 @@ onBeforeUnmount(() => {
 
 .home-widget-shell--medium .home-widget--weather {
   padding: 13px 15px;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
+  gap: 12px;
 }
 
-.home-widget-shell--medium .widget-weather-top strong {
-  font-size: 32px;
+.home-widget-shell--medium .widget-weather-temperature {
+  font-size: 42px;
 }
 
 .home-widget-shell--medium .widget-weather-hourly {
-  margin-top: 7px;
-  padding-top: 7px;
-}
-
-.home-widget-shell--medium .widget-weather-hourly > div {
-  gap: 3px;
+  padding-left: 10px;
 }
 
 .home-widget-shell--medium .widget-weather-hourly svg {
@@ -718,47 +1020,94 @@ onBeforeUnmount(() => {
   font-size: 11px;
 }
 
+.home-widget-shell--large .home-widget--weather {
+  display: flex;
+  flex-direction: column;
+}
+
+.home-widget-shell--large .widget-weather-temperature {
+  font-size: 62px;
+}
+
+.home-widget-shell--large .widget-weather-current {
+  margin-top: 16px;
+}
+
+.home-widget-shell--large .widget-weather-hourly {
+  margin-top: auto;
+  padding-top: 16px;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  border-top: 0.5px solid rgb(255 255 255 / 20%);
+  border-left: 0;
+}
+
 .home-widget--music {
   display: grid;
+  position: relative;
   align-items: center;
-  grid-template-columns: auto minmax(0, 1fr) auto;
-  gap: 12px;
-  background: rgb(25 25 28 / 94%);
+  grid-template-columns: 112px minmax(0, 1fr);
+  gap: 14px;
+  background: rgb(39 39 42 / 95%);
 }
 
 .home-widget-shell--large .home-widget--music {
-  align-content: center;
+  align-content: start;
   grid-template-columns: 1fr;
-  text-align: center;
+  grid-template-rows: 172px minmax(0, 1fr);
+  gap: 16px;
 }
 
 .widget-album {
   display: grid;
-  width: 58px;
-  height: 58px;
+  width: 100%;
+  height: auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
   place-items: center;
-  border-radius: 14px;
-  color: #fff;
-  background: #5653b8;
+  align-self: center;
+  aspect-ratio: 1;
+  border: 0.5px solid rgb(255 255 255 / 14%);
+  border-radius: 16px;
+  color: rgb(255 255 255 / 48%);
+  background: rgb(255 255 255 / 8%);
   box-shadow:
-    inset 0 0 0 0.5px rgb(255 255 255 / 25%),
-    0 5px 13px rgb(0 0 0 / 24%);
-  font-size: 13px;
-  font-weight: 800;
-  letter-spacing: 1.5px;
+    inset 0 0 0 0.5px rgb(255 255 255 / 5%),
+    0 5px 13px rgb(0 0 0 / 18%);
+}
+
+.widget-album img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
 }
 
 .home-widget-shell--large .widget-album {
-  width: 118px;
-  height: 118px;
+  width: 172px;
+  height: 172px;
   margin: 0 auto;
-  border-radius: 24px;
-  font-size: 20px;
+  border-radius: 25px;
+}
+
+.widget-music-body {
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  flex-direction: column;
+}
+
+.widget-music-mark {
+  align-self: flex-end;
+  flex: none;
+  color: #ff375f;
 }
 
 .widget-music-copy {
   display: flex;
   min-width: 0;
+  margin-top: auto;
   flex-direction: column;
 }
 
@@ -770,20 +1119,71 @@ onBeforeUnmount(() => {
 }
 
 .widget-music-copy strong {
+  font-size: 14px;
+  line-height: 18px;
+}
+
+.widget-music-progress {
+  width: 100%;
+  height: 3px;
+  margin-top: 9px;
+  overflow: hidden;
+  border-radius: 3px;
+  background: rgb(255 255 255 / 12%);
+}
+
+.widget-music-progress i {
+  display: block;
+  height: 100%;
+  border-radius: inherit;
+  background: #ff375f;
+}
+
+.widget-music-empty {
+  position: absolute;
+  right: 15px;
+  bottom: 11px;
+  left: 15px;
+  z-index: 0;
+  margin: 0;
+  color: rgb(255 255 255 / 72%);
   font-size: 13px;
+  font-weight: 650;
+  line-height: 17px;
+  text-align: center;
+}
+
+.widget-music-placeholder {
+  display: grid;
+  margin: auto 0;
+  gap: 10px;
+}
+
+.widget-music-placeholder span {
+  display: block;
+  height: 7px;
+  border-radius: 7px;
+  background: rgb(255 255 255 / 8%);
+}
+
+.widget-music-placeholder span:first-child {
+  width: 54%;
+  background: rgb(255 55 95 / 14%);
 }
 
 .widget-music-controls {
   display: flex;
+  margin-top: auto;
   align-items: center;
-  gap: 5px;
+  justify-content: flex-end;
+  gap: 2px;
 }
 
 .widget-music-controls button,
 .widget-contacts button {
   display: grid;
-  width: 32px;
-  height: 32px;
+  width: 44px;
+  height: 44px;
   place-items: center;
   border: 0;
   border-radius: 50%;
@@ -791,6 +1191,26 @@ onBeforeUnmount(() => {
   background: rgb(255 255 255 / 11%);
 }
 
+.home-widget-shell--large .widget-music-body {
+  text-align: center;
+}
+
+.home-widget-shell--large .widget-music-mark {
+  position: absolute;
+  top: 18px;
+  right: 18px;
+}
+
+.home-widget-shell--large .widget-music-copy,
+.home-widget-shell--large .widget-music-empty {
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.home-widget-shell--large .widget-music-controls {
+  justify-content: center;
+}
+
 .home-widget--wallet {
   background: rgb(25 26 29 / 94%);
 }
@@ -947,11 +1367,11 @@ onBeforeUnmount(() => {
 .home-widget-remove {
   position: absolute;
   z-index: 8;
-  top: -8px;
-  left: -8px;
+  top: -18px;
+  left: -18px;
   display: grid;
-  width: 25px;
-  height: 25px;
+  width: 44px;
+  height: 44px;
   padding: 0;
   place-items: center;
   border: 0;
@@ -959,15 +1379,25 @@ onBeforeUnmount(() => {
   background: transparent;
 }
 
-.home-widget-remove :deep(.k-badge) {
+.home-widget-remove > span {
+  display: grid;
   width: 23px;
   height: 23px;
   min-width: 23px;
   padding: 0;
+  place-items: center;
   border: 0.5px solid rgb(255 255 255 / 55%);
+  border-radius: 50%;
+  color: #111;
+  background: #d1d1d6;
   box-shadow: 0 1px 5px rgb(0 0 0 / 55%);
   font-size: 20px;
   font-weight: 400;
+  line-height: 1;
+}
+
+:global(.phone-app--performance) .home-widget:not(.home-widget--weather) {
+  background-color: #19191b;
 }
 
 @keyframes widget-wobble {
diff --git a/frontend/src/services/widgetServices.ts b/frontend/src/services/widgetServices.ts
index 2e9c232..3fe0c6d 100644
--- a/frontend/src/services/widgetServices.ts
+++ b/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()
     },
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 0820f4f..cad1a55 100644
--- a/frontend/src/stores/phone.ts
+++ b/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',
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index 408627c..f1ce122 100644
--- a/sky_phone/config/locales/en.lua
+++ b/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" },