funcodingdev
diff --git a/‎web/app/pages/messages/index.vue‎
Lines changed: 26 additions & 14 deletions b/‎web/app/pages/messages/index.vue‎
Lines changed: 26 additions & 14 deletions
diff --git a/‎web/app/utils/filters.ts‎
Lines changed: 3 additions & 0 deletions b/‎web/app/utils/filters.ts‎
Lines changed: 3 additions & 0 deletions
@@ -18,8 +18,8 @@ const router = useRouter();
 const { mdAndDown } = useDisplay();
 const notificationsStore = useNotificationsStore();
 const phonesStore = usePhonesStore();
-const messagesStore = useMessagesStore();
 const { useApi } = useApiComposable();
+const { formatPhoneNumber } = useFilters();
 
 const sending = ref(false);
 const formPhoneNumber = ref("");
@@ -56,6 +56,7 @@ async function sendMessage() {
         to: getRecipientNumber(),
         from: phonesStore.owner,
         content: formContent.value,
+        sim: "DEFAULT",
         attachments: formAttachments.value
           .trim()
           .split(",")
@@ -93,6 +94,10 @@ async function sendMessage() {
     sending.value = false;
   }
 }
+
+onMounted(async () => {
+  await phonesStore.loadPhones();
+});
 </script>
 
 <template>
@@ -104,16 +109,18 @@ async function sendMessage() {
         </VBtn>
         <VToolbarTitle>
           New Message
-          <VIcon
-            size="x-small"
-            class="mx-2"
-            color="primary"
-            :icon="mdiCircle"
-          />
-          {{ useFilters().phoneNumber(phonesStore.owner) }}
+          <template v-if="phonesStore.owner">
+            <VIcon
+                size="12"
+                class="mx-2"
+                color="primary"
+                :icon="mdiCircle"
+            />
+            {{ formatPhoneNumber(phonesStore.owner) }}
+          </template>
         </VToolbarTitle>
       </VAppBar>
-      <VContainer class="mt-16">
+      <VContainer>
         <VRow>
           <VCol cols="12" md="8" offset-md="2" xl="6" offset-xl="3">
             <form @submit.prevent="sendMessage">
@@ -124,6 +131,8 @@ async function sendMessage() {
                 :error="errors.has('to')"
                 :error-messages="errors.get('to')"
                 variant="outlined"
+                color="primary"
+                density="compact"
                 persistent-placeholder
                 placeholder="Recipient phone number e.g 18005550199"
                 label="Phone Number"
@@ -135,6 +144,8 @@ async function sendMessage() {
                 :error-messages="errors.get('content')"
                 :disabled="sending"
                 variant="outlined"
+                density="compact"
+                color="primary"
                 persistent-placeholder
                 placeholder="Enter your message here"
                 label="Content"
@@ -145,23 +156,24 @@ async function sendMessage() {
                 :error-messages="errors.get('attachments')"
                 :disabled="sending"
                 variant="outlined"
+                density="compact"
                 rows="2"
+                color="primary"
                 class="mb-8"
                 persistent-placeholder
                 persistent-hint
                 hint="The message will be sent as an MMS when a comma separated list of attachment URLs are present"
                 placeholder="https://example.com/image.jpg, https://example.com/video.mp4"
                 label="Attachment URLs (optional)"
               />
-              <VBtn
-                type="submit"
-                color="primary"
+              <loading-button
                 :disabled="sending"
                 :block="mdAndDown"
+                :loading="sending"
+                :icon="mdiSend"
               >
-                <VIcon :icon="mdiSend" />
                 Send Message
-              </VBtn>
+              </loading-button>
             </form>
           </VCol>
         </VRow>
 
@@ -2,6 +2,9 @@ import { intervalToDuration, formatDuration } from "date-fns";
 import { parsePhoneNumber, isValidPhoneNumber } from "libphonenumber-js";
 
 export function formatPhoneNumber(value: string): string {
+  if (!value || typeof value !== "string") {
+    return value ?? "";
+  }
   if (!isValidPhoneNumber(value)) {
     return value;
   }
Original file line number	Diff line number	Diff line change
`@@ -2,6 +2,9 @@ import { intervalToDuration, formatDuration } from "date-fns";`
`2`	`2`	`import { parsePhoneNumber, isValidPhoneNumber } from "libphonenumber-js";`
`3`	`3`
`4`	`4`	`export function formatPhoneNumber(value: string): string {`
	`5`	`+ if (!value \|\| typeof value !== "string") {`
	`6`	`+ return value ?? "";`
	`7`	`+ }`
`5`	`8`	`if (!isValidPhoneNumber(value)) {`
`6`	`9`	`return value;`
`7`	`10`	`}`