fix: message thread header

AchoArnold · AchoArnold · commit 321589a213a0 · 2026-06-24T11:24:28.000+03:00
diff --git a/web/app/components/MessageThread.vue b/web/app/components/MessageThread.vue
@@ -95,8 +95,8 @@ function onInstallApp() {
       </v-btn>
     </div>
     <v-list
+      class="pt-0"
       v-if="!threadsStore.loadingThreads && threadsStore.threads.length > 0"
-      class="pa-0"
     >
       <v-list-item
         v-for="thread in threadsStore.threads"
diff --git a/web/app/components/MessageThreadHeader.vue b/web/app/components/MessageThreadHeader.vue
@@ -106,33 +106,35 @@ async function logout() {
           </div>
         </div>
       </v-toolbar-title>
-      <div v-if="phonesStore.owner" class="d-flex mt-n4">
-        <p class="text-medium-emphasis mb-n1">
+      <div v-if="phonesStore.owner" class="d-flex mt-n2">
+        <p class="text-medium-emphasis mb-n1 mt-0">
           {{ phoneCountry(phonesStore.owner) }}
         </p>
         <v-tooltip v-if="phonesStore.heartbeat" location="end">
           <template #activator="{ props: tooltipProps }">
             <v-btn
               v-bind="tooltipProps"
-              size="x-small"
+              size="small"
+              density="compact"
               :to="{
                 name: 'heartbeats-id',
                 params: { id: phonesStore.owner },
               }"
               color="success"
-              class="ml-2 mt-1 mb-n1"
+              class="ml-2 mb-0 mt-1"
               icon
+              variant="text"
             >
               <v-icon
                 v-if="phonesStore.heartbeat.charging"
                 size="small"
                 class="mt-n1"
                 :icon="mdiBatteryChargingHigh"
               />
-              <v-icon v-else size="x-small" :icon="mdiCircle" />
+              <v-icon v-else size="x-small" color="success" :icon="mdiCircle" />
             </v-btn>
           </template>
-          <h4>Last Heartbeat</h4>
+          <h4 class="font-weight-bold mt-0 mb-0">Last Heartbeat</h4>
           {{ humanizeTime(phonesStore.heartbeat.timestamp) }} ago
         </v-tooltip>
       </div>
diff --git a/web/app/utils/filters.ts b/web/app/utils/filters.ts
@@ -68,8 +68,8 @@ export function formatBillingPeriodDateOrdinal(value: string): string {
 
 export function humanizeTime(value: string): string {
   const durations = intervalToDuration({
-    start: new Date(),
-    end: new Date(value),
+    start: new Date(value),
+    end: new Date(),
   })
   return formatDuration(durations)
 }
