From e9cd22097195ed7fb9e4ed16b1dd1d6a9d032fb4 Mon Sep 17 00:00:00 2001
From: Type <79042381+TypeFor@users.noreply.github.com>
Date: Sun, 16 Aug 2026 23:18:00 +0200
Subject: [PATCH 1/3] ENH - polish core phone app interfaces

Adds an active-call Dynamic Island and refines the Phone, Health, Notes, and Companies experiences with shared Sky UI behavior, improved keyboard interaction, and localized note deletion confirmation. Updates the relevant contract and component tests.
---
 frontend/src/App.vue                          |  13 +-
 frontend/src/assets/main.css                  |  70 ++++++
 .../NotesRichTextEditor.contract.test.ts      |   2 +
 .../src/components/NotesRichTextEditor.vue    |   7 +-
 .../PhoneDynamicIsland.contract.test.ts       |  24 ++
 .../src/components/PhoneDynamicIsland.vue     |  81 ++++++
 frontend/src/stores/phone.ts                  |   2 +
 frontend/src/ui/controls.css                  |  23 ++
 frontend/src/ui/controls/SkyListItem.test.ts  |  20 +-
 frontend/src/ui/controls/SkyListItem.vue      |   5 +
 frontend/src/views/apps/CompaniesApp.vue      |   7 +-
 .../src/views/apps/HealthApp.contract.test.ts |   7 +
 frontend/src/views/apps/HealthApp.vue         | 111 ++++++++-
 .../views/apps/NotesApp.menu.contract.test.ts |  11 +-
 frontend/src/views/apps/NotesApp.vue          |  78 +++++-
 frontend/src/views/apps/PhoneApp.vue          | 232 ++++--------------
 sky_phone/config/locales/en.lua               |   3 +-
 17 files changed, 486 insertions(+), 210 deletions(-)
 create mode 100644 frontend/src/components/PhoneDynamicIsland.contract.test.ts
 create mode 100644 frontend/src/components/PhoneDynamicIsland.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 9bf21f7..5afd779 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -20,6 +20,7 @@ import PhoneSetupAssistant from '@/components/PhoneSetupAssistant.vue'
 import PhoneNotifications from '@/components/PhoneNotifications.vue'
 import NotificationPhonePreview from '@/components/NotificationPhonePreview.vue'
 import PhoneStatusBar from '@/components/PhoneStatusBar.vue'
+import PhoneDynamicIsland from '@/components/PhoneDynamicIsland.vue'
 import EasyShareSheet from '@/components/EasyShareSheet.vue'
 import PayphoneOverlay from '@/components/PayphoneOverlay.vue'
 import RadioHud from '@/components/RadioHud.vue'
@@ -1031,7 +1032,10 @@ function onMessage(event: MessageEvent<AppMessage>): void {
       isUnlocking.value = false
       loadUnlockedPhoneData()
     }
-    window.setTimeout(() => void router.push('/apps/phone'), 0)
+    const call = event.data.data as PhoneCall
+    if (call.state !== 'ringing' || call.direction !== 'incoming') {
+      window.setTimeout(() => void router.push('/apps/phone'), 0)
+    }
   } else if (event.data?.type === 'sim:picker' && event.data.data) {
     simPicker.value = event.data.data as unknown as SimPickerPayload
   } else if (event.data?.type === 'sim:picker-close') {
@@ -1243,6 +1247,10 @@ function returnToActiveCall(): void {
   void router.push('/apps/phone')
 }
 
+function openAcceptedCall(): void {
+  void router.push('/apps/phone')
+}
+
 function unlockCamera(): void {
   if (phone.security.enabled) {
     pendingUnlockRoute.value = '/apps/camera'
@@ -1449,7 +1457,7 @@ onBeforeUnmount(() => {
           @open="openNotificationPreview"
         />
         <div
-          v-if="phone.isOpen || notifications.current"
+          v-if="phone.isOpen || notifications.current || calls.activeCall"
           class="phone-resolution-wrapper phone-resolution-wrapper--primary"
         >
           <section
@@ -1497,6 +1505,7 @@ onBeforeUnmount(() => {
                   @control-center="toggleControlCenter"
                   @lock="lockPhone"
                 />
+                <PhoneDynamicIsland @accepted="openAcceptedCall" />
                 <SpringboardView v-if="!isDevelopmentRoute && !setupRequired" />
                 <RouterView v-slot="{ Component }">
                   <Transition :name="appTransitionName">
diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 84d8af8..3abbf02 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -647,6 +647,76 @@ button {
   cursor: pointer;
   pointer-events: auto;
 }
+.phone-dynamic-island {
+  position: absolute;
+  z-index: 98;
+  top: 12px;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 300px;
+  min-height: 72px;
+  padding: 10px 12px 10px 16px;
+  border: 1px solid rgb(255 255 255 / 10%);
+  border-radius: 28px;
+  color: #fff;
+  background: #050505;
+  box-shadow: 0 8px 24px rgb(0 0 0 / 45%);
+  transform: translateX(-50%);
+}
+.phone-dynamic-island__caller {
+  min-width: 0;
+  flex: 1;
+}
+.phone-dynamic-island__caller span,
+.phone-dynamic-island__caller strong {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.phone-dynamic-island__caller span {
+  color: rgb(255 255 255 / 58%);
+  font-size: 11px;
+  line-height: 14px;
+}
+.phone-dynamic-island__caller strong {
+  margin-top: 2px;
+  font-size: 15px;
+  line-height: 18px;
+}
+.phone-dynamic-island__actions {
+  display: flex;
+  gap: 8px;
+}
+.phone-dynamic-island__actions .sky-button--icon-only {
+  width: 44px;
+  min-width: 44px;
+  height: 44px;
+}
+.phone-dynamic-island__actions svg {
+  width: 19px;
+  height: 19px;
+}
+.phone-dynamic-island__answer {
+  --sky-app-accent: #34c759;
+}
+.phone-dynamic-island-enter-active,
+.phone-dynamic-island-leave-active {
+  transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.phone-dynamic-island-enter-from,
+.phone-dynamic-island-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) scale(0.86);
+}
+@media (prefers-reduced-motion: reduce) {
+  .phone-dynamic-island-enter-active,
+  .phone-dynamic-island-leave-active {
+    transition: none;
+  }
+}
 .phone-home-indicator {
   position: absolute;
   z-index: 90;
diff --git a/frontend/src/components/NotesRichTextEditor.contract.test.ts b/frontend/src/components/NotesRichTextEditor.contract.test.ts
index d74dea9..ff3a7aa 100644
--- a/frontend/src/components/NotesRichTextEditor.contract.test.ts
+++ b/frontend/src/components/NotesRichTextEditor.contract.test.ts
@@ -21,6 +21,8 @@ describe('NotesRichTextEditor formatting tabbar', () => {
     expect(source).toContain('@click="formatMode = true"')
     expect(source).toContain('@click="formatMode = false"')
     expect(source).toContain(':disabled="editor.state.selection.empty"')
+    expect(source).toContain('class="notes-rich-editor sky-ui-provider"')
+    expect(source).toContain("'sky-ui-provider--dark': dark")
     expect(source).not.toContain('notes-rich-editor__toolbar-row')
     expect(source).not.toContain('scrollToolbar')
   })
diff --git a/frontend/src/components/NotesRichTextEditor.vue b/frontend/src/components/NotesRichTextEditor.vue
index 5894af1..f5abd65 100644
--- a/frontend/src/components/NotesRichTextEditor.vue
+++ b/frontend/src/components/NotesRichTextEditor.vue
@@ -263,8 +263,11 @@ onBeforeUnmount(() => editor.value?.destroy())
 
 <template>
   <section
-    class="notes-rich-editor"
-    :class="{ 'notes-rich-editor--dark': dark }"
+    class="notes-rich-editor sky-ui-provider"
+    :class="{
+      'notes-rich-editor--dark': dark,
+      'sky-ui-provider--dark': dark,
+    }"
   >
     <EditorContent
       v-if="editor"
diff --git a/frontend/src/components/PhoneDynamicIsland.contract.test.ts b/frontend/src/components/PhoneDynamicIsland.contract.test.ts
new file mode 100644
index 0000000..081cc22
--- /dev/null
+++ b/frontend/src/components/PhoneDynamicIsland.contract.test.ts
@@ -0,0 +1,24 @@
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+
+const component = readFileSync(
+  new URL('./PhoneDynamicIsland.vue', import.meta.url),
+  'utf8',
+)
+const app = readFileSync(new URL('../App.vue', import.meta.url), 'utf8')
+
+describe('PhoneDynamicIsland contract', () => {
+  it('renders only a ringing incoming call with Sky actions', () => {
+    expect(component).toContain("call?.direction === 'incoming'")
+    expect(component).toContain("call.state === 'ringing'")
+    expect(component).toContain('<SkyButton')
+    expect(component).toContain("await calls.answer()")
+    expect(component).toContain("await calls.decline()")
+  })
+
+  it('keeps incoming calls in the current app until accepted', () => {
+    expect(app).toContain("call.state !== 'ringing'")
+    expect(app).toContain("call.direction !== 'incoming'")
+    expect(app).toContain('<PhoneDynamicIsland @accepted="openAcceptedCall" />')
+  })
+})
diff --git a/frontend/src/components/PhoneDynamicIsland.vue b/frontend/src/components/PhoneDynamicIsland.vue
new file mode 100644
index 0000000..578dd86
--- /dev/null
+++ b/frontend/src/components/PhoneDynamicIsland.vue
@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { Phone, PhoneOff } from 'lucide-vue-next'
+import { computed, ref } from 'vue'
+
+import { useCallsStore } from '@/stores/calls'
+import { usePhoneStore } from '@/stores/phone'
+import { SkyButton } from '@/ui'
+
+const emit = defineEmits<{ accepted: [] }>()
+const calls = useCallsStore()
+const phone = usePhoneStore()
+const pendingAction = ref<'answer' | 'decline' | null>(null)
+
+const incomingCall = computed(() => {
+  const call = calls.activeCall
+  return call?.direction === 'incoming' && call.state === 'ringing'
+    ? call
+    : null
+})
+
+const callerLabel = computed(() => {
+  const number = incomingCall.value?.otherNumber ?? ''
+  return (
+    calls.contacts.find((contact) => contact.phone_number === number)?.name ||
+    number
+  )
+})
+
+async function answer(): Promise<void> {
+  if (pendingAction.value || !incomingCall.value) return
+  pendingAction.value = 'answer'
+  const response = await calls.answer()
+  pendingAction.value = null
+  if (response.success) emit('accepted')
+}
+
+async function decline(): Promise<void> {
+  if (pendingAction.value || !incomingCall.value) return
+  pendingAction.value = 'decline'
+  await calls.decline()
+  pendingAction.value = null
+}
+</script>
+
+<template>
+  <Transition name="phone-dynamic-island">
+    <aside
+      v-if="incomingCall"
+      class="phone-dynamic-island sky-ui-provider sky-ui-provider--dark"
+      :aria-label="phone.t('Apps.phone.incoming')"
+      role="region"
+    >
+      <div class="phone-dynamic-island__caller">
+        <span>{{ phone.t('Apps.phone.incoming') }}</span>
+        <strong>{{ callerLabel }}</strong>
+      </div>
+      <div class="phone-dynamic-island__actions">
+        <SkyButton
+          :aria-label="phone.t('Apps.phone.decline')"
+          :disabled="pendingAction !== null"
+          icon-only
+          rounded
+          variant="danger"
+          @click="decline"
+        >
+          <PhoneOff aria-hidden="true" />
+        </SkyButton>
+        <SkyButton
+          :aria-label="phone.t('Apps.phone.answer')"
+          :disabled="pendingAction !== null"
+          icon-only
+          rounded
+          class="phone-dynamic-island__answer"
+          @click="answer"
+        >
+          <Phone aria-hidden="true" />
+        </SkyButton>
+      </div>
+    </aside>
+  </Transition>
+</template>
diff --git a/frontend/src/stores/phone.ts b/frontend/src/stores/phone.ts
index 90fff29..0ce19f4 100644
--- a/frontend/src/stores/phone.ts
+++ b/frontend/src/stores/phone.ts
@@ -3710,6 +3710,8 @@ const defaultLocales: LocaleTree = {
       pin: 'Pin note',
       unpin: 'Unpin note',
       deleteNote: 'Delete note',
+      deleteTitle: 'Delete Note?',
+      deleteBody: 'This note will be permanently deleted.',
       tools: {
         bold: 'Bold',
         bulletList: 'Bullet list',
diff --git a/frontend/src/ui/controls.css b/frontend/src/ui/controls.css
index d75bb86..a7d51d5 100644
--- a/frontend/src/ui/controls.css
+++ b/frontend/src/ui/controls.css
@@ -861,6 +861,29 @@ a.sky-chip::before {
     color 300ms ease;
 }
 
+.sky-list-item--with-actions {
+  display: flex;
+  align-items: stretch;
+}
+
+.sky-list-item--with-actions > .sky-list-item__row {
+  width: auto;
+  flex: 1 1 auto;
+}
+
+.sky-list-item__actions {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--sky-space-1, 4px);
+  padding: 0 var(--sky-space-2, 8px);
+  color: var(--sky-muted, rgba(0, 0, 0, 0.55));
+}
+
+.sky-list-item__actions > .sky-button--clear {
+  color: inherit;
+}
+
 button.sky-list-item__row,
 a.sky-list-item__row,
 label.sky-list-item__row {
diff --git a/frontend/src/ui/controls/SkyListItem.test.ts b/frontend/src/ui/controls/SkyListItem.test.ts
index cec08f8..35f21ec 100644
--- a/frontend/src/ui/controls/SkyListItem.test.ts
+++ b/frontend/src/ui/controls/SkyListItem.test.ts
@@ -1,4 +1,4 @@
-import { createSSRApp } from 'vue'
+import { createSSRApp, h } from 'vue'
 import { renderToString } from 'vue/server-renderer'
 import { describe, expect, it } from 'vitest'
 
@@ -15,4 +15,22 @@ describe('SkyListItem', () => {
     )
     expect(html).not.toContain('<button')
   })
+
+  it('renders row actions beside rather than inside the primary control', async () => {
+    const html = await renderToString(
+      createSSRApp({
+        render: () =>
+          h(
+            SkyListItem,
+            { link: true, linkComponent: 'button', title: 'Note' },
+            { actions: () => h('button', { type: 'button' }, 'Delete') },
+          ),
+      }),
+    )
+
+    expect(html).toContain('sky-list-item--with-actions')
+    expect(html).toMatch(
+      /<button[^>]*class="sky-list-item__row"[\s\S]*?<\/button><div class="sky-list-item__actions">[\s\S]*?<button/,
+    )
+  })
 })
diff --git a/frontend/src/ui/controls/SkyListItem.vue b/frontend/src/ui/controls/SkyListItem.vue
index 87f5c98..41fd4c9 100644
--- a/frontend/src/ui/controls/SkyListItem.vue
+++ b/frontend/src/ui/controls/SkyListItem.vue
@@ -73,6 +73,7 @@ const emit = defineEmits<{
 }>()
 
 const slots = useSlots()
+const hasActions = computed(() => Boolean(slots.actions))
 const listContext = inject(skyListContextKey, undefined)
 const effectiveDividers = computed(
   () => props.dividers ?? listContext?.value.dividers ?? false,
@@ -160,6 +161,7 @@ function handleClick(event: MouseEvent): void {
       'sky-list-item--active': active,
       'sky-list-item--contacts': contacts,
       'sky-list-item--dividers': effectiveDividers,
+      'sky-list-item--with-actions': hasActions,
       'sky-list-item--no-dividers': !effectiveDividers,
       'sky-list-item--label': label,
       'sky-list-item--link': isLink,
@@ -237,6 +239,9 @@ function handleClick(event: MouseEvent): void {
       </span>
       <slot name="content" />
     </component>
+    <div v-if="hasActions" class="sky-list-item__actions">
+      <slot name="actions" />
+    </div>
     <slot />
   </component>
 </template>
diff --git a/frontend/src/views/apps/CompaniesApp.vue b/frontend/src/views/apps/CompaniesApp.vue
index 8f1835d..b4b4aa8 100644
--- a/frontend/src/views/apps/CompaniesApp.vue
+++ b/frontend/src/views/apps/CompaniesApp.vue
@@ -352,12 +352,7 @@ function relativeTime(value: string): string {
 }
 
 function companyInitials(company: CompanySummary): string {
-  return company.name
-    .split(/\s+/)
-    .slice(0, 2)
-    .map((word) => word[0] ?? '')
-    .join('')
-    .toUpperCase()
+  return company.name.trim().charAt(0).toUpperCase()
 }
 
 function companySubtitle(company: CompanySummary): string {
diff --git a/frontend/src/views/apps/HealthApp.contract.test.ts b/frontend/src/views/apps/HealthApp.contract.test.ts
index 0852dbd..5735c5d 100644
--- a/frontend/src/views/apps/HealthApp.contract.test.ts
+++ b/frontend/src/views/apps/HealthApp.contract.test.ts
@@ -28,6 +28,13 @@ describe('HealthApp Sky UI contract', () => {
     expect(source).toContain('health.saveMedicalId')
   })
 
+  it('uses the Sky iOS action sheet instead of a native blood type select', () => {
+    expect(source).toContain('<SkyActionSheet')
+    expect(source).toContain('<SkyActionButton')
+    expect(source).toContain('@click="selectBloodType(option.value)"')
+    expect(source).not.toContain(':options="bloodTypeOptions"')
+  })
+
   it('does not present values the phone cannot observe', () => {
     expect(source).not.toContain('healthPercent')
     expect(source).not.toContain('recoveryPercent')
diff --git a/frontend/src/views/apps/HealthApp.vue b/frontend/src/views/apps/HealthApp.vue
index 2e15f1b..37ef1f5 100644
--- a/frontend/src/views/apps/HealthApp.vue
+++ b/frontend/src/views/apps/HealthApp.vue
@@ -2,6 +2,8 @@
 import {
   Activity,
   ChartNoAxesColumnIncreasing,
+  Check,
+  ChevronDown,
   ContactRound,
   Flame,
   Footprints,
@@ -19,6 +21,10 @@ import { usePhoneStore } from '@/stores/phone'
 import type { HealthMedicalIdInput } from '@/types/health'
 import {
   SkyAppPage,
+  SkyActionButton,
+  SkyActionGroup,
+  SkyActionSheet,
+  SkyActionsLabel,
   SkyButton,
   SkyEmptyState,
   SkyField,
@@ -39,6 +45,7 @@ const phone = usePhoneStore()
 const health = useHealthStore()
 const activeTab = ref<HealthTab>('today')
 const editingMedicalId = ref(false)
+const bloodTypePickerOpened = ref(false)
 const actionError = ref('')
 const medicalDraft = reactive<HealthMedicalIdInput>({
   allergies: '',
@@ -168,6 +175,7 @@ function syncMedicalDraft(): void {
 
 async function toggleMedicalEdit(): Promise<void> {
   actionError.value = ''
+  bloodTypePickerOpened.value = false
   if (!editingMedicalId.value) {
     syncMedicalDraft()
     editingMedicalId.value = true
@@ -185,6 +193,11 @@ async function toggleMedicalEdit(): Promise<void> {
       : translatedError
 }
 
+function selectBloodType(value: string): void {
+  medicalDraft.bloodType = value
+  bloodTypePickerOpened.value = false
+}
+
 async function dial(number: string): Promise<void> {
   if (!number) return
   actionError.value = ''
@@ -406,12 +419,18 @@ onBeforeUnmount(() => {
           <section class="health-section">
             <h2>{{ phone.t('Apps.health.medicalId.emergencyInformation') }}</h2>
             <ul class="health-form">
-              <SkyField
-                v-model="medicalDraft.bloodType"
-                :label="phone.t('Apps.health.medicalId.bloodType')"
-                :options="bloodTypeOptions"
-                type="select"
-              />
+              <li class="health-blood-type-field">
+                <button
+                  type="button"
+                  aria-haspopup="dialog"
+                  :aria-expanded="bloodTypePickerOpened"
+                  @click="bloodTypePickerOpened = true"
+                >
+                  <span>{{ phone.t('Apps.health.medicalId.bloodType') }}</span>
+                  <strong>{{ medicalDraft.bloodType || '—' }}</strong>
+                  <ChevronDown :size="17" aria-hidden="true" />
+                </button>
+              </li>
               <SkyField
                 v-model="medicalDraft.allergies"
                 :label="phone.t('Apps.health.medicalId.allergies')"
@@ -533,6 +552,39 @@ onBeforeUnmount(() => {
       </template>
     </SkyScrollArea>
 
+    <SkyActionSheet
+      :aria-label="phone.t('Apps.health.medicalId.bloodType')"
+      :opened="bloodTypePickerOpened"
+      @backdropclick="bloodTypePickerOpened = false"
+      @escape="bloodTypePickerOpened = false"
+    >
+      <SkyActionGroup>
+        <SkyActionsLabel>
+          {{ phone.t('Apps.health.medicalId.bloodType') }}
+        </SkyActionsLabel>
+        <SkyActionButton
+          v-for="option in bloodTypeOptions"
+          :key="option.value || 'none'"
+          class="health-blood-type-option"
+          :bold="medicalDraft.bloodType === option.value"
+          :aria-pressed="medicalDraft.bloodType === option.value"
+          @click="selectBloodType(option.value)"
+        >
+          <span>{{ option.label }}</span>
+          <Check
+            v-if="medicalDraft.bloodType === option.value"
+            :size="18"
+            aria-hidden="true"
+          />
+        </SkyActionButton>
+      </SkyActionGroup>
+      <SkyActionGroup>
+        <SkyActionButton bold @click="bloodTypePickerOpened = false">
+          {{ phone.t('Common.cancel') }}
+        </SkyActionButton>
+      </SkyActionGroup>
+    </SkyActionSheet>
+
     <SkyPillNavigation
       class="health-navigation"
       layout="full"
@@ -1075,6 +1127,53 @@ onBeforeUnmount(() => {
   list-style: none;
 }
 
+.health-blood-type-field button {
+  display: grid;
+  width: 100%;
+  min-height: 58px;
+  align-items: center;
+  padding: 8px 16px;
+  border: 0;
+  background: transparent;
+  color: var(--sky-text);
+  cursor: pointer;
+  grid-template-columns: 1fr auto auto;
+  grid-template-rows: auto auto;
+  text-align: left;
+}
+
+.health-blood-type-field button:focus-visible {
+  outline: 2px solid var(--sky-app-accent);
+  outline-offset: -2px;
+}
+
+.health-blood-type-field span {
+  grid-column: 1 / -1;
+  color: var(--sky-muted);
+  font-size: 12px;
+  line-height: 16px;
+}
+
+.health-blood-type-field strong {
+  font-size: 17px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.health-blood-type-field svg {
+  color: var(--sky-muted);
+}
+
+.health-blood-type-option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.health-blood-type-option svg {
+  color: var(--sky-app-accent);
+}
+
 .health-action-error {
   margin: 0;
   padding: 0 4px;
diff --git a/frontend/src/views/apps/NotesApp.menu.contract.test.ts b/frontend/src/views/apps/NotesApp.menu.contract.test.ts
index ed2df99..f23451a 100644
--- a/frontend/src/views/apps/NotesApp.menu.contract.test.ts
+++ b/frontend/src/views/apps/NotesApp.menu.contract.test.ts
@@ -8,7 +8,7 @@ const menuSource = source.slice(
   source.indexOf('</SkyActionSheet>') + '</SkyActionSheet>'.length,
 )
 const listSource = source.slice(
-  source.indexOf('<k-page\n    v-if="!editorOpened"'),
+  source.indexOf('<k-page'),
   source.indexOf('<k-page v-else'),
 )
 
@@ -21,6 +21,15 @@ describe('NotesApp list controls', () => {
 
     expect(composerSource).toContain('component="footer"')
     expect(listSource).toContain('<SkyScrollArea as="main"')
+    expect(listSource).toContain('<SkyList v-if="visibleNotes.length"')
+    expect(listSource).toContain('<SkyListItem')
+    expect(listSource).toContain('#actions')
+    expect(listSource).toContain('<SkyButton')
+    expect(listSource).toContain('@click.stop="requestListDelete(note)"')
+    expect(listSource).toContain('<SkyDialog')
+    expect(listSource).toContain('role="alertdialog"')
+    expect(listSource).toContain('@click="confirmListDelete"')
+    expect(source).toContain('notes.deleteNote(noteId)')
     expect(composerSource).toContain('<SkySearchbar')
     expect(composerSource).toContain('v-model="searchQuery"')
     expect(composerSource).toContain('<SkyFab')
diff --git a/frontend/src/views/apps/NotesApp.vue b/frontend/src/views/apps/NotesApp.vue
index 84432ff..7ea2189 100644
--- a/frontend/src/views/apps/NotesApp.vue
+++ b/frontend/src/views/apps/NotesApp.vue
@@ -5,7 +5,6 @@ import {
   kLink,
   kList,
   kListButton,
-  kListItem,
   kNavbar,
   kNavbarBackLink,
   kPage,
@@ -27,7 +26,11 @@ import { usePhoneStore } from '@/stores/phone'
 import {
   SkyActionSheet,
   SkyButton,
+  SkyDialog,
+  SkyDialogButton,
   SkyFab,
+  SkyList,
+  SkyListItem,
   SkyScrollArea,
   SkySearchbar,
   SkyToolbar,
@@ -43,6 +46,7 @@ const editorId = ref<string | null>(null)
 const editorOpened = ref(false)
 const draftBody = ref('')
 const menuOpened = ref(false)
+const listDeleteCandidateId = ref<string | null>(null)
 const currentNote = computed(() =>
   editorId.value
     ? notes.notes.find((note) => note.id === editorId.value)
@@ -121,6 +125,21 @@ function editNote(note: Note): void {
   editorOpened.value = true
 }
 
+function requestListDelete(note: Note): void {
+  listDeleteCandidateId.value = note.id
+}
+
+function cancelListDelete(): void {
+  listDeleteCandidateId.value = null
+}
+
+function confirmListDelete(): void {
+  const noteId = listDeleteCandidateId.value
+  if (!noteId) return
+  notes.deleteNote(noteId)
+  listDeleteCandidateId.value = null
+}
+
 function persistDraft(): Note | undefined {
   const draft = {
     body: draftBody.value,
@@ -185,28 +204,41 @@ function shareNote(): void {
 <template>
   <k-page
     v-if="!editorOpened"
-    class="notes-list-page"
+    class="notes-list-page sky-ui-provider"
+    :class="{ 'sky-ui-provider--dark': phone.isDarkMode }"
     :aria-label="phone.t('Apps.notes.name')"
   >
     <k-navbar large transparent :title="phone.t('Apps.notes.name')" />
 
     <SkyScrollArea as="main" class="notes-list-scroll">
-      <k-list v-if="visibleNotes.length" strong inset>
-        <k-list-item
+      <SkyList v-if="visibleNotes.length" inset strong>
+        <SkyListItem
           v-for="note in visibleNotes"
           :key="note.id"
-          href="#"
+          link
+          link-component="button"
           :title="noteTitle(note)"
           :subtitle="noteSubtitle(note)"
           :chevron="false"
           strong-title="auto"
-          @click.prevent="editNote(note)"
+          @click="editNote(note)"
         >
           <template v-if="note.pinned" #after>
             <Pin :size="15" aria-hidden="true" />
           </template>
-        </k-list-item>
-      </k-list>
+          <template #actions>
+            <SkyButton
+              :aria-label="phone.t('Apps.notes.deleteNote')"
+              clear
+              icon-only
+              rounded
+              @click.stop="requestListDelete(note)"
+            >
+              <Trash2 :size="18" aria-hidden="true" />
+            </SkyButton>
+          </template>
+        </SkyListItem>
+      </SkyList>
 
       <template v-else>
         <k-block-title large>{{
@@ -228,8 +260,7 @@ function shareNote(): void {
     </SkyScrollArea>
 
     <SkyToolbar
-      class="notes-composer sky-ui-provider"
-      :class="{ 'sky-ui-provider--dark': phone.isDarkMode }"
+      class="notes-composer"
       component="footer"
       :aria-label="phone.t('Apps.notes.searchPlaceholder')"
     >
@@ -249,6 +280,28 @@ function shareNote(): void {
         </template>
       </SkyFab>
     </SkyToolbar>
+
+    <SkyDialog
+      :opened="listDeleteCandidateId !== null"
+      :title="phone.t('Apps.notes.deleteTitle')"
+      :content="phone.t('Apps.notes.deleteBody')"
+      role="alertdialog"
+      @backdropclick="cancelListDelete"
+      @escape="cancelListDelete"
+    >
+      <template #buttons>
+        <SkyDialogButton @click="cancelListDelete">
+          {{ phone.t('Common.cancel') }}
+        </SkyDialogButton>
+        <SkyDialogButton
+          strong
+          class="notes-delete-confirm"
+          @click="confirmListDelete"
+        >
+          {{ phone.t('Common.delete') }}
+        </SkyDialogButton>
+      </template>
+    </SkyDialog>
   </k-page>
 
   <k-page v-else class="notes-editor-page !pt-[44px] !pb-0">
@@ -332,6 +385,11 @@ function shareNote(): void {
   overflow: hidden;
 }
 
+.notes-delete-confirm {
+  color: var(--sky-danger);
+  background: var(--sky-danger-soft);
+}
+
 .notes-editor-page {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/views/apps/PhoneApp.vue b/frontend/src/views/apps/PhoneApp.vue
index 9d74b98..dfc834f 100644
--- a/frontend/src/views/apps/PhoneApp.vue
+++ b/frontend/src/views/apps/PhoneApp.vue
@@ -81,7 +81,6 @@ const recentFilter = ref<RecentFilter>('all')
 const selectedNumber = ref('')
 const viewingOwnCard = ref(false)
 const phoneContent = ref<HTMLElement | null>(null)
-const contactDetailCompact = ref(false)
 const keypad = ref('')
 const editorOpened = ref(false)
 const editingContact = ref<PhoneContact | null>(null)
@@ -257,10 +256,7 @@ const activeCallContact = computed(
     ) ?? null,
 )
 const contactEditorInitials = computed(() =>
-  [contactFirstName.value, contactLastName.value]
-    .map((part) => part.trim().charAt(0).toUpperCase())
-    .filter(Boolean)
-    .join(''),
+  contactFirstName.value.trim().charAt(0).toUpperCase(),
 )
 
 function eventValue(event: Event): string {
@@ -311,7 +307,6 @@ function removeContactPhoto(): void {
 function openRecentDetail(number: string): void {
   viewingOwnCard.value = false
   selectedNumber.value = number
-  contactDetailCompact.value = false
   error.value = ''
   void nextTick(() => phoneContent.value?.scrollTo({ top: 0 }))
 }
@@ -320,7 +315,6 @@ function openMyCard(): void {
   if (!phone.device?.sim) return
   viewingOwnCard.value = true
   selectedNumber.value = phone.device.sim.number
-  contactDetailCompact.value = false
   error.value = ''
   void nextTick(() => phoneContent.value?.scrollTo({ top: 0 }))
 }
@@ -328,27 +322,14 @@ function openMyCard(): void {
 function closeRecentDetail(): void {
   viewingOwnCard.value = false
   selectedNumber.value = ''
-  contactDetailCompact.value = false
 }
 
 function selectTab(nextTab: PhoneTab): void {
   viewingOwnCard.value = false
   selectedNumber.value = ''
-  contactDetailCompact.value = false
   tab.value = nextTab
 }
 
-function handlePhoneContentScroll(): void {
-  if (!selectedNumber.value) {
-    contactDetailCompact.value = false
-    return
-  }
-  const scrollTop = phoneContent.value?.scrollTop ?? 0
-  contactDetailCompact.value = contactDetailCompact.value
-    ? scrollTop > 110
-    : scrollTop > 165
-}
-
 function scrollToContactGroup(letter: string): void {
   const scroller = phoneContent.value
   if (letter === 'favorites') {
@@ -433,7 +414,6 @@ async function saveContact(): Promise<void> {
   editorOpened.value = false
   viewingOwnCard.value = false
   selectedNumber.value = number
-  contactDetailCompact.value = false
   void nextTick(() => phoneContent.value?.scrollTo({ top: 0 }))
 }
 
@@ -597,6 +577,48 @@ function addDigit(digit: string): void {
   if (keypad.value.length < 10) keypad.value += digit
 }
 
+function isEditableTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) return false
+  return (
+    target.isContentEditable ||
+    target instanceof HTMLInputElement ||
+    target instanceof HTMLSelectElement ||
+    target instanceof HTMLTextAreaElement
+  )
+}
+
+function handleKeypadKeyboard(event: KeyboardEvent): void {
+  if (
+    tab.value !== 'keypad' ||
+    selectedNumber.value ||
+    event.defaultPrevented ||
+    event.isComposing ||
+    event.altKey ||
+    event.ctrlKey ||
+    event.metaKey ||
+    isEditableTarget(event.target)
+  ) {
+    return
+  }
+
+  if (/^[0-9*#]$/.test(event.key)) {
+    event.preventDefault()
+    addDigit(event.key)
+    return
+  }
+
+  if (event.key === 'Backspace' || event.key === 'Delete') {
+    event.preventDefault()
+    keypad.value = keypad.value.slice(0, -1)
+    return
+  }
+
+  if (event.key === 'Enter' && keypad.value && !event.repeat) {
+    event.preventDefault()
+    void startCall(keypad.value)
+  }
+}
+
 function chooseKeypadSuggestion(contact: PhoneContact): void {
   keypad.value = contact.phone_number.replace(/\D/g, '').slice(0, 10)
 }
@@ -620,12 +642,7 @@ function recentSubtitle(recent: RecentCall): string {
 function contactInitials(number: string): string {
   const contact = calls.contacts.find((entry) => entry.phone_number === number)
   if (!contact) return ''
-  return contact.name
-    .split(/\s+/)
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((part) => part[0]?.toUpperCase())
-    .join('')
+  return contact.name.trim().charAt(0).toUpperCase()
 }
 
 function formatRecentDate(value: string): string {
@@ -657,6 +674,7 @@ function formatRecentDate(value: string): string {
 }
 
 onMounted(async () => {
+  window.addEventListener('keydown', handleKeypadKeyboard)
   await calls.bootstrap()
   const photoSelection = mediaPicker.consumeMany<ContactPhotoContext>(
     'phone:contact-photo',
@@ -685,6 +703,7 @@ onMounted(async () => {
 })
 
 onBeforeUnmount(() => {
+  window.removeEventListener('keydown', handleKeypadKeyboard)
   if (callClock !== null) window.clearInterval(callClock)
 })
 </script>
@@ -899,7 +918,6 @@ onBeforeUnmount(() => {
         ref="phoneContent"
         class="phone-call-content"
         :class="{ 'phone-call-content--profile': selectedNumber }"
-        @scroll.passive="handlePhoneContentScroll"
       >
         <k-block v-if="!phone.device?.sim" class="text-center">
           <h2>{{ phone.t('Apps.phone.noSim') }}</h2>
@@ -907,10 +925,7 @@ onBeforeUnmount(() => {
         </k-block>
 
         <template v-else-if="selectedNumber">
-          <section
-            class="phone-contact-detail"
-            :class="{ 'phone-contact-detail--compact': contactDetailCompact }"
-          >
+          <section class="phone-contact-detail">
             <header class="phone-detail-header">
               <k-button
                 rounded
@@ -921,35 +936,7 @@ onBeforeUnmount(() => {
                 <ChevronLeft :size="29" :stroke-width="2.4" />
               </k-button>
 
-              <div class="phone-detail-compact-center">
-                <h2 class="phone-detail-compact-title">
-                  {{ selectedDisplayName }}
-                </h2>
-                <div class="phone-detail-compact-actions">
-                  <k-button
-                    v-for="action in contactProfileActions"
-                    :key="action.id"
-                    rounded
-                    class="phone-profile-action phone-profile-action--compact"
-                    :disabled="
-                      viewingOwnCard ||
-                      ['video', 'mail'].includes(action.id) ||
-                      (action.id === 'call' &&
-                        selectedContact?.canCall === false) ||
-                      (action.id === 'message' &&
-                        selectedContact?.canMessage === false)
-                    "
-                    :aria-label="phone.t(`Apps.phone.${action.id}`)"
-                    @click="triggerContactAction(action.id)"
-                  >
-                    <component
-                      :is="action.icon"
-                      :size="24"
-                      fill="currentColor"
-                    />
-                  </k-button>
-                </div>
-              </div>
+              <span class="phone-detail-header-spacer" />
 
               <k-button
                 v-if="!viewingOwnCard"
@@ -3025,30 +3012,6 @@ onBeforeUnmount(() => {
   margin: 0 -15px;
   padding: 7px 15px;
   overflow: visible;
-  transition:
-    height 360ms cubic-bezier(0.22, 1, 0.36, 1),
-    background 260ms ease,
-    border-color 260ms ease,
-    border-radius 260ms ease,
-    box-shadow 260ms ease,
-    backdrop-filter 260ms ease;
-}
-
-.phone-contact-detail--compact .phone-detail-header {
-  height: 156px;
-  border-bottom: 1px solid rgba(100, 168, 255, 0.2);
-  border-radius: 0 0 22px 22px;
-  background: linear-gradient(
-    180deg,
-    rgba(32, 41, 51, 0.97) 0%,
-    rgba(31, 34, 51, 0.96) 56%,
-    rgba(19, 47, 78, 0.94) 100%
-  );
-  box-shadow:
-    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
-    0 14px 30px rgba(9, 7, 25, 0.28);
-  backdrop-filter: blur(30px) saturate(155%);
-  -webkit-backdrop-filter: blur(30px) saturate(155%);
 }
 
 .phone-detail-header-button,
@@ -3079,63 +3042,8 @@ onBeforeUnmount(() => {
   width: 44px;
 }
 
-.phone-detail-compact-center {
-  position: static;
+.phone-detail-header-spacer {
   min-width: 0;
-  height: 44px;
-}
-
-.phone-detail-compact-title {
-  display: -webkit-box;
-  max-width: 190px;
-  margin: 1px auto 0;
-  overflow: hidden;
-  color: #fff;
-  font-size: 19px;
-  font-weight: 700;
-  letter-spacing: -0.25px;
-  line-height: 1.12;
-  opacity: 0;
-  text-align: center;
-  text-overflow: ellipsis;
-  text-shadow: 0 1px 3px rgba(20, 25, 35, 0.12);
-  transform: translateY(-10px) scale(0.94);
-  transition:
-    opacity 180ms ease,
-    transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-.phone-contact-detail--compact .phone-detail-compact-title {
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  transition-delay: 55ms;
-}
-
-.phone-detail-compact-actions {
-  position: absolute;
-  top: 60px;
-  left: 50%;
-  display: grid;
-  width: max-content;
-  grid-template-columns: repeat(4, 62px);
-  justify-content: center;
-  gap: 12px;
-  opacity: 0;
-  pointer-events: none;
-  transform: translate(-50%, -18px) scale(0.9);
-  transform-origin: top center;
-  transition:
-    opacity 180ms ease,
-    transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.phone-contact-detail--compact .phone-detail-compact-actions {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translate(-50%, 0) scale(1);
-  transition-delay: 80ms;
 }
 
 .phone-contact-hero {
@@ -3182,6 +3090,7 @@ onBeforeUnmount(() => {
   min-height: 62px;
   padding: 0;
   border: 1px solid rgba(10, 132, 255, 0.58);
+  border-radius: 50%;
   color: #fff;
   background: rgba(18, 82, 145, 0.72);
   box-shadow:
@@ -3194,26 +3103,6 @@ onBeforeUnmount(() => {
   opacity: 1;
 }
 
-.phone-profile-action--compact {
-  width: 62px;
-  min-width: 62px;
-  height: 62px;
-  min-height: 62px;
-  border-color: rgba(255, 255, 255, 0.26);
-  background: rgba(24, 35, 45, 0.82);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.1),
-    0 5px 15px rgba(20, 24, 37, 0.16);
-  transition:
-    background-color 140ms ease,
-    transform 140ms ease;
-}
-
-.phone-profile-action--compact:active {
-  background: rgba(40, 55, 67, 0.9);
-  transform: scale(0.92);
-}
-
 .phone-profile-content {
   display: grid;
   gap: 12px;
@@ -3643,28 +3532,12 @@ onBeforeUnmount(() => {
     font-size: 14px;
   }
 
-  .phone-profile-action--compact {
-    width: 54px;
-    min-width: 54px;
-    height: 54px;
-    min-height: 54px;
-  }
-
-  .phone-detail-compact-actions {
-    grid-template-columns: repeat(4, 54px);
-    gap: 9px;
-  }
-
-  .phone-detail-compact-title {
-    max-width: 150px;
-  }
-
   .phone-contact-actions {
     grid-template-columns: repeat(4, 56px);
     gap: 9px;
   }
 
-  .phone-profile-action:not(.phone-profile-action--compact) {
+  .phone-profile-action {
     width: 56px;
     min-width: 56px;
     height: 56px;
@@ -3883,9 +3756,6 @@ onBeforeUnmount(() => {
 
 @media (prefers-reduced-motion: reduce) {
   .phone-detail-header,
-  .phone-detail-compact-title,
-  .phone-detail-compact-actions,
-  .phone-profile-action--compact,
   .phone-calls-app button,
   .phone-contact-editor button {
     transition-duration: 1ms;
diff --git a/sky_phone/config/locales/en.lua b/sky_phone/config/locales/en.lua
index defebc3..e68d6af 100644
--- a/sky_phone/config/locales/en.lua
+++ b/sky_phone/config/locales/en.lua
@@ -1638,7 +1638,8 @@ Locales["en"] = {
                 untitled = "Untitled", noText = "No additional text", emptyBadge = "ON DEVICE", emptyTitle = "No Notes",
                 emptyBody = "Create a note to keep important details close at hand.", noResults = "No Results",
                 noResultsBody = "Try searching for a different word or phrase.", pin = "Pin note", unpin = "Unpin note",
-                deleteNote = "Delete note",
+                deleteNote = "Delete note", deleteTitle = "Delete Note?",
+                deleteBody = "This note will be permanently deleted.",
                 tools = {
                     bold = "Bold", bulletList = "Bullet list", decreaseText = "Smaller text", increaseText = "Larger text",
                     italic = "Italic", numberedList = "Numbered list", quote = "Quote", redo = "Redo",

From df74a47743158159818256bbf68d5c645b2077e6 Mon Sep 17 00:00:00 2001
From: Type <79042381+TypeFor@users.noreply.github.com>
Date: Mon, 17 Aug 2026 11:52:14 +0200
Subject: [PATCH 2/3] FIX - improve health activity readability

Make metric labels readable at compact phone resolutions and prevent their row from shrinking. Show localized two-character weekday abbreviations consistently in health activity charts and lists.
---
 frontend/src/views/apps/HealthApp.vue | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/apps/HealthApp.vue b/frontend/src/views/apps/HealthApp.vue
index 0c03bb3..b8e78c6 100644
--- a/frontend/src/views/apps/HealthApp.vue
+++ b/frontend/src/views/apps/HealthApp.vue
@@ -143,10 +143,11 @@ function formatMinutes(seconds: number): string {
   })
 }
 
-function weekday(date: string, narrow = true): string {
-  return new Intl.DateTimeFormat(phone.lang, {
-    weekday: narrow ? 'narrow' : 'short',
-  }).format(new Date(`${date}T12:00:00`))
+function weekday(date: string): string {
+  const value = new Intl.DateTimeFormat(phone.lang, { weekday: 'short' })
+    .format(new Date(`${date}T12:00:00`))
+    .replace(/\.$/, '')
+  return Array.from(value).slice(0, 2).join('')
 }
 
 function fullDate(date: string): string {
@@ -760,6 +761,7 @@ onBeforeUnmount(() => {
   border: calc(var(--sky-hairline-scale) * 1px) solid var(--health-panel-border);
   border-radius: var(--sky-radius-card);
   background: var(--health-panel);
+  flex: none;
   grid-template-columns: repeat(3, 1fr);
 }
 
@@ -797,8 +799,9 @@ onBeforeUnmount(() => {
 }
 
 .health-metrics span {
-  color: var(--sky-muted);
-  font-size: 12px;
+  color: var(--sky-text);
+  font-size: 13px;
+  font-weight: 600;
 }
 
 .health-section {

From ca97d39c140ea33a2fac0faa4f43fb998a0cf94b Mon Sep 17 00:00:00 2001
From: Type <79042381+TypeFor@users.noreply.github.com>
Date: Tue, 18 Aug 2026 09:54:24 +0200
Subject: [PATCH 3/3] ENH - weather app element size

---
 frontend/src/assets/main.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index 0f40e08..b9608c2 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -4530,9 +4530,9 @@ button {
   display: grid;
   grid-template-columns: 21px 1fr;
   gap: 4px 7px;
-  min-height: 82px;
+  min-height: 94px;
   margin: 0;
-  padding: 12px;
+  padding: 14px;
   border-radius: calc(var(--sky-radius-card) - 6px);
 }
 .weather-detail-card svg {