feat(web): replace phone number input with v-phone-input (#905)

- Install v-phone-input and flag-icons packages
- Create vPhoneInput.client.ts plugin with autocomplete country selector,
  SVG flags, and validation disabled (validate: null)
- Add v-phone-input to build.transpile in nuxt.config.ts
- Replace VTextField with v-phone-input in messages/index.vue
- Add getRecipientNumber() to handle short codes by stripping country
  dial code prefix when the number is not a valid E.164 phone number

This allows sending SMS to short code numbers (e.g. 91291) without
the frontend prepending a country code.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: AchoArnold

web/app/pages/messages/index.vue

@@ -1,5 +1,10 @@
 <script setup lang="ts">
 import { mdiArrowLeft, mdiSend, mdiCircle } from "@mdi/js";
+import {
+  isValidPhoneNumber,
+  getCountryCallingCode,
+  type CountryCode,
+} from "libphonenumber-js";
 
 definePageMeta({
   middleware: ["auth"],
@@ -18,10 +23,27 @@ const { useApi } = useApiComposable();
 
 const sending = ref(false);
 const formPhoneNumber = ref("");
+const phoneCountry = ref("US");
 const formContent = ref("");
 const formAttachments = ref("");
 const errors = ref(new Map<string, string[]>());
 
+function getRecipientNumber(): string {
+  const phone = formPhoneNumber.value;
+  if (isValidPhoneNumber(phone)) {
+    return phone;
+  }
+  // Short code — strip the country dial code prefix
+  const dialCode = getCountryCallingCode(
+    phoneCountry.value.toUpperCase() as CountryCode,
+  );
+  const prefix = `+${dialCode}`;
+  if (phone.startsWith(prefix)) {
+    return phone.slice(prefix.length);
+  }
+  return phone;
+}
+
 async function sendMessage() {
   errors.value = new Map();
   sending.value = true;
@@ -31,7 +53,7 @@ async function sendMessage() {
     await api("/v1/messages/send", {
       method: "POST",
       body: {
-        to: formPhoneNumber.value,
+        to: getRecipientNumber(),
         from: phonesStore.owner,
         content: formContent.value,
         attachments: formAttachments.value
@@ -95,15 +117,17 @@ async function sendMessage() {
         <VRow>
           <VCol cols="12" md="8" offset-md="2" xl="6" offset-xl="3">
             <form @submit.prevent="sendMessage">
-              <VTextField
+              <v-phone-input
                 v-model="formPhoneNumber"
+                v-model:country="phoneCountry"
                 :disabled="sending"
                 :error="errors.has('to')"
                 :error-messages="errors.get('to')"
                 variant="outlined"
                 persistent-placeholder
-                placeholder="Recipient phone number e.g +18005550199"
+                placeholder="Recipient phone number e.g 18005550199"
                 label="Phone Number"
+                country-label="Country"
               />
               <VTextarea
                 v-model="formContent"

web/app/plugins/vPhoneInput.client.ts

@@ -0,0 +1,17 @@
+import "flag-icons/css/flag-icons.min.css";
+import "v-phone-input/styles";
+import {
+  createVPhoneInput,
+  autocompletePhoneCountryInput,
+  VPhoneCountryFlagSvg,
+} from "v-phone-input";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const vPhoneInput = createVPhoneInput({
+    ...autocompletePhoneCountryInput,
+    countryDisplayComponent: VPhoneCountryFlagSvg,
+    validate: null,
+  });
+
+  nuxtApp.vueApp.use(vPhoneInput);
+});

web/nuxt.config.ts

@@ -9,7 +9,7 @@ export default defineNuxtConfig({
   css: ["vuetify/styles"],
 
   build: {
-    transpile: ["vuetify", "chart.js", "vue-chartjs"],
+    transpile: ["vuetify", "chart.js", "vue-chartjs", "v-phone-input"],
   },
 
   vite: {

web/package.json

@@ -19,12 +19,14 @@
     "date-fns": "^4.3.0",
     "firebase": "^12.13.0",
     "firebaseui": "^6.1.0",
+    "flag-icons": "^7.5.0",
     "libphonenumber-js": "^1.13.3",
     "moment": "^2.30.1",
     "nuxt": "^4.4.6",
     "pusher-js": "^8.5.0",
     "qrcode": "^1.5.4",
     "sass": "^1.100.0",
+    "v-phone-input": "^7.0.0",
     "vue": "^3.5.34",
     "vue-chartjs": "^5.3.3",
     "vue-router": "^5.0.7",