fix(web): update reactive page composables

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot-Session: 4a93bfbb-739a-414c-8eb4-48b15a69fb9d

Author: AchoArnold

web/app/pages/blog/end-to-end-encryption-to-sms-messages.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import { useDisplay } from 'vuetify'
-
 import { mdiLanguageGo, mdiLanguageJavascript } from '@mdi/js'
 import { ref } from 'vue'
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp } = useVDisplay()
 
 const encryptTab = ref('javascript')
 const sendTab = ref('javascript')

web/app/pages/blog/forward-incoming-sms-from-phone-to-webhook.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { useDisplay } from 'vuetify'
-
-const { mdAndUp } = useDisplay()
+const { mdAndUp } = useVDisplay()
 
 definePageMeta({ layout: 'website' })
 

web/app/pages/blog/grant-send-and-read-sms-permissions-on-android.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { mdiDotsVertical } from '@mdi/js'
-import { useDisplay } from 'vuetify'
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp } = useVDisplay()
 
 definePageMeta({ layout: 'website' })
 

web/app/pages/blog/how-to-send-sms-messages-from-excel.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { useDisplay } from 'vuetify'
-
 import { mdiCommentTextMultipleOutline } from '@mdi/js'
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp } = useVDisplay()
 
 definePageMeta({ layout: 'website' })
 

web/app/pages/blog/send-bulk-sms-from-csv-file-with-no-code.vue

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { useDisplay } from 'vuetify'
-
 import { mdiCommentTextMultipleOutline } from '@mdi/js'
 
-const { mdAndUp } = useDisplay()
+const { mdAndUp } = useVDisplay()
 
 definePageMeta({ layout: 'website' })
 

web/app/pages/blog/send-sms-from-android-phone-with-python.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { useDisplay } from 'vuetify'
-
-const { mdAndUp } = useDisplay()
+const { mdAndUp } = useVDisplay()
 
 definePageMeta({ layout: 'website' })
 

web/app/pages/blog/send-sms-when-new-row-is-added-to-google-sheets-using-zapier.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { useDisplay } from 'vuetify'
-
-const { mdAndUp } = useDisplay()
+const { mdAndUp } = useVDisplay()
 
 definePageMeta({ layout: 'website' })
 

web/app/pages/heartbeats/[id].vue

@@ -17,7 +17,7 @@ useHead({
 })
 
 const route = useRoute()
-const { mdAndDown, mdAndUp, lgAndUp } = useDisplay()
+const { mdAndDown, mdAndUp, lgAndUp } = useVDisplay()
 const authStore = useAuthStore()
 const phonesStore = usePhonesStore()
 const { formatPhoneNumber, formatTimestamp } = useFilters()

web/app/pages/threads/[id]/index.vue

@@ -18,6 +18,7 @@ import {
 import Pusher from 'pusher-js'
 import type { Channel } from 'pusher-js'
 import { isValidPhoneNumber } from 'libphonenumber-js'
+import { storeToRefs } from 'pinia'
 import type { EntitiesMessage } from '~~/shared/types/api'
 
 definePageMeta({
@@ -31,13 +32,14 @@ useHead({
 const route = useRoute()
 const router = useRouter()
 const config = useRuntimeConfig()
-const { lgAndUp, mdAndDown, mdAndUp } = useDisplay()
+const { lgAndUp, mdAndDown, mdAndUp } = useVDisplay()
 const { formatPhoneNumber, startsWithLetter } = useFilters()
 const notificationsStore = useNotificationsStore()
 const authStore = useAuthStore()
 const phonesStore = usePhonesStore()
 const threadsStore = useThreadsStore()
 const messagesStore = useMessagesStore()
+const { currentThread } = storeToRefs(threadsStore)
 
 const formMessage = ref('')
 const submitting = ref(false)
@@ -58,15 +60,15 @@ const formMessageRules = [
 let webhookChannel: Channel | null = null
 
 const contactIsPhoneNumber = computed(() => {
-  const thread = threadsStore.currentThread
+  const thread = currentThread.value
   if (!thread) return false
   return isValidPhoneNumber(thread.contact) || !isNaN(Number(thread.contact))
 })
 
 const messageVisibility = computed(() =>
   hideMessages.value ? 'hidden' : 'visible',
 )
-const contact = computed(() => threadsStore.currentThread?.contact ?? '')
+const contact = computed(() => currentThread.value?.contact ?? '')
 
 function isMT(message: EntitiesMessage): boolean {
   return message.type === 'mobile-terminated'
@@ -104,7 +106,7 @@ function formatAttachmentName(url: string): string {
 }
 
 function currentThreadContactTitle(): string {
-  const thread = threadsStore.currentThread
+  const thread = currentThread.value
   if (!thread) return ''
   return (
     thread.contact_details?.name?.trim() || formatPhoneNumber(thread.contact)
@@ -162,15 +164,15 @@ async function loadData() {
 
 async function archiveThread() {
   await threadsStore.updateThread({
-    threadId: threadsStore.currentThread!.id,
+    threadId: currentThread.value!.id,
     isArchived: true,
   })
   await router.push('/threads')
 }
 
 async function unArchiveThread() {
   await threadsStore.updateThread({
-    threadId: threadsStore.currentThread!.id,
+    threadId: currentThread.value!.id,
     isArchived: false,
   })
   await router.push('/threads')
@@ -225,7 +227,7 @@ async function sendMessage(event: KeyboardEvent | Event) {
   submitting.value = true
   await messagesStore.sendMessage({
     from: phonesStore.owner!,
-    to: threadsStore.currentThread!.contact,
+    to: currentThread.value!.contact,
     content: formMessage.value,
     sim: 'DEFAULT',
   })
@@ -274,7 +276,7 @@ onBeforeUnmount(() => {
         <VBtn v-if="mdAndDown" icon to="/threads">
           <VIcon :icon="mdiArrowLeft" />
         </VBtn>
-        <VToolbarTitle v-if="threadsStore.currentThread">
+        <VToolbarTitle v-if="currentThread">
           {{ currentThreadContactTitle() }}
         </VToolbarTitle>
         <VMenu>
@@ -289,10 +291,7 @@ onBeforeUnmount(() => {
             :density="mdAndDown ? 'compact' : 'default'"
           >
             <VListItem
-              v-if="
-                threadsStore.currentThread &&
-                !threadsStore.currentThread.is_archived
-              "
+              v-if="currentThread && !currentThread.is_archived"
               @click.prevent="archiveThread"
             >
               <template #prepend>
@@ -301,10 +300,7 @@ onBeforeUnmount(() => {
               <VListItemTitle>Archive</VListItemTitle>
             </VListItem>
             <VListItem
-              v-if="
-                threadsStore.currentThread &&
-                threadsStore.currentThread.is_archived
-              "
+              v-if="currentThread && currentThread.is_archived"
               @click.prevent="unArchiveThread"
             >
               <template #prepend>
@@ -313,8 +309,8 @@ onBeforeUnmount(() => {
               <VListItemTitle>Unarchive</VListItemTitle>
             </VListItem>
             <VListItem
-              v-if="threadsStore.currentThread"
-              @click.prevent="deleteThread(threadsStore.currentThread.id)"
+              v-if="currentThread"
+              @click.prevent="deleteThread(currentThread.id)"
             >
               <template #prepend>
                 <VIcon :icon="mdiDelete" color="error" />
@@ -330,7 +326,7 @@ onBeforeUnmount(() => {
         color="primary"
         indeterminate
       />
-      <VContainer v-if="threadsStore.currentThread" class="pa-0">
+      <VContainer v-if="currentThread" class="pa-0">
         <div
           ref="messageBody"
           class="messages-body no-scrollbar w-100 pl-2"
@@ -357,7 +353,7 @@ onBeforeUnmount(() => {
                   'ml-2': !mdAndUp,
                   'ml-4': mdAndUp,
                 }"
-                :color="threadsStore.currentThread!.color"
+                :color="currentThread.color"
                 size="40"
               >
                 <v-icon