chore: Scroll lock composable to reuse

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 };
+}