chore: Scroll lock composable to reuse

app/javascript/dashboard/components-next/message/Message.vue

@@ -446,9 +446,9 @@ const setupHighlightTimer = () => {
   }, HIGHLIGHT_TIMER);
 };
 
-const openForwardModal = (event = null) => {
+const openForwardModal = ({ x, y }) => {
   // Open forward modal, with the event from context menu
-  emailBubbleRef.value.openForwardModal(event);
+  emailBubbleRef.value.openForwardModal({ x, y });
 };
 
 onMounted(setupHighlightTimer);

app/javascript/dashboard/components-next/message/bubbles/Email/Index.vue

@@ -1,15 +1,9 @@
 <script setup>
-import {
-  computed,
-  useTemplateRef,
-  ref,
-  onMounted,
-  onUnmounted,
-  reactive,
-} from 'vue';
+import { computed, useTemplateRef, ref, onMounted, reactive } from 'vue';
 import { Letter } from 'vue-letter';
 import { allowedCssProperties } from 'lettersanitizer';
-import { useScrollLock, useWindowSize, useToggle } from '@vueuse/core';
+import { useWindowSize, useToggle } from '@vueuse/core';
+import { useGlobalScrollLock } from 'dashboard/composables/useGlobalScrollLock';
 
 import Icon from 'next/icon/Icon.vue';
 import { EmailQuoteExtractor } from './removeReply.js';
@@ -40,7 +34,7 @@ const contentContainer = useTemplateRef('contentContainer');
 // Forward form - managed locally but can be triggered by parent
 const [showForwardMessageModal, toggleForwardModal] = useToggle();
 const forwardFormPosition = reactive({ top: 0, right: 0 });
-const conversationPanelScrollLock = ref(null);
+const conversationPanelScrollLock = useGlobalScrollLock();
 const { width: windowWidth, height: windowHeight } = useWindowSize();
 
 onMounted(() => {
@@ -116,15 +110,12 @@ const handleSeeOriginal = () => {
 
 const closeForwardModal = () => {
   toggleForwardModal(false);
-  if (conversationPanelScrollLock.value)
-    conversationPanelScrollLock.value.value = false;
+  conversationPanelScrollLock.unlockScroll();
 };
 
-const openForwardModal = (event = null) => {
+const openForwardModal = ({ x, y }) => {
   // Lock conversation panel scroll
-  // To prevent the conversation from scrolling when the forward form is opened
-  const panel = document.querySelector('.conversation-panel');
-  if (panel) conversationPanelScrollLock.value = useScrollLock(panel, true);
+  conversationPanelScrollLock.lockScroll('.conversation-panel');
 
   // Form dimensions
   const [formWidth, formHeight] = [672, 500];
@@ -132,12 +123,11 @@ const openForwardModal = (event = null) => {
   const { value: winHeight } = windowHeight;
 
   // Position calculation
-  const rect = event?.target?.getBoundingClientRect?.();
-  if (rect) {
+  if (x && y) {
     // Calculate position based on click location of context menu forward button
     const { left, top } = calculatePosition(
-      rect.left,
-      rect.top,
+      x,
+      y,
       formWidth,
       formHeight,
       winWidth,
@@ -155,11 +145,6 @@ const openForwardModal = (event = null) => {
   toggleForwardModal(true);
 };
 
-onUnmounted(() => {
-  if (conversationPanelScrollLock.value)
-    conversationPanelScrollLock.value.value = false;
-});
-
 defineExpose({
   openForwardModal,
   closeForwardModal,

app/javascript/dashboard/composables/spec/useGlobalScrollLock.spec.js

@@ -0,0 +1,116 @@
+import { ref } from 'vue';
+import { useGlobalScrollLock } from '../useGlobalScrollLock';
+import { useScrollLock } from '@vueuse/core';
+import { describe, beforeEach, test, expect, vi } from 'vitest';
+
+vi.mock('@vueuse/core', () => ({
+  useScrollLock: vi.fn(),
+}));
+
+vi.mock('vue', async () => {
+  const actual = await vi.importActual('vue');
+  return {
+    ...actual,
+    onUnmounted: vi.fn(fn => {
+      vi.fn.unmountCallback = fn;
+    }),
+  };
+});
+
+describe('useGlobalScrollLock', () => {
+  let mockLockRef;
+
+  beforeEach(() => {
+    document.body.innerHTML = `
+      <div class="conversation-panel"></div>
+      <div id="modal"></div>
+    `;
+
+    mockLockRef = ref(true);
+    useScrollLock.mockReturnValue(mockLockRef);
+
+    vi.clearAllMocks();
+  });
+
+  test('provides the expected API', () => {
+    const api = useGlobalScrollLock();
+
+    expect(api).toHaveProperty('lockScroll');
+    expect(api).toHaveProperty('unlockScroll');
+    expect(api).toHaveProperty('isLocked');
+    expect(api.isLocked.value).toBe(false);
+  });
+
+  test('handles various target types', () => {
+    const { lockScroll } = useGlobalScrollLock();
+
+    lockScroll('.conversation-panel');
+    expect(useScrollLock).toHaveBeenLastCalledWith(
+      document.querySelector('.conversation-panel'),
+      true
+    );
+
+    const element = document.querySelector('#modal');
+    lockScroll(element);
+    expect(useScrollLock).toHaveBeenLastCalledWith(element, true);
+
+    const elementRef = ref(element);
+    lockScroll(elementRef);
+    expect(useScrollLock).toHaveBeenLastCalledWith(element, true);
+  });
+
+  test('handles default target parameter', () => {
+    const defaultEl = document.querySelector('.conversation-panel');
+    const { lockScroll } = useGlobalScrollLock(defaultEl);
+
+    lockScroll();
+    expect(useScrollLock).toHaveBeenCalledWith(defaultEl, true);
+  });
+
+  test('fails gracefully with invalid targets', () => {
+    const { lockScroll, isLocked } = useGlobalScrollLock();
+
+    expect(lockScroll('.doesnt-exist')).toBe(false);
+    expect(isLocked.value).toBe(false);
+
+    expect(lockScroll(null)).toBe(false);
+    expect(isLocked.value).toBe(false);
+
+    expect(useScrollLock).not.toHaveBeenCalled();
+  });
+
+  test('manages lock state correctly', () => {
+    const { lockScroll, unlockScroll, isLocked } = useGlobalScrollLock();
+
+    expect(isLocked.value).toBe(false);
+
+    lockScroll('.conversation-panel');
+    expect(isLocked.value).toBe(true);
+    unlockScroll();
+    expect(isLocked.value).toBe(false);
+    expect(mockLockRef.value).toBe(false);
+  });
+
+  test('handles lock switching correctly', () => {
+    const { lockScroll } = useGlobalScrollLock();
+
+    lockScroll('.conversation-panel');
+    lockScroll('#modal');
+
+    expect(mockLockRef.value).toBe(false);
+    expect(useScrollLock).toHaveBeenCalledTimes(2);
+  });
+
+  test('cleans up on component unmount', () => {
+    const { lockScroll, isLocked } = useGlobalScrollLock();
+
+    lockScroll('.conversation-panel');
+    expect(isLocked.value).toBe(true);
+
+    if (vi.fn.unmountCallback) {
+      vi.fn.unmountCallback();
+    }
+
+    expect(isLocked.value).toBe(false);
+  });
+});

app/javascript/dashboard/composables/useGlobalScrollLock.js

@@ -0,0 +1,49 @@
+/**
+ * useGlobalScrollLock composable
+ *
+ * Usage:
+ *   const { lockScroll, unlockScroll, isLocked } = useGlobalScrollLock(target);
+ *   target can be a ref, DOM element, or selector string (class, id, etc)
+ *   eg: lockScroll('.conversation-panel'); unlockScroll();
+ */
+
+import { ref, unref, shallowRef, onUnmounted } from 'vue';
+import { useScrollLock } from '@vueuse/core';
+
+export function useGlobalScrollLock(defaultTarget) {
+  const scrollLockInstance = shallowRef(null);
+  const isLocked = ref(false);
+
+  function resolveTarget(target) {
+    if (!target) return null;
+    if (typeof target === 'string') return document.querySelector(target); // class, id, etc
+    if (target instanceof HTMLElement) return target; // DOM element
+    return unref(target); // ref
+  }
+
+  function unlockScroll() {
+    if (!scrollLockInstance.value) return false;
+
+    scrollLockInstance.value.value = false;
+    isLocked.value = false;
+    scrollLockInstance.value = null;
+    return true;
+  }
+
+  function lockScroll(target = defaultTarget) {
+    unlockScroll(); // Always unlock first
+
+    const el = resolveTarget(target);
+    if (!el) return false;
+
+    scrollLockInstance.value = useScrollLock(el, true);
+    isLocked.value = true;
+    return true;
+  }
+
+  onUnmounted(() => {
+    unlockScroll();
+  });
+
+  return { lockScroll, unlockScroll, isLocked };
+}

app/javascript/dashboard/modules/conversations/components/MessageContextMenu.vue

@@ -115,9 +115,12 @@ export default {
     handleClose(e) {
       this.$emit('close', e);
     },
-    openForwardModal(event) {
+    openForwardModal() {
+      this.$emit('forwardEmail', {
+        x: this.contextMenuPosition.x,
+        y: this.contextMenuPosition.y,
+      });
       this.handleClose();
-      this.$emit('forwardEmail', event);
     },
     handleTranslate() {
       const { locale } = this.getAccount(this.currentAccountId);