feat(documents): delete document from context menu

frontend/app/components/workspace/documents/CrmDocumentsPanel.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import ContactCollaborativeEditor from "~~/app/components/ContactCollaborativeEditor.client.vue";
 
 type DocumentSortOption = {
@@ -39,11 +40,74 @@ const emit = defineEmits<{
   (e: "update:documentSortMode", value: string): void;
   (e: "select-document", documentId: string): void;
   (e: "update-selected-document-body", value: string): void;
+  (e: "delete-document", documentId: string): void;
 }>();
+
+const documentContextMenu = ref<{
+  open: boolean;
+  x: number;
+  y: number;
+  documentId: string;
+}>({
+  open: false,
+  x: 0,
+  y: 0,
+  documentId: "",
+});
+
+function closeDocumentContextMenu() {
+  if (!documentContextMenu.value.open) return;
+  documentContextMenu.value = {
+    open: false,
+    x: 0,
+    y: 0,
+    documentId: "",
+  };
+}
+
+function openDocumentContextMenu(event: MouseEvent, doc: DocumentListItem) {
+  event.preventDefault();
+  event.stopPropagation();
+  emit("select-document", doc.id);
+  const padding = 8;
+  const menuWidth = 176;
+  const menuHeight = 44;
+  const maxX = Math.max(padding, window.innerWidth - menuWidth - padding);
+  const maxY = Math.max(padding, window.innerHeight - menuHeight - padding);
+  documentContextMenu.value = {
+    open: true,
+    x: Math.min(maxX, Math.max(padding, event.clientX)),
+    y: Math.min(maxY, Math.max(padding, event.clientY)),
+    documentId: doc.id,
+  };
+}
+
+function deleteDocumentFromContextMenu() {
+  const documentId = documentContextMenu.value.documentId;
+  if (!documentId) return;
+  emit("delete-document", documentId);
+  closeDocumentContextMenu();
+}
+
+function onWindowKeydown(event: KeyboardEvent) {
+  if (event.key === "Escape") {
+    closeDocumentContextMenu();
+  }
+}
+
+onMounted(() => {
+  window.addEventListener("keydown", onWindowKeydown);
+  window.addEventListener("scroll", closeDocumentContextMenu, true);
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("keydown", onWindowKeydown);
+  window.removeEventListener("scroll", closeDocumentContextMenu, true);
+});
 </script>
 
 <template>
-  <section class="flex h-full min-h-0 flex-col gap-0">
+  <section class="flex h-full min-h-0 flex-col gap-0" @click="closeDocumentContextMenu">
     <div class="grid h-full min-h-0 flex-1 gap-0 md:grid-cols-[248px_minmax(0,1fr)]">
       <aside class="h-full min-h-0 border-r border-base-300 flex flex-col">
         <div class="sticky top-0 z-20 border-b border-base-300 bg-base-100 p-2">
@@ -89,6 +153,7 @@ const emit = defineEmits<{
             class="w-full border-b border-base-300 px-3 py-2 text-left transition hover:bg-base-200/40"
             :class="props.selectedDocumentId === doc.id ? 'bg-primary/10' : ''"
             @click="emit('select-document', doc.id)"
+            @contextmenu="openDocumentContextMenu($event, doc)"
           >
             <div class="flex items-start justify-between gap-2">
               <p class="min-w-0 flex-1 truncate text-xs font-semibold">{{ doc.title }}</p>
@@ -129,5 +194,19 @@ const emit = defineEmits<{
         </div>
       </article>
     </div>
+
+    <div
+      v-if="documentContextMenu.open"
+      class="fixed z-50 w-44 rounded-lg border border-base-300 bg-base-100 p-1 shadow-xl"
+      :style="{ left: `${documentContextMenu.x}px`, top: `${documentContextMenu.y}px` }"
+      @click.stop
+    >
+      <button
+        class="btn btn-ghost btn-sm w-full justify-start text-error"
+        @click="deleteDocumentFromContextMenu"
+      >
+        Delete document
+      </button>
+    </div>
   </section>
 </template>