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/components/NotificationPhonePreview.vue

@@ -37,9 +37,19 @@ const wrapperStyle = computed<CSSProperties>(() => ({ zoom: props.zoom }))
   >
     <section
       class="phone-device phone-device--notification"
+      :class="{
+        'phone-app--light': !isDarkMode,
+        [`phone-app--${preferences.settings.graphicsMode}`]: true,
+      }"
       :aria-label="device.name"
     >
-      <div class="phone-screen">
+      <div
+        class="phone-screen"
+        :class="{
+          'phone-app--light': !isDarkMode,
+          [`phone-app--${preferences.settings.graphicsMode}`]: true,
+        }"
+      >
         <k-app
           theme="ios"
           :dark="isDarkMode"
@@ -48,6 +58,7 @@ const wrapperStyle = computed<CSSProperties>(() => ({ zoom: props.zoom }))
           :class="{
             dark: isDarkMode,
             'phone-app--light': !isDarkMode,
+            [`phone-app--${preferences.settings.graphicsMode}`]: true,
           }"
         >
           <div

frontend/src/components/PhoneLockScreen.vue

@@ -1,15 +1,9 @@
 <script setup lang="ts">
 import { kFab } from 'konsta/vue'
-import {
-  BatteryMedium,
-  Camera,
-  Flashlight,
-  LockKeyhole,
-  Signal,
-  Wifi,
-} from 'lucide-vue-next'
+import { Camera, Flashlight, LockKeyhole } from 'lucide-vue-next'
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
+import PhoneStatusIndicators from '@/components/PhoneStatusIndicators.vue'
 import { usePhoneStore } from '@/stores/phone'
 import { nuiCall } from '@/utils/nui'
 
@@ -41,7 +35,8 @@ const date = computed(() =>
 )
 const time = computed(() =>
   new Intl.DateTimeFormat(phone.lang, {
-    hour: 'numeric',
+    hour: '2-digit',
+    hourCycle: 'h23',
     minute: '2-digit',
   })
     .formatToParts(now.value)
@@ -140,11 +135,7 @@ onBeforeUnmount(() => {
     <div class="lock-screen__shade" aria-hidden="true"></div>
 
     <header class="lock-screen__status">
-      <div class="lock-screen__indicators" aria-hidden="true">
-        <Signal :size="12" :stroke-width="2.5" />
-        <Wifi :size="13" :stroke-width="2.5" />
-        <BatteryMedium :size="17" :stroke-width="2.4" />
-      </div>
+      <PhoneStatusIndicators class="lock-screen__indicators" />
     </header>
     <LockKeyhole
       class="lock-screen__lock"

frontend/src/components/PhoneStatusBar.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { BatteryMedium, Plane, Signal, Wifi } from 'lucide-vue-next'
 import { onBeforeUnmount, onMounted, ref } from 'vue'
+import PhoneStatusIndicators from '@/components/PhoneStatusIndicators.vue'
 import { usePhoneStore } from '@/stores/phone'
 
 const phone = usePhoneStore()
@@ -13,7 +13,8 @@ let intervalId: number | undefined
 
 function updateTime(): void {
   time.value = new Intl.DateTimeFormat([], {
-    hour: 'numeric',
+    hour: '2-digit',
+    hourCycle: 'h23',
     minute: '2-digit',
   }).format(new Date())
 }
@@ -30,7 +31,7 @@ onBeforeUnmount(() => {
 
 <template>
   <header class="phone-status-bar" :aria-label="phone.t('Common.phoneStatus')">
-    <time>{{ time }}</time>
+    <time class="phone-status-bar__time">{{ time }}</time>
     <button
       class="phone-status-bar__indicators"
       type="button"
@@ -38,28 +39,11 @@ onBeforeUnmount(() => {
       :aria-expanded="controlCenterOpened"
       @click.stop="emit('controlCenter')"
     >
-      <Plane
-        v-if="phone.preferences.settings.airplaneMode"
-        :size="18"
-        :stroke-width="2.5"
-        aria-hidden="true"
+      <PhoneStatusIndicators
+        :airplane-mode="phone.preferences.settings.airplaneMode"
+        :cellular-enabled="phone.preferences.settings.cellularEnabled"
+        :wifi-enabled="phone.preferences.settings.wifiEnabled"
       />
-      <Signal
-        v-else-if="phone.preferences.settings.cellularEnabled"
-        :size="19"
-        :stroke-width="2.5"
-        aria-hidden="true"
-      />
-      <Wifi
-        v-if="
-          phone.preferences.settings.wifiEnabled &&
-          !phone.preferences.settings.airplaneMode
-        "
-        :size="20"
-        :stroke-width="2.5"
-        aria-hidden="true"
-      />
-      <BatteryMedium :size="26" :stroke-width="2.4" aria-hidden="true" />
     </button>
   </header>
 </template>

frontend/src/components/PhoneStatusIndicators.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { Plane } from 'lucide-vue-next'
+
+withDefaults(
+  defineProps<{
+    airplaneMode?: boolean
+    cellularEnabled?: boolean
+    wifiEnabled?: boolean
+  }>(),
+  {
+    airplaneMode: false,
+    cellularEnabled: true,
+    wifiEnabled: true,
+  },
+)
+</script>
+
+<template>
+  <span class="phone-status-indicators" aria-hidden="true">
+    <Plane
+      v-if="airplaneMode"
+      :size="18"
+      :stroke-width="2.6"
+      fill="currentColor"
+    />
+    <svg
+      v-else-if="cellularEnabled"
+      class="phone-status-indicators__signal"
+      viewBox="0 0 20 16"
+    >
+      <rect x="0" y="11" width="3.5" height="5" rx="1.75" />
+      <rect x="5.5" y="8" width="3.5" height="8" rx="1.75" />
+      <rect x="11" y="4" width="3.5" height="12" rx="1.75" />
+      <rect x="16.5" width="3.5" height="16" rx="1.75" opacity="0.42" />
+    </svg>
+    <svg
+      v-if="wifiEnabled && !airplaneMode"
+      class="phone-status-indicators__wifi"
+      viewBox="0 0 22 17"
+      fill="none"
+    >
+      <path d="M1.5 5.4a14.2 14.2 0 0 1 19 0" />
+      <path d="M5 9.2a9 9 0 0 1 12 0" />
+      <path d="M8.5 13a3.8 3.8 0 0 1 5 0" />
+      <circle cx="11" cy="15.3" r="1.45" />
+    </svg>
+    <svg class="phone-status-indicators__battery" viewBox="0 0 29 16">
+      <rect x="0.75" y="0.75" width="25" height="14.5" rx="4" />
+      <rect x="3" y="3" width="14.5" height="10" rx="2.25" />
+      <rect x="26.6" y="5" width="2.4" height="6" rx="1.2" />
+    </svg>
+  </span>
+</template>
+
+<style scoped>
+.phone-status-indicators {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  line-height: 0;
+}
+
+.phone-status-indicators > svg {
+  display: block;
+  flex: 0 0 auto;
+  overflow: visible;
+}
+
+.phone-status-indicators__signal {
+  width: 18px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.phone-status-indicators__wifi {
+  width: 19px;
+  height: 15px;
+  stroke: currentColor;
+  stroke-width: 2.2;
+  stroke-linecap: round;
+}
+
+.phone-status-indicators__wifi circle {
+  fill: currentColor;
+  stroke: none;
+}
+
+.phone-status-indicators__battery {
+  width: 25px;
+  height: 14px;
+  fill: currentColor;
+}
+
+.phone-status-indicators__battery rect:first-child {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.5;
+}
+</style>

frontend/src/components/SimPhonePicker.vue

@@ -48,7 +48,11 @@ function close(): void {
 </script>
 
 <template>
-  <div class="sim-picker-backdrop" @click.self="close">
+  <div
+    class="sim-picker-backdrop"
+    :class="`phone-app--${phone.preferences.settings.graphicsMode}`"
+    @click.self="close"
+  >
     <section class="sim-picker" aria-modal="true" role="dialog">
       <div class="sim-picker__glow sim-picker__glow--top" />
       <div class="sim-picker__glow sim-picker__glow--bottom" />

frontend/src/components/SpringboardWidget.vue

@@ -154,6 +154,7 @@ function avatar(name: string): string {
 function formatForecastHour(timestamp: number): string {
   return new Intl.DateTimeFormat(phone.lang, {
     hour: '2-digit',
+    hourCycle: 'h23',
     minute: '2-digit',
   }).format(timestamp)
 }