ADD - Graphics modes and new phone frames

Introduces Graphics Mode settings to toggle between "Performance" (blur-free) and "Ultimate" (full effects) to optimize CEF rendering. Expands device customization with ten new phone frames, standardizes 24-hour time formatting across all apps, and updates the build target to Chrome 103 for better compatibility.

frontend/src/utils/preferences.test.ts

@@ -16,6 +16,8 @@ describe('preferences', () => {
           bluetoothEnabled: false,
           cellularEnabled: false,
           focusMode: true,
+          frame: 'rgb',
+          graphicsMode: 'ultimate',
           notificationVolume: 45,
           notificationDurationSeconds: 14,
           notifications: {
@@ -34,6 +36,8 @@ describe('preferences', () => {
     expect(value.settings.bluetoothEnabled).toBe(false)
     expect(value.settings.cellularEnabled).toBe(false)
     expect(value.settings.focusMode).toBe(true)
+    expect(value.settings.frame).toBe('rgb')
+    expect(value.settings.graphicsMode).toBe('ultimate')
     expect(value.settings.notificationVolume).toBe(45)
     expect(value.settings.notificationDurationSeconds).toBe(14)
     expect(value.settings.notifications.messages).toEqual({
@@ -61,7 +65,8 @@ describe('preferences', () => {
         version: 1,
         settings: {
           appearanceMode: 'neon',
-          frame: 'gold',
+          frame: 'bronze',
+          graphicsMode: 'cinematic',
           notificationVolume: -10,
           notificationDurationSeconds: 100,
           phoneScale: 500,
@@ -73,6 +78,7 @@ describe('preferences', () => {
 
     expect(value.settings.appearanceMode).toBe('automatic')
     expect(value.settings.frame).toBe('black')
+    expect(value.settings.graphicsMode).toBe('performance')
     expect(value.settings.notificationVolume).toBe(0)
     expect(value.settings.notificationDurationSeconds).toBe(30)
     expect(value.settings.phoneScale).toBe(150)
@@ -90,6 +96,7 @@ describe('preferences', () => {
       bluetoothEnabled: true,
       cellularEnabled: true,
       focusMode: false,
+      graphicsMode: 'performance',
       rotationLocked: false,
       screenBrightness: 100,
       wifiEnabled: true,

frontend/src/utils/preferences.ts

@@ -2,12 +2,23 @@ import type { LaunchablePhoneAppId } from '@/types/apps'
 import { cloneJsonData } from '@/utils/clone'
 
 export const APPEARANCE_MODE_IDS = ['automatic', 'light', 'dark'] as const
+export const GRAPHICS_MODE_IDS = ['performance', 'ultimate'] as const
 export const PHONE_FRAME_IDS = [
   'black',
   'blue',
   'green',
   'lavender',
+  'red',
   'white',
+  'orange',
+  'yellow',
+  'lime',
+  'teal',
+  'cyan',
+  'purple',
+  'pink',
+  'gold',
+  'rgb',
 ] as const
 export const RINGTONE_IDS = ['skyline', 'horizon', 'pulse'] as const
 export const NOTIFICATION_SOUND_IDS = ['chime', 'signal', 'soft'] as const
@@ -17,6 +28,7 @@ export const PHONE_SCALE_MAX = 150
 export const PHONE_SCALE_STEP = 5
 
 export type AppearanceMode = (typeof APPEARANCE_MODE_IDS)[number]
+export type GraphicsMode = (typeof GRAPHICS_MODE_IDS)[number]
 export type PhoneFrameId = (typeof PHONE_FRAME_IDS)[number]
 export type RingtoneId = (typeof RINGTONE_IDS)[number]
 export type NotificationSoundId = (typeof NOTIFICATION_SOUND_IDS)[number]
@@ -34,6 +46,7 @@ export type PhonePreferencesV1 = {
     cellularEnabled: boolean
     focusMode: boolean
     frame: PhoneFrameId
+    graphicsMode: GraphicsMode
     notificationSound: NotificationSoundId
     notificationDurationSeconds: number
     notificationVolume: number
@@ -91,6 +104,7 @@ export const DEFAULT_PHONE_PREFERENCES: PhonePreferencesV1 = {
     cellularEnabled: true,
     focusMode: false,
     frame: 'black',
+    graphicsMode: 'performance',
     notificationSound: 'chime',
     notificationDurationSeconds: 10,
     notificationVolume: 70,
@@ -188,6 +202,11 @@ export function parsePhonePreferences(raw: string | null): PhonePreferencesV1 {
         ),
         focusMode: readBoolean(settings.focusMode, defaults.focusMode),
         frame: readChoice(settings.frame, PHONE_FRAME_IDS, defaults.frame),
+        graphicsMode: readChoice(
+          settings.graphicsMode,
+          GRAPHICS_MODE_IDS,
+          defaults.graphicsMode,
+        ),
         notificationSound: readChoice(
           settings.notificationSound,
           NOTIFICATION_SOUND_IDS,