ADD - register messages and remove camera

frontend/src/config/apps.ts

@@ -1,10 +1,10 @@
 import {
   Calculator,
-  Camera,
   Clock3,
   Images,
   Mail,
   MapPinned,
+  MessageCircle,
   NotebookPen,
   Phone,
   Settings,
@@ -15,10 +15,10 @@ import { defineAsyncComponent, markRaw } from 'vue'
 
 import appStoreIcon from '@/assets/img/app-icons/apps.webp'
 import calculatorIcon from '@/assets/img/app-icons/calculator.webp'
-import cameraIcon from '@/assets/img/app-icons/camera.webp'
 import clockIcon from '@/assets/img/app-icons/clock.webp'
 import mailIcon from '@/assets/img/app-icons/mail.webp'
 import mapIcon from '@/assets/img/app-icons/map.webp'
+import messagesIcon from '@/assets/img/app-icons/sms.webp'
 import notesIcon from '@/assets/img/app-icons/notes.webp'
 import photosIcon from '@/assets/img/app-icons/gallery.webp'
 import phoneIcon from '@/assets/img/app-icons/phone.webp'
@@ -40,12 +40,25 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
     labelKey: 'Apps.phone.name',
     route: '/apps/phone',
   },
+  {
+    component: markRaw(
+      defineAsyncComponent(() => import('@/views/apps/MessagesApp.vue')),
+    ),
+    dockOrder: 1,
+    gridOrder: 1,
+    icon: markRaw(MessageCircle),
+    iconClass: '',
+    iconImage: messagesIcon,
+    id: 'messages',
+    labelKey: 'Apps.messages.name',
+    route: '/apps/messages',
+  },
   {
     component: markRaw(
       defineAsyncComponent(() => import('@/views/apps/MapApp.vue')),
     ),
     dockOrder: null,
-    gridOrder: 10,
+    gridOrder: 11,
     icon: markRaw(MapPinned),
     iconClass: '',
     iconImage: mapIcon,
@@ -58,7 +71,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
       defineAsyncComponent(() => import('@/views/apps/MailApp.vue')),
     ),
     dockOrder: null,
-    gridOrder: 5,
+    gridOrder: 6,
     icon: markRaw(Mail),
     iconClass: '',
     iconImage: mailIcon,
@@ -71,7 +84,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
       defineAsyncComponent(() => import('@/views/apps/NotesApp.vue')),
     ),
     dockOrder: null,
-    gridOrder: 6,
+    gridOrder: 7,
     icon: markRaw(NotebookPen),
     iconClass: '',
     iconImage: notesIcon,
@@ -83,8 +96,8 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
     component: markRaw(
       defineAsyncComponent(() => import('@/views/apps/CalculatorApp.vue')),
     ),
-    dockOrder: 1,
-    gridOrder: 1,
+    dockOrder: 2,
+    gridOrder: 2,
     icon: markRaw(Calculator),
     iconClass: 'app-icon--calculator',
     iconImage: calculatorIcon,
@@ -92,25 +105,12 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
     labelKey: 'Apps.calculator.name',
     route: '/apps/calculator',
   },
-  {
-    component: markRaw(
-      defineAsyncComponent(() => import('@/views/apps/CameraApp.vue')),
-    ),
-    dockOrder: 2,
-    gridOrder: 2,
-    icon: markRaw(Camera),
-    iconClass: 'app-icon--camera',
-    iconImage: cameraIcon,
-    id: 'camera',
-    labelKey: 'Apps.camera.name',
-    route: '/apps/camera',
-  },
   {
     component: markRaw(
       defineAsyncComponent(() => import('@/views/apps/ClockApp.vue')),
     ),
-    dockOrder: 3,
-    gridOrder: 3,
+    dockOrder: null,
+    gridOrder: 4,
     icon: markRaw(Clock3),
     iconClass: 'app-icon--clock',
     iconImage: clockIcon,
@@ -123,7 +123,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
       defineAsyncComponent(() => import('@/views/apps/WeatherApp.vue')),
     ),
     dockOrder: null,
-    gridOrder: 4,
+    gridOrder: 5,
     icon: markRaw(CloudSun),
     iconClass: 'app-icon--weather',
     iconImage: weatherIcon,
@@ -136,7 +136,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
       defineAsyncComponent(() => import('@/views/apps/PhotosApp.vue')),
     ),
     dockOrder: null,
-    gridOrder: 7,
+    gridOrder: 8,
     icon: markRaw(Images),
     iconClass: 'app-icon--photos',
     iconImage: photosIcon,
@@ -149,7 +149,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
       defineAsyncComponent(() => import('@/views/apps/AppStoreApp.vue')),
     ),
     dockOrder: null,
-    gridOrder: 8,
+    gridOrder: 9,
     icon: markRaw(ShoppingBag),
     iconClass: 'app-icon--store',
     iconImage: appStoreIcon,
@@ -162,7 +162,7 @@ export const PHONE_APPS: PhoneAppDefinition[] = [
       defineAsyncComponent(() => import('@/views/apps/SettingsApp.vue')),
     ),
     dockOrder: null,
-    gridOrder: 9,
+    gridOrder: 10,
     icon: markRaw(Settings),
     iconClass: 'app-icon--settings',
     iconImage: settingsIcon,