feat: update location bubble

app/javascript/dashboard/components-next/message/bubbles/Location.vue

@@ -2,6 +2,7 @@
 import { computed, onMounted, nextTick } from 'vue';
 import BaseBubble from './Base.vue';
 import Icon from 'next/icon/Icon.vue';
+import { useI18n } from 'vue-i18n';
 import maplibregl from 'maplibre-gl';
 
 /**
@@ -28,6 +29,16 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  sender: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+const { t } = useI18n();
+
+const senderName = computed(() => {
+  return props.sender.name;
 });
 
 const attachment = computed(() => {
@@ -75,23 +86,30 @@ onMounted(async () => {
 </script>
 
 <template>
-  <BaseBubble
-    class="overflow-hidden relative group outline outline-1 outline-n-weak"
-  >
-    <div id="map" class="max-w-md min-w-64 w-full h-36" />
-    <div
-      class="flex gap-2 p-2 items-center text-xs justify-between bg-n-alpha-3"
-    >
-      <div class="flex gap-1 items-center truncate">
-        <Icon icon="i-lucide-map-pin" class="text-n-slate-10 flex-shrink-0" />
+  <BaseBubble class="min-w-64 grid gap-4 overflow-hidden">
+    <div id="map" class="max-w-md min-w-64 w-full h-28 -mb-8 z-10" />
+    <div class="grid gap-3 px-3 z-20">
+      <div class="size-8 rounded-lg bg-[#0D9B8A] grid place-content-center">
+        <Icon icon="i-ph-navigation-arrow-fill" class="text-white size-4" />
+      </div>
+      <div class="truncate text-sm text-n-slate-11">
+        <div v-if="senderName" class="text-n-slate-12 text-sm truncate">
+          {{
+            t('CONVERSATION.SHARED_ATTACHMENT.LOCATION', {
+              sender: senderName,
+            })
+          }}
+        </div>
         {{ title }}
       </div>
+    </div>
+    <div class="px-3 pb-3 w-full">
       <a
         :href="mapUrl"
         target="blank"
-        class="text-n-slate-12 flex-shrink-0 text-xs"
+        class="w-full block bg-n-solid-3 px-4 py-2 rounded-lg text-sm text-center"
       >
-        {{ $t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP') }}
+        {{ t('COMPONENTS.LOCATION_BUBBLE.SEE_ON_MAP') }}
       </a>
     </div>
   </BaseBubble>

app/javascript/dashboard/i18n/locale/en/conversation.json

@@ -39,6 +39,11 @@
     "DOWNLOAD": "Download",
     "UNKNOWN_FILE_TYPE": "Unknown File",
     "SAVE_CONTACT": "Save Contact",
+    "SHARED_ATTACHMENT": {
+      "CONTACT": "{sender} has shared a contact",
+      "LOCATION": "{sender} has shared a location",
+      "MEETING": "{sender} has started a meeting"
+    },
     "UPLOADING_ATTACHMENTS": "Uploading attachments...",
     "REPLIED_TO_STORY": "Replied to your story",
     "UNSUPPORTED_MESSAGE": "This message is unsupported. You can view this message on the Facebook / Instagram app.",