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]"
       />

app/javascript/dashboard/routes/dashboard/contact/pages/ContactsPageRouteView.vue

@@ -18,7 +18,10 @@ const currentPage = computed(() => Number(meta.value?.currentPage));
 const totalItems = computed(() => meta.value?.count);
 
 const fetchContacts = page => {
-  store.dispatch('contacts/get', { page });
+  store.dispatch('contacts/get', {
+    page,
+    sortAttr: '-last_activity_at',
+  });
 };
 
 onMounted(() => {

app/javascript/dashboard/routes/dashboard/contact/pages/EditContactsPageRouteView.vue

@@ -9,6 +9,8 @@ import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
 import ContactDetails from 'dashboard/components-next/Contacts/Pages/ContactDetails.vue';
 import TabBar from 'dashboard/components-next/tabbar/TabBar.vue';
 import ContactNotes from 'dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue';
+// import ContactHistory from 'dashboard/components-next/Contacts/ContactsSidebar/ContactHistory.vue';
+
 const store = useStore();
 const route = useRoute();
 const router = useRouter();
@@ -63,9 +65,15 @@ const fetchContactNotes = () => {
   if (contactId) store.dispatch('contactNotes/get', { contactId });
 };
 
+const fetchContactConversations = () => {
+  const { contactId } = route.params;
+  if (contactId) store.dispatch('contactConversations/get', contactId);
+};
+
 onMounted(() => {
   fetchActiveContact();
   fetchContactNotes();
+  fetchContactConversations();
 });
 </script>
 
@@ -101,6 +109,7 @@ onMounted(() => {
           />
         </div>
         <ContactNotes v-if="activeTab === 'notes'" />
+        <!-- <ContactHistory v-if="activeTab === 'history'" /> -->
       </template>
     </ContactsLayout>
   </div>

app/javascript/dashboard/store/modules/contactConversations.js

@@ -1,6 +1,7 @@
 import * as types from '../mutation-types';
 import ContactAPI from '../../api/contacts';
 import ConversationApi from '../../api/conversations';
+import camelcaseKeys from 'camelcase-keys';
 
 export const createMessagePayload = (payload, message) => {
   const { content, cc_emails, bcc_emails } = message;
@@ -74,6 +75,10 @@ export const getters = {
   getContactConversation: $state => id => {
     return $state.records[Number(id)] || [];
   },
+  getAllConversationsByContactId: $state => id => {
+    const records = $state.records[Number(id)] || [];
+    return camelcaseKeys(records);
+  },
 };
 
 export const actions = {