From de3783ad88a3f9c6bc67461a5fa2ffd17cc8861d Mon Sep 17 00:00:00 2001
From: Sivin Varghese <64252451+iamsivin@users.noreply.github.com>
Date: Tue, 21 Apr 2026 22:31:42 +0530
Subject: [PATCH] Revert "chore: update conversation sidebar interactions
 (#13988)"

This reverts commit 787fcc4a9593a1b9ac7012eae568b13752c3a6ad.
---
 .../Contacts/ContactsDetailsLayout.vue        |   3 +-
 .../Contacts/ContactsHeader/ContactHeader.vue |   4 +-
 .../NewConversation/ComposeConversation.vue   | 110 ++++++--
 .../components/ComposeNewConversationForm.vue |   2 +-
 .../components-next/popover/Popover.vue       | 121 ---------
 .../components-next/sidebar/Sidebar.vue       |  24 +-
 .../conversation/ConversationSidebar.vue      |  11 +-
 .../spec/useDropdownPosition.spec.js          | 239 ------------------
 .../composables/useDropdownPosition.js        | 128 ----------
 .../modules/contact/ContactDeleteModal.vue    |  94 -------
 .../modules/contact/ContactMergeModal.vue     |  69 ++---
 .../conversation/contact/ContactInfo.vue      | 136 +++++++---
 .../conversation/contact/EditContact.vue      | 114 +++++----
 13 files changed, 307 insertions(+), 748 deletions(-)
 delete mode 100644 app/javascript/dashboard/components-next/popover/Popover.vue
 delete mode 100644 app/javascript/dashboard/composables/spec/useDropdownPosition.spec.js
 delete mode 100644 app/javascript/dashboard/composables/useDropdownPosition.js
 delete mode 100644 app/javascript/dashboard/modules/contact/ContactDeleteModal.vue

diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
index 351cc7071..0bc1e376c 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsDetailsLayout.vue
@@ -107,10 +107,11 @@ const closeMobileSidebar = () => {
                 size="sm"
               />
               <ComposeConversation :contact-id="contactId">
-                <template #trigger>
+                <template #trigger="{ toggle }">
                   <Button
                     :label="$t('CONTACTS_LAYOUT.HEADER.SEND_MESSAGE')"
                     size="sm"
+                    @click="toggle"
                   />
                 </template>
               </ComposeConversation>
diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
index 773867de1..7f9047f8d 100644
--- a/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+++ b/app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
@@ -114,8 +114,8 @@ const emit = defineEmits([
           </div>
           <div class="w-px h-4 bg-n-strong" />
           <ComposeConversation>
-            <template #trigger>
-              <Button :label="buttonLabel" size="sm" />
+            <template #trigger="{ toggle }">
+              <Button :label="buttonLabel" size="sm" @click="toggle" />
             </template>
           </ComposeConversation>
         </div>
diff --git a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
index 1ab370901..04340eb7d 100644
--- a/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
@@ -2,10 +2,13 @@
 import { reactive, ref, computed, onMounted, watch } from 'vue';
 import { useStore, useMapGetter } from 'dashboard/composables/store';
 import { useI18n } from 'vue-i18n';
+import { useWindowSize } from '@vueuse/core';
 import { useUISettings } from 'dashboard/composables/useUISettings';
+import { vOnClickOutside } from '@vueuse/components';
 import { useAlert } from 'dashboard/composables';
 import { ExceptionWithMessage } from 'shared/helpers/CustomErrors';
 import { debounce } from '@chatwoot/utils';
+import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
 import { emitter } from 'shared/helpers/mitt';
 import { BUS_EVENTS } from 'shared/constants/busEvents';
 import {
@@ -15,18 +18,22 @@ import {
   processContactableInboxes,
   mergeInboxDetails,
 } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
+import wootConstants from 'dashboard/constants/globals';
 
-import Popover from 'dashboard/components-next/popover/Popover.vue';
 import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
 
 const props = defineProps({
+  alignPosition: {
+    type: String,
+    default: 'left',
+  },
   contactId: {
     type: String,
     default: null,
   },
-  align: {
-    type: String,
-    default: 'end',
+  isModal: {
+    type: Boolean,
+    default: false,
   },
 });
 
@@ -35,16 +42,23 @@ const emit = defineEmits(['close']);
 const searchContacts = createContactSearcher();
 const store = useStore();
 const { t } = useI18n();
+const { width: windowWidth } = useWindowSize();
 
 const { fetchSignatureFlagFromUISettings } = useUISettings();
 
-const popoverRef = ref(null);
+const isSmallScreen = computed(
+  () => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
+);
+
+const viewInModal = computed(() => props.isModal || isSmallScreen.value);
+
 const contacts = ref([]);
 const selectedContact = ref(null);
 const targetInbox = ref(null);
 const isCreatingContact = ref(false);
 const isFetchingInboxes = ref(false);
 const isSearching = ref(false);
+const showComposeNewConversation = ref(false);
 
 const formState = reactive({
   message: '',
@@ -81,6 +95,14 @@ const directUploadsEnabled = computed(
 
 const activeContact = computed(() => contactById.value(props.contactId));
 
+const composePopoverClass = computed(() => {
+  if (viewInModal.value) return '';
+
+  return props.alignPosition === 'right'
+    ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
+    : 'absolute rtl:left-0 rtl:right-[unset] ltr:right-0 ltr:left-[unset]';
+});
+
 const onContactSearch = debounce(
   async query => {
     isSearching.value = true;
@@ -150,7 +172,7 @@ const clearSelectedContact = () => {
 };
 
 const closeCompose = () => {
-  popoverRef.value?.hide();
+  showComposeNewConversation.value = false;
   if (!props.contactId) {
     // If contactId is passed as prop
     // Then don't allow to remove the selected contact
@@ -158,6 +180,7 @@ const closeCompose = () => {
   }
   targetInbox.value = null;
   resetContacts();
+  emit('close');
 };
 
 const discardCompose = () => {
@@ -190,15 +213,8 @@ const createConversation = async ({ payload, isFromWhatsApp }) => {
   }
 };
 
-const onPopoverShow = () => {
-  // Flag to prevent triggering drag n drop,
-  // When compose modal is active
-  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
-};
-
-const onPopoverHide = () => {
-  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
-  emit('close');
+const toggle = () => {
+  showComposeNewConversation.value = !showComposeNewConversation.value;
 };
 
 watch(
@@ -226,22 +242,64 @@ watch(
   { immediate: true, deep: true }
 );
 
+const handleClickOutside = () => {
+  if (!showComposeNewConversation.value) return;
+
+  showComposeNewConversation.value = false;
+  emit('close');
+};
+
+const onModalBackdropClick = () => {
+  if (!viewInModal.value) return;
+  handleClickOutside();
+};
+
 onMounted(() => resetContacts());
+
+const keyboardEvents = {
+  Escape: {
+    action: () => {
+      if (showComposeNewConversation.value) {
+        showComposeNewConversation.value = false;
+        emit('close');
+        emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
+      }
+    },
+  },
+};
+
+useKeyboardEvents(keyboardEvents);
 </script>
 
 <template>
-  <Popover
-    ref="popoverRef"
-    :align="align"
-    @show="onPopoverShow"
-    @hide="onPopoverHide"
+  <div
+    v-on-click-outside="[
+      handleClickOutside,
+      // Fixed and edge case https://github.com/chatwoot/chatwoot/issues/10785
+      // This will prevent closing the compose conversation modal when the editor Create link popup is open
+      { ignore: ['dialog.ProseMirror-prompt-backdrop'] },
+    ]"
+    class="relative"
+    :class="{
+      'z-50': showComposeNewConversation && !viewInModal,
+    }"
   >
-    <template #default="{ isOpen }">
-      <slot name="trigger" :is-open="isOpen" />
-    </template>
-    <template #content>
+    <slot
+      name="trigger"
+      :is-open="showComposeNewConversation"
+      :toggle="toggle"
+    />
+    <div
+      v-if="showComposeNewConversation"
+      :class="{
+        'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
+          viewInModal,
+      }"
+      @click.self="onModalBackdropClick"
+    >
       <ComposeNewConversationForm
         :form-state="formState"
+        :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
         :contacts="contacts"
         :contact-id="contactId"
         :is-loading="isSearching"
@@ -263,6 +321,6 @@ onMounted(() => resetContacts());
         @create-conversation="createConversation"
         @discard="discardCompose"
       />
-    </template>
-  </Popover>
+    </div>
+  </div>
 </template>
diff --git a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
index c4111b481..455abf996 100644
--- a/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
+++ b/app/javascript/dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue
@@ -361,7 +361,7 @@ useKeyboardEvents({
 
 <template>
   <div
-    class="w-full md:w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
+    class="w-[42rem] divide-y divide-n-strong overflow-visible transition-all duration-300 ease-in-out top-full flex flex-col bg-n-alpha-3 border border-n-strong shadow-sm backdrop-blur-[100px] rounded-xl min-w-0 max-h-[calc(100vh-8rem)]"
   >
     <div class="flex-1 overflow-y-auto divide-y divide-n-strong">
       <ContactSelector
diff --git a/app/javascript/dashboard/components-next/popover/Popover.vue b/app/javascript/dashboard/components-next/popover/Popover.vue
deleted file mode 100644
index 18e711c12..000000000
--- a/app/javascript/dashboard/components-next/popover/Popover.vue
+++ /dev/null
@@ -1,121 +0,0 @@
-<script setup>
-import { ref, computed, watch, nextTick } from 'vue';
-import { vOnClickOutside } from '@vueuse/components';
-import { useBreakpoints, breakpointsTailwind } from '@vueuse/core';
-import { useDropdownPosition } from 'dashboard/composables/useDropdownPosition';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
-import TeleportWithDirection from 'dashboard/components-next/TeleportWithDirection.vue';
-
-const props = defineProps({
-  align: {
-    type: String,
-    default: 'end',
-    validator: v => ['start', 'end'].includes(v),
-  },
-});
-
-const emit = defineEmits(['show', 'hide']);
-
-const isActive = ref(false);
-const triggerRef = ref(null);
-const popoverRef = ref(null);
-const mobileContentRef = ref(null);
-
-const breakpoints = useBreakpoints(breakpointsTailwind);
-const isMobile = breakpoints.smaller('md');
-const showPopover = computed(() => isActive.value && !isMobile.value);
-
-const { fixedPosition, updatePosition } = useDropdownPosition(
-  triggerRef,
-  popoverRef,
-  showPopover,
-  { align: props.align }
-);
-
-const show = async () => {
-  isActive.value = true;
-  if (!isMobile.value) {
-    await nextTick();
-    updatePosition();
-  }
-  emit('show');
-};
-
-const hide = () => {
-  if (!isActive.value) return;
-  isActive.value = false;
-  emit('hide');
-};
-
-const toggle = async () => {
-  if (isActive.value) hide();
-  else await show();
-};
-
-// Recalculate position when switching from mobile to desktop while open
-watch(isMobile, async mobile => {
-  if (!isActive.value || mobile) return;
-  await nextTick();
-  updatePosition();
-});
-
-const handleClickOutside = event => {
-  if (triggerRef.value?.contains(event.target)) return;
-  hide();
-};
-
-// Selectors for teleported elements that should not trigger close
-const clickOutsideIgnore = [
-  'dialog.ProseMirror-prompt-backdrop',
-  '[data-popover-content]',
-];
-
-useKeyboardEvents({
-  Escape: {
-    action: () => isActive.value && hide(),
-    allowOnFocusedInput: true,
-  },
-});
-
-defineExpose({ show, hide, toggle });
-</script>
-
-<template>
-  <span ref="triggerRef" class="inline-flex" @click="toggle">
-    <slot :is-open="isActive" />
-  </span>
-
-  <TeleportWithDirection to="body">
-    <!-- Mobile: centered modal with backdrop -->
-    <div
-      v-if="isActive && isMobile"
-      data-popover-backdrop
-      class="fixed inset-0 z-[9999] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center bg-n-alpha-black1"
-    >
-      <div
-        ref="mobileContentRef"
-        v-on-click-outside="[
-          handleClickOutside,
-          { ignore: clickOutsideIgnore },
-        ]"
-        data-popover-content
-        class="relative w-full max-w-lg max-h-[calc(100vh-4rem)] mx-4 overflow-y-auto bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl"
-      >
-        <slot name="content" :hide="hide" />
-      </div>
-    </div>
-
-    <!-- Desktop: fixed popover -->
-    <div
-      v-else-if="showPopover"
-      ref="popoverRef"
-      v-on-click-outside="[handleClickOutside, { ignore: clickOutsideIgnore }]"
-      data-popover-content
-      :class="fixedPosition.class"
-      :style="fixedPosition.style"
-      class="bg-n-alpha-3 backdrop-blur-[100px] shadow-xl rounded-xl overflow-y-auto max-h-[calc(100vh-2rem)]"
-    >
-      <slot name="content" :hide="hide" />
-    </div>
-  </TeleportWithDirection>
-</template>
diff --git a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
index cbb3b2099..9fd25c481 100644
--- a/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
+++ b/app/javascript/dashboard/components-next/sidebar/Sidebar.vue
@@ -10,6 +10,8 @@ import { useSidebarKeyboardShortcuts } from './useSidebarKeyboardShortcuts';
 import { vOnClickOutside } from '@vueuse/components';
 import { FEATURE_FLAGS } from 'dashboard/featureFlags';
 import { useWindowSize, useEventListener } from '@vueuse/core';
+import { emitter } from 'shared/helpers/mitt';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 
 import Button from 'dashboard/components-next/button/Button.vue';
 import SidebarGroup from './SidebarGroup.vue';
@@ -182,6 +184,15 @@ const closeMobileSidebar = () => {
   emit('closeMobileSidebar');
 };
 
+const onComposeOpen = toggleFn => {
+  toggleFn();
+  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
+};
+
+const onComposeClose = () => {
+  emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
+};
+
 const newReportRoutes = () => [
   {
     name: 'Reports Agent',
@@ -723,13 +734,7 @@ const menuItems = computed(() => {
   <aside
     v-on-click-outside="[
       closeMobileSidebar,
-      {
-        ignore: [
-          '#mobile-sidebar-launcher',
-          '[data-popover-content]',
-          '[data-popover-backdrop]',
-        ],
-      },
+      { ignore: ['#mobile-sidebar-launcher'] },
     ]"
     class="bg-n-background flex flex-col text-sm pb-px fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 w-[200px] md:w-auto md:relative md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:translate-x-0 ltr:border-r rtl:border-l border-n-weak"
     :class="[
@@ -797,8 +802,8 @@ const menuItems = computed(() => {
         >
           <span class="i-lucide-search size-4 text-n-slate-11" />
         </RouterLink>
-        <ComposeConversation align="start">
-          <template #trigger="{ isOpen }">
+        <ComposeConversation align-position="right" @close="onComposeClose">
+          <template #trigger="{ toggle, isOpen }">
             <Button
               icon="i-lucide-pen-line"
               color="slate"
@@ -810,6 +815,7 @@ const menuItems = computed(() => {
                   : '!h-7 !outline-n-weak !text-n-slate-11',
                 { '!bg-n-alpha-2 dark:!bg-n-slate-9/30': isOpen },
               ]"
+              @click="onComposeOpen(toggle)"
             />
           </template>
         </ComposeConversation>
diff --git a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
index 89b01cb8d..00c944f9e 100644
--- a/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
+++ b/app/javascript/dashboard/components/widgets/conversation/ConversationSidebar.vue
@@ -41,16 +41,7 @@ const closeContactPanel = () => {
 
 <template>
   <div
-    v-on-click-outside="[
-      () => closeContactPanel(),
-      {
-        ignore: [
-          'dialog.ProseMirror-prompt-backdrop',
-          '[data-popover-content]',
-          '[data-popover-backdrop]',
-        ],
-      },
-    ]"
+    v-on-click-outside="() => closeContactPanel()"
     class="bg-n-surface-2 h-full overflow-hidden flex flex-col fixed top-0 z-40 w-full max-w-sm transition-transform duration-300 ease-in-out ltr:right-0 rtl:left-0 md:static md:w-[320px] md:min-w-[320px] ltr:border-l rtl:border-r border-n-weak 2xl:min-w-[360px] 2xl:w-[360px] shadow-lg md:shadow-none"
     :class="[
       {
diff --git a/app/javascript/dashboard/composables/spec/useDropdownPosition.spec.js b/app/javascript/dashboard/composables/spec/useDropdownPosition.spec.js
deleted file mode 100644
index 68c9ce79d..000000000
--- a/app/javascript/dashboard/composables/spec/useDropdownPosition.spec.js
+++ /dev/null
@@ -1,239 +0,0 @@
-import { ref } from 'vue';
-import { useDropdownPosition } from 'dashboard/composables/useDropdownPosition';
-
-// Mock @vueuse/core — return reactive refs we can control per test
-const mockBounding = () => ({
-  top: ref(0),
-  bottom: ref(0),
-  left: ref(0),
-  right: ref(0),
-  width: ref(0),
-  height: ref(0),
-  update: vi.fn(),
-});
-
-const triggerBounds = mockBounding();
-const dropdownBounds = mockBounding();
-const winWidth = ref(1024);
-const winHeight = ref(768);
-
-vi.mock('@vueuse/core', () => {
-  let callCount = 0;
-  return {
-    // First call = trigger, second = dropdown, third = container (if any)
-    useElementBounding: () => {
-      callCount += 1;
-      return callCount % 3 === 1 ? triggerBounds : dropdownBounds;
-    },
-    useWindowSize: () => ({ width: winWidth, height: winHeight }),
-  };
-});
-
-const setTrigger = ({ top, bottom, left, right }) => {
-  triggerBounds.top.value = top;
-  triggerBounds.bottom.value = bottom;
-  triggerBounds.left.value = left ?? 100;
-  triggerBounds.right.value = right ?? 200;
-};
-
-const setDropdown = ({ width, height }) => {
-  dropdownBounds.width.value = width ?? 200;
-  dropdownBounds.height.value = height;
-};
-
-describe('useDropdownPosition', () => {
-  beforeEach(() => {
-    winWidth.value = 1024;
-    winHeight.value = 768;
-    document.body.innerHTML = '<div id="app" dir="ltr"></div>';
-  });
-
-  describe('verticalClass (relative mode)', () => {
-    it('places below when enough space', () => {
-      // Trigger at y=100, dropdown 200px tall
-      // Space below = 768 - 140 = 628 → fits (628 > 216)
-      setTrigger({ top: 100, bottom: 140 });
-      setDropdown({ height: 200 });
-
-      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
-      expect(position.value.class).toBe('top-full mt-2');
-    });
-
-    it('places above when not enough space below but enough above', () => {
-      // Trigger near bottom at y=600
-      // Space below = 128 → doesn't fit. Space above = 600 → fits
-      setTrigger({ top: 600, bottom: 640 });
-      setDropdown({ height: 200 });
-
-      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
-      expect(position.value.class).toBe('bottom-full mb-2');
-    });
-
-    it('picks the side with more space when dropdown fits neither', () => {
-      // Dropdown 500px tall, won't fit above (300) or below (428)
-      // Below has more room → stays below
-      setTrigger({ top: 300, bottom: 340 });
-      setDropdown({ height: 500 });
-
-      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
-      expect(position.value.class).toBe('top-full mt-2');
-    });
-
-    it('picks above when above has more space and neither fits', () => {
-      // Dropdown 600px tall, won't fit above (500) or below (228)
-      // Above has more room → flips above
-      setTrigger({ top: 500, bottom: 540 });
-      setDropdown({ height: 600 });
-
-      const { position } = useDropdownPosition(ref(null), ref(null), ref(true));
-      expect(position.value.class).toBe('bottom-full mb-2');
-    });
-
-    it('returns default when disabled', () => {
-      setTrigger({ top: 700, bottom: 740 });
-      setDropdown({ height: 200 });
-
-      const { position } = useDropdownPosition(
-        ref(null),
-        ref(null),
-        ref(false)
-      );
-      expect(position.value.class).toBe('top-full mt-2');
-      expect(position.value.style).toEqual({});
-    });
-  });
-
-  describe('fixedPosition', () => {
-    it('places below with correct top and maxHeight', () => {
-      // Trigger at y=140, space below = 628
-      // top = 140 + 8(gap) = 148
-      // maxHeight = 628 - 8(gap) - 16(margin) = 604
-      setTrigger({ top: 100, bottom: 140 });
-      setDropdown({ height: 200, width: 200 });
-
-      const { fixedPosition } = useDropdownPosition(
-        ref(null),
-        ref(null),
-        ref(true)
-      );
-
-      expect(fixedPosition.value.style.top).toBe('148px');
-      expect(fixedPosition.value.style.bottom).toBeUndefined();
-      expect(fixedPosition.value.style.maxHeight).toBe('604px');
-    });
-
-    it('flips above with correct bottom and maxHeight', () => {
-      // Trigger near bottom at y=650, space below = 78 → doesn't fit
-      // Flips above: bottom = 768 - 650 + 8 = 126
-      // maxHeight = 650 - 8 - 16 = 626
-      setTrigger({ top: 650, bottom: 690 });
-      setDropdown({ height: 200, width: 200 });
-
-      const { fixedPosition } = useDropdownPosition(
-        ref(null),
-        ref(null),
-        ref(true)
-      );
-
-      expect(fixedPosition.value.style.bottom).toBe('126px');
-      expect(fixedPosition.value.style.top).toBeUndefined();
-      expect(fixedPosition.value.style.maxHeight).toBe('626px');
-    });
-
-    it('constrains maxHeight to available space on short viewports', () => {
-      // Short viewport (400px), trigger in the middle, dropdown 500px tall
-      // Neither side fits → above (200) > below (160) → places above
-      // maxHeight capped to 200 - 8 - 16 = 176
-      winHeight.value = 400;
-      setTrigger({ top: 200, bottom: 240 });
-      setDropdown({ height: 500, width: 200 });
-
-      const { fixedPosition } = useDropdownPosition(
-        ref(null),
-        ref(null),
-        ref(true)
-      );
-
-      expect(fixedPosition.value.style.bottom).toBeDefined();
-      expect(fixedPosition.value.style.maxHeight).toBe('176px');
-    });
-
-    it('returns defaults when disabled', () => {
-      const { fixedPosition } = useDropdownPosition(
-        ref(null),
-        ref(null),
-        ref(false)
-      );
-      expect(fixedPosition.value.class).toBe('fixed z-[9999]');
-      expect(fixedPosition.value.style).toEqual({});
-    });
-  });
-
-  describe('horizontal positioning (fixedPosition)', () => {
-    it('anchors to the right edge by default (align=end, LTR)', () => {
-      // align=end + LTR → anchorLeft=false → uses style.right
-      // right = 1024 - 900 = 124
-      setTrigger({ top: 100, bottom: 140, left: 800, right: 900 });
-      setDropdown({ height: 100, width: 200 });
-
-      const { fixedPosition } = useDropdownPosition(
-        ref(null),
-        ref(null),
-        ref(true)
-      );
-
-      expect(fixedPosition.value.style.right).toBe('124px');
-    });
-
-    it('anchors to the left edge when align=start (LTR)', () => {
-      // align=start + LTR → anchorLeft=true → uses style.left
-      setTrigger({ top: 100, bottom: 140, left: 100, right: 200 });
-      setDropdown({ height: 100, width: 200 });
-
-      const { fixedPosition } = useDropdownPosition(
-        ref(null),
-        ref(null),
-        ref(true),
-        { align: 'start' }
-      );
-
-      expect(fixedPosition.value.style.left).toBe('100px');
-    });
-
-    it('shifts left when dropdown overflows right edge', () => {
-      // Trigger at x=900, dropdown 300px wide → 900+300=1200 > 1024
-      // Falls back to right: 16px (margin)
-      setTrigger({ top: 100, bottom: 140, left: 900, right: 1000 });
-      setDropdown({ height: 100, width: 300 });
-
-      const { fixedPosition } = useDropdownPosition(
-        ref(null),
-        ref(null),
-        ref(true),
-        { align: 'start' }
-      );
-
-      expect(fixedPosition.value.style.right).toBe('16px');
-    });
-  });
-
-  describe('RTL', () => {
-    beforeEach(() => {
-      document.body.innerHTML = '<div id="app" dir="rtl"></div>';
-    });
-
-    it('flips anchor direction in RTL (align=end anchors left)', () => {
-      // align=end + RTL → anchorLeft=true → uses style.left
-      setTrigger({ top: 100, bottom: 140, left: 100, right: 200 });
-      setDropdown({ height: 100, width: 200 });
-
-      const { fixedPosition } = useDropdownPosition(
-        ref(null),
-        ref(null),
-        ref(true)
-      );
-
-      expect(fixedPosition.value.style.left).toBe('100px');
-    });
-  });
-});
diff --git a/app/javascript/dashboard/composables/useDropdownPosition.js b/app/javascript/dashboard/composables/useDropdownPosition.js
deleted file mode 100644
index 93afc30b1..000000000
--- a/app/javascript/dashboard/composables/useDropdownPosition.js
+++ /dev/null
@@ -1,128 +0,0 @@
-import { computed, unref, watch } from 'vue';
-import { useElementBounding, useWindowSize } from '@vueuse/core';
-
-const FALLBACK_SIZE = 200;
-const SAFE_MARGIN = 16;
-const GAP = 8;
-
-/**
- * Auto-position a floating element based on available viewport space.
- *
- * @param {Ref} triggerRef - Trigger element ref
- * @param {Ref} dropdownRef - Dropdown/popover element ref
- * @param {Ref} enabled - Whether to calculate position
- * @param {Object} options
- * @param {Ref}    [options.container] - Constraining container ref
- * @param {number} [options.margin=16] - Min distance from viewport/container edges
- * @param {string} [options.align='end'] - 'start' or 'end' (flips automatically for RTL)
- */
-export function useDropdownPosition(
-  triggerRef,
-  dropdownRef,
-  enabled,
-  { container = null, margin = SAFE_MARGIN, align = 'end' } = {}
-) {
-  const trigger = useElementBounding(triggerRef);
-  const dropdown = useElementBounding(dropdownRef);
-  const bounds = useElementBounding(container);
-  const { width: winWidth, height: winHeight } = useWindowSize();
-
-  const isRTL = computed(
-    () => document.querySelector('#app[dir]')?.getAttribute('dir') === 'rtl'
-  );
-
-  // Whether to anchor to the left edge of the trigger
-  const anchorLeft = computed(() => (align === 'start') !== isRTL.value);
-
-  const verticalClass = computed(() => {
-    if (!unref(enabled)) return 'top-full mt-2';
-    const dh = dropdown.height.value || FALLBACK_SIZE;
-    const spaceBelow = winHeight.value - trigger.bottom.value;
-    const spaceAbove = trigger.top.value;
-    // Only flip above if it fits there; otherwise stay below (more room or equal)
-    if (spaceBelow >= dh + margin) return 'top-full mt-2';
-    if (spaceAbove >= dh + margin) return 'bottom-full mb-2';
-    return spaceBelow >= spaceAbove ? 'top-full mt-2' : 'bottom-full mb-2';
-  });
-
-  // Relative mode: Tailwind class + style for absolute-in-parent dropdowns
-  const position = computed(() => {
-    if (!unref(enabled)) return { class: 'top-full mt-2', style: {} };
-
-    const dw = dropdown.width.value || FALLBACK_SIZE;
-    const leftBound = container ? bounds.left.value : 0;
-    const rightBound = container ? bounds.right.value : winWidth.value;
-    const style = {};
-
-    if (anchorLeft.value) {
-      const available = rightBound - trigger.left.value;
-      const overflow = dw - available;
-      style.left = overflow > 0 ? `-${overflow}px` : '0px';
-    } else {
-      const available = trigger.right.value - leftBound;
-      const overflow = dw - available;
-      style.right = overflow > 0 ? `-${overflow}px` : '0px';
-    }
-
-    return { class: verticalClass.value, style };
-  });
-
-  // Fixed mode: styles for teleported popovers
-  const fixedPosition = computed(() => {
-    if (!unref(enabled)) return { class: 'fixed z-[9999]', style: {} };
-
-    const dh = dropdown.height.value || FALLBACK_SIZE;
-    const dw = dropdown.width.value || FALLBACK_SIZE;
-    const spaceBelow = winHeight.value - trigger.bottom.value;
-    const style = {};
-
-    // Vertical: prefer below, flip above only if it fits, else pick the larger side
-    const spaceAbove = trigger.top.value;
-    const placeAbove =
-      spaceBelow < dh + margin &&
-      (spaceAbove >= dh + margin || spaceAbove > spaceBelow);
-
-    if (placeAbove) {
-      style.bottom = `${winHeight.value - trigger.top.value + GAP}px`;
-      style.maxHeight = `${spaceAbove - GAP - margin}px`;
-    } else {
-      style.top = `${trigger.bottom.value + GAP}px`;
-      style.maxHeight = `${spaceBelow - GAP - margin}px`;
-    }
-
-    // Horizontal
-    if (anchorLeft.value) {
-      const left = trigger.left.value;
-      if (left + dw > winWidth.value - margin) {
-        style.right = `${margin}px`;
-      } else {
-        style.left = `${Math.max(margin, left)}px`;
-      }
-    } else {
-      const right = winWidth.value - trigger.right.value;
-      if (trigger.right.value - dw < margin) {
-        style.left = `${margin}px`;
-      } else {
-        style.right = `${right}px`;
-      }
-    }
-
-    return { class: 'fixed z-[9999]', style };
-  });
-
-  const updatePosition = () => {
-    trigger.update();
-    dropdown.update();
-    if (container) bounds.update();
-  };
-
-  // Update position when dropdown opens to ensure RTL state is current
-  watch(
-    () => unref(enabled),
-    isEnabled => {
-      if (isEnabled) updatePosition();
-    }
-  );
-
-  return { position, fixedPosition, updatePosition };
-}
diff --git a/app/javascript/dashboard/modules/contact/ContactDeleteModal.vue b/app/javascript/dashboard/modules/contact/ContactDeleteModal.vue
deleted file mode 100644
index 3bf48e184..000000000
--- a/app/javascript/dashboard/modules/contact/ContactDeleteModal.vue
+++ /dev/null
@@ -1,94 +0,0 @@
-<script setup>
-import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useStore } from 'vuex';
-import { useRoute, useRouter } from 'vue-router';
-import { useAlert } from 'dashboard/composables';
-import { useMapGetter } from 'dashboard/composables/store';
-
-import Popover from 'dashboard/components-next/popover/Popover.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
-
-import {
-  isAConversationRoute,
-  isAInboxViewRoute,
-  getConversationDashboardRoute,
-} from 'dashboard/helper/routeHelpers';
-
-const props = defineProps({
-  contact: {
-    type: Object,
-    required: true,
-  },
-});
-
-const emit = defineEmits(['close', 'deleted']);
-
-const { t } = useI18n();
-const store = useStore();
-const route = useRoute();
-const router = useRouter();
-
-const uiFlags = useMapGetter('contacts/getUIFlags');
-
-const confirmMessage = computed(
-  () => `${t('DELETE_CONTACT.CONFIRM.MESSAGE')} ${props.contact.name}?`
-);
-
-const onDelete = async hide => {
-  try {
-    await store.dispatch('contacts/delete', props.contact.id);
-    useAlert(t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
-    hide();
-    emit('deleted');
-    emit('close');
-
-    if (isAConversationRoute(route.name)) {
-      router.push({ name: getConversationDashboardRoute(route.name) });
-    } else if (isAInboxViewRoute(route.name)) {
-      router.push({ name: 'inbox_view' });
-    } else if (route.name !== 'contacts_dashboard') {
-      router.push({ name: 'contacts_dashboard' });
-    }
-  } catch (error) {
-    useAlert(error.message || t('DELETE_CONTACT.API.ERROR_MESSAGE'));
-  }
-};
-</script>
-
-<template>
-  <Popover @hide="$emit('close')">
-    <slot name="trigger" />
-    <template #content="{ hide }">
-      <div
-        class="w-full md:w-80 p-6 flex flex-col gap-4 border-0 md:border rounded-xl md:border-n-strong"
-      >
-        <div class="flex flex-col gap-2">
-          <h3 class="text-base font-medium leading-6 text-n-slate-12">
-            {{ $t('DELETE_CONTACT.CONFIRM.TITLE') }}
-          </h3>
-          <p class="mb-0 text-sm text-n-slate-11">
-            {{ confirmMessage }}
-          </p>
-        </div>
-        <div class="flex items-center justify-end gap-2">
-          <Button
-            faded
-            slate
-            sm
-            :label="$t('DELETE_CONTACT.CONFIRM.NO')"
-            @click="hide"
-          />
-          <Button
-            ruby
-            sm
-            :label="$t('DELETE_CONTACT.CONFIRM.YES')"
-            :is-loading="uiFlags.isDeleting"
-            :disabled="uiFlags.isDeleting"
-            @click="onDelete(hide)"
-          />
-        </div>
-      </div>
-    </template>
-  </Popover>
-</template>
diff --git a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
index 1a343f777..8db16d9e5 100644
--- a/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
+++ b/app/javascript/dashboard/modules/contact/ContactMergeModal.vue
@@ -5,8 +5,8 @@ import { useStore } from 'vuex';
 import { useAlert, useTrack } from 'dashboard/composables';
 import { useMapGetter } from 'dashboard/composables/store';
 
-import Popover from 'dashboard/components-next/popover/Popover.vue';
 import MergeContact from 'dashboard/modules/contact/components/MergeContact.vue';
+import Dialog from 'dashboard/components-next/dialog/Dialog.vue';
 import ContactAPI from 'dashboard/api/contacts';
 import { CONTACTS_EVENTS } from '../../helper/AnalyticsHelper/events';
 
@@ -23,6 +23,7 @@ const { t } = useI18n();
 const store = useStore();
 const uiFlags = useMapGetter('contacts/getUIFlags');
 
+const dialogRef = ref(null);
 const isSearching = ref(false);
 const searchResults = ref([]);
 
@@ -34,6 +35,21 @@ watch(
   }
 );
 
+const open = () => {
+  dialogRef.value?.open();
+};
+
+const close = () => {
+  dialogRef.value?.close();
+};
+
+defineExpose({ open, close });
+
+const onClose = () => {
+  close();
+  emit('close');
+};
+
 const onContactSearch = async query => {
   isSearching.value = true;
   searchResults.value = [];
@@ -52,7 +68,7 @@ const onContactSearch = async query => {
   }
 };
 
-const onMergeContacts = async (parentContactId, hide) => {
+const onMergeContacts = async parentContactId => {
   useTrack(CONTACTS_EVENTS.MERGED_CONTACTS);
   try {
     await store.dispatch('contacts/merge', {
@@ -60,7 +76,7 @@ const onMergeContacts = async (parentContactId, hide) => {
       parentId: parentContactId,
     });
     useAlert(t('MERGE_CONTACTS.FORM.SUCCESS_MESSAGE'));
-    hide();
+    close();
     emit('close');
   } catch (error) {
     useAlert(t('MERGE_CONTACTS.FORM.ERROR_MESSAGE'));
@@ -69,31 +85,24 @@ const onMergeContacts = async (parentContactId, hide) => {
 </script>
 
 <template>
-  <Popover @hide="$emit('close')">
-    <slot name="trigger" />
-    <template #content="{ hide }">
-      <div
-        class="w-full md:w-96 p-6 flex flex-col gap-4 border-0 md:border rounded-xl md:border-n-strong"
-      >
-        <div class="flex flex-col gap-2">
-          <h3 class="text-base font-medium leading-6 text-n-slate-12">
-            {{ $t('MERGE_CONTACTS.TITLE') }}
-          </h3>
-          <p class="mb-0 text-sm text-n-slate-11">
-            {{ $t('MERGE_CONTACTS.DESCRIPTION') }}
-          </p>
-        </div>
-        <MergeContact
-          :key="primaryContact.id"
-          :primary-contact="primaryContact"
-          :is-searching="isSearching"
-          :is-merging="uiFlags.isMerging"
-          :search-results="searchResults"
-          @search="onContactSearch"
-          @cancel="hide"
-          @submit="id => onMergeContacts(id, hide)"
-        />
-      </div>
-    </template>
-  </Popover>
+  <Dialog
+    ref="dialogRef"
+    type="edit"
+    width="2xl"
+    :title="$t('MERGE_CONTACTS.TITLE')"
+    :description="$t('MERGE_CONTACTS.DESCRIPTION')"
+    :show-cancel-button="false"
+    :show-confirm-button="false"
+  >
+    <MergeContact
+      :key="primaryContact.id"
+      :primary-contact="primaryContact"
+      :is-searching="isSearching"
+      :is-merging="uiFlags.isMerging"
+      :search-results="searchResults"
+      @search="onContactSearch"
+      @cancel="onClose"
+      @submit="onMergeContacts"
+    />
+  </Dialog>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
index 41c5854e0..2b6001729 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/ContactInfo.vue
@@ -12,12 +12,19 @@ import Avatar from 'next/avatar/Avatar.vue';
 import SocialIcons from './SocialIcons.vue';
 import EditContact from './EditContact.vue';
 import ContactMergeModal from 'dashboard/modules/contact/ContactMergeModal.vue';
-import ContactDeleteModal from 'dashboard/modules/contact/ContactDeleteModal.vue';
 import ComposeConversation from 'dashboard/components-next/NewConversation/ComposeConversation.vue';
+import { BUS_EVENTS } from 'shared/constants/busEvents';
 import NextButton from 'dashboard/components-next/button/Button.vue';
 import VoiceCallButton from 'dashboard/components-next/Contacts/VoiceCallButton.vue';
 import InlineInput from 'dashboard/components-next/inline-input/InlineInput.vue';
 
+import {
+  isAConversationRoute,
+  isAInboxViewRoute,
+  getConversationDashboardRoute,
+} from '../../../../helper/routeHelpers';
+import { emitter } from 'shared/helpers/mitt';
+
 export default {
   components: {
     NextButton,
@@ -27,7 +34,6 @@ export default {
     ComposeConversation,
     SocialIcons,
     ContactMergeModal,
-    ContactDeleteModal,
     VoiceCallButton,
     InlineInput,
   },
@@ -51,6 +57,7 @@ export default {
   data() {
     return {
       showEditModal: false,
+      showDeleteModal: false,
       isEditingName: false,
       editName: '',
     };
@@ -92,6 +99,10 @@ export default {
         telegram,
       };
     },
+    // Delete Modal
+    confirmDeleteMessage() {
+      return ` ${this.contact.name}?`;
+    },
   },
   watch: {
     'contact.id': {
@@ -106,6 +117,28 @@ export default {
     toggleEditModal() {
       this.showEditModal = !this.showEditModal;
     },
+    openComposeConversationModal(toggleFn) {
+      toggleFn();
+      // Flag to prevent triggering drag n drop,
+      // When compose modal is active
+      emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, true);
+    },
+    closeComposeConversationModal() {
+      // Flag to enable drag n drop,
+      // When compose modal is closed
+      emitter.emit(BUS_EVENTS.NEW_CONVERSATION_MODAL, false);
+    },
+    toggleDeleteModal() {
+      this.showDeleteModal = !this.showDeleteModal;
+    },
+    confirmDeletion() {
+      this.deleteContact(this.contact);
+      this.closeDelete();
+    },
+    closeDelete() {
+      this.showDeleteModal = false;
+      this.showEditModal = false;
+    },
     findCountryFlag(countryCode, cityAndCountry) {
       try {
         if (!countryCode) {
@@ -118,6 +151,36 @@ export default {
         return '';
       }
     },
+    async deleteContact({ id }) {
+      try {
+        await this.$store.dispatch('contacts/delete', id);
+        this.$emit('panelClose');
+        useAlert(this.$t('DELETE_CONTACT.API.SUCCESS_MESSAGE'));
+
+        if (isAConversationRoute(this.$route.name)) {
+          this.$router.push({
+            name: getConversationDashboardRoute(this.$route.name),
+          });
+        } else if (isAInboxViewRoute(this.$route.name)) {
+          this.$router.push({
+            name: 'inbox_view',
+          });
+        } else if (this.$route.name !== 'contacts_dashboard') {
+          this.$router.push({
+            name: 'contacts_dashboard',
+          });
+        }
+      } catch (error) {
+        useAlert(
+          error.message
+            ? error.message
+            : this.$t('DELETE_CONTACT.API.ERROR_MESSAGE')
+        );
+      }
+    },
+    openMergeModal() {
+      this.$refs.mergeModal?.open();
+    },
     startEditingName() {
       this.editName = this.contact.name || '';
       this.isEditingName = true;
@@ -291,14 +354,19 @@ export default {
         </div>
       </div>
       <div class="flex items-center w-full mt-0.5 gap-2">
-        <ComposeConversation :contact-id="String(contact.id)">
-          <template #trigger>
+        <ComposeConversation
+          :contact-id="String(contact.id)"
+          is-modal
+          @close="closeComposeConversationModal"
+        >
+          <template #trigger="{ toggle }">
             <NextButton
               v-tooltip.top-end="$t('CONTACT_PANEL.NEW_MESSAGE')"
               icon="i-ph-chat-circle-dots"
               slate
               faded
               sm
+              @click="openComposeConversationModal(toggle)"
             />
           </template>
         </ComposeConversation>
@@ -319,41 +387,45 @@ export default {
           sm
           @click="toggleEditModal"
         />
-        <ContactMergeModal :primary-contact="contact">
-          <template #trigger>
-            <NextButton
-              v-tooltip.top-end="$t('CONTACT_PANEL.MERGE_CONTACT')"
-              icon="i-ph-arrows-merge"
-              slate
-              faded
-              sm
-              :disabled="uiFlags.isMerging"
-            />
-          </template>
-        </ContactMergeModal>
-        <ContactDeleteModal
+        <NextButton
+          v-tooltip.top-end="$t('CONTACT_PANEL.MERGE_CONTACT')"
+          icon="i-ph-arrows-merge"
+          slate
+          faded
+          sm
+          :disabled="uiFlags.isMerging"
+          @click="openMergeModal"
+        />
+        <NextButton
           v-if="isAdmin"
-          :contact="contact"
-          @deleted="$emit('panelClose')"
-        >
-          <template #trigger>
-            <NextButton
-              v-tooltip.top-end="$t('DELETE_CONTACT.BUTTON_LABEL')"
-              icon="i-ph-trash"
-              slate
-              faded
-              sm
-              ruby
-              :disabled="uiFlags.isDeleting"
-            />
-          </template>
-        </ContactDeleteModal>
+          v-tooltip.top-end="$t('DELETE_CONTACT.BUTTON_LABEL')"
+          icon="i-ph-trash"
+          slate
+          faded
+          sm
+          ruby
+          :disabled="uiFlags.isDeleting"
+          @click="toggleDeleteModal"
+        />
       </div>
       <EditContact
+        v-if="showEditModal"
         :show="showEditModal"
         :contact="contact"
         @cancel="toggleEditModal"
       />
+      <ContactMergeModal ref="mergeModal" :primary-contact="contact" />
     </div>
+    <woot-delete-modal
+      v-if="showDeleteModal"
+      v-model:show="showDeleteModal"
+      :on-close="closeDelete"
+      :on-confirm="confirmDeletion"
+      :title="$t('DELETE_CONTACT.CONFIRM.TITLE')"
+      :message="$t('DELETE_CONTACT.CONFIRM.MESSAGE')"
+      :message-value="confirmDeleteMessage"
+      :confirm-text="$t('DELETE_CONTACT.CONFIRM.YES')"
+      :reject-text="$t('DELETE_CONTACT.CONFIRM.NO')"
+    />
   </div>
 </template>
diff --git a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
index eaa911a42..33a14fe65 100644
--- a/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
+++ b/app/javascript/dashboard/routes/dashboard/conversation/contact/EditContact.vue
@@ -1,70 +1,74 @@
-<script setup>
-import { useStore } from 'dashboard/composables/store';
-import { useMapGetter } from 'dashboard/composables/store';
-import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
+<script>
+import { mapGetters } from 'vuex';
 import ContactForm from './ContactForm.vue';
-import Button from 'dashboard/components-next/button/Button.vue';
 
-const props = defineProps({
-  show: { type: Boolean, default: false },
-  contact: { type: Object, default: () => ({}) },
-});
-
-const emit = defineEmits(['cancel']);
-
-const store = useStore();
-const uiFlags = useMapGetter('contacts/getUIFlags');
-
-const onCancel = () => emit('cancel');
-
-const onSubmit = async contactItem => {
-  await store.dispatch('contacts/update', contactItem);
-  await store.dispatch('contacts/fetchContactableInbox', props.contact.id);
-};
-
-// Restore Escape-to-close behavior that was provided by woot-modal before
-// this drawer was reimplemented as a plain fixed panel.
-useKeyboardEvents({
-  Escape: {
-    action: () => {
-      if (props.show) onCancel();
-    },
-    allowOnFocusedInput: true,
+export default {
+  components: {
+    ContactForm,
   },
-});
+  props: {
+    show: {
+      type: Boolean,
+      default: false,
+    },
+    contact: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  emits: ['cancel', 'update:show'],
+  computed: {
+    ...mapGetters({
+      uiFlags: 'contacts/getUIFlags',
+    }),
+    localShow: {
+      get() {
+        return this.show;
+      },
+      set(value) {
+        this.$emit('update:show', value);
+      },
+    },
+  },
+
+  methods: {
+    onCancel() {
+      this.$emit('cancel');
+    },
+    onSuccess() {
+      this.$emit('cancel');
+    },
+    async onSubmit(contactItem) {
+      await this.$store.dispatch('contacts/update', contactItem);
+      await this.$store.dispatch(
+        'contacts/fetchContactableInbox',
+        this.contact.id
+      );
+    },
+  },
+};
 </script>
 
 <template>
-  <transition
-    enter-active-class="transition duration-200 ease-out"
-    enter-from-class="ltr:translate-x-full rtl:-translate-x-full opacity-0"
-    leave-active-class="transition duration-150 ease-in"
-    leave-to-class="ltr:translate-x-[30%] rtl:-translate-x-[30%] opacity-0"
+  <woot-modal
+    v-model:show="localShow"
+    :on-close="onCancel"
+    modal-type="right-aligned"
   >
-    <div
-      v-if="show"
-      class="fixed inset-y-0 ltr:right-0 rtl:left-0 z-50 flex flex-col w-[30rem] max-w-full h-full bg-n-surface-2 ltr:border-l rtl:border-r border-n-weak shadow-lg overflow-auto"
-    >
-      <div class="flex items-center justify-between px-8 pt-8 pb-2">
-        <div>
-          <h2 class="text-lg font-medium text-n-slate-12 mb-1">
-            {{
-              `${$t('EDIT_CONTACT.TITLE')} - ${contact.name || contact.email}`
-            }}
-          </h2>
-          <p class="text-sm text-n-slate-11 mb-0">
-            {{ $t('EDIT_CONTACT.DESC') }}
-          </p>
-        </div>
-        <Button icon="i-lucide-x" slate ghost sm @click="onCancel" />
-      </div>
+    <div class="flex flex-col h-auto overflow-auto">
+      <woot-modal-header
+        :header-title="`${$t('EDIT_CONTACT.TITLE')} - ${
+          contact.name || contact.email
+        }`"
+        :header-content="$t('EDIT_CONTACT.DESC')"
+      />
       <ContactForm
         :contact="contact"
         :in-progress="uiFlags.isUpdating"
         :on-submit="onSubmit"
-        @success="onCancel"
+        @success="onSuccess"
         @cancel="onCancel"
       />
     </div>
-  </transition>
+  </woot-modal>
 </template>