ENH - update SMS branch from dev

frontend/src/components/AppIcon.vue

@@ -4,6 +4,7 @@ import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 import { useMailStore } from '@/stores/mail'
+import { useMarketplaceStore } from '@/stores/marketplace'
 import { usePhoneStore } from '@/stores/phone'
 import type { PhoneAppDefinition } from '@/types/apps'
 
@@ -21,17 +22,22 @@ const props = withDefaults(
 
 const phone = usePhoneStore()
 const mail = useMailStore()
+const marketplace = useMarketplaceStore()
 const router = useRouter()
 const iconFailed = ref(false)
-const unreadCount = computed(() =>
-  props.app.id === 'mail' ? mail.counts.unread : 0,
-)
+const unreadCount = computed(() => {
+  if (props.app.id === 'mail') return mail.counts.unread
+  if (props.app.id === 'citymarkt') return marketplace.counts.unread
+  return 0
+})
 const notificationBadgeColors = {
   bg: 'bg-[#ff3b30]',
   text: 'text-white',
 }
 
 function launch(event: MouseEvent): void {
+  if (!props.app.route) return
+
   const button = event.currentTarget as HTMLElement
   const screen = button.closest('.phone-screen')
   const icon = button.querySelector<HTMLElement>('.app-icon')
@@ -64,6 +70,7 @@ function launch(event: MouseEvent): void {
     :class="{ 'app-icon-button--compact': compact }"
     type="button"
     :aria-label="phone.t(app.labelKey)"
+    :aria-disabled="!app.route"
     @click="launch"
   >
     <span class="app-icon-anchor" aria-hidden="true">

frontend/src/components/MailMarkdownEditor.vue

@@ -0,0 +1,289 @@
+<script setup lang="ts">
+import Placeholder from '@tiptap/extension-placeholder'
+import { Markdown } from '@tiptap/markdown'
+import StarterKit from '@tiptap/starter-kit'
+import { EditorContent, useEditor } from '@tiptap/vue-3'
+import DOMPurify from 'dompurify'
+import {
+  Bold,
+  Italic,
+  List,
+  ListOrdered,
+  Quote,
+  Redo2,
+  Undo2,
+} from 'lucide-vue-next'
+import { onBeforeUnmount, watch } from 'vue'
+
+export type MailEditorLabels = {
+  bold: string
+  bulletList: string
+  italic: string
+  numberedList: string
+  quote: string
+  redo: string
+  undo: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    editable?: boolean
+    labels?: MailEditorLabels
+    modelValue: string
+    placeholder?: string
+  }>(),
+  {
+    editable: true,
+    labels: () => ({
+      bold: 'Bold',
+      bulletList: 'Bullet list',
+      italic: 'Italic',
+      numberedList: 'Numbered list',
+      quote: 'Quote',
+      redo: 'Redo',
+      undo: 'Undo',
+    }),
+    placeholder: '',
+  },
+)
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+function safeMarkdown(value: string): string {
+  return String(
+    DOMPurify.sanitize(value.replace(/\r\n?/g, '\n'), {
+      ALLOWED_ATTR: [],
+      ALLOWED_TAGS: [],
+      KEEP_CONTENT: true,
+    }),
+  )
+}
+
+const editor = useEditor({
+  content: safeMarkdown(props.modelValue),
+  contentType: 'markdown',
+  editable: props.editable,
+  extensions: [
+    StarterKit.configure({
+      codeBlock: false,
+      heading: { levels: [2, 3] },
+      horizontalRule: false,
+      link: {
+        autolink: true,
+        linkOnPaste: true,
+        openOnClick: false,
+        protocols: ['http', 'https'],
+      },
+      strike: false,
+      underline: false,
+    }),
+    Markdown.configure({ markedOptions: { breaks: true, gfm: true } }),
+    Placeholder.configure({ placeholder: props.placeholder }),
+  ],
+  injectCSS: false,
+  onUpdate: ({ editor: currentEditor }) => {
+    emit('update:modelValue', currentEditor.getMarkdown())
+  },
+})
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (!editor.value) return
+    const safeValue = safeMarkdown(value)
+    if (editor.value.getMarkdown() === safeValue) return
+    editor.value.commands.setContent(safeValue, {
+      contentType: 'markdown',
+      emitUpdate: false,
+    })
+  },
+)
+
+watch(
+  () => props.editable,
+  (value) => editor.value?.setEditable(value),
+)
+
+onBeforeUnmount(() => editor.value?.destroy())
+</script>
+
+<template>
+  <div class="mail-editor" :class="{ 'mail-editor--readonly': !editable }">
+    <div v-if="editable && editor" class="mail-editor__toolbar">
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('bold') }"
+        :aria-label="labels.bold"
+        :title="labels.bold"
+        @click="editor.chain().focus().toggleBold().run()"
+      >
+        <Bold :size="17" />
+      </button>
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('italic') }"
+        :aria-label="labels.italic"
+        :title="labels.italic"
+        @click="editor.chain().focus().toggleItalic().run()"
+      >
+        <Italic :size="17" />
+      </button>
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('bulletList') }"
+        :aria-label="labels.bulletList"
+        :title="labels.bulletList"
+        @click="editor.chain().focus().toggleBulletList().run()"
+      >
+        <List :size="17" />
+      </button>
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('orderedList') }"
+        :aria-label="labels.numberedList"
+        :title="labels.numberedList"
+        @click="editor.chain().focus().toggleOrderedList().run()"
+      >
+        <ListOrdered :size="17" />
+      </button>
+      <button
+        type="button"
+        :class="{ 'is-active': editor.isActive('blockquote') }"
+        :aria-label="labels.quote"
+        :title="labels.quote"
+        @click="editor.chain().focus().toggleBlockquote().run()"
+      >
+        <Quote :size="17" />
+      </button>
+      <span class="mail-editor__toolbar-spacer" />
+      <button
+        type="button"
+        :disabled="!editor.can().chain().focus().undo().run()"
+        :aria-label="labels.undo"
+        :title="labels.undo"
+        @click="editor.chain().focus().undo().run()"
+      >
+        <Undo2 :size="17" />
+      </button>
+      <button
+        type="button"
+        :disabled="!editor.can().chain().focus().redo().run()"
+        :aria-label="labels.redo"
+        :title="labels.redo"
+        @click="editor.chain().focus().redo().run()"
+      >
+        <Redo2 :size="17" />
+      </button>
+    </div>
+    <EditorContent v-if="editor" :editor="editor" />
+  </div>
+</template>
+
+<style scoped>
+.mail-editor {
+  min-height: 210px;
+  color: #f5f5f7;
+}
+
+.mail-editor__toolbar {
+  position: sticky;
+  z-index: 2;
+  top: 0;
+  display: flex;
+  align-items: center;
+  gap: 3px;
+  min-height: 43px;
+  padding: 5px 7px;
+  border-bottom: 1px solid #ffffff14;
+  background: #1c1c1ee8;
+  backdrop-filter: blur(18px) saturate(160%);
+  -webkit-backdrop-filter: blur(18px) saturate(160%);
+}
+
+.mail-editor__toolbar button {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: #f5f5f7;
+  cursor: pointer;
+}
+
+.mail-editor__toolbar button.is-active {
+  background: #0a84ff;
+  color: #fff;
+}
+
+.mail-editor__toolbar button:disabled {
+  opacity: 0.28;
+  cursor: default;
+}
+
+.mail-editor__toolbar-spacer {
+  flex: 1;
+}
+
+:deep(.tiptap) {
+  min-height: 210px;
+  padding: 15px 16px 92px;
+  outline: none;
+  font-size: 15px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+
+.mail-editor--readonly {
+  min-height: 0;
+}
+
+.mail-editor--readonly :deep(.tiptap) {
+  min-height: 0;
+  padding: 0;
+  user-select: text;
+}
+
+:deep(.tiptap p) {
+  margin: 0 0 0.8em;
+}
+
+:deep(.tiptap p:last-child) {
+  margin-bottom: 0;
+}
+
+:deep(.tiptap h2),
+:deep(.tiptap h3) {
+  margin: 1em 0 0.4em;
+  line-height: 1.2;
+}
+
+:deep(.tiptap ul),
+:deep(.tiptap ol) {
+  margin: 0.55em 0 0.85em;
+  padding-left: 1.45em;
+}
+
+:deep(.tiptap blockquote) {
+  margin: 0.85em 0;
+  padding-left: 0.9em;
+  border-left: 3px solid #5e5e63;
+  color: #a1a1a6;
+}
+
+:deep(.tiptap a) {
+  color: #0a84ff;
+  text-decoration: none;
+}
+
+:deep(.tiptap p.is-editor-empty:first-child::before) {
+  float: left;
+  height: 0;
+  color: #8e8e93;
+  content: attr(data-placeholder);
+  pointer-events: none;
+}
+</style>

frontend/src/components/PhoneHomeIndicator.vue

@@ -19,7 +19,8 @@ function goHome(): void {
     :class="{ 'phone-home-indicator--interactive': isApp }"
     type="button"
     :aria-label="phone.t('Common.home')"
-    @click="goHome"
+    @pointerdown.stop="goHome"
+    @click.stop="goHome"
   >
     <span aria-hidden="true"></span>
   </button>

frontend/src/components/PhoneLockScreen.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kLink, kNavbar } from 'konsta/vue'
+import { kFab } from 'konsta/vue'
 import {
   BatteryMedium,
   Camera,
@@ -11,8 +11,10 @@ import {
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 import { usePhoneStore } from '@/stores/phone'
+import { nuiCall } from '@/utils/nui'
 
 const emit = defineEmits<{
+  camera: []
   unlock: []
 }>()
 
@@ -21,12 +23,11 @@ const now = ref(new Date())
 const dragOffset = ref(0)
 const dragging = ref(false)
 const flashlightActive = ref(false)
-const lockNavbarColors = { bgIos: 'bg-transparent' }
-const neutralGlassClass =
-  '!bg-white/10 !shadow-none ring-1 ring-inset ring-white/15 backdrop-saturate-150'
-const activeFlashlightGlassClass =
-  '!bg-white !shadow-none ring-1 ring-inset ring-white/60 backdrop-saturate-150'
-const whiteNavbarLinkColors = { navbarTextIos: 'text-white' }
+const shortcutColors = {
+  bgIos: 'bg-ios-light-glass dark:bg-ios-dark-glass',
+  activeBgIos: 'active:bg-white/90 dark:active:bg-white/20',
+  textIos: 'text-black dark:text-white',
+}
 let pointerStart = 0
 let pointerStartedAt = 0
 let clockTicker: number | undefined
@@ -52,12 +53,15 @@ const time = computed(() =>
 const dragStyle = computed(() => ({
   '--lock-drag': `${dragOffset.value}px`,
 }))
-const flashlightGlassClass = computed(() =>
-  flashlightActive.value ? activeFlashlightGlassClass : neutralGlassClass,
+const flashlightShortcutColors = computed(() =>
+  flashlightActive.value
+    ? {
+        ...shortcutColors,
+        bgIos: 'bg-white',
+        textIos: 'text-purple-500',
+      }
+    : shortcutColors,
 )
-const flashlightLinkColors = computed(() => ({
-  navbarTextIos: flashlightActive.value ? 'text-purple-500' : 'text-white',
-}))
 
 function onPointerDown(event: PointerEvent): void {
   if ((event.target as HTMLElement).closest('button')) return
@@ -96,6 +100,13 @@ function unlockFromWallpaper(event: MouseEvent): void {
   emit('unlock')
 }
 
+async function toggleFlashlight(): Promise<void> {
+  const enabled = !flashlightActive.value
+  flashlightActive.value = enabled
+  const response = await nuiCall('camera:setFlash', { enabled })
+  if (!response.success) flashlightActive.value = !enabled
+}
+
 onMounted(() => {
   clockTicker = window.setInterval(() => {
     now.value = new Date()
@@ -104,6 +115,8 @@ onMounted(() => {
 
 onBeforeUnmount(() => {
   if (clockTicker !== undefined) window.clearInterval(clockTicker)
+  if (flashlightActive.value)
+    void nuiCall('camera:setFlash', { enabled: false })
 })
 </script>
 
@@ -146,37 +159,32 @@ onBeforeUnmount(() => {
     </div>
 
     <div class="lock-screen__footer">
-      <k-navbar
-        transparent
-        :colors="lockNavbarColors"
-        inner-class="!px-12"
-        :left-class="flashlightGlassClass"
-        :right-class="neutralGlassClass"
-      >
-        <template #left>
-          <k-link
-            component="button"
-            icon-only
-            :colors="flashlightLinkColors"
-            :link-props="{ type: 'button' }"
-            :aria-label="phone.t('LockScreen.flashlight')"
-            @click="flashlightActive = !flashlightActive"
-          >
+      <nav class="lock-screen__shortcuts">
+        <k-fab
+          component="button"
+          type="button"
+          class="lock-screen__shortcut"
+          :colors="flashlightShortcutColors"
+          :aria-label="phone.t('LockScreen.flashlight')"
+          @click="toggleFlashlight"
+        >
+          <template #icon>
             <Flashlight :stroke-width="1.4" aria-hidden="true" />
-          </k-link>
-        </template>
-        <template #right>
-          <k-link
-            component="button"
-            icon-only
-            :colors="whiteNavbarLinkColors"
-            :link-props="{ type: 'button' }"
-            :aria-label="phone.t('LockScreen.camera')"
-          >
+          </template>
+        </k-fab>
+        <k-fab
+          component="button"
+          type="button"
+          class="lock-screen__shortcut"
+          :colors="shortcutColors"
+          :aria-label="phone.t('LockScreen.camera')"
+          @click="emit('camera')"
+        >
+          <template #icon>
             <Camera :stroke-width="1.4" aria-hidden="true" />
-          </k-link>
-        </template>
-      </k-navbar>
+          </template>
+        </k-fab>
+      </nav>
 
       <button class="lock-screen__swipe" type="button" @click="emit('unlock')">
         <span class="lock-screen__swipe-chevron" aria-hidden="true"></span>

frontend/src/components/PhoneMediaCapture.vue

@@ -0,0 +1,377 @@
+<script setup lang="ts">
+import fixWebmDuration from 'fix-webm-duration'
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+import type { UploadReady } from '@/types/media'
+import { createGameView, type GameView } from '@/utils/gameView'
+import { nuiCall } from '@/utils/nui'
+
+type RecordingChunk = { blob: Blob; durationMs: number }
+type PendingVideo = { blob: Blob; fileName: string }
+
+const canvasRef = ref<HTMLCanvasElement | null>(null)
+const pendingVideos = new Map<string, PendingVideo>()
+const captureFps = 30
+const maxCaptureEdge = 720
+const portraitAspect = 3 / 4
+const landscapeAspect = 16 / 9
+let bitrateBps = 1_500_000
+let landscape = false
+let zoom = 1
+let gameView: GameView | null = null
+let renderFrameId: number | undefined
+let lastRenderAt = 0
+let recorder: MediaRecorder | null = null
+let stream: MediaStream | null = null
+let chunks: RecordingChunk[] = []
+let lastChunkAt = 0
+let lastChunkTimecode: number | null = null
+let flushTimer: number | undefined
+
+function captureDimensions(): { height: number; width: number } {
+  return landscape
+    ? {
+        height: Math.round(maxCaptureEdge / landscapeAspect),
+        width: maxCaptureEdge,
+      }
+    : {
+        height: maxCaptureEdge,
+        width: Math.round(maxCaptureEdge * portraitAspect),
+      }
+}
+
+function postRecordState(active: boolean, saving = false): void {
+  window.postMessage(
+    { data: { active, saving }, type: 'camera:recordState' },
+    '*',
+  )
+}
+
+function ensureGameView(): GameView {
+  if (!canvasRef.value) throw new Error('capture_failed')
+  if (gameView && !gameView.isLost()) return gameView
+  gameView?.dispose()
+  const dimensions = captureDimensions()
+  gameView = createGameView(canvasRef.value)
+  gameView.resize(
+    dimensions.width,
+    dimensions.height,
+    window.innerWidth,
+    window.innerHeight,
+    zoom,
+  )
+  return gameView
+}
+
+function startRenderLoop(): void {
+  const view = ensureGameView()
+  if (renderFrameId !== undefined) return
+  const render = (now: number) => {
+    if (!gameView || gameView.isLost()) {
+      renderFrameId = undefined
+      return
+    }
+    renderFrameId = window.requestAnimationFrame(render)
+    if (now - lastRenderAt < 1000 / captureFps) return
+    lastRenderAt = now
+    view.render()
+  }
+  lastRenderAt = 0
+  renderFrameId = window.requestAnimationFrame(render)
+}
+
+function stopRenderLoop(): void {
+  if (renderFrameId !== undefined) {
+    window.cancelAnimationFrame(renderFrameId)
+    renderFrameId = undefined
+  }
+}
+
+function resetRecording(): void {
+  chunks = []
+  lastChunkAt = 0
+  lastChunkTimecode = null
+}
+
+function stopTracks(): void {
+  stream?.getTracks().forEach((track) => track.stop())
+  stream = null
+}
+
+function cleanupRecording(): void {
+  if (recorder && recorder.state !== 'inactive') recorder.stop()
+  recorder = null
+  stopTracks()
+  if (flushTimer !== undefined) window.clearInterval(flushTimer)
+  flushTimer = undefined
+  stopRenderLoop()
+  resetRecording()
+  postRecordState(false)
+}
+
+function startRecording(data: Record<string, unknown>): void {
+  if (recorder) return
+  if (typeof MediaRecorder === 'undefined') {
+    window.postMessage(
+      {
+        data: { error: 'unsupported', success: false },
+        type: 'camera:recordError',
+      },
+      '*',
+    )
+    return
+  }
+  const configuredBitrate = Number(data.bitrateKbps)
+  if (Number.isFinite(configuredBitrate) && configuredBitrate > 0) {
+    bitrateBps = Math.round(configuredBitrate * 1000)
+  }
+  startRenderLoop()
+  resetRecording()
+  stream = canvasRef.value?.captureStream(captureFps) ?? null
+  if (!stream) {
+    cleanupRecording()
+    return
+  }
+  recorder = new MediaRecorder(stream, {
+    mimeType: 'video/webm',
+    videoBitsPerSecond: bitrateBps,
+  })
+  recorder.ondataavailable = (event) => {
+    if (!event.data.size) return
+    const now = Date.now()
+    let durationMs = Math.max(0, now - lastChunkAt)
+    if (typeof event.timecode === 'number') {
+      durationMs =
+        lastChunkTimecode === null
+          ? 0
+          : Math.max(0, event.timecode - lastChunkTimecode)
+      lastChunkTimecode = event.timecode
+    }
+    lastChunkAt = now
+    chunks.push({ blob: event.data, durationMs })
+  }
+  recorder.start()
+  flushTimer = window.setInterval(() => {
+    if (recorder?.state === 'recording') recorder.requestData()
+  }, 1000)
+  postRecordState(true)
+}
+
+async function stopRecording(data: Record<string, unknown>): Promise<void> {
+  const correlationId = String(data.correlationId ?? '')
+  if (!recorder || recorder.state === 'inactive' || !correlationId) return
+  postRecordState(false, true)
+  recorder.requestData()
+  await new Promise((resolve) => window.setTimeout(resolve, 120))
+  recorder.stop()
+  await new Promise((resolve) => window.setTimeout(resolve, 120))
+  if (flushTimer !== undefined) window.clearInterval(flushTimer)
+  flushTimer = undefined
+  stopTracks()
+  recorder = null
+  stopRenderLoop()
+  const durationMs = chunks.reduce((sum, entry) => sum + entry.durationMs, 0)
+  let blob = new Blob(
+    chunks.map((entry) => entry.blob),
+    { type: 'video/webm' },
+  )
+  blob = await (
+    fixWebmDuration as unknown as (
+      source: Blob,
+      duration: number,
+      options: { logger: boolean },
+    ) => Promise<Blob>
+  )(blob, durationMs, { logger: false })
+  resetRecording()
+  pendingVideos.set(correlationId, {
+    blob,
+    fileName: `camera-${correlationId}.webm`,
+  })
+  await nuiCall('media:requestUpload', {
+    correlationId,
+    mediaType: 'video',
+  })
+}
+
+async function renderFrames(view: GameView, count: number): Promise<void> {
+  for (let index = 0; index < count; index += 1) {
+    await new Promise<void>((resolve) => {
+      window.requestAnimationFrame(() => {
+        view.render()
+        resolve()
+      })
+    })
+  }
+}
+
+async function capturePhotoBlob(ready: UploadReady): Promise<Blob> {
+  const { height, width } = captureDimensions()
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  const view = createGameView(canvas, { preserveDrawingBuffer: true })
+  try {
+    view.resize(width, height, window.innerWidth, window.innerHeight, zoom)
+    await renderFrames(view, 3)
+    const output = document.createElement('canvas')
+    output.width = width
+    output.height = height
+    const context = output.getContext('2d')
+    if (!context) throw new Error('capture_failed')
+    context.drawImage(canvas, 0, 0)
+    const encoding = ready.photo?.Encoding ?? 'jpg'
+    const mimeType =
+      encoding === 'png'
+        ? 'image/png'
+        : encoding === 'webp'
+          ? 'image/webp'
+          : 'image/jpeg'
+    return await new Promise<Blob>((resolve, reject) => {
+      output.toBlob(
+        (blob) => (blob ? resolve(blob) : reject(new Error('capture_failed'))),
+        mimeType,
+        ready.photo?.Quality ?? 0.95,
+      )
+    })
+  } finally {
+    view.dispose()
+  }
+}
+
+async function failUpload(requestId: string, error: string): Promise<void> {
+  await nuiCall('media:failUpload', { error, requestId })
+}
+
+async function uploadReady(ready: UploadReady): Promise<void> {
+  let blob: Blob
+  let fileName: string
+  try {
+    if (ready.mediaType === 'video') {
+      const pending = pendingVideos.get(ready.correlationId)
+      if (!pending) throw new Error('capture_failed')
+      pendingVideos.delete(ready.correlationId)
+      blob = pending.blob
+      fileName = pending.fileName
+    } else {
+      blob = await capturePhotoBlob(ready)
+      fileName = `camera-${ready.correlationId}.${ready.photo?.Encoding ?? 'jpg'}`
+    }
+  } catch {
+    await failUpload(ready.requestId, 'capture_failed')
+    return
+  }
+
+  const form = new FormData()
+  form.append('file', blob, fileName)
+  form.append(
+    'metadata',
+    JSON.stringify({ captureToken: ready.captureToken, source: 'sky_phone' }),
+  )
+  const controller = new AbortController()
+  const timeout = window.setTimeout(
+    () => controller.abort(),
+    ready.uploadTimeoutMs ?? 25000,
+  )
+  try {
+    const response = await fetch(ready.presignedUrl, {
+      body: form,
+      method: 'POST',
+      signal: controller.signal,
+    })
+    const text = await response.text()
+    const body = JSON.parse(text) as {
+      data?: { id?: string; url?: string }
+      id?: string
+      url?: string
+    }
+    const uploaded = body.data ?? body
+    if (!response.ok || !uploaded.id || !uploaded.url) {
+      throw new Error('upload_failed')
+    }
+    await nuiCall('media:completeUpload', {
+      remoteId: uploaded.id,
+      requestId: ready.requestId,
+      url: uploaded.url,
+    })
+  } catch (error) {
+    await failUpload(
+      ready.requestId,
+      error instanceof DOMException && error.name === 'AbortError'
+        ? 'upload_timeout'
+        : 'upload_failed',
+    )
+  } finally {
+    window.clearTimeout(timeout)
+  }
+}
+
+function onMessage(event: MessageEvent): void {
+  const message = event.data as {
+    data?: Record<string, unknown>
+    type?: string
+  }
+  if (message.type === 'camera:recordStart') {
+    startRecording(message.data ?? {})
+  } else if (message.type === 'camera:recordStop') {
+    void stopRecording(message.data ?? {})
+  } else if (message.type === 'camera:recordCancel') {
+    cleanupRecording()
+  } else if (message.type === 'camera:orientation') {
+    landscape = message.data?.landscape === true
+    if (gameView && !gameView.isLost()) {
+      const dimensions = captureDimensions()
+      gameView.resize(
+        dimensions.width,
+        dimensions.height,
+        window.innerWidth,
+        window.innerHeight,
+        zoom,
+      )
+    }
+  } else if (message.type === 'camera:zoom') {
+    const nextZoom = Number(message.data?.zoom)
+    if (![0.5, 1, 2, 3].includes(nextZoom)) return
+    zoom = nextZoom
+    if (gameView && !gameView.isLost()) {
+      const dimensions = captureDimensions()
+      gameView.resize(
+        dimensions.width,
+        dimensions.height,
+        window.innerWidth,
+        window.innerHeight,
+        zoom,
+      )
+    }
+  } else if (message.type === 'media:uploadReady') {
+    void uploadReady(message.data as UploadReady)
+  }
+}
+
+onMounted(() => window.addEventListener('message', onMessage))
+
+onBeforeUnmount(() => {
+  window.removeEventListener('message', onMessage)
+  cleanupRecording()
+  pendingVideos.clear()
+  gameView?.dispose()
+  gameView = null
+})
+</script>
+
+<template>
+  <canvas
+    ref="canvasRef"
+    class="phone-media-capture"
+    aria-hidden="true"
+  ></canvas>
+</template>
+
+<style scoped>
+.phone-media-capture {
+  position: fixed;
+  width: 0;
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+</style>

frontend/src/components/SpringboardWidgets.vue

@@ -16,11 +16,15 @@ import {
 import { computed, onBeforeUnmount, onMounted, ref, type Component } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { useAccountStore } from '@/stores/account'
+import { useCalendarStore } from '@/stores/calendar'
 import { usePhoneStore } from '@/stores/phone'
 import { useWeatherStore } from '@/stores/weather'
 import type { WeatherConditionId } from '@/types/weather'
 
 const phone = usePhoneStore()
+const account = useAccountStore()
+const calendar = useCalendarStore()
 const weather = useWeatherStore()
 const router = useRouter()
 const now = ref(new Date())
@@ -57,15 +61,46 @@ const date = computed(() =>
   }).format(now.value),
 )
 const day = computed(() => now.value.getDate())
+const nextCalendarEvent = computed(() =>
+  calendar.events
+    .filter((event) => event.endsAt >= now.value.getTime())
+    .sort((left, right) => left.startsAt - right.startsAt)
+    .at(0),
+)
+const calendarEventLabel = computed(
+  () =>
+    nextCalendarEvent.value?.title ?? phone.t('Home.widgets.calendar.event'),
+)
+
+async function loadCalendarDay(): Promise<void> {
+  if (!account.email) {
+    calendar.events = []
+    return
+  }
+
+  const start = new Date(now.value)
+  start.setHours(0, 0, 0, 0)
+  const end = new Date(start)
+  end.setDate(end.getDate() + 1)
+  await calendar.load(start.getTime(), end.getTime())
+}
 
 function openWeather(): void {
   phone.setLaunchOrigin(null)
   void router.push('/apps/weather')
 }
 
+function openCalendar(): void {
+  phone.setLaunchOrigin(null)
+  void router.push('/apps/calendar')
+}
+
 onMounted(() => {
+  void loadCalendarDay()
   intervalId = window.setInterval(() => {
+    const previousDay = now.value.toDateString()
     now.value = new Date()
+    if (now.value.toDateString() !== previousDay) void loadCalendarDay()
   }, 60_000)
 })
 
@@ -91,11 +126,16 @@ onBeforeUnmount(() => {
     </button>
 
     <div class="widget-row">
-      <article class="widget widget--calendar">
+      <button
+        type="button"
+        class="widget widget--calendar"
+        :aria-label="phone.t('Apps.calendar.name')"
+        @click="openCalendar"
+      >
         <span>{{ date }}</span>
         <strong>{{ day }}</strong>
-        <small>{{ phone.t('Home.widgets.calendar.event') }}</small>
-      </article>
+        <small>{{ calendarEventLabel }}</small>
+      </button>
       <article class="widget widget--battery">
         <BatteryCharging :size="25" aria-hidden="true" />
         <strong>78%</strong>

frontend/src/components/citymarkt/CityMarktGallery.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+import { ChevronLeft, ChevronRight, ImageOff } from 'lucide-vue-next'
+import { ref, watch } from 'vue'
+
+import type { MarketplaceImage } from '@/types/marketplace'
+
+const props = defineProps<{
+  emptyBody: string
+  emptyTitle: string
+  images: MarketplaceImage[]
+  nextLabel: string
+  photoLabel: string
+  previousLabel: string
+}>()
+
+const activeIndex = ref(0)
+
+watch(
+  () => props.images,
+  () => (activeIndex.value = 0),
+  { deep: true },
+)
+
+function move(direction: number): void {
+  if (props.images.length < 2) return
+  activeIndex.value =
+    (activeIndex.value + direction + props.images.length) % props.images.length
+}
+</script>
+
+<template>
+  <div class="citymarkt-gallery" :class="{ 'citymarkt-gallery--empty': !images.length }">
+    <div
+      v-if="images.length"
+      class="citymarkt-gallery__image"
+      :style="{ background: images[activeIndex]?.gradient }"
+      role="img"
+      :aria-label="`${photoLabel} ${activeIndex + 1}`"
+    />
+    <div v-else class="citymarkt-gallery__empty">
+      <span><ImageOff :size="27" /></span>
+      <strong>{{ emptyTitle }}</strong>
+      <small>{{ emptyBody }}</small>
+    </div>
+
+    <template v-if="images.length > 1">
+      <button
+        class="citymarkt-gallery__arrow citymarkt-gallery__arrow--left"
+        type="button"
+        :aria-label="previousLabel"
+        @click.stop="move(-1)"
+      >
+        <ChevronLeft :size="19" />
+      </button>
+      <button
+        class="citymarkt-gallery__arrow citymarkt-gallery__arrow--right"
+        type="button"
+        :aria-label="nextLabel"
+        @click.stop="move(1)"
+      >
+        <ChevronRight :size="19" />
+      </button>
+      <div class="citymarkt-gallery__dots" aria-hidden="true">
+        <i
+          v-for="(_, index) in images"
+          :key="index"
+          :class="{ active: index === activeIndex }"
+        />
+      </div>
+    </template>
+    <span v-if="images.length" class="citymarkt-gallery__count">
+      {{ activeIndex + 1 }} / {{ images.length }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+.citymarkt-gallery{position:relative;overflow:hidden;background:#252724}.citymarkt-gallery__image{position:absolute;inset:0;background-position:center!important;background-size:cover!important;transition:background .2s ease}.citymarkt-gallery__empty{position:absolute;inset:0;padding:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted)}.citymarkt-gallery__empty span{width:48px;height:48px;margin-bottom:8px;border:1px solid #ffffff12;border-radius:16px;display:grid;place-items:center;background:#ffffff08;color:var(--yellow)}.citymarkt-gallery__empty strong{font-size:12px}.citymarkt-gallery__empty small{max-width:190px;margin-top:3px;font-size:8px;line-height:1.35}.citymarkt-gallery__arrow{position:absolute;z-index:2;top:50%;width:31px;height:31px;padding:0;border:1px solid #ffffff24;border-radius:50%;display:grid;place-items:center;background:#11120fba;color:#fff;box-shadow:0 4px 13px #0005;transform:translateY(-50%)}.citymarkt-gallery__arrow--left{left:9px}.citymarkt-gallery__arrow--right{right:9px}.citymarkt-gallery__dots{position:absolute;z-index:2;right:52px;bottom:12px;left:52px;display:flex;justify-content:center;gap:4px}.citymarkt-gallery__dots i{width:4px;height:4px;border-radius:50%;background:#ffffff66;box-shadow:0 1px 3px #0008;transition:width .18s ease,background .18s ease}.citymarkt-gallery__dots i.active{width:11px;border-radius:4px;background:var(--yellow)}.citymarkt-gallery__count{position:absolute;z-index:2;right:9px;bottom:8px;padding:4px 7px;border-radius:8px;background:#11120fc7;color:#fff;font-size:8px;font-weight:800}:global(.citymarkt--light) .citymarkt-gallery--empty{background:#e9eae5}:global(.citymarkt--light) .citymarkt-gallery__empty span{border-color:#00000012;background:#00000008}
+.citymarkt-gallery__empty strong{font-size:14px}
+.citymarkt-gallery__empty small{margin-top:4px;font-size:11.5px;line-height:1.4}
+.citymarkt-gallery__count{font-size:10.5px}
+</style>

frontend/src/components/citymarkt/CityMarktOfferCard.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { BadgeDollarSign, Check, RefreshCw, X } from 'lucide-vue-next'
+import { computed } from 'vue'
+
+import { usePhoneStore } from '@/stores/phone'
+import type { MarketplaceOffer } from '@/types/marketplace'
+
+const props = defineProps<{
+  accountId: number
+  actionable: boolean
+  isCounter: boolean
+  offer: MarketplaceOffer
+}>()
+
+defineEmits<{
+  accept: []
+  counter: []
+  reject: []
+}>()
+
+const phone = usePhoneStore()
+const isOwn = computed(() => props.offer.proposer_account_id === props.accountId)
+const statusKey = computed(() =>
+  props.offer.status === 'rejected' ? 'declined' : props.offer.status,
+)
+const formattedAmount = computed(() =>
+  phone.t('Apps.citymarkt.money', {
+    price: new Intl.NumberFormat(phone.lang, { maximumFractionDigits: 0 }).format(
+      Number(props.offer.amount),
+    ),
+  }),
+)
+</script>
+
+<template>
+  <article
+    class="citymarkt-offer"
+    :class="[`citymarkt-offer--${offer.status}`, { 'citymarkt-offer--own': isOwn }]"
+  >
+    <header>
+      <span><BadgeDollarSign :size="16" /></span>
+      <div>
+        <small>{{ phone.t(isCounter ? 'Apps.citymarkt.counterOffer' : 'Apps.citymarkt.offer') }}</small>
+        <strong>{{ formattedAmount }}</strong>
+      </div>
+      <i>{{ phone.t(`Apps.citymarkt.offerStatus.${statusKey}`) }}</i>
+    </header>
+    <p>
+      {{ phone.t(isOwn ? 'Apps.citymarkt.offeredByYou' : 'Apps.citymarkt.offeredToYou') }}
+    </p>
+    <div v-if="actionable" class="citymarkt-offer__actions">
+      <button type="button" class="accept" @click="$emit('accept')">
+        <Check :size="14" />{{ phone.t('Apps.citymarkt.acceptOffer') }}
+      </button>
+      <button type="button" @click="$emit('counter')">
+        <RefreshCw :size="13" />{{ phone.t('Apps.citymarkt.negotiateOffer') }}
+      </button>
+      <button type="button" class="reject" @click="$emit('reject')">
+        <X :size="14" />{{ phone.t('Apps.citymarkt.declineOffer') }}
+      </button>
+    </div>
+  </article>
+</template>
+
+<style scoped>
+.citymarkt-offer{width:92%;padding:11px;border:1px solid #ffc92842;border-radius:14px;align-self:flex-start;background:linear-gradient(145deg,#332d19,var(--panel));box-shadow:0 7px 18px #0003}.citymarkt-offer--own{align-self:flex-end}.citymarkt-offer header{display:flex;align-items:center;gap:8px}.citymarkt-offer header>span{width:32px;height:32px;flex:none;border-radius:10px;display:grid;place-items:center;background:var(--yellow);color:#171816}.citymarkt-offer header>div{min-width:0;flex:1}.citymarkt-offer header small,.citymarkt-offer header strong{display:block}.citymarkt-offer header small{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.02em;text-transform:uppercase}.citymarkt-offer header strong{margin-top:1px;font-size:18px}.citymarkt-offer header i{padding:5px 7px;border-radius:7px;background:#ffc92817;color:var(--yellow);font-size:8px;font-style:normal;font-weight:900;text-transform:uppercase}.citymarkt-offer>p{margin:7px 0 0;color:var(--muted);font-size:9px;line-height:1.35}.citymarkt-offer--accepted{border-color:#54d68173;background:linear-gradient(145deg,#193526,var(--panel))}.citymarkt-offer--accepted header>span{background:#54d681}.citymarkt-offer--accepted header i{background:#54d6811c;color:#67e494}.citymarkt-offer--rejected,.citymarkt-offer--countered{border-color:#ffffff14;filter:saturate(.65)}.citymarkt-offer--rejected header>span,.citymarkt-offer--countered header>span{background:#555750;color:#ddd}.citymarkt-offer--rejected header i,.citymarkt-offer--countered header i{background:#ffffff0c;color:var(--muted)}.citymarkt-offer__actions{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px}.citymarkt-offer__actions button{min-height:35px;padding:7px 6px;border:1px solid #ffffff12;border-radius:10px;display:flex;align-items:center;justify-content:center;gap:4px;background:#ffffff09;color:inherit;font-size:9.5px;font-weight:850;line-height:1.1}.citymarkt-offer__actions button.accept{border:0;background:#54d681;color:#102319}.citymarkt-offer__actions button.reject{grid-column:1/-1;color:#ff8078}:global(.citymarkt--light) .citymarkt-offer{background:linear-gradient(145deg,#fff8d9,#fff);box-shadow:0 7px 18px #0001}:global(.citymarkt--light) .citymarkt-offer--accepted{background:linear-gradient(145deg,#e6faed,#fff)}
+.citymarkt-offer{padding:12px}.citymarkt-offer header>span{width:35px;height:35px}.citymarkt-offer header small{font-size:10.5px}.citymarkt-offer header strong{font-size:20px}.citymarkt-offer header i{padding:5px 8px;font-size:9.5px}.citymarkt-offer>p{margin-top:8px;font-size:11.5px}.citymarkt-offer__actions{margin-top:11px;gap:7px}.citymarkt-offer__actions button{min-height:40px;padding:8px;font-size:12px;font-weight:850;gap:5px}.citymarkt-offer__actions button svg{width:15px;height:15px}
+</style>

frontend/src/components/citymarkt/CityMarktSelect.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { Check, ChevronDown } from 'lucide-vue-next'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+
+type SelectOption = {
+  label: string
+  value: string
+}
+
+const props = defineProps<{
+  modelValue: string
+  options: SelectOption[]
+}>()
+
+const emit = defineEmits<{
+  change: [value: string]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const isOpen = ref(false)
+const highlightedIndex = ref(0)
+const selectedLabel = computed(
+  () => props.options.find((option) => option.value === props.modelValue)?.label ?? '',
+)
+
+function open(): void {
+  highlightedIndex.value = Math.max(
+    0,
+    props.options.findIndex((option) => option.value === props.modelValue),
+  )
+  isOpen.value = true
+}
+
+function select(value: string): void {
+  emit('change', value)
+  isOpen.value = false
+}
+
+function handleKeydown(event: KeyboardEvent): void {
+  if (event.key === 'Escape') {
+    isOpen.value = false
+    return
+  }
+  if (event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault()
+    if (!isOpen.value) open()
+    else select(props.options[highlightedIndex.value]?.value ?? props.modelValue)
+    return
+  }
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') return
+  event.preventDefault()
+  if (!isOpen.value) open()
+  const direction = event.key === 'ArrowDown' ? 1 : -1
+  highlightedIndex.value =
+    (highlightedIndex.value + direction + props.options.length) % props.options.length
+}
+
+function handleOutsidePointer(event: PointerEvent): void {
+  if (!root.value?.contains(event.target as Node)) isOpen.value = false
+}
+
+onMounted(() => window.addEventListener('pointerdown', handleOutsidePointer))
+onUnmounted(() => window.removeEventListener('pointerdown', handleOutsidePointer))
+</script>
+
+<template>
+  <div ref="root" class="citymarkt-select" @keydown="handleKeydown">
+    <button
+      class="citymarkt-select__trigger"
+      type="button"
+      aria-haspopup="listbox"
+      :aria-expanded="isOpen"
+      @click="isOpen ? (isOpen = false) : open()"
+    >
+      <span>{{ selectedLabel }}</span>
+      <ChevronDown :size="14" :class="{ open: isOpen }" />
+    </button>
+
+    <Transition name="citymarkt-select">
+      <div v-if="isOpen" class="citymarkt-select__menu" role="listbox">
+        <button
+          v-for="(option, index) in options"
+          :key="option.value"
+          type="button"
+          role="option"
+          :aria-selected="option.value === modelValue"
+          :class="{
+            highlighted: index === highlightedIndex,
+            selected: option.value === modelValue,
+          }"
+          @pointerenter="highlightedIndex = index"
+          @click="select(option.value)"
+        >
+          <span>{{ option.label }}</span>
+          <Check v-if="option.value === modelValue" :size="13" />
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.citymarkt-select{position:relative;min-width:0}.citymarkt-select__trigger{width:100%;height:36px;padding:0 10px;border:1px solid #ffffff0d;border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:6px;background:var(--panel);color:inherit;font-size:10px;text-align:left}.citymarkt-select__trigger span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.citymarkt-select__trigger svg{flex:none;color:var(--yellow);transition:transform .18s ease}.citymarkt-select__trigger svg.open{transform:rotate(180deg)}.citymarkt-select__menu{position:absolute;z-index:12;top:calc(100% + 5px);right:0;left:0;max-height:176px;padding:4px;border:1px solid #ffffff16;border-radius:11px;overflow-y:auto;background:#292a27;box-shadow:0 12px 28px #0009;scrollbar-width:none}:global(.citymarkt--light) .citymarkt-select__menu{border-color:#00000014;background:#fff;box-shadow:0 12px 28px #0003}.citymarkt-select__menu button{width:100%;min-height:31px;padding:6px 7px;border:0;border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:5px;background:none;color:var(--muted);font-size:10px;text-align:left}.citymarkt-select__menu button.highlighted{background:#ffffff0b;color:inherit}:global(.citymarkt--light) .citymarkt-select__menu button.highlighted{background:#0000000b}.citymarkt-select__menu button.selected{color:var(--yellow);font-weight:800}.citymarkt-select-enter-active,.citymarkt-select-leave-active{transition:opacity .15s ease,transform .15s ease}.citymarkt-select-enter-from,.citymarkt-select-leave-to{opacity:0;transform:translateY(-4px) scale(.98)}
+.citymarkt-select__trigger{height:40px;font-size:13px}
+.citymarkt-select__menu button{min-height:36px;padding:7px 8px;font-size:12px}
+</style>