Merge branch 'camera-and-gallery' into dev

# Conflicts: # frontend/package.json # frontend/pnpm-lock.yaml # frontend/src/views/apps/SettingsApp.vue # sky_phone/source/html/index.html
2026-09-04 17:23:25 +00:00 · 2026-08-06 18:44:46 +02:00
parent 26c4df9181 72349faf90
commit bff12258e8
39 changed files with 3579 additions and 978 deletions
@@ -11,6 +11,7 @@ import {
 import { useRoute, useRouter } from 'vue-router'

 import PhoneHomeIndicator from '@/components/PhoneHomeIndicator.vue'
+import PhoneMediaCapture from '@/components/PhoneMediaCapture.vue'
 import PhoneLockScreen from '@/components/PhoneLockScreen.vue'
 import PhoneNotifications from '@/components/PhoneNotifications.vue'
 import NotificationPhonePreview from '@/components/NotificationPhonePreview.vue'
@@ -23,7 +24,7 @@ import { useClockStore } from '@/stores/clock'
 import { useCallsStore } from '@/stores/calls'
 import { useAccountStore } from '@/stores/account'
 import { useMailStore } from '@/stores/mail'
-import { useMediaStore } from '@/stores/media'
+import { useAppStoreStore } from '@/stores/app-store'
 import { useNotesStore } from '@/stores/notes'
 import { useWeatherStore } from '@/stores/weather'
 import {
@@ -68,7 +69,7 @@ const account = useAccountStore()
 const clock = useClockStore()
 const calls = useCallsStore()
 const mail = useMailStore()
-const media = useMediaStore()
+const appStore = useAppStoreStore()
 const notes = useNotesStore()
 const weather = useWeatherStore()
 const notifications = useNotificationsStore()
@@ -92,7 +93,6 @@ const phoneFrameImage = computed(
 )
 let clockTicker: ReturnType<typeof setInterval> | undefined
 let unlockTimer: number | undefined
-let cameraTimer: number | undefined

 function getViewportScale(): number {
  const heightScale = window.innerHeight / REFERENCE_VIEWPORT_HEIGHT
@@ -106,7 +106,7 @@ function hydratePhone(payload: PhoneOpenPayload): void {
  account.hydrate(payload.account ?? null)
  notes.hydrate(payload.notes ?? [])
  clock.hydrate(payload.device?.data.alarms?.payload)
-  media.hydrate(payload.device?.data.media?.payload)
+  appStore.hydrate(payload.device?.data.apps?.payload)
  void mail.bootstrap(payload.account?.email ?? '')
  void calls.bootstrap()
 }
@@ -185,22 +185,21 @@ function updateViewportScale(): void {
  viewportScale.value = getViewportScale()
 }

-function unlockPhone(destination?: 'camera'): void {
+function unlockPhone(): void {
  if (!isLocked.value) return
  isUnlocking.value = true
  isLocked.value = false

-  if (destination === 'camera') {
-    cameraTimer = window.setTimeout(() => {
-      void router.push('/apps/camera')
-    }, 260)
-  }
-
  unlockTimer = window.setTimeout(() => {
    isUnlocking.value = false
  }, 720)
 }

+function unlockCamera(): void {
+  unlockPhone()
+  window.setTimeout(() => void router.push('/apps/camera'), 0)
+}
+
 onMounted(() => {
  window.addEventListener('message', onMessage)
  window.addEventListener('keydown', onKeydown)
@@ -286,7 +285,6 @@ watch(
  () => phone.isOpen,
  (isOpen) => {
    if (unlockTimer !== undefined) window.clearTimeout(unlockTimer)
-    if (cameraTimer !== undefined) window.clearTimeout(cameraTimer)
    if (!isOpen) {
      weather.stop()
      isLocked.value = false
@@ -305,7 +303,6 @@ onBeforeUnmount(() => {
  weather.stop()
  if (clockTicker) clearInterval(clockTicker)
  if (unlockTimer !== undefined) window.clearTimeout(unlockTimer)
-  if (cameraTimer !== undefined) window.clearTimeout(cameraTimer)
  window.removeEventListener('message', onMessage)
  window.removeEventListener('keydown', onKeydown)
  window.removeEventListener('resize', updateViewportScale)
@@ -314,6 +311,7 @@ onBeforeUnmount(() => {
 </script>

 <template>
+  <PhoneMediaCapture />
  <SimPhonePicker
    v-if="simPicker"
    :choices="simPicker.choices"
@@ -331,6 +329,7 @@ onBeforeUnmount(() => {
      class="phone-stage"
      :class="{
        'phone-stage--dev': isDevelopment,
+        'phone-stage--landscape': phone.cameraLandscape,
        'phone-stage--peek': notifications.isPeeking,
      }"
      :style="phoneResolutionStyle"
@@ -376,7 +375,11 @@ onBeforeUnmount(() => {
                </RouterView>
                <PhoneHomeIndicator v-if="!isLocked" />
                <Transition name="lock-screen">
-                  <PhoneLockScreen v-if="isLocked" @unlock="unlockPhone" />
+                  <PhoneLockScreen
+                    v-if="isLocked"
+                    @camera="unlockCamera"
+                    @unlock="unlockPhone"
+                  />
                </Transition>
                <PhoneNotifications
                  :notification="notifications.current"
@@ -251,6 +251,10 @@ button {
  height: 844px;
  zoom: var(--phone-zoom, 1);
 }
+.phone-stage--landscape .phone-resolution-wrapper--primary {
+  width: 844px;
+  height: 390px;
+}
 .phone-device-row {
  display: flex;
  align-items: flex-end;
@@ -282,6 +286,11 @@ button {
  box-shadow: none;
  filter: drop-shadow(0 40px 100px #0009);
 }
+.phone-stage--landscape .phone-resolution-wrapper--primary .phone-device {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%) rotate(-90deg);
+}
 .phone-device__frame {
  position: absolute;
  z-index: 100;
@@ -497,6 +506,18 @@ button {
  bottom: 25px;
  left: 0;
 }
+.lock-screen__shortcuts {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 48px;
+}
+.lock-screen__shortcut {
+  --color-primary: transparent;
+}
+.lock-screen__shortcut svg {
+  width: 21px;
+  height: 21px;
+}
 .lock-screen__swipe {
  width: 100%;
  margin-top: 18px;
@@ -1076,7 +1097,12 @@ button {
 .weather-app--rain .weather-app__backdrop,
 .weather-app--thunder .weather-app__backdrop {
  background:
-    repeating-linear-gradient(104deg, transparent 0 22px, #bcecff17 23px 25px, transparent 26px 49px),
+    repeating-linear-gradient(
+      104deg,
+      transparent 0 22px,
+      #bcecff17 23px 25px,
+      transparent 26px 49px
+    ),
    linear-gradient(165deg, #354b69 0%, #253952 46%, #101b2d 100%);
 }
 .weather-app--thunder .weather-app__backdrop {
@@ -1705,174 +1731,9 @@ button {
 .clock-timer {
  padding-bottom: 28px;
 }
-.camera-app {
-  padding: 45px 0 25px;
-  background: #080808;
-}
-.camera-viewfinder {
-  position: relative;
-  height: 510px;
-  overflow: hidden;
-  background:
-    radial-gradient(circle at 66% 25%, #ffc66c99, transparent 18%),
-    linear-gradient(145deg, #193641, #443354 55%, #0c1b20);
-}
-.camera-facing--front {
-  background:
-    radial-gradient(circle at 48% 32%, #ffb58f99, transparent 16%),
-    linear-gradient(145deg, #56394e, #172f48);
-}
-.camera-grid {
-  position: absolute;
-  inset: 0;
-  background:
-    linear-gradient(
-      transparent 33%,
-      #ffffff30 33.2%,
-      transparent 33.5%,
-      transparent 66%,
-      #ffffff30 66.2%,
-      transparent 66.5%
-    ),
-    linear-gradient(
-      90deg,
-      transparent 33%,
-      #ffffff30 33.2%,
-      transparent 33.5%,
-      transparent 66%,
-      #ffffff30 66.2%,
-      transparent 66.5%
-    );
-}
-.camera-flash {
-  position: absolute;
-  z-index: 3;
-  inset: 0;
-  background: white;
-  opacity: 0;
-  transition: opacity 0.12s;
-}
-.camera-flash.active {
-  opacity: 1;
-}
-.camera-zoom {
-  position: absolute;
-  bottom: 14px;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  gap: 7px;
-}
-.camera-zoom button {
-  width: 34px;
-  height: 34px;
-  border: 0;
-  border-radius: 50%;
-  background: #0009;
-  color: white;
-  font-size: 11px;
-}
-.camera-zoom button.active {
-  color: #ffcc00;
-}
-.camera-modes {
-  height: 35px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 18px;
-}
-.camera-modes button {
-  border: 0;
-  background: none;
-  color: white;
-  text-transform: uppercase;
-  font-size: 10px;
-}
-.camera-modes button.active {
-  color: #ffcc00;
-}
-.camera-controls {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  align-items: center;
-  text-align: center;
-}
-.camera-controls > button {
-  justify-self: center;
-  width: 43px;
-  height: 43px;
-  border: 0;
-  border-radius: 50%;
-  background: #29292b;
-  color: white;
-}
-.camera-controls .shutter {
-  width: 65px;
-  height: 65px;
-  border: 4px solid white;
-  background: #fff;
-  color: #111;
-  box-shadow: inset 0 0 0 3px #000;
-}
-.photos-app,
 .store-app {
  background: #000;
 }
-.photo-grid {
-  height: calc(100% - 115px);
-  overflow: auto;
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-auto-rows: 111px;
-  gap: 2px;
-  padding-bottom: 65px;
-}
-.photo-tile {
-  min-height: 100px;
-}
-.album-cards {
-  padding: 12px 17px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 14px;
-}
-.album-cards article {
-  display: flex;
-  flex-direction: column;
-}
-.album-cards .photo-tile {
-  height: 145px;
-  border-radius: 13px;
-}
-.album-cards small {
-  color: #888;
-}
-.album-cards .favorites {
-  background: linear-gradient(145deg, #ff4777, #7f42db);
-}
-.featured-photo {
-  padding: 12px 17px;
-}
-.featured-photo p {
-  text-transform: uppercase;
-  color: #aaa;
-  font-size: 12px;
-  font-weight: 700;
-}
-.featured-photo div {
-  height: 390px;
-  border-radius: 19px;
-  display: flex;
-  align-items: flex-end;
-  padding: 18px;
-}
-.featured-photo span {
-  font-size: 25px;
-  font-weight: 700;
-  text-shadow: 0 2px 8px #000;
-}
 .store-app {
  overflow-y: auto;
 }
@@ -1951,165 +1812,6 @@ button {
  font-weight: 400;
 }

-.reference-camera {
-  display: grid;
-  grid-template-rows: 83px minmax(0, 1fr) 190px;
-  padding: 0 0 24px;
-  background: #020202;
-}
-.camera-topbar {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  align-items: end;
-  padding: 45px 15px 11px;
-}
-.camera-topbar > div {
-  display: flex;
-  gap: 17px;
-}
-.camera-topbar > svg {
-  justify-self: end;
-}
-.camera-topbar button {
-  border: 0;
-  background: transparent;
-  color: inherit;
-}
-.camera-topbar .camera-chevron {
-  width: 34px;
-  height: 26px;
-  display: grid;
-  place-items: center;
-  border-radius: 20px;
-  background: #262629;
-}
-.reference-viewfinder {
-  position: relative;
-  min-height: 0;
-  overflow: hidden;
-  background:
-    radial-gradient(circle at 66% 21%, #ffd88baa, transparent 15%),
-    radial-gradient(circle at 45% 52%, #6d8ca5 0 6%, transparent 7%),
-    linear-gradient(150deg, #173542, #5b3e5b 56%, #13191c);
-}
-.reference-viewfinder::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    115deg,
-    transparent 45%,
-    #ffffff0f 46%,
-    transparent 48%
-  );
-}
-.focus-corner {
-  position: absolute;
-  z-index: 2;
-  width: 24px;
-  height: 24px;
-  border-color: white;
-}
-.focus-corner--tl {
-  top: 1px;
-  left: 1px;
-  border-top: 1px solid;
-  border-left: 1px solid;
-}
-.focus-corner--tr {
-  top: 1px;
-  right: 1px;
-  border-top: 1px solid;
-  border-right: 1px solid;
-}
-.focus-corner--bl {
-  bottom: 1px;
-  left: 1px;
-  border-bottom: 1px solid;
-  border-left: 1px solid;
-}
-.focus-corner--br {
-  right: 1px;
-  bottom: 1px;
-  border-right: 1px solid;
-  border-bottom: 1px solid;
-}
-.reference-viewfinder .camera-zoom {
-  z-index: 3;
-  bottom: 13px;
-}
-.reference-viewfinder .camera-zoom button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: #0008;
-  font-weight: 700;
-}
-.reference-viewfinder .camera-zoom small {
-  margin-left: 1px;
-  font-size: 8px;
-}
-.reference-camera-footer {
-  display: grid;
-  grid-template-rows: 43px 1fr;
-  background: #020202;
-}
-.camera-mode-strip {
-  display: flex;
-  align-items: center;
-  gap: 21px;
-  padding: 0 148px;
-  overflow: hidden;
-}
-.camera-mode-strip button {
-  flex: none;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: white;
-  font-size: 10px;
-  font-weight: 650;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-.camera-mode-strip button.active {
-  color: #ffd60a;
-}
-.camera-shutter-row {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  align-items: center;
-  padding: 0 31px 12px;
-}
-.camera-thumbnail {
-  width: 44px;
-  height: 44px;
-  border-radius: 4px;
-}
-.reference-shutter {
-  justify-self: center;
-  width: 62px;
-  height: 62px;
-  display: grid;
-  place-items: center;
-  border: 3px solid white;
-  border-radius: 50%;
-  background: white;
-  color: #111;
-  box-shadow: inset 0 0 0 3px #020202;
-}
-.reference-flip {
-  justify-self: end;
-  width: 42px;
-  height: 42px;
-  display: grid;
-  place-items: center;
-  border: 0;
-  border-radius: 50%;
-  background: #1c1c1e;
-  color: white;
-}
-
 .reference-tabbar {
  position: absolute;
  z-index: 6;
@@ -2160,169 +1862,6 @@ button {
  color: #000;
 }

-.reference-photos {
-  padding: 0 0 79px;
-  background: #020202;
-}
-.photos-library,
-.photos-scroll {
-  height: 100%;
-  overflow-y: auto;
-}
-.photos-floating-header {
-  position: sticky;
-  z-index: 3;
-  top: 0;
-  height: 95px;
-  display: flex;
-  align-items: flex-end;
-  gap: 8px;
-  padding: 47px 17px 14px;
-  background: linear-gradient(#000 55%, transparent);
-}
-.photos-floating-header > div {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-}
-.photos-floating-header strong {
-  font-size: 17px;
-}
-.photos-floating-header span {
-  font-size: 12px;
-  font-weight: 600;
-}
-.photos-floating-header button {
-  height: 27px;
-  padding: 0 12px;
-  border: 0;
-  border-radius: 18px;
-  background: #ffffff1d;
-  color: white;
-  font-size: 11px;
-  font-weight: 650;
-  backdrop-filter: blur(15px);
-  -webkit-backdrop-filter: blur(15px);
-}
-.photos-floating-header button:last-child {
-  width: 28px;
-  padding: 0;
-  border-radius: 50%;
-}
-.reference-photo-grid {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  gap: 2px;
-}
-.reference-photo-grid article {
-  aspect-ratio: 1;
-}
-.photos-count {
-  padding: 15px;
-  text-align: center;
-  font-size: 11px;
-}
-.photos-period {
-  position: sticky;
-  bottom: 5px;
-  width: max-content;
-  margin: 0 auto;
-  display: flex;
-  padding: 3px;
-  border-radius: 22px;
-  background: #303033aa;
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
-}
-.photos-period button {
-  padding: 5px 12px;
-  border: 0;
-  border-radius: 18px;
-  background: transparent;
-  color: #ddd;
-  font-size: 10px;
-  font-weight: 650;
-}
-.photos-period button.active {
-  background: #ffffff25;
-  color: white;
-}
-.photos-scroll {
-  padding: 82px 16px 20px;
-}
-.photos-scroll > h1 {
-  margin: 0 0 28px;
-  font-size: 34px;
-}
-.photos-section-title {
-  margin-top: 22px;
-  padding-top: 13px;
-  display: flex;
-  align-items: end;
-  border-top: 1px solid #ffffff1b;
-}
-.photos-section-title h2 {
-  flex: 1;
-  margin: 0;
-  font-size: 22px;
-}
-.photos-section-title button {
-  border: 0;
-  background: transparent;
-  color: #0a84ff;
-}
-.memory-card {
-  position: relative;
-  height: 410px;
-  margin-top: 12px;
-  padding: 16px;
-  display: flex;
-  flex-direction: column;
-  border-radius: 17px;
-  box-shadow: inset 0 -160px 100px #0008;
-}
-.memory-card > svg {
-  margin-left: auto;
-}
-.memory-card > div {
-  margin-top: auto;
-  display: flex;
-  flex-direction: column;
-}
-.memory-card strong {
-  font-size: 26px;
-}
-.memory-card span {
-  font-size: 11px;
-  letter-spacing: 2px;
-  text-transform: uppercase;
-}
-.featured-row {
-  display: flex;
-  gap: 9px;
-  margin-top: 12px;
-  overflow-x: auto;
-}
-.featured-row article {
-  width: 88%;
-  flex: none;
-  display: flex;
-  flex-direction: column;
-}
-.featured-row article > div {
-  aspect-ratio: 1;
-  border-radius: 10px;
-}
-.featured-row article span {
-  color: #777;
-  font-size: 12px;
-}
-.reference-photos .photo-grid {
-  height: auto;
-  margin-top: 13px;
-  padding-bottom: 10px;
-}
-
 .reference-store {
  padding: 0 0 79px;
  background: #0e0e0e;
@@ -2476,12 +2015,6 @@ button {
 *::-webkit-scrollbar {
  display: none;
 }
-.camera-mode-strip {
-  padding: 0;
-}
-.camera-mode-strip button:first-child {
-  margin-left: -205px;
-}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
@@ -32,6 +32,8 @@ const notificationBadgeColors = {
 }

 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 +66,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">
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kLink, kNavbar } from 'konsta/vue'
+import { kFab } from 'konsta/vue'
 import {
  BatteryMedium,
  Camera,
@@ -11,9 +11,11 @@ import {
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'

 import { usePhoneStore } from '@/stores/phone'
+import { nuiCall } from '@/utils/nui'

 const emit = defineEmits<{
-  unlock: [destination?: 'camera']
+  camera: []
+  unlock: []
 }>()

 const phone = usePhoneStore()
@@ -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,38 +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')"
-            @click="emit('unlock', '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>
@@ -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>
@@ -1,13 +1,15 @@
 import { describe, expect, it } from 'vitest'
-import { PHONE_APPS } from './apps'
+import { isPhoneAppId, PHONE_APPS } from './apps'
 describe('app registry', () => {
  it('has unique ids and routes with the reference dock order', () => {
    expect(new Set(PHONE_APPS.map((app) => app.id)).size).toBe(
      PHONE_APPS.length,
    )
-    expect(PHONE_APPS.every((app) => app.route === `/apps/${app.id}`)).toBe(
-      true,
-    )
+    expect(
+      PHONE_APPS.every(
+        (app) => app.route === null || app.route === `/apps/${app.id}`,
+      ),
+    ).toBe(true)
    expect(PHONE_APPS.every((app) => app.iconImage.endsWith('.webp'))).toBe(
      true,
    )
@@ -26,6 +28,15 @@ describe('app registry', () => {
      labelKey: 'Apps.weather.name',
      route: '/apps/weather',
    })
+    expect(PHONE_APPS.find((app) => app.id === 'camera')).toMatchObject({
+      route: '/apps/camera',
+    })
+    expect(PHONE_APPS.find((app) => app.id === 'photos')).toMatchObject({
+      route: '/apps/photos',
+    })
+    expect(isPhoneAppId('camera')).toBe(true)
+    expect(isPhoneAppId('photos')).toBe(true)
+    expect(isPhoneAppId('clock')).toBe(true)
    expect(
      PHONE_APPS.filter((app) => app.dockOrder !== null)
        .sort((a, b) => (a.dockOrder ?? 0) - (b.dockOrder ?? 0))
@@ -24,7 +24,11 @@ import photosIcon from '@/assets/img/app-icons/gallery.webp'
 import phoneIcon from '@/assets/img/app-icons/phone.webp'
 import settingsIcon from '@/assets/img/app-icons/settings.webp'
 import weatherIcon from '@/assets/img/app-icons/weather.webp'
-import type { PhoneAppDefinition, PhoneAppId } from '@/types/apps'
+import type {
+  LaunchablePhoneAppDefinition,
+  LaunchablePhoneAppId,
+  PhoneAppDefinition,
+} from '@/types/apps'

 export const PHONE_APPS: PhoneAppDefinition[] = [
  {
@@ -133,7 +137,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
  },
  {
    component: markRaw(
-      defineAsyncComponent(() => import('@/views/apps/PhotosApp.vue')),
+      defineAsyncComponent(() => import('@/views/apps/GalleryApp.vue')),
    ),
    dockOrder: null,
    gridOrder: 7,
@@ -181,6 +185,13 @@ export function getPhoneApp(
  return PHONE_APPS.find((app) => app.id === appId)
 }

-export function isPhoneAppId(value: string): value is PhoneAppId {
-  return PHONE_APP_IDS.includes(value as PhoneAppId)
+export function isPhoneAppId(value: string): value is LaunchablePhoneAppId {
+  const app = getPhoneApp(value)
+  return !!app && isLaunchablePhoneApp(app)
+}
+
+export function isLaunchablePhoneApp(
+  app: PhoneAppDefinition,
+): app is LaunchablePhoneAppDefinition {
+  return app.component !== null && app.route !== null
 }
@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+
+import { usePhoneStore } from '@/stores/phone'
+
+export const useAppStoreStore = defineStore('app-store', {
+  state: () => ({
+    claimedApps: [] as string[],
+  }),
+  actions: {
+    claimApp(id: string): void {
+      if (!this.claimedApps.includes(id)) {
+        this.claimedApps.push(id)
+        this.persist()
+      }
+    },
+    hydrate(payload: unknown): void {
+      const data = payload as { claimedApps?: unknown } | null
+      this.claimedApps = Array.isArray(data?.claimedApps)
+        ? data.claimedApps.filter((id): id is string => typeof id === 'string')
+        : []
+    },
+    persist(): void {
+      usePhoneStore().saveDeviceNamespace('apps', {
+        claimedApps: this.claimedApps,
+      })
+    },
+  },
+})
@@ -1,89 +0,0 @@
-import { defineStore } from 'pinia'
-
-import { usePhoneStore } from '@/stores/phone'
-
-export type PhonePhoto = {
-  capturedAt: number
-  gradient: string
-  id: string
-  titleKey: string
-}
-
-const samplePhotos: PhonePhoto[] = [
-  {
-    capturedAt: Date.now() - 86_400_000,
-    gradient: 'linear-gradient(145deg, #ff9a62, #5f2c82 58%, #141e30)',
-    id: 'sunset-drive',
-    titleKey: 'Apps.photos.samples.sunset',
-  },
-  {
-    capturedAt: Date.now() - 172_800_000,
-    gradient: 'linear-gradient(160deg, #67d5b5, #26648e 55%, #0b132b)',
-    id: 'ocean-air',
-    titleKey: 'Apps.photos.samples.ocean',
-  },
-  {
-    capturedAt: Date.now() - 259_200_000,
-    gradient: 'linear-gradient(135deg, #fbc2eb, #a6c1ee 48%, #302b63)',
-    id: 'city-lights',
-    titleKey: 'Apps.photos.samples.city',
-  },
-  {
-    capturedAt: Date.now() - 345_600_000,
-    gradient: 'linear-gradient(150deg, #f6d365, #fda085 45%, #512b58)',
-    id: 'desert-road',
-    titleKey: 'Apps.photos.samples.desert',
-  },
-]
-
-export const useMediaStore = defineStore('media', {
-  state: () => ({
-    cameraFacing: 'rear' as 'front' | 'rear',
-    cameraMode: 'photo' as 'photo' | 'portrait' | 'video',
-    cameraZoom: 1,
-    captures: [] as PhonePhoto[],
-    claimedApps: [] as string[],
-  }),
-  getters: {
-    photos: (state): PhonePhoto[] => [...state.captures, ...samplePhotos],
-  },
-  actions: {
-    capture(): void {
-      const gradients = [
-        'linear-gradient(145deg, #ff6b6b, #845ec2 52%, #0f2027)',
-        'linear-gradient(150deg, #00c9a7, #4d8076 46%, #1f3a5f)',
-        'linear-gradient(135deg, #ffc75f, #f96d80 48%, #4b4453)',
-      ]
-      const captureNumber = this.captures.length
-      this.captures.unshift({
-        capturedAt: Date.now(),
-        gradient: gradients[captureNumber % gradients.length],
-        id: `capture-${Date.now()}`,
-        titleKey: 'Apps.photos.samples.capture',
-      })
-      this.persist()
-    },
-    claimApp(id: string): void {
-      if (!this.claimedApps.includes(id)) {
-        this.claimedApps.push(id)
-        this.persist()
-      }
-    },
-    hydrate(payload: unknown): void {
-      const data = payload as Partial<{
-        captures: PhonePhoto[]
-        claimedApps: string[]
-      }> | null
-      this.captures = Array.isArray(data?.captures) ? data.captures : []
-      this.claimedApps = Array.isArray(data?.claimedApps)
-        ? data.claimedApps.filter((id): id is string => typeof id === 'string')
-        : []
-    },
-    persist(): void {
-      usePhoneStore().saveDeviceNamespace('media', {
-        captures: this.captures,
-        claimedApps: this.claimedApps,
-      })
-    },
-  },
-})
@@ -2,7 +2,7 @@ import { computed, ref } from 'vue'
 import { defineStore } from 'pinia'

 import { usePhoneStore } from '@/stores/phone'
-import type { PhoneAppId } from '@/types/apps'
+import type { LaunchablePhoneAppId } from '@/types/apps'
 import type { PhonePreferencesV1 } from '@/utils/preferences'
 import { playPhoneTone, type PhoneToneId } from '@/utils/tones'

@@ -13,7 +13,7 @@ export type PhoneNotificationDevice = {
 }

 export type PhoneNotificationInput = {
-  appId: PhoneAppId
+  appId: LaunchablePhoneAppId
  critical?: boolean
  device?: PhoneNotificationDevice
  persistent?: boolean
@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'

-import type { AppLaunchOrigin, PhoneAppId } from '@/types/apps'
+import type { AppLaunchOrigin, LaunchablePhoneAppId } from '@/types/apps'
 import type { DeviceBootstrap, PhoneDevice } from '@/types/device'
 import { clampPage } from '@/utils/pages'
 import { nuiCall } from '@/utils/nui'
@@ -184,18 +184,39 @@ const defaultLocales: LocaleTree = {
    },
    camera: {
      name: 'Camera',
-      shutter: 'Take photo',
+      flash: 'Flash',
      flip: 'Flip camera',
-      flash: 'Toggle flash',
-      controls: 'Camera controls',
-      modes: {
-        timelapse: 'Timelapse',
-        slowMo: 'Slow-Mo',
-        cinematic: 'Cinematic',
-        video: 'Video',
-        photo: 'Photo',
-        portrait: 'Portrait',
-        pano: 'Pano',
+      landscape: 'Switch to landscape',
+      portrait: 'Switch to portrait',
+      photo: 'Photo',
+      video: 'Video',
+      focusHelp: 'Space for movement',
+      returnHelp: 'Space to return',
+      uploading: '{count} uploading',
+      saving: 'Saving video...',
+      openGallery: 'Open Gallery',
+      takePhoto: 'Take photo',
+      startRecording: 'Start recording',
+      stopRecording: 'Stop recording',
+      saved: 'Saved to Gallery.',
+      zoom: 'Set camera zoom to {zoom}',
+      errors: {
+        cancelled: 'Capture cancelled.',
+        capture_failed: 'Unable to capture the game view.',
+        invalid_media_type: 'The uploaded media type is invalid.',
+        invalid_upload: 'The upload could not be verified.',
+        invalid_upload_token: 'The upload session is no longer valid.',
+        missing_config: 'Camera uploads are not configured.',
+        not_found: 'The media item no longer exists.',
+        operation_in_progress:
+          'Another media operation is already in progress.',
+        owner_changed: 'The active phone account changed during upload.',
+        rate_limited: 'Too many media actions. Try again shortly.',
+        request_failed: 'The camera request failed.',
+        request_timeout: 'The media service timed out.',
+        unsupported: 'Video recording is not supported.',
+        upload_failed: 'The media upload failed.',
+        upload_timeout: 'The media upload timed out.',
      },
    },
    clock: {
@@ -372,38 +393,40 @@ const defaultLocales: LocaleTree = {
      deleteNote: 'Delete note',
    },
    photos: {
-      name: 'Photos',
-      searchPlaceholder: 'Photos, people, places...',
-      recents: 'Recents',
-      favorites: 'Favorites',
-      items: 'items',
-      memories: 'Memories',
-      featured: 'City colors',
-      dateRange: '19 Apr–7 May 2024',
-      place: 'Los Santos & more',
-      select: 'Select',
-      count: '3,042 Photos, 125 Videos',
-      years: 'Years',
-      months: 'Months',
-      days: 'Days',
-      allPhotos: 'All Photos',
-      seeAll: 'See All',
-      onThisDay: 'On This Day',
-      trip: 'MAR 2024 TRIP',
-      featuredPhotos: 'Featured Photos',
-      featuredDate: '30 Mar 2024',
-      tabs: {
-        library: 'Library',
-        forYou: 'For You',
-        albums: 'Albums',
-        search: 'Search',
-      },
-      samples: {
-        sunset: 'Sunset drive',
-        ocean: 'Ocean air',
-        city: 'City lights',
-        desert: 'Desert road',
-        capture: 'Camera capture',
+      name: 'Gallery',
+      count: '{count} items',
+      loading: 'Loading Gallery...',
+      emptyTitle: 'No Photos or Videos',
+      emptyBody: 'Captures from Camera will appear here.',
+      photo: 'Photo',
+      video: 'Video',
+      photoAlt: 'Gallery photo',
+      videoAlt: 'Gallery video',
+      delete: 'Delete media',
+      deleteTitle: 'Delete Media?',
+      deleteBody: 'This photo or video will be permanently deleted.',
+      deleted: 'Media deleted.',
+      zoomIn: 'Zoom in',
+      zoomOut: 'Zoom out',
+      resetZoom: 'Reset zoom',
+      filters: { all: 'All', photos: 'Photos', videos: 'Videos' },
+      errors: {
+        cancelled: 'The media action was cancelled.',
+        capture_failed: 'Unable to capture the game view.',
+        invalid_media_type: 'The media type is invalid.',
+        invalid_upload: 'The upload could not be verified.',
+        invalid_upload_token: 'The upload session is no longer valid.',
+        missing_config: 'Gallery uploads are not configured.',
+        not_found: 'The media item no longer exists.',
+        operation_in_progress:
+          'Another media operation is already in progress.',
+        owner_changed: 'The active phone account changed.',
+        rate_limited: 'Too many media actions. Try again shortly.',
+        request_failed: 'The Gallery request failed.',
+        request_timeout: 'The media service timed out.',
+        unsupported: 'This media format is not supported.',
+        upload_failed: 'The media upload failed.',
+        upload_timeout: 'The media upload timed out.',
      },
    },
    settings: {
@@ -582,6 +605,7 @@ function getByPath(source: LocaleTree, path: string): unknown {

 export const usePhoneStore = defineStore('phone', {
  state: () => ({
+    cameraLandscape: false,
    currentPage: 1,
    device: null as PhoneDevice | null,
    deviceRevisions: {} as Record<string, number>,
@@ -601,6 +625,7 @@ export const usePhoneStore = defineStore('phone', {
  },
  actions: {
    close(): void {
+      this.cameraLandscape = false
      this.isOpen = false
    },
    open(payload: PhoneOpenPayload = {}): void {
@@ -642,11 +667,14 @@ export const usePhoneStore = defineStore('phone', {
    setCurrentPage(page: number): void {
      this.currentPage = clampPage(page)
    },
+    setCameraLandscape(landscape: boolean): void {
+      this.cameraLandscape = landscape
+    },
    setLaunchOrigin(origin: AppLaunchOrigin | null): void {
      this.launchOrigin = origin
    },
    setAppNotification(
-      appId: PhoneAppId,
+      appId: LaunchablePhoneAppId,
      key: keyof AppNotificationPreferences,
      value: boolean,
    ): void {
@@ -13,6 +13,8 @@ export type PhoneAppId =
  | 'app-store'
  | 'settings'

+export type LaunchablePhoneAppId = PhoneAppId
+
 export type AppLaunchOrigin = {
  borderRadius: number
  scaleX: number
@@ -22,7 +24,7 @@ export type AppLaunchOrigin = {
 }

 export type PhoneAppDefinition = {
-  component: Component
+  component: Component | null
  dockOrder: number | null
  gridOrder: number
  icon: Component
@@ -30,5 +32,11 @@ export type PhoneAppDefinition = {
  iconImage: string
  id: PhoneAppId
  labelKey: string
-  route: `/apps/${PhoneAppId}`
+  route: `/apps/${LaunchablePhoneAppId}` | null
+}
+
+export type LaunchablePhoneAppDefinition = PhoneAppDefinition & {
+  component: Component
+  id: LaunchablePhoneAppId
+  route: `/apps/${LaunchablePhoneAppId}`
 }
@@ -0,0 +1,39 @@
+export type MediaType = 'photo' | 'video'
+export type GalleryFilter = 'all' | MediaType
+
+export type PhoneMedia = {
+  createdAt: number
+  id: number
+  mediaType: MediaType
+  url: string
+}
+
+export type UploadReady = {
+  captureToken: string
+  correlationId: string
+  mediaType: MediaType
+  photo?: {
+    Encoding?: 'jpg' | 'png' | 'webp'
+    Quality?: number
+  }
+  presignedUrl: string
+  requestId: string
+  uploadTimeoutMs?: number
+  video?: {
+    BitrateKbps?: number
+  }
+}
+
+export type UploadResult = {
+  correlationId: string
+  error?: string
+  media?: PhoneMedia
+  success: boolean
+}
+
+export type DeleteResult = {
+  correlationId: string
+  error?: string
+  id?: number
+  success: boolean
+}
@@ -0,0 +1,62 @@
+import { describe, expect, it } from 'vitest'
+
+import { gameViewGeometry } from '@/utils/gameView'
+
+describe('gameViewGeometry', () => {
+  it('center-crops a widescreen game view for 3:4 portrait output', () => {
+    const geometry = gameViewGeometry(1920, 1080, 540, 720)
+    expect(Array.from(geometry.textureCoordinates)).toEqual([
+      expect.closeTo(0.29, 2),
+      0,
+      expect.closeTo(0.71, 2),
+      0,
+      expect.closeTo(0.29, 2),
+      1,
+      expect.closeTo(0.71, 2),
+      1,
+    ])
+  })
+
+  it('keeps the full game view for 16:9 landscape output', () => {
+    const geometry = gameViewGeometry(1920, 1080, 720, 405)
+    expect(Array.from(geometry.textureCoordinates)).toEqual([
+      0, 0, 1, 0, 0, 1, 1, 1,
+    ])
+  })
+
+  it('keeps the full texture when both aspect ratios match', () => {
+    const geometry = gameViewGeometry(1600, 900, 800, 450)
+    expect(Array.from(geometry.textureCoordinates)).toEqual([
+      0, 0, 1, 0, 0, 1, 1, 1,
+    ])
+  })
+
+  it('keeps 0.5x full-frame while higher zoom levels crop around the center', () => {
+    const wideGeometry = gameViewGeometry(1920, 1080, 540, 720, 0.5)
+    expect(Array.from(wideGeometry.textureCoordinates)).toEqual([
+      expect.closeTo(0.29, 2),
+      0,
+      expect.closeTo(0.71, 2),
+      0,
+      expect.closeTo(0.29, 2),
+      1,
+      expect.closeTo(0.71, 2),
+      1,
+    ])
+    expect(Array.from(wideGeometry.positions)).toEqual([
+      -1, -1, 1, -1, -1, 1, 1, 1,
+    ])
+
+    const zoomedGeometry = gameViewGeometry(1920, 1080, 540, 720, 2)
+    expect(Array.from(zoomedGeometry.textureCoordinates)).toEqual([
+      expect.closeTo(0.39, 2),
+      0.25,
+      expect.closeTo(0.61, 2),
+      0.25,
+      expect.closeTo(0.39, 2),
+      0.75,
+      expect.closeTo(0.61, 2),
+      0.75,
+    ])
+  })
+})
@@ -0,0 +1,238 @@
+const VERTEX_SHADER = `
+  attribute vec2 a_position;
+  attribute vec2 a_texcoord;
+  varying vec2 v_texcoord;
+  void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+    v_texcoord = a_texcoord;
+  }
+`
+
+const FRAGMENT_SHADER = `
+  varying highp vec2 v_texcoord;
+  uniform sampler2D u_texture;
+  void main() {
+    gl_FragColor = texture2D(u_texture, v_texcoord);
+  }
+`
+
+export interface GameView {
+  readonly canvas: HTMLCanvasElement
+  dispose(): void
+  isLost(): boolean
+  render(): void
+  resize(
+    width: number,
+    height: number,
+    sourceWidth?: number,
+    sourceHeight?: number,
+    zoom?: number,
+  ): void
+}
+
+export interface GameViewOptions {
+  preserveDrawingBuffer?: boolean
+}
+
+export function gameViewGeometry(
+  sourceWidth: number,
+  sourceHeight: number,
+  targetWidth: number,
+  targetHeight: number,
+  zoom = 1,
+): { positions: Float32Array; textureCoordinates: Float32Array } {
+  const sourceAspect = sourceWidth / sourceHeight
+  const targetAspect = targetWidth / targetHeight
+  let left = 0
+  let right = 1
+  let top = 0
+  let bottom = 1
+
+  if (sourceAspect > targetAspect) {
+    const visibleWidth = targetAspect / sourceAspect
+    left = (1 - visibleWidth) / 2
+    right = 1 - left
+  } else if (sourceAspect < targetAspect) {
+    const visibleHeight = sourceAspect / targetAspect
+    top = (1 - visibleHeight) / 2
+    bottom = 1 - top
+  }
+
+  const normalizedZoom = Math.min(3, Math.max(1, zoom))
+  const centerX = (left + right) / 2
+  const centerY = (top + bottom) / 2
+  left = Math.max(0, centerX + (left - centerX) / normalizedZoom)
+  right = Math.min(1, centerX + (right - centerX) / normalizedZoom)
+  top = Math.max(0, centerY + (top - centerY) / normalizedZoom)
+  bottom = Math.min(1, centerY + (bottom - centerY) / normalizedZoom)
+
+  return {
+    positions: new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+    textureCoordinates: new Float32Array([
+      left,
+      top,
+      right,
+      top,
+      left,
+      bottom,
+      right,
+      bottom,
+    ]),
+  }
+}
+
+function compileShader(
+  gl: WebGLRenderingContext,
+  type: number,
+  source: string,
+): WebGLShader {
+  const shader = gl.createShader(type)
+  if (!shader) throw new Error('game_view_shader_unavailable')
+  gl.shaderSource(shader, source)
+  gl.compileShader(shader)
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    throw new Error(gl.getShaderInfoLog(shader) || 'game_view_shader_failed')
+  }
+  return shader
+}
+
+export function createGameView(
+  canvas: HTMLCanvasElement,
+  options: GameViewOptions = {},
+): GameView {
+  const gl = canvas.getContext('webgl', {
+    alpha: false,
+    antialias: false,
+    depth: false,
+    desynchronized: true,
+    failIfMajorPerformanceCaveat: false,
+    preserveDrawingBuffer: options.preserveDrawingBuffer === true,
+    stencil: false,
+  }) as WebGLRenderingContext | null
+  if (!gl) throw new Error('game_view_unavailable')
+
+  let lost = false
+  let disposed = false
+  const onContextLost = (event: Event) => {
+    event.preventDefault()
+    lost = true
+    console.error('[Camera] Game-view WebGL context lost.')
+  }
+  canvas.addEventListener(
+    'webglcontextlost',
+    onContextLost as EventListener,
+    false,
+  )
+
+  const program = gl.createProgram()
+  if (!program) throw new Error('game_view_program_unavailable')
+  gl.attachShader(program, compileShader(gl, gl.VERTEX_SHADER, VERTEX_SHADER))
+  gl.attachShader(
+    program,
+    compileShader(gl, gl.FRAGMENT_SHADER, FRAGMENT_SHADER),
+  )
+  gl.linkProgram(program)
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    throw new Error(gl.getProgramInfoLog(program) || 'game_view_program_failed')
+  }
+  gl.useProgram(program)
+
+  const positionLocation = gl.getAttribLocation(program, 'a_position')
+  const texcoordLocation = gl.getAttribLocation(program, 'a_texcoord')
+  if (positionLocation < 0 || texcoordLocation < 0) {
+    throw new Error('game_view_attributes_unavailable')
+  }
+
+  const positionBuffer = gl.createBuffer()
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),
+    gl.DYNAMIC_DRAW,
+  )
+  gl.enableVertexAttribArray(positionLocation)
+  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0)
+
+  const texcoordBuffer = gl.createBuffer()
+  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
+  gl.bufferData(
+    gl.ARRAY_BUFFER,
+    new Float32Array([0, 0, 1, 0, 0, 1, 1, 1]),
+    gl.STATIC_DRAW,
+  )
+  gl.enableVertexAttribArray(texcoordLocation)
+  gl.vertexAttribPointer(texcoordLocation, 2, gl.FLOAT, false, 0, 0)
+
+  const texture = gl.createTexture()
+  gl.bindTexture(gl.TEXTURE_2D, texture)
+  gl.texImage2D(
+    gl.TEXTURE_2D,
+    0,
+    gl.RGBA,
+    1,
+    1,
+    0,
+    gl.RGBA,
+    gl.UNSIGNED_BYTE,
+    new Uint8Array([0, 0, 0, 255]),
+  )
+  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
+  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
+  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE)
+  // CitizenFX watches this exact wrap-mode sequence and replaces the seeded pixel with the live
+  // game backbuffer. These calls are intentionally not redundant.
+  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT)
+  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT)
+  gl.texParameterf(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
+  gl.uniform1i(gl.getUniformLocation(program, 'u_texture'), 0)
+  gl.clearColor(0, 0, 0, 1)
+
+  return {
+    canvas,
+    dispose() {
+      if (disposed) return
+      disposed = true
+      canvas.removeEventListener(
+        'webglcontextlost',
+        onContextLost as EventListener,
+        false,
+      )
+      gl.getExtension('WEBGL_lose_context')?.loseContext()
+    },
+    isLost: () => lost,
+    render() {
+      if (disposed || lost) return
+      gl.clear(gl.COLOR_BUFFER_BIT)
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)
+      gl.finish()
+    },
+    resize(
+      width: number,
+      height: number,
+      sourceWidth = window.innerWidth,
+      sourceHeight = window.innerHeight,
+      zoom = 1,
+    ) {
+      if (disposed || lost) return
+      canvas.width = width
+      canvas.height = height
+      const geometry = gameViewGeometry(
+        sourceWidth,
+        sourceHeight,
+        width,
+        height,
+        zoom,
+      )
+      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
+      gl.bufferData(gl.ARRAY_BUFFER, geometry.positions, gl.DYNAMIC_DRAW)
+      gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
+      gl.bufferData(
+        gl.ARRAY_BUFFER,
+        geometry.textureCoordinates,
+        gl.DYNAMIC_DRAW,
+      )
+      gl.viewport(0, 0, width, height)
+    },
+  }
+}
@@ -0,0 +1,51 @@
+import { describe, expect, it } from 'vitest'
+
+import {
+  filterMedia,
+  formatRecordingDuration,
+  hasNextMediaPage,
+  mediaErrorKey,
+  mergeMedia,
+} from './media'
+
+const media = [
+  { createdAt: 10, id: 1, mediaType: 'photo' as const, url: 'photo' },
+  { createdAt: 20, id: 2, mediaType: 'video' as const, url: 'video' },
+]
+
+describe('media utilities', () => {
+  it('filters gallery media by explicit type', () => {
+    expect(filterMedia(media, 'all')).toHaveLength(2)
+    expect(filterMedia(media, 'photo').map((entry) => entry.id)).toEqual([1])
+    expect(filterMedia(media, 'video').map((entry) => entry.id)).toEqual([2])
+  })
+
+  it('merges pages without duplicates and keeps newest first', () => {
+    expect(
+      mergeMedia(media, [
+        { createdAt: 30, id: 1, mediaType: 'photo', url: 'updated' },
+        { createdAt: 25, id: 3, mediaType: 'photo', url: 'new' },
+      ]).map((entry) => [entry.id, entry.url]),
+    ).toEqual([
+      [1, 'updated'],
+      [3, 'new'],
+      [2, 'video'],
+    ])
+  })
+
+  it('loads another gallery page only after a full 30-item batch', () => {
+    expect(hasNextMediaPage(30)).toBe(true)
+    expect(hasNextMediaPage(29)).toBe(false)
+    expect(hasNextMediaPage(0)).toBe(false)
+  })
+
+  it('formats unlimited recording durations', () => {
+    expect(formatRecordingDuration(0)).toBe('00:00')
+    expect(formatRecordingDuration(3_725_000)).toBe('62:05')
+  })
+
+  it('maps unknown server failures to the localized default', () => {
+    expect(mediaErrorKey('upload_timeout')).toBe('upload_timeout')
+    expect(mediaErrorKey('private_provider_error')).toBe('request_failed')
+  })
+})
@@ -0,0 +1,59 @@
+import type { GalleryFilter, MediaType, PhoneMedia } from '@/types/media'
+
+export const MEDIA_PAGE_SIZE = 30
+
+export function isMediaType(value: unknown): value is MediaType {
+  return value === 'photo' || value === 'video'
+}
+
+export function filterMedia(
+  media: PhoneMedia[],
+  filter: GalleryFilter,
+): PhoneMedia[] {
+  return filter === 'all'
+    ? media
+    : media.filter((entry) => entry.mediaType === filter)
+}
+
+export function mergeMedia(
+  current: PhoneMedia[],
+  incoming: PhoneMedia[],
+): PhoneMedia[] {
+  const byId = new Map(current.map((entry) => [entry.id, entry]))
+  for (const entry of incoming) byId.set(entry.id, entry)
+  return [...byId.values()].sort(
+    (left, right) => right.createdAt - left.createdAt || right.id - left.id,
+  )
+}
+
+export function hasNextMediaPage(pageLength: number): boolean {
+  return pageLength === MEDIA_PAGE_SIZE
+}
+
+export function formatRecordingDuration(elapsedMs: number): string {
+  const totalSeconds = Math.max(0, Math.floor(elapsedMs / 1000))
+  const minutes = Math.floor(totalSeconds / 60)
+  const seconds = totalSeconds % 60
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
+}
+
+export function mediaErrorKey(error?: string): string {
+  const known = new Set([
+    'cancelled',
+    'capture_failed',
+    'invalid_media_type',
+    'invalid_upload',
+    'invalid_upload_token',
+    'missing_config',
+    'not_found',
+    'operation_in_progress',
+    'owner_changed',
+    'rate_limited',
+    'request_failed',
+    'request_timeout',
+    'unsupported',
+    'upload_failed',
+    'upload_timeout',
+  ])
+  return known.has(error ?? '') ? (error as string) : 'request_failed'
+}
@@ -16,7 +16,7 @@ describe('preferences', () => {
          notificationVolume: 45,
          notificationDurationSeconds: 14,
          notifications: {
-            camera: { enabled: false, sounds: false },
+            clock: { enabled: false, sounds: false },
          },
          phoneScale: 110,
          wallpaper: 'ember',
@@ -26,11 +26,10 @@ describe('preferences', () => {
    expect(value.settings.appearanceMode).toBe('light')
    expect(value.settings.notificationVolume).toBe(45)
    expect(value.settings.notificationDurationSeconds).toBe(14)
-    expect(value.settings.notifications.camera).toEqual({
+    expect(value.settings.notifications.clock).toEqual({
      enabled: false,
      sounds: false,
    })
-    expect(value.settings.notifications.clock.enabled).toBe(true)
    expect(value.settings.notifications.mail).toEqual({
      enabled: true,
      sounds: true,
@@ -1,4 +1,4 @@
-import type { PhoneAppId } from '@/types/apps'
+import type { LaunchablePhoneAppId } from '@/types/apps'

 export const APPEARANCE_MODE_IDS = ['automatic', 'light', 'dark'] as const
 export const PHONE_FRAME_IDS = [
@@ -33,7 +33,7 @@ export type PhonePreferencesV1 = {
    notificationSound: NotificationSoundId
    notificationDurationSeconds: number
    notificationVolume: number
-    notifications: Record<PhoneAppId, AppNotificationPreferences>
+    notifications: Record<LaunchablePhoneAppId, AppNotificationPreferences>
    phoneScale: number
    ringtone: RingtoneId
    ringtoneVolume: number
@@ -44,7 +44,7 @@ export type PhonePreferencesV1 = {
 }

 const DEFAULT_APP_NOTIFICATIONS: Record<
-  PhoneAppId,
+  LaunchablePhoneAppId,
  AppNotificationPreferences
 > = {
  phone: { enabled: true, sounds: true },
@@ -105,16 +105,16 @@ function readChoice<T extends string>(

 function readNotifications(
  value: unknown,
-): Record<PhoneAppId, AppNotificationPreferences> {
+): Record<LaunchablePhoneAppId, AppNotificationPreferences> {
  const source =
    value && typeof value === 'object'
      ? (value as Partial<
-          Record<PhoneAppId, Partial<AppNotificationPreferences>>
+          Record<LaunchablePhoneAppId, Partial<AppNotificationPreferences>>
        >)
      : {}
  const notifications = structuredClone(DEFAULT_APP_NOTIFICATIONS)

-  for (const appId of Object.keys(notifications) as PhoneAppId[]) {
+  for (const appId of Object.keys(notifications) as LaunchablePhoneAppId[]) {
    notifications[appId] = {
      enabled: readBoolean(
        source[appId]?.enabled,
@@ -21,7 +21,7 @@ const launchStyle = computed(() => {
 </script>

 <template>
-  <div v-if="app" class="app-window" :style="launchStyle">
+  <div v-if="app?.component" class="app-window" :style="launchStyle">
    <Suspense>
      <component :is="app.component" />
      <template #fallback>
@@ -9,11 +9,11 @@ import {
 } from 'lucide-vue-next'
 import { computed, ref } from 'vue'

-import { useMediaStore } from '@/stores/media'
+import { useAppStoreStore } from '@/stores/app-store'
 import { usePhoneStore } from '@/stores/phone'

 const phone = usePhoneStore()
-const media = useMediaStore()
+const appStore = useAppStoreStore()
 const tab = ref<'today' | 'apps' | 'games' | 'arcade' | 'search'>('today')
 const query = ref('')
 const tabs = [
@@ -126,10 +126,10 @@ const date = new Intl.DateTimeFormat(phone.lang, {
              <strong>{{ item.title }}</strong
              ><small>{{ phone.t(item.subtitle) }}</small>
            </div>
-            <button type="button" @click="media.claimApp(item.id)">
+            <button type="button" @click="appStore.claimApp(item.id)">
              {{
                phone.t(
-                  media.claimedApps.includes(item.id)
+                  appStore.claimedApps.includes(item.id)
                    ? 'Apps.appStore.open'
                    : 'Apps.appStore.get',
                )
@@ -1,126 +1,812 @@
 <script setup lang="ts">
 import {
-  Aperture,
-  Camera,
-  ChevronUp,
-  RotateCcw,
+  kFab,
+  kNavbar,
+  kPage,
+  kSegmented,
+  kSegmentedButton,
+} from 'konsta/vue'
+import {
+  Images,
+  RefreshCw,
+  RotateCcwSquare,
+  Video,
  Zap,
  ZapOff,
 } from 'lucide-vue-next'
-import { ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'

-import { useMediaStore } from '@/stores/media'
 import { usePhoneStore } from '@/stores/phone'
+import type { MediaType, PhoneMedia, UploadResult } from '@/types/media'
+import { createGameView, type GameView } from '@/utils/gameView'
+import { formatRecordingDuration, mediaErrorKey } from '@/utils/media'
+import { nuiCall } from '@/utils/nui'

-const media = useMediaStore()
+type CaptureItem = {
+  error?: string
+  id: string
+  mediaType: MediaType
+  status: 'uploading' | 'success' | 'error'
+}
+
+const isDevelopment = import.meta.env.DEV
+const zoomLevels = [0.5, 1, 2, 3] as const
 const phone = usePhoneStore()
-const flash = ref(false)
+const router = useRouter()
+const mode = ref<MediaType>('photo')
+const selectedZoom = ref<(typeof zoomLevels)[number]>(1)
 const flashEnabled = ref(false)
-const modes = [
-  'timelapse',
-  'slowMo',
-  'cinematic',
-  'video',
-  'photo',
-  'portrait',
-  'pano',
-] as const
+const frontCamera = ref(false)
+const shutterActive = ref(false)
+const focused = ref(true)
+const recording = ref(false)
+const savingVideo = ref(false)
+const recordingStartedAt = ref(0)
+const elapsed = ref('00:00')
+const captures = ref<CaptureItem[]>([])
+const latestMedia = ref<PhoneMedia | null>(null)
+const gameCanvas = ref<HTMLCanvasElement | null>(null)
+const noticeText = ref('')
+const videoBitrateKbps = ref(1500)
+let shutterTimer: number | undefined
+let noticeTimer: number | undefined
+let recordingTimer: number | undefined
+let gameView: GameView | null = null
+let renderFrameId: number | undefined
+let resizeObserver: ResizeObserver | null = null
+
+const pendingCount = computed(
+  () =>
+    captures.value.filter((capture) => capture.status === 'uploading').length,
+)
+const controlColors = {
+  bgIos: 'bg-ios-light-glass/75 dark:bg-ios-dark-glass/75',
+  activeBgIos: 'active:bg-white/90 dark:active:bg-white/20',
+  textIos: 'text-black/80 dark:text-white/80',
+}
+const modeColors = {
+  strongHighlightBgIos: 'bg-[#e5e5ea] dark:bg-[#2c2c2e]',
+}
+const modeButtonColors = {
+  segmentedStrongTextIos: 'text-[#ffd60a]',
+}
+const modeNavbarColors = {
+  bgIos: 'bg-transparent',
+}
+const flashColors = computed(() => ({
+  ...controlColors,
+  textIos: flashEnabled.value
+    ? 'text-yellow-500 dark:text-yellow-300'
+    : controlColors.textIos,
+}))
+
+function correlationId(): string {
+  return `${Date.now()}-${crypto.randomUUID()}`
+}
+
+function showCameraNotice(text: string): void {
+  if (noticeTimer !== undefined) window.clearTimeout(noticeTimer)
+  noticeText.value = text
+  noticeTimer = window.setTimeout(() => {
+    noticeText.value = ''
+  }, 3000)
+}
+
+function updateCapture(id: string, updates: Partial<CaptureItem>): void {
+  const index = captures.value.findIndex((capture) => capture.id === id)
+  if (index < 0) return
+  captures.value[index] = { ...captures.value[index], ...updates }
+}
+
+function queueCapture(id: string, mediaType: MediaType): void {
+  captures.value.unshift({ id, mediaType, status: 'uploading' })
+  captures.value = captures.value.slice(0, 6)
+}
+
+function devMedia(id: string, mediaType: MediaType): PhoneMedia {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="900" height="1600"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="#19354f"/><stop offset="1" stop-color="#d78357"/></linearGradient></defs><rect width="900" height="1600" fill="url(#g)"/><circle cx="680" cy="380" r="210" fill="#ffffff22"/><path d="M0 1200 260 840l180 220 170-170 290 310v400H0z" fill="#102331aa"/></svg>`
+  return {
+    createdAt: Date.now(),
+    id: Number(Date.now()),
+    mediaType,
+    url: `data:image/svg+xml,${encodeURIComponent(svg)}#${id}`,
+  }
+}
+
+async function requestPhoto(): Promise<void> {
+  if (recording.value || savingVideo.value) return
+  const id = correlationId()
+  queueCapture(id, 'photo')
+  shutterActive.value = true
+  if (shutterTimer !== undefined) window.clearTimeout(shutterTimer)
+  shutterTimer = window.setTimeout(() => {
+    shutterActive.value = false
+  }, 280)
+  if (isDevelopment) {
+    window.setTimeout(() => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: {
+            data: {
+              correlationId: id,
+              media: devMedia(id, 'photo'),
+              success: true,
+            },
+            type: 'media:uploadResult',
+          },
+        }),
+      )
+    }, 700)
+    return
+  }
+  await nuiCall('media:requestUpload', {
+    correlationId: id,
+    mediaType: 'photo',
+  })
+}
+
+function startRecording(): void {
+  if (savingVideo.value) return
+  window.postMessage(
+    {
+      data: { bitrateKbps: videoBitrateKbps.value },
+      type: 'camera:recordStart',
+    },
+    '*',
+  )
+}
+
+function stopRecording(): void {
+  if (!recording.value || savingVideo.value) return
+  const id = correlationId()
+  queueCapture(id, 'video')
+  if (isDevelopment) {
+    recording.value = false
+    savingVideo.value = true
+    window.setTimeout(() => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: {
+            data: {
+              correlationId: id,
+              media: devMedia(id, 'video'),
+              success: true,
+            },
+            type: 'media:uploadResult',
+          },
+        }),
+      )
+    }, 900)
+    return
+  }
+  window.postMessage(
+    { data: { correlationId: id }, type: 'camera:recordStop' },
+    '*',
+  )
+}

 function capture(): void {
-  flash.value = true
-  media.capture()
-  window.setTimeout(() => (flash.value = false), 120)
+  if (mode.value === 'video') {
+    if (recording.value) {
+      stopRecording()
+    } else {
+      startRecording()
+    }
+    return
+  }
+  void requestPhoto()
 }
+
+function setMode(nextMode: MediaType): void {
+  if (recording.value || savingVideo.value) return
+  mode.value = nextMode
+}
+
+async function toggleFlash(): Promise<void> {
+  flashEnabled.value = !flashEnabled.value
+  await nuiCall('camera:setFlash', { enabled: flashEnabled.value })
+}
+
+async function toggleFacing(): Promise<void> {
+  frontCamera.value = !frontCamera.value
+  await nuiCall('camera:setFacing', { front: frontCamera.value })
+}
+
+function toggleOrientation(): void {
+  if (recording.value || savingVideo.value) return
+  phone.setCameraLandscape(!phone.cameraLandscape)
+  window.postMessage(
+    {
+      data: { landscape: phone.cameraLandscape },
+      type: 'camera:orientation',
+    },
+    '*',
+  )
+}
+
+function setZoom(zoom: (typeof zoomLevels)[number]): void {
+  selectedZoom.value = zoom
+  resizeGameView()
+  window.postMessage({ data: { zoom }, type: 'camera:zoom' }, '*')
+  void nuiCall('camera:setZoom', { zoom })
+}
+
+function resizeGameView(entry?: ResizeObserverEntry): void {
+  if (!gameCanvas.value || !gameView) return
+  const width = entry?.contentRect.width ?? gameCanvas.value.offsetWidth
+  const height = entry?.contentRect.height ?? gameCanvas.value.offsetHeight
+  const renderScale = Math.min(window.devicePixelRatio, 2)
+  gameView.resize(
+    Math.max(1, Math.round(width * renderScale)),
+    Math.max(1, Math.round(height * renderScale)),
+    window.innerWidth,
+    window.innerHeight,
+    selectedZoom.value,
+  )
+}
+
+function startGameView(): void {
+  if (isDevelopment || !gameCanvas.value) return
+  gameView = createGameView(gameCanvas.value)
+  resizeObserver = new ResizeObserver((entries) => resizeGameView(entries[0]))
+  resizeObserver.observe(gameCanvas.value)
+  resizeGameView()
+  const render = () => {
+    if (!gameView || gameView.isLost()) {
+      renderFrameId = undefined
+      return
+    }
+    gameView.render()
+    renderFrameId = window.requestAnimationFrame(render)
+  }
+  renderFrameId = window.requestAnimationFrame(render)
+}
+
+function updateRecordingTimer(): void {
+  elapsed.value = formatRecordingDuration(Date.now() - recordingStartedAt.value)
+}
+
+function onKeydown(event: KeyboardEvent): void {
+  if (event.code !== 'Space' || event.repeat || !focused.value) return
+  event.preventDefault()
+  focused.value = false
+  void nuiCall('camera:setFocus', { focused: false })
+}
+
+function onMessage(event: MessageEvent): void {
+  const message = event.data as {
+    data?: Record<string, unknown>
+    type?: string
+  }
+  if (message.type === 'camera:focus') {
+    focused.value = message.data?.focused === true
+  } else if (message.type === 'camera:recordState') {
+    const active = message.data?.active === true
+    savingVideo.value = message.data?.saving === true
+    recording.value = active
+    if (active) {
+      recordingStartedAt.value = Date.now()
+      updateRecordingTimer()
+      if (recordingTimer !== undefined) window.clearInterval(recordingTimer)
+      recordingTimer = window.setInterval(updateRecordingTimer, 250)
+    } else if (recordingTimer !== undefined) {
+      window.clearInterval(recordingTimer)
+      recordingTimer = undefined
+    }
+  } else if (message.type === 'camera:recordError') {
+    showCameraNotice(
+      phone.t(
+        `Apps.camera.errors.${mediaErrorKey(String(message.data?.error ?? ''))}`,
+      ),
+    )
+  } else if (message.type === 'media:uploadResult') {
+    const result = message.data as UploadResult
+    if (!result?.correlationId) return
+    savingVideo.value = false
+    if (result.success && result.media) {
+      latestMedia.value = result.media
+      updateCapture(result.correlationId, { status: 'success' })
+      showCameraNotice(phone.t('Apps.camera.saved'))
+      window.setTimeout(() => {
+        captures.value = captures.value.filter(
+          (captureItem) => captureItem.id !== result.correlationId,
+        )
+      }, 2500)
+    } else {
+      const error = mediaErrorKey(result.error)
+      updateCapture(result.correlationId, { error, status: 'error' })
+      showCameraNotice(phone.t(`Apps.camera.errors.${error}`))
+    }
+  }
+}
+
+async function loadLatest(): Promise<void> {
+  const response = await nuiCall<PhoneMedia[]>('gallery:list', {
+    limit: 1,
+    offset: 0,
+  })
+  if (response.success && response.data?.[0])
+    latestMedia.value = response.data[0]
+}
+
+onMounted(() => {
+  phone.setCameraLandscape(false)
+  window.postMessage(
+    { data: { landscape: false }, type: 'camera:orientation' },
+    '*',
+  )
+  window.postMessage(
+    { data: { zoom: selectedZoom.value }, type: 'camera:zoom' },
+    '*',
+  )
+  window.addEventListener('keydown', onKeydown)
+  window.addEventListener('message', onMessage)
+  void nuiCall('camera:setActive', { active: true })
+  void nuiCall<{ videoBitrateKbps?: number }>('media:config').then(
+    (response) => {
+      if (response.success && response.data?.videoBitrateKbps) {
+        videoBitrateKbps.value = response.data.videoBitrateKbps
+      }
+    },
+  )
+  void loadLatest()
+  startGameView()
+})
+
+onBeforeUnmount(() => {
+  if (shutterTimer !== undefined) window.clearTimeout(shutterTimer)
+  if (noticeTimer !== undefined) window.clearTimeout(noticeTimer)
+  if (recordingTimer !== undefined) window.clearInterval(recordingTimer)
+  window.removeEventListener('keydown', onKeydown)
+  window.removeEventListener('message', onMessage)
+  if (renderFrameId !== undefined) window.cancelAnimationFrame(renderFrameId)
+  resizeObserver?.disconnect()
+  gameView?.dispose()
+  phone.setCameraLandscape(false)
+  window.postMessage(
+    { data: { landscape: false }, type: 'camera:orientation' },
+    '*',
+  )
+  window.postMessage({ type: 'camera:recordCancel' }, '*')
+  void nuiCall('camera:setFlash', { enabled: false })
+  void nuiCall('camera:setActive', { active: false })
+})
 </script>

 <template>
-  <main class="native-app reference-camera">
-    <header class="camera-topbar">
-      <div>
-        <button
-          type="button"
-          :aria-label="phone.t('Apps.camera.flash')"
-          @click="flashEnabled = !flashEnabled"
-        >
-          <Zap v-if="flashEnabled" :size="22" />
-          <ZapOff v-else :size="22" />
-        </button>
-        <Aperture :size="22" />
-      </div>
-      <button
-        class="camera-chevron"
-        type="button"
-        :aria-label="phone.t('Apps.camera.controls')"
+  <k-page
+    class="camera-page"
+    :class="{ 'camera-page--landscape': phone.cameraLandscape }"
+    :aria-label="phone.t('Apps.camera.name')"
+  >
+    <div class="camera-viewport">
+      <canvas
+        v-if="!isDevelopment"
+        ref="gameCanvas"
+        class="camera-game-view"
+        aria-hidden="true"
+      ></canvas>
+      <div
+        v-else
+        class="camera-dev-view"
+        :style="{ transform: `scale(${Math.max(1, selectedZoom)})` }"
+        aria-hidden="true"
      >
-        <ChevronUp :size="20" />
-      </button>
-      <Aperture :size="22" />
+        <span class="camera-dev-sun"></span>
+        <span class="camera-dev-horizon"></span>
+      </div>
+      <div class="camera-shade"></div>
+      <div class="camera-flash" :class="{ active: shutterActive }"></div>
+    </div>
+
+    <header class="camera-topbar">
+      <k-fab
+        component="button"
+        type="button"
+        class="camera-control"
+        :colors="flashColors"
+        :aria-label="phone.t('Apps.camera.flash')"
+        @click="toggleFlash"
+      >
+        <template #icon>
+          <Zap v-if="flashEnabled" :size="19" />
+          <ZapOff v-else :size="19" />
+        </template>
+      </k-fab>
+      <span
+        v-if="noticeText"
+        class="camera-focus-pill camera-focus-pill--notice"
+      >
+        {{ noticeText }}
+      </span>
+      <span v-else-if="pendingCount" class="camera-upload-pill">
+        {{ phone.t('Apps.camera.uploading', { count: String(pendingCount) }) }}
+      </span>
+      <span v-else class="camera-focus-pill">
+        {{
+          phone.t(focused ? 'Apps.camera.focusHelp' : 'Apps.camera.returnHelp')
+        }}
+      </span>
+      <k-fab
+        component="button"
+        type="button"
+        class="camera-control"
+        :colors="controlColors"
+        :disabled="recording || savingVideo"
+        :aria-label="
+          phone.t(
+            phone.cameraLandscape
+              ? 'Apps.camera.portrait'
+              : 'Apps.camera.landscape',
+          )
+        "
+        @click="toggleOrientation"
+      >
+        <template #icon><RotateCcwSquare :size="19" /></template>
+      </k-fab>
    </header>

-    <section
-      class="reference-viewfinder"
-      :class="`camera-facing--${media.cameraFacing}`"
-    >
-      <div class="camera-flash" :class="{ active: flash }" />
-      <i
-        v-for="corner in ['tl', 'tr', 'bl', 'br']"
-        :key="corner"
-        :class="`focus-corner focus-corner--${corner}`"
-      />
-      <div class="camera-zoom">
-        <button
-          v-for="zoom in [0.5, 1]"
-          :key="zoom"
-          :class="{ active: media.cameraZoom === zoom }"
-          type="button"
-          @click="media.cameraZoom = zoom"
-        >
-          {{ zoom }}<small v-if="zoom === 1">x</small>
-        </button>
-      </div>
-    </section>
+    <div v-if="recording || savingVideo" class="camera-record-status">
+      <span class="camera-record-dot"></span>
+      {{ savingVideo ? phone.t('Apps.camera.saving') : elapsed }}
+    </div>

-    <footer class="reference-camera-footer">
-      <nav class="camera-mode-strip">
+    <div class="camera-zoom-row">
+      <button
+        v-for="zoom in zoomLevels"
+        :key="zoom"
+        class="camera-zoom-pill"
+        :class="{ active: selectedZoom === zoom }"
+        type="button"
+        :aria-label="phone.t('Apps.camera.zoom', { zoom: `${zoom}x` })"
+        :aria-pressed="selectedZoom === zoom"
+        @click="setZoom(zoom)"
+      >
+        {{ zoom }}x
+      </button>
+    </div>
+
+    <footer class="camera-controls">
+      <div class="camera-capture-row">
        <button
-          v-for="mode in modes"
-          :key="mode"
-          :class="{ active: media.cameraMode === mode }"
+          class="camera-latest"
          type="button"
-          @click="
-            mode === 'photo' || mode === 'portrait' || mode === 'video'
-              ? (media.cameraMode = mode)
-              : undefined
-          "
+          :aria-label="phone.t('Apps.camera.openGallery')"
+          @click="router.push('/apps/photos')"
        >
-          {{ phone.t(`Apps.camera.modes.${mode}`) }}
+          <img
+            v-if="latestMedia?.mediaType === 'photo'"
+            :src="latestMedia.url"
+            alt=""
+          />
+          <Video v-else-if="latestMedia" :size="22" />
+          <Images v-else :size="22" />
        </button>
-      </nav>
-      <div class="camera-shutter-row">
-        <div
-          class="camera-thumbnail"
-          :style="{ background: media.photos[0]?.gradient }"
-        />
+
        <button
-          class="reference-shutter"
+          class="camera-shutter"
+          :class="{ recording, video: mode === 'video' }"
          type="button"
-          :aria-label="phone.t('Apps.camera.shutter')"
+          :disabled="savingVideo"
+          :aria-label="
+            phone.t(
+              mode === 'photo'
+                ? 'Apps.camera.takePhoto'
+                : recording
+                  ? 'Apps.camera.stopRecording'
+                  : 'Apps.camera.startRecording',
+            )
+          "
          @click="capture"
        >
-          <Camera :size="23" />
+          <span></span>
        </button>
-        <button
-          class="reference-flip"
+
+        <k-fab
+          component="button"
          type="button"
+          class="camera-control camera-selfie"
+          :colors="controlColors"
          :aria-label="phone.t('Apps.camera.flip')"
-          @click="
-            media.cameraFacing =
-              media.cameraFacing === 'rear' ? 'front' : 'rear'
-          "
+          @click="toggleFacing"
        >
-          <RotateCcw :size="22" />
-        </button>
+          <template #icon><RefreshCw :size="20" /></template>
+        </k-fab>
      </div>
+
+      <k-navbar
+        component="nav"
+        class="camera-mode-navbar"
+        inner-class="hidden"
+        :colors="modeNavbarColors"
+        :aria-label="phone.t('Apps.camera.name')"
+      >
+        <template #subnavbar>
+          <k-segmented strong rounded :colors="modeColors">
+            <k-segmented-button
+              small
+              :active="mode === 'photo'"
+              :disabled="recording || savingVideo"
+              :colors="modeButtonColors"
+              :class="mode === 'photo' ? undefined : 'text-[#8e8e93]'"
+              :aria-pressed="mode === 'photo'"
+              @click="setMode('photo')"
+            >
+              {{ phone.t('Apps.camera.photo') }}
+            </k-segmented-button>
+            <k-segmented-button
+              small
+              :active="mode === 'video'"
+              :disabled="recording || savingVideo"
+              :colors="modeButtonColors"
+              :class="mode === 'video' ? undefined : 'text-[#8e8e93]'"
+              :aria-pressed="mode === 'video'"
+              @click="setMode('video')"
+            >
+              {{ phone.t('Apps.camera.video') }}
+            </k-segmented-button>
+          </k-segmented>
+        </template>
+      </k-navbar>
    </footer>
-  </main>
+  </k-page>
 </template>
+
+<style scoped>
+.camera-page {
+  position: relative;
+  overflow: hidden;
+  background: #000;
+  color: #fff;
+}
+.camera-viewport {
+  position: absolute;
+  top: 46%;
+  left: 0;
+  width: 100%;
+  aspect-ratio: 3 / 4;
+  overflow: hidden;
+  transform: translateY(-50%);
+}
+.camera-page--landscape .camera-viewport {
+  top: 46%;
+  left: 50%;
+  width: calc(100% * 16 / 9);
+  height: auto;
+  aspect-ratio: 16 / 9;
+  transform: translate(-50%, -50%) rotate(90deg);
+}
+.camera-game-view,
+.camera-dev-view,
+.camera-shade,
+.camera-flash {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+.camera-game-view {
+  border: 0;
+  object-fit: cover;
+}
+.camera-dev-view {
+  overflow: hidden;
+  background: linear-gradient(#4a88ad 0 48%, #a88d68 49% 62%, #283528 63%);
+}
+.camera-dev-sun {
+  position: absolute;
+  top: 18%;
+  right: 16%;
+  width: 68px;
+  height: 68px;
+  border-radius: 50%;
+  background: #fff3b0;
+  box-shadow: 0 0 50px #ffd36a;
+}
+.camera-dev-horizon {
+  position: absolute;
+  left: -10%;
+  right: -10%;
+  bottom: 31%;
+  height: 24%;
+  background: #142b21;
+  clip-path: polygon(
+    0 100%,
+    0 64%,
+    18% 22%,
+    34% 61%,
+    54% 8%,
+    73% 58%,
+    88% 27%,
+    100% 74%,
+    100% 100%
+  );
+}
+.camera-shade {
+  pointer-events: none;
+  background: linear-gradient(#0008, transparent 22%);
+}
+.camera-flash {
+  z-index: 8;
+  pointer-events: none;
+  background: #fff;
+  opacity: 0;
+  transition: opacity 0.25s ease;
+}
+.camera-flash.active {
+  opacity: 0.9;
+  transition-duration: 0.04s;
+}
+.camera-topbar {
+  position: absolute;
+  z-index: 4;
+  top: 52px;
+  left: 18px;
+  right: 18px;
+  display: grid;
+  grid-template-columns: 44px 1fr 44px;
+  align-items: center;
+  gap: 10px;
+}
+.camera-control {
+  --color-primary: transparent;
+}
+.camera-control svg {
+  width: 21px;
+  height: 21px;
+  transition: transform 0.25s ease;
+}
+.camera-latest svg {
+  transition: transform 0.25s ease;
+}
+.camera-page--landscape .camera-control svg,
+.camera-page--landscape .camera-latest svg {
+  transform: rotate(90deg);
+}
+.camera-focus-pill,
+.camera-upload-pill {
+  min-width: 0;
+  padding: 7px 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #0006;
+  text-align: center;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+.camera-upload-pill {
+  color: #ffd60a;
+}
+.camera-focus-pill--notice {
+  color: #ffd60a;
+}
+.camera-record-status {
+  position: absolute;
+  z-index: 4;
+  top: 108px;
+  left: 50%;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #0009;
+  transform: translateX(-50%);
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.camera-record-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #ff3b30;
+}
+.camera-zoom-row {
+  position: absolute;
+  z-index: 4;
+  bottom: 164px;
+  left: 50%;
+  display: flex;
+  gap: 6px;
+  transform: translateX(-50%);
+}
+.camera-zoom-pill {
+  width: 30px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  color: #fff;
+  font-size: 10px;
+  text-align: center;
+  transition:
+    background-color 0.2s ease,
+    color 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+}
+.camera-zoom-pill.active {
+  border-color: transparent;
+  background: rgb(44 44 46 / 88%);
+  box-shadow: 0 8px 16px rgb(0 0 0 / 30%);
+  color: #ffd60a;
+}
+.camera-controls {
+  position: absolute;
+  z-index: 4;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  padding: 0;
+}
+.camera-capture-row {
+  display: grid;
+  grid-template-columns: 54px 1fr 54px;
+  align-items: center;
+  padding: 0 24px 4px;
+}
+.camera-latest {
+  width: 44px;
+  height: 44px;
+  overflow: hidden;
+  border: 0;
+  border-radius: 50%;
+  background: #111b;
+  color: #fff;
+  display: grid;
+  place-items: center;
+}
+.camera-selfie {
+  justify-self: end;
+}
+.camera-latest img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.camera-shutter {
+  justify-self: center;
+  width: 76px;
+  height: 76px;
+  padding: 4px;
+  border: 3px solid #fff;
+  border-radius: 50%;
+  background: transparent;
+}
+.camera-shutter span {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: #fff;
+  transition: 0.18s ease;
+}
+.camera-shutter.video span {
+  background: #ff3b30;
+}
+.camera-shutter.recording span {
+  width: 48%;
+  height: 48%;
+  margin: 26%;
+  border-radius: 6px;
+}
+.camera-shutter:disabled {
+  opacity: 0.5;
+}
+.camera-mode-navbar {
+  position: relative;
+  top: auto;
+  width: 50%;
+  align-self: center;
+  padding-bottom: 18px;
+  padding-top: 0;
+}
+</style>
@@ -0,0 +1,678 @@
+<script setup lang="ts">
+import {
+  kBlock,
+  kButton,
+  kDialog,
+  kLink,
+  kNavbar,
+  kNavbarBackLink,
+  kPage,
+  kPreloader,
+  kSegmented,
+  kSegmentedButton,
+  kToast,
+} from 'konsta/vue'
+import { Play, RotateCcw, Trash2, ZoomIn, ZoomOut } from 'lucide-vue-next'
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+
+import { usePhoneStore } from '@/stores/phone'
+import type { DeleteResult, GalleryFilter, PhoneMedia } from '@/types/media'
+import {
+  hasNextMediaPage,
+  MEDIA_PAGE_SIZE,
+  mediaErrorKey,
+  mergeMedia,
+} from '@/utils/media'
+import { nuiCall } from '@/utils/nui'
+
+const isDevelopment = import.meta.env.DEV
+const developmentGalleryState = isDevelopment
+  ? new URLSearchParams(window.location.search).get('galleryMock')
+  : null
+const filterItems = [
+  { id: 'all', label: 'all' },
+  { id: 'photo', label: 'photos' },
+  { id: 'video', label: 'videos' },
+] as const
+const phone = usePhoneStore()
+const media = ref<PhoneMedia[]>([])
+const filter = ref<GalleryFilter>('all')
+const loading = ref(true)
+const fetching = ref(false)
+const hasMore = ref(true)
+const loadError = ref('')
+const selected = ref<PhoneMedia | null>(null)
+const deleteDialogOpened = ref(false)
+const cancelButtonColors = {
+  fillBgIos: 'bg-[#8e8e93] active:bg-[#7a7a7f]',
+  fillBgMaterial: 'bg-[#8e8e93] active:bg-[#7a7a7f]',
+  fillTextIos: 'text-white',
+  fillTextMaterial: 'text-white',
+}
+const deleteButtonColors = {
+  fillBgIos: 'bg-[#ff3b30] active:bg-[#d9342b]',
+  fillBgMaterial: 'bg-[#ff3b30] active:bg-[#d9342b]',
+  fillTextIos: 'text-white',
+  fillTextMaterial: 'text-white',
+}
+const filterBarColors = {
+  strongHighlightBgIos: 'bg-[#63636680]',
+}
+const deleting = ref(false)
+const toastOpened = ref(false)
+const toastText = ref('')
+const loadTrigger = ref<HTMLElement | null>(null)
+const imageZoom = ref(1)
+const imagePan = ref({ x: 0, y: 0 })
+const landscapeViewer = ref(false)
+const dragging = ref(false)
+const dragStart = ref({ panX: 0, panY: 0, x: 0, y: 0 })
+let observer: IntersectionObserver | null = null
+let toastTimer: number | undefined
+let pendingDeleteCorrelation = ''
+
+const imageStyle = computed(() => ({
+  cursor:
+    imageZoom.value > 1 ? (dragging.value ? 'grabbing' : 'grab') : 'zoom-in',
+  transform: `translate3d(${imagePan.value.x}px, ${imagePan.value.y}px, 0) scale(${imageZoom.value})`,
+}))
+
+function buildMockPhoto(
+  id: number,
+  label: string,
+  first: string,
+  second: string,
+  landscape = false,
+): PhoneMedia {
+  const width = landscape ? 1600 : 900
+  const height = landscape ? 900 : 1200
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}" viewBox="0 0 ${width} ${height}"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="${first}"/><stop offset="1" stop-color="${second}"/></linearGradient></defs><rect width="${width}" height="${height}" fill="url(#g)"/><circle cx="${width * 0.76}" cy="${height * 0.24}" r="${height * 0.15}" fill="#ffffff20"/><path d="M0 ${height * 0.82} ${width * 0.26} ${height * 0.56}l${width * 0.2} ${height * 0.18} ${width * 0.14}-${height * 0.11} ${width * 0.4} ${height * 0.27}v${height * 0.18}H0z" fill="#08131d66"/><text x="${width * 0.08}" y="${height * 0.9}" fill="white" font-size="${height * 0.05}" font-family="sans-serif">${label}</text></svg>`
+  return {
+    createdAt: Date.now() - id * 3_600_000,
+    id,
+    mediaType: 'photo',
+    url: `data:image/svg+xml,${encodeURIComponent(svg)}`,
+  }
+}
+
+function mockMedia(): PhoneMedia[] {
+  const photos = [
+    buildMockPhoto(1, 'Vespucci', '#23567b', '#e08d5c', true),
+    buildMockPhoto(2, 'Downtown', '#442c69', '#c86a77'),
+    buildMockPhoto(3, 'Paleto Bay', '#1f6653', '#d1a85b'),
+    buildMockPhoto(4, 'Mirror Park', '#355c7d', '#6c5b7b'),
+    buildMockPhoto(5, 'Del Perro', '#b06ab3', '#4568dc'),
+    buildMockPhoto(6, 'Sandy Shores', '#7b4f35', '#d2a35f'),
+    buildMockPhoto(7, 'Rockford', '#203a43', '#2c5364'),
+    buildMockPhoto(8, 'Little Seoul', '#8e2de2', '#4a00e0'),
+  ]
+  return [
+    photos[0],
+    {
+      createdAt: Date.now() - 1_800_000,
+      id: 100,
+      mediaType: 'video',
+      url: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
+    },
+    ...photos.slice(1),
+  ]
+}
+
+function showToast(text: string): void {
+  if (toastTimer !== undefined) window.clearTimeout(toastTimer)
+  toastText.value = text
+  toastOpened.value = true
+  toastTimer = window.setTimeout(() => {
+    toastOpened.value = false
+  }, 3000)
+}
+
+function formatDate(timestamp: number): string {
+  return new Intl.DateTimeFormat(phone.lang, {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  }).format(new Date(timestamp))
+}
+
+async function fetchMore(): Promise<void> {
+  if (fetching.value || !hasMore.value) return
+  fetching.value = true
+  const offset = media.value.length
+  const response = await nuiCall<PhoneMedia[]>('gallery:list', {
+    limit: MEDIA_PAGE_SIZE,
+    mediaType: filter.value === 'all' ? undefined : filter.value,
+    mockState: developmentGalleryState ?? undefined,
+    offset,
+  })
+  if (response.success && Array.isArray(response.data)) {
+    media.value = mergeMedia(media.value, response.data)
+    hasMore.value = hasNextMediaPage(response.data.length)
+  } else if (
+    isDevelopment &&
+    developmentGalleryState !== 'error' &&
+    offset === 0
+  ) {
+    const mock = mockMedia().filter(
+      (entry) => filter.value === 'all' || entry.mediaType === filter.value,
+    )
+    media.value = mock
+    hasMore.value = false
+  } else {
+    if (offset === 0) {
+      loadError.value = phone.t(
+        `Apps.photos.errors.${mediaErrorKey(response.error)}`,
+      )
+    }
+    hasMore.value = false
+  }
+  fetching.value = false
+}
+
+async function loadGallery(): Promise<void> {
+  media.value = []
+  hasMore.value = true
+  loadError.value = ''
+  loading.value = true
+  await fetchMore()
+  loading.value = false
+  await nextTick()
+  observeMore()
+}
+
+function observeMore(): void {
+  observer?.disconnect()
+  observer = null
+  if (!hasMore.value || !loadTrigger.value) return
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) void fetchMore()
+    },
+    { rootMargin: '180px' },
+  )
+  observer.observe(loadTrigger.value)
+}
+
+function openMedia(entry: PhoneMedia): void {
+  landscapeViewer.value = false
+  phone.setCameraLandscape(false)
+  selected.value = entry
+  imageZoom.value = 1
+  imagePan.value = { x: 0, y: 0 }
+}
+
+function closeMedia(): void {
+  landscapeViewer.value = false
+  phone.setCameraLandscape(false)
+  selected.value = null
+  deleteDialogOpened.value = false
+  stopDragging()
+}
+
+function orientToMedia(event: Event): void {
+  const mediaElement = event.currentTarget as
+    | HTMLImageElement
+    | HTMLVideoElement
+  const landscape =
+    mediaElement instanceof HTMLVideoElement
+      ? mediaElement.videoWidth > mediaElement.videoHeight
+      : mediaElement.naturalWidth > mediaElement.naturalHeight
+  landscapeViewer.value = landscape
+  phone.setCameraLandscape(landscape)
+}
+
+function setZoom(value: number): void {
+  imageZoom.value = Math.min(4, Math.max(1, value))
+  if (imageZoom.value === 1) imagePan.value = { x: 0, y: 0 }
+}
+
+function startDragging(event: PointerEvent): void {
+  if (imageZoom.value === 1) {
+    setZoom(2)
+    return
+  }
+  dragging.value = true
+  dragStart.value = {
+    panX: imagePan.value.x,
+    panY: imagePan.value.y,
+    x: event.clientX,
+    y: event.clientY,
+  }
+  window.addEventListener('pointermove', moveImage)
+  window.addEventListener('pointerup', stopDragging)
+}
+
+function moveImage(event: PointerEvent): void {
+  if (!dragging.value) return
+  imagePan.value = {
+    x: dragStart.value.panX + event.clientX - dragStart.value.x,
+    y: dragStart.value.panY + event.clientY - dragStart.value.y,
+  }
+}
+
+function stopDragging(): void {
+  dragging.value = false
+  window.removeEventListener('pointermove', moveImage)
+  window.removeEventListener('pointerup', stopDragging)
+}
+
+async function deleteSelected(): Promise<void> {
+  if (!selected.value || deleting.value) return
+  deleting.value = true
+  deleteDialogOpened.value = false
+  pendingDeleteCorrelation = `${Date.now()}-${crypto.randomUUID()}`
+  if (isDevelopment) {
+    window.setTimeout(() => {
+      window.dispatchEvent(
+        new MessageEvent('message', {
+          data: {
+            data: {
+              correlationId: pendingDeleteCorrelation,
+              id: selected.value?.id,
+              success: true,
+            },
+            type: 'media:deleteResult',
+          },
+        }),
+      )
+    }, 500)
+    return
+  }
+  await nuiCall('gallery:delete', {
+    correlationId: pendingDeleteCorrelation,
+    id: selected.value.id,
+  })
+}
+
+function onMessage(event: MessageEvent): void {
+  const message = event.data as { data?: DeleteResult; type?: string }
+  if (
+    message.type !== 'media:deleteResult' ||
+    message.data?.correlationId !== pendingDeleteCorrelation
+  ) {
+    return
+  }
+  deleting.value = false
+  if (message.data.success && message.data.id) {
+    media.value = media.value.filter((entry) => entry.id !== message.data?.id)
+    closeMedia()
+    showToast(phone.t('Apps.photos.deleted'))
+  } else {
+    showToast(
+      phone.t(`Apps.photos.errors.${mediaErrorKey(message.data.error)}`),
+    )
+  }
+}
+
+watch(filter, () => void loadGallery())
+watch(hasMore, () => void nextTick().then(observeMore))
+
+onMounted(() => {
+  window.addEventListener('message', onMessage)
+  void loadGallery()
+})
+
+onBeforeUnmount(() => {
+  phone.setCameraLandscape(false)
+  observer?.disconnect()
+  stopDragging()
+  if (toastTimer !== undefined) window.clearTimeout(toastTimer)
+  window.removeEventListener('message', onMessage)
+})
+</script>
+
+<template>
+  <k-page
+    v-if="!selected"
+    class="gallery-page !pt-[44px]"
+    :aria-label="phone.t('Apps.photos.name')"
+  >
+    <k-navbar :title="phone.t('Apps.photos.name')" />
+
+    <div class="gallery-content">
+      <div v-if="loading" class="gallery-state">
+        <k-preloader />
+        <span>{{ phone.t('Apps.photos.loading') }}</span>
+      </div>
+      <k-block v-else-if="loadError" strong inset class="gallery-error">
+        {{ loadError }}
+      </k-block>
+      <div v-else-if="!media.length" class="gallery-state gallery-empty">
+        <strong>{{ phone.t('Apps.photos.emptyTitle') }}</strong>
+        <span>{{ phone.t('Apps.photos.emptyBody') }}</span>
+      </div>
+      <div
+        v-else
+        class="gallery-grid"
+        :class="{ 'gallery-grid--fill': media.length >= 13 }"
+      >
+        <button
+          v-for="entry in media"
+          :key="entry.id"
+          class="gallery-tile"
+          type="button"
+          :aria-label="
+            phone.t(
+              entry.mediaType === 'video'
+                ? 'Apps.photos.videoAlt'
+                : 'Apps.photos.photoAlt',
+            )
+          "
+          @click="openMedia(entry)"
+        >
+          <img
+            v-if="entry.mediaType === 'photo'"
+            :src="entry.url"
+            alt=""
+            loading="lazy"
+          />
+          <video
+            v-else
+            :src="entry.url"
+            muted
+            playsinline
+            preload="metadata"
+          ></video>
+          <span v-if="entry.mediaType === 'video'" class="gallery-video-badge">
+            <Play :size="16" fill="currentColor" />
+          </span>
+        </button>
+        <span
+          v-if="hasMore"
+          ref="loadTrigger"
+          class="gallery-load-trigger"
+        ></span>
+      </div>
+    </div>
+
+    <k-navbar
+      component="nav"
+      class="gallery-filter-navbar"
+      :aria-label="phone.t('Apps.photos.name')"
+    >
+      <template #subnavbar>
+        <k-segmented
+          strong
+          rounded
+          :colors="filterBarColors"
+          :data-active-filter="filter"
+        >
+          <k-segmented-button
+            v-for="item in filterItems"
+            :key="item.id"
+            large
+            :active="filter === item.id"
+            :class="filter === item.id ? 'text-white' : 'text-[#8e8e93]'"
+            :aria-pressed="filter === item.id"
+            @click="filter = item.id"
+          >
+            {{ phone.t(`Apps.photos.filters.${item.label}`) }}
+          </k-segmented-button>
+        </k-segmented>
+      </template>
+    </k-navbar>
+  </k-page>
+
+  <k-page
+    v-else
+    class="gallery-detail !pt-[44px] !pb-[25px]"
+    :class="{ 'gallery-detail--landscape': landscapeViewer }"
+  >
+    <k-navbar
+      :title="
+        phone.t(
+          selected.mediaType === 'video'
+            ? 'Apps.photos.video'
+            : 'Apps.photos.photo',
+        )
+      "
+    >
+      <template #left>
+        <k-navbar-back-link
+          component="button"
+          :text="phone.t('Common.back')"
+          @click="closeMedia"
+        />
+      </template>
+      <template #right>
+        <k-link
+          component="button"
+          icon-only
+          class="text-red-500"
+          :aria-label="phone.t('Apps.photos.delete')"
+          :disabled="deleting"
+          @click="deleteDialogOpened = true"
+        >
+          <Trash2 :size="20" />
+        </k-link>
+      </template>
+    </k-navbar>
+
+    <div class="gallery-detail-stage">
+      <div class="gallery-detail-media">
+        <img
+          v-if="selected.mediaType === 'photo'"
+          :src="selected.url"
+          :alt="phone.t('Apps.photos.photoAlt')"
+          :style="imageStyle"
+          draggable="false"
+          @load="orientToMedia"
+          @pointerdown="startDragging"
+          @dblclick="setZoom(imageZoom === 1 ? 2 : 1)"
+        />
+        <video
+          v-else
+          :src="selected.url"
+          controls
+          autoplay
+          playsinline
+          @loadedmetadata="orientToMedia"
+        ></video>
+      </div>
+    </div>
+
+    <nav v-if="selected.mediaType === 'photo'" class="gallery-zoom-controls">
+      <k-link
+        component="button"
+        icon-only
+        :aria-label="phone.t('Apps.photos.zoomOut')"
+        :disabled="imageZoom === 1"
+        @click="setZoom(imageZoom - 0.5)"
+        ><ZoomOut :size="20"
+      /></k-link>
+      <k-link
+        component="button"
+        icon-only
+        :aria-label="phone.t('Apps.photos.resetZoom')"
+        :disabled="imageZoom === 1"
+        @click="setZoom(1)"
+        ><RotateCcw :size="19"
+      /></k-link>
+      <k-link
+        component="button"
+        icon-only
+        :aria-label="phone.t('Apps.photos.zoomIn')"
+        :disabled="imageZoom === 4"
+        @click="setZoom(imageZoom + 0.5)"
+        ><ZoomIn :size="20"
+      /></k-link>
+    </nav>
+    <div class="gallery-detail-date">{{ formatDate(selected.createdAt) }}</div>
+  </k-page>
+
+  <k-dialog
+    :opened="deleteDialogOpened"
+    @backdropclick="deleteDialogOpened = false"
+  >
+    <template #title>{{ phone.t('Apps.photos.deleteTitle') }}</template>
+    <p>{{ phone.t('Apps.photos.deleteBody') }}</p>
+    <template #buttons>
+      <k-button
+        large
+        rounded
+        :colors="cancelButtonColors"
+        @click="deleteDialogOpened = false"
+      >
+        {{ phone.t('Common.cancel') }}
+      </k-button>
+      <k-button
+        large
+        rounded
+        :colors="deleteButtonColors"
+        @click="deleteSelected"
+      >
+        {{ phone.t('Common.delete') }}
+      </k-button>
+    </template>
+  </k-dialog>
+
+  <k-toast :opened="toastOpened" position="center" @click="toastOpened = false">
+    {{ toastText }}
+  </k-toast>
+</template>
+
+<style scoped>
+.gallery-page {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.gallery-content {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+}
+.gallery-filter-navbar {
+  position: absolute !important;
+  top: auto !important;
+  bottom: 24px;
+}
+.gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2px;
+  padding: 8px 2px 0;
+}
+.gallery-grid--fill {
+  flex: 1;
+  grid-auto-rows: minmax(min-content, 1fr);
+}
+.gallery-tile {
+  position: relative;
+  aspect-ratio: 1;
+  min-width: 0;
+  overflow: hidden;
+  border: 0;
+  background: #d1d1d6;
+}
+.gallery-grid--fill .gallery-tile {
+  height: 100%;
+}
+.gallery-tile img,
+.gallery-tile video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  object-fit: cover;
+}
+.gallery-video-badge {
+  position: absolute;
+  right: 7px;
+  bottom: 7px;
+  width: 28px;
+  height: 28px;
+  display: grid;
+  place-items: center;
+  border-radius: 50%;
+  background: #0009;
+  color: #fff;
+}
+.gallery-load-trigger {
+  height: 1px;
+  grid-column: 1 / -1;
+}
+.gallery-state {
+  min-height: 430px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  padding: 36px;
+  color: #8e8e93;
+  text-align: center;
+}
+.gallery-empty strong {
+  color: currentColor;
+  font-size: 20px;
+}
+.gallery-error {
+  color: #ff3b30;
+}
+.gallery-detail {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+.gallery-detail-stage {
+  position: relative;
+  container-type: size;
+  min-height: 0;
+  flex: 1;
+  overflow: hidden;
+  background: #000;
+  display: grid;
+  place-items: center;
+  touch-action: none;
+}
+.gallery-detail-media {
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  transform-origin: center;
+  transition: transform 0.25s ease;
+}
+.gallery-detail--landscape .gallery-detail-media {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100cqh;
+  height: 100cqw;
+  transform: translate(-50%, -50%) rotate(90deg);
+}
+.gallery-detail-media img,
+.gallery-detail-media video {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  transform-origin: center;
+  user-select: none;
+}
+.gallery-detail-media img {
+  transition: transform 0.12s ease-out;
+}
+.gallery-detail :deep(svg) {
+  transition: transform 0.25s ease;
+}
+.gallery-detail--landscape :deep(svg) {
+  transform: rotate(90deg);
+}
+.gallery-zoom-controls {
+  flex: 0 0 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
+  border-bottom: 1px solid #8e8e9333;
+}
+.gallery-detail-date {
+  flex: 0 0 auto;
+  padding: 8px 18px 10px;
+  color: #8e8e93;
+  text-align: center;
+  font-size: 12px;
+}
+</style>
@@ -1,135 +0,0 @@
-<script setup lang="ts">
-import { Heart, Images, Library, Search } from 'lucide-vue-next'
-import { computed, ref } from 'vue'
-
-import { useMediaStore } from '@/stores/media'
-import { usePhoneStore } from '@/stores/phone'
-
-const media = useMediaStore()
-const phone = usePhoneStore()
-const tab = ref<'library' | 'forYou' | 'albums' | 'search'>('library')
-const query = ref('')
-const tabs = [
-  { id: 'library', icon: Library },
-  { id: 'forYou', icon: Heart },
-  { id: 'albums', icon: Images },
-  { id: 'search', icon: Search },
-] as const
-const gallery = computed(() =>
-  Array.from(
-    { length: 54 },
-    (_, index) => media.photos[index % media.photos.length],
-  ),
-)
-const filtered = computed(() =>
-  media.photos.filter((photo) =>
-    phone.t(photo.titleKey).toLowerCase().includes(query.value.toLowerCase()),
-  ),
-)
-</script>
-
-<template>
-  <main class="native-app reference-photos">
-    <section v-if="tab === 'library'" class="photos-library">
-      <header class="photos-floating-header">
-        <div>
-          <strong>{{ phone.t('Apps.photos.dateRange') }}</strong
-          ><span>{{ phone.t('Apps.photos.place') }}</span>
-        </div>
-        <button type="button">{{ phone.t('Apps.photos.select') }}</button
-        ><button type="button">•••</button>
-      </header>
-      <div class="reference-photo-grid">
-        <article
-          v-for="(photo, index) in gallery"
-          :key="`${photo.id}-${index}`"
-          :style="{ background: photo.gradient }"
-        />
-      </div>
-      <p class="photos-count">{{ phone.t('Apps.photos.count') }}</p>
-      <div class="photos-period">
-        <button>{{ phone.t('Apps.photos.years') }}</button
-        ><button>{{ phone.t('Apps.photos.months') }}</button
-        ><button>{{ phone.t('Apps.photos.days') }}</button
-        ><button class="active">{{ phone.t('Apps.photos.allPhotos') }}</button>
-      </div>
-    </section>
-    <section v-else-if="tab === 'forYou'" class="photos-scroll">
-      <h1>{{ phone.t('Apps.photos.tabs.forYou') }}</h1>
-      <div class="photos-section-title">
-        <h2>{{ phone.t('Apps.photos.memories') }}</h2>
-        <button>{{ phone.t('Apps.photos.seeAll') }}</button>
-      </div>
-      <article
-        class="memory-card"
-        :style="{ background: media.photos[1]?.gradient }"
-      >
-        <Heart :size="25" />
-        <div>
-          <strong>{{ phone.t('Apps.photos.onThisDay') }}</strong
-          ><span>{{ phone.t('Apps.photos.trip') }}</span>
-        </div>
-      </article>
-      <div class="photos-section-title">
-        <h2>{{ phone.t('Apps.photos.featuredPhotos') }}</h2>
-      </div>
-      <div class="featured-row">
-        <article v-for="photo in media.photos.slice(0, 2)" :key="photo.id">
-          <div :style="{ background: photo.gradient }" />
-          <strong>{{ phone.t(photo.titleKey) }}</strong
-          ><span>{{ phone.t('Apps.photos.featuredDate') }}</span>
-        </article>
-      </div>
-    </section>
-    <section v-else-if="tab === 'albums'" class="photos-scroll">
-      <h1>{{ phone.t('Apps.photos.tabs.albums') }}</h1>
-      <div class="album-cards">
-        <article>
-          <div
-            class="photo-tile"
-            :style="{ background: media.photos[0]?.gradient }"
-          />
-          <strong>{{ phone.t('Apps.photos.recents') }}</strong
-          ><small
-            >{{ media.photos.length }} {{ phone.t('Apps.photos.items') }}</small
-          >
-        </article>
-        <article>
-          <div class="photo-tile favorites" />
-          <strong>{{ phone.t('Apps.photos.favorites') }}</strong
-          ><small>2 {{ phone.t('Apps.photos.items') }}</small>
-        </article>
-      </div>
-    </section>
-    <section v-else class="photos-scroll">
-      <h1>{{ phone.t('Apps.photos.tabs.search') }}</h1>
-      <div class="app-search">
-        <Search :size="17" /><input
-          v-model="query"
-          :placeholder="phone.t('Apps.photos.searchPlaceholder')"
-        />
-      </div>
-      <div class="photo-grid">
-        <article
-          v-for="photo in filtered"
-          :key="photo.id"
-          class="photo-tile"
-          :style="{ background: photo.gradient }"
-        />
-      </div>
-    </section>
-    <nav class="reference-tabbar">
-      <button
-        v-for="item in tabs"
-        :key="item.id"
-        :class="{ active: tab === item.id }"
-        type="button"
-        @click="tab = item.id"
-      >
-        <component :is="item.icon" :size="22" /><span>{{
-          phone.t(`Apps.photos.tabs.${item.id}`)
-        }}</span>
-      </button>
-    </nav>
-  </main>
-</template>
@@ -43,11 +43,14 @@ import {
 } from 'vue'

 import { PHONE_FRAME_COLORS } from '@/config/appearance'
-import { PHONE_APPS } from '@/config/apps'
+import { isLaunchablePhoneApp, PHONE_APPS } from '@/config/apps'
 import { IFRUIT_AUTH_INPUT_COLORS } from '@/config/ifruit'
 import { usePhoneStore } from '@/stores/phone'
 import { useAccountStore } from '@/stores/account'
-import type { PhoneAppDefinition, PhoneAppId } from '@/types/apps'
+import type {
+  LaunchablePhoneAppDefinition,
+  LaunchablePhoneAppId,
+} from '@/types/apps'
 import {
  filterMailAddressInput,
  MAIL_ADDRESS_INPUT_MAX_LENGTH,
@@ -92,7 +95,7 @@ const phone = usePhoneStore()
 const account = useAccountStore()
 const query = ref('')
 const activeView = ref<SettingsView>('root')
-const selectedNotificationAppId = ref<PhoneAppId>('calculator')
+const selectedNotificationAppId = ref<LaunchablePhoneAppId>('calculator')
 const settingsPage = ref<ComponentPublicInstance | null>(null)
 const framePickerButton = ref<ComponentPublicInstance | null>(null)
 const framePickerOpened = ref(false)
@@ -181,12 +184,15 @@ const visiblePreferenceRows = computed(() =>
  preferenceRows.filter((row) => matchesSearch(row.key)),
 )
 const notificationApps = computed(() =>
-  [...PHONE_APPS].sort((left, right) => left.gridOrder - right.gridOrder),
+  PHONE_APPS.filter(isLaunchablePhoneApp).sort(
+    (left, right) => left.gridOrder - right.gridOrder,
+  ),
 )
 const selectedNotificationApp = computed(
  () =>
-    PHONE_APPS.find((app) => app.id === selectedNotificationAppId.value) ??
-    PHONE_APPS[0],
+    notificationApps.value.find(
+      (app) => app.id === selectedNotificationAppId.value,
+    ) ?? notificationApps.value[0],
 )
 const activeTitle = computed(() => {
  if (activeView.value === 'account') {
@@ -219,7 +225,7 @@ function openView(view: SubmenuView): void {
  scrollPageToTop()
 }

-function openNotificationApp(app: PhoneAppDefinition): void {
+function openNotificationApp(app: LaunchablePhoneAppDefinition): void {
  selectedNotificationAppId.value = app.id
  activeView.value = 'notification-detail'
  scrollPageToTop()