chore: More changes

app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue

@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from 'vue';
+import { useMapGetter } from 'dashboard/composables/store';
+import { useRoute } from 'vue-router';
+
+import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
+import ConversationCard from 'dashboard/components-next/Conversation/ConversationCard/ConversationCard.vue';
+
+const route = useRoute();
+
+const conversations = useMapGetter(
+  'contactConversations/getAllConversationsByContactId'
+);
+const contacts = useMapGetter('contacts/getContact');
+const stateInbox = useMapGetter('inboxes/getInbox');
+const accountLabels = useMapGetter('labels/getLabels');
+
+const accountLabelsValue = computed(() => accountLabels.value);
+
+const uiFlags = useMapGetter('contactConversations/getUIFlags');
+const isFetching = computed(() => uiFlags.value.isFetching);
+
+const contactConversations = computed(() =>
+  conversations.value(route.params.contactId)
+);
+</script>
+
+<template>
+  <div
+    v-if="isFetching"
+    class="flex items-center justify-center py-10 text-n-slate-11"
+  >
+    <Spinner />
+  </div>
+  <div v-else class="flex flex-col py-6">
+    <div
+      v-for="conversation in contactConversations"
+      :key="conversation.id"
+      class="px-3 border-b border-n-strong"
+    >
+      <ConversationCard
+        v-if="conversation"
+        :key="conversation.id"
+        :conversation="conversation"
+        :contact="contacts(conversation.meta.sender.id)"
+        :state-inbox="stateInbox(conversation.inboxId)"
+        :account-labels="accountLabelsValue"
+      />
+    </div>
+  </div>
+</template>

app/javascript/dashboard/components-next/avatar/Avatar.vue

@@ -116,10 +116,15 @@ const avatarStyles = computed(() => ({
   '--dark-text': getColorsByNameLength.value.darkText,
 }));
 
-const badgeStyles = computed(() => ({
-  top: `${props.size - 10}px`,
-  left: `${props.size - 10}px`,
-}));
+const badgeStyles = computed(() => {
+  const badgeSize = Math.max(props.size * 0.35, 8); // 35% of avatar size, minimum 8px
+  return {
+    width: `${badgeSize}px`,
+    height: `${badgeSize}px`,
+    top: `${props.size - badgeSize / 1.1}px`,
+    left: `${props.size - badgeSize / 1.1}px`,
+  };
+});
 
 const iconStyles = computed(() => ({
   fontSize: `${props.size / 1.6}px`,
@@ -147,7 +152,7 @@ watch(
     <slot name="badge" :size="size">
       <div
         v-if="status"
-        class="rounded-full w-2.5 h-2.5 absolute z-20"
+        class="absolute z-20 border rounded-full border-n-slate-3"
         :style="badgeStyles"
         :class="STATUS_CLASSES[status]"
       />