CLN - remove old camera logic

frontend/src/App.vue

@@ -23,7 +23,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 +68,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 +92,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 +105,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,17 +184,11 @@ 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)
@@ -286,7 +279,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 +297,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)

frontend/src/assets/main.css

@@ -497,6 +497,18 @@ button {
   bottom: 25px;
   left: 0;
 }
+.lock-screen__shortcuts {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 48px;
+}
+.lock-screen__shortcut {
+  --color-primary: #8e8e93;
+}
+.lock-screen__shortcut svg {
+  width: 21px;
+  height: 21px;
+}
 .lock-screen__swipe {
   width: 100%;
   margin-top: 18px;
@@ -1076,7 +1088,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 +1722,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 +1803,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 +1853,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 +2006,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,

frontend/src/components/AppIcon.vue

@@ -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">

frontend/src/components/PhoneLockScreen.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kLink, kNavbar } from 'konsta/vue'
+import { kFab } from 'konsta/vue'
 import {
   BatteryMedium,
   Camera,
@@ -13,7 +13,7 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { usePhoneStore } from '@/stores/phone'
 
 const emit = defineEmits<{
-  unlock: [destination?: 'camera']
+  unlock: []
 }>()
 
 const phone = usePhoneStore()
@@ -21,12 +21,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 +51,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
@@ -146,38 +148,31 @@ 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="flashlightActive = !flashlightActive"
+        >
+          <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')"
+        >
+          <template #icon>
             <Camera :stroke-width="1.4" aria-hidden="true" />
-          </k-link>
-        </template>
-      </k-navbar>
+          </template>
+        </k-fab>
+      </nav>
 
       <button class="lock-screen__swipe" type="button" @click="emit('unlock')">
         <span class="lock-screen__swipe-chevron" aria-hidden="true"></span>

frontend/src/config/apps.test.ts

@@ -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,17 @@ describe('app registry', () => {
       labelKey: 'Apps.weather.name',
       route: '/apps/weather',
     })
+    expect(PHONE_APPS.find((app) => app.id === 'camera')).toMatchObject({
+      component: null,
+      route: null,
+    })
+    expect(PHONE_APPS.find((app) => app.id === 'photos')).toMatchObject({
+      component: null,
+      route: null,
+    })
+    expect(isPhoneAppId('camera')).toBe(false)
+    expect(isPhoneAppId('photos')).toBe(false)
+    expect(isPhoneAppId('clock')).toBe(true)
     expect(
       PHONE_APPS.filter((app) => app.dockOrder !== null)
         .sort((a, b) => (a.dockOrder ?? 0) - (b.dockOrder ?? 0))

frontend/src/config/apps.ts

@@ -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[] = [
   {
@@ -93,9 +97,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
     route: '/apps/calculator',
   },
   {
-    component: markRaw(
-      defineAsyncComponent(() => import('@/views/apps/CameraApp.vue')),
-    ),
+    component: null,
     dockOrder: 2,
     gridOrder: 2,
     icon: markRaw(Camera),
@@ -103,7 +105,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
     iconImage: cameraIcon,
     id: 'camera',
     labelKey: 'Apps.camera.name',
-    route: '/apps/camera',
+    route: null,
   },
   {
     component: markRaw(
@@ -132,9 +134,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
     route: '/apps/weather',
   },
   {
-    component: markRaw(
-      defineAsyncComponent(() => import('@/views/apps/PhotosApp.vue')),
-    ),
+    component: null,
     dockOrder: null,
     gridOrder: 7,
     icon: markRaw(Images),
@@ -142,7 +142,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
     iconImage: photosIcon,
     id: 'photos',
     labelKey: 'Apps.photos.name',
-    route: '/apps/photos',
+    route: null,
   },
   {
     component: markRaw(
@@ -181,6 +181,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
 }

frontend/src/stores/app-store.ts

@@ -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,
+      })
+    },
+  },
+})

frontend/src/stores/media.ts

@@ -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,
-      })
-    },
-  },
-})

frontend/src/stores/notifications.ts

@@ -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

frontend/src/stores/phone.ts

@@ -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'
@@ -182,22 +182,7 @@ const defaultLocales: LocaleTree = {
         snow: 'Cold conditions with snow across the region.',
       },
     },
-    camera: {
-      name: 'Camera',
-      shutter: 'Take photo',
-      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',
-      },
-    },
+    camera: { name: 'Camera' },
     clock: {
       name: 'Clock',
       lap: 'Lap',
@@ -354,41 +339,7 @@ const defaultLocales: LocaleTree = {
       unpin: 'Unpin note',
       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',
-      },
-    },
+    photos: { name: 'Photos' },
     settings: {
       name: 'Settings',
       searchPlaceholder: 'Search',
@@ -629,7 +580,7 @@ export const usePhoneStore = defineStore('phone', {
       this.launchOrigin = origin
     },
     setAppNotification(
-      appId: PhoneAppId,
+      appId: LaunchablePhoneAppId,
       key: keyof AppNotificationPreferences,
       value: boolean,
     ): void {

frontend/src/types/apps.ts

@@ -13,6 +13,8 @@ export type PhoneAppId =
   | 'app-store'
   | 'settings'
 
+export type LaunchablePhoneAppId = Exclude<PhoneAppId, 'camera' | 'photos'>
+
 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}`
 }

frontend/src/utils/preferences.test.ts

@@ -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,

frontend/src/utils/preferences.ts

@@ -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,19 +44,17 @@ export type PhonePreferencesV1 = {
 }
 
 const DEFAULT_APP_NOTIFICATIONS: Record<
-  PhoneAppId,
+  LaunchablePhoneAppId,
   AppNotificationPreferences
 > = {
   phone: { enabled: true, sounds: true },
   'app-store': { enabled: true, sounds: true },
   calculator: { enabled: true, sounds: true },
-  camera: { enabled: true, sounds: true },
   clock: { enabled: true, sounds: true },
   weather: { enabled: true, sounds: true },
   mail: { enabled: true, sounds: true },
   map: { enabled: true, sounds: true },
   notes: { enabled: true, sounds: true },
-  photos: { enabled: true, sounds: true },
   settings: { enabled: true, sounds: true },
 }
 
@@ -105,16 +103,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,

frontend/src/views/PhoneAppWindow.vue

@@ -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>

frontend/src/views/apps/AppStoreApp.vue

@@ -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',
                 )

frontend/src/views/apps/CameraApp.vue

@@ -1,126 +0,0 @@
-<script setup lang="ts">
-import {
-  Aperture,
-  Camera,
-  ChevronUp,
-  RotateCcw,
-  Zap,
-  ZapOff,
-} from 'lucide-vue-next'
-import { ref } from 'vue'
-
-import { useMediaStore } from '@/stores/media'
-import { usePhoneStore } from '@/stores/phone'
-
-const media = useMediaStore()
-const phone = usePhoneStore()
-const flash = ref(false)
-const flashEnabled = ref(false)
-const modes = [
-  'timelapse',
-  'slowMo',
-  'cinematic',
-  'video',
-  'photo',
-  'portrait',
-  'pano',
-] as const
-
-function capture(): void {
-  flash.value = true
-  media.capture()
-  window.setTimeout(() => (flash.value = false), 120)
-}
-</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')"
-      >
-        <ChevronUp :size="20" />
-      </button>
-      <Aperture :size="22" />
-    </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>
-
-    <footer class="reference-camera-footer">
-      <nav class="camera-mode-strip">
-        <button
-          v-for="mode in modes"
-          :key="mode"
-          :class="{ active: media.cameraMode === mode }"
-          type="button"
-          @click="
-            mode === 'photo' || mode === 'portrait' || mode === 'video'
-              ? (media.cameraMode = mode)
-              : undefined
-          "
-        >
-          {{ phone.t(`Apps.camera.modes.${mode}`) }}
-        </button>
-      </nav>
-      <div class="camera-shutter-row">
-        <div
-          class="camera-thumbnail"
-          :style="{ background: media.photos[0]?.gradient }"
-        />
-        <button
-          class="reference-shutter"
-          type="button"
-          :aria-label="phone.t('Apps.camera.shutter')"
-          @click="capture"
-        >
-          <Camera :size="23" />
-        </button>
-        <button
-          class="reference-flip"
-          type="button"
-          :aria-label="phone.t('Apps.camera.flip')"
-          @click="
-            media.cameraFacing =
-              media.cameraFacing === 'rear' ? 'front' : 'rear'
-          "
-        >
-          <RotateCcw :size="22" />
-        </button>
-      </div>
-    </footer>
-  </main>
-</template>

frontend/src/views/apps/PhotosApp.vue

@@ -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>

frontend/src/views/apps/SettingsApp.vue

@@ -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 { nuiCall } from '@/utils/nui'
 import { formatPhoneNumber } from '@/utils/phone'
 import {
@@ -88,7 +91,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)
@@ -177,12 +180,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') {
@@ -215,7 +221,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()

sky_phone/config/locales/en.lua

@@ -61,10 +61,7 @@ Locales["en"] = {
                 },
             },
             calculator = { name = "Calculator" },
-            camera = {
-                name = "Camera", shutter = "Take photo", 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" },
-            },
+            camera = { name = "Camera" },
             clock = {
                 name = "Clock", lap = "Lap", minutes = "Minutes", add = "Add alarm", location = "Los Santos",
                 tabs = { world = "Clock", alarm = "Alarm", stopwatch = "Stopwatch", timer = "Timer" },
@@ -143,15 +140,7 @@ Locales["en"] = {
                 noResultsBody = "Try searching for a different word or phrase.", pin = "Pin note", unpin = "Unpin note",
                 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" },
-            },
+            photos = { name = "Photos" },
             appStore = {
                 name = "App Store", eyebrow = "Discover", featured = "Featured", heroTitle = "Apps for every day",
                 heroBody = "Fresh ideas, built for your life in the city.", get = "GET", open = "OPEN",

sky_phone/source/html/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sky Phone</title>
-    <script type="module" crossorigin src="./assets/sky-index-D2k1S7R7.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/sky-index-G8JTwQWl.css">
+    <script type="module" crossorigin src="./assets/sky-index-C4p7E0-O.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/sky-index-CjoATJPG.css">
   </head>
   <body>
     <div id="app"></div>

sky_phone/source/server/phone.lua

@@ -12,7 +12,6 @@ local allowed_device_namespaces = {
     notifications = true,
     wallpaper = true,
     alarms = true,
-    media = true,
     apps = true,
 }