feat: add context menu (#3343)

Co-authored-by: Henrique Dias <mail@hacdias.com>

frontend/src/components/ContextMenu.vue

@@ -0,0 +1,47 @@
+<template>
+  <div
+    class="context-menu"
+    ref="contextMenu"
+    v-show="show"
+    :style="{
+      top: `${props.pos.y}px`,
+      left: `${left}px`,
+    }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed, onUnmounted } from "vue";
+
+const emit = defineEmits(["hide"]);
+const props = defineProps<{ show: boolean; pos: { x: number; y: number } }>();
+const contextMenu = ref<HTMLElement | null>(null);
+
+const left = computed(() => {
+  return Math.min(
+    props.pos.x,
+    window.innerWidth - (contextMenu.value?.clientWidth ?? 0)
+  );
+});
+
+const hideContextMenu = () => {
+  emit("hide");
+};
+
+watch(
+  () => props.show,
+  (val) => {
+    if (val) {
+      document.addEventListener("click", hideContextMenu);
+    } else {
+      document.removeEventListener("click", hideContextMenu);
+    }
+  }
+);
+
+onUnmounted(() => {
+  document.removeEventListener("click", hideContextMenu);
+});
+</script>

frontend/src/components/files/ListingItem.vue

@@ -20,6 +20,7 @@
     :aria-label="name"
     :aria-selected="isSelected"
     :data-ext="getExtension(name).toLowerCase()"
+    @contextmenu="contextMenu"
   >
     <div>
       <img
@@ -239,6 +240,17 @@ const itemClick = (event: Event | KeyboardEvent) => {
   else click(event);
 };
 
+const contextMenu = (event: MouseEvent) => {
+  event.preventDefault();
+  if (
+    fileStore.selected.length === 0 ||
+    event.ctrlKey ||
+    fileStore.selected.indexOf(props.index) === -1
+  ) {
+    click(event);
+  }
+};
+
 const click = (event: Event | KeyboardEvent) => {
   if (!singleClick.value && fileStore.selectedCount !== 0)
     event.preventDefault();

frontend/src/components/prompts/Move.vue

@@ -5,6 +5,7 @@
     </div>
 
     <div class="card-content">
+      <p>{{ $t("prompts.moveMessage") }}</p>
       <file-list
         ref="fileList"
         @update:selected="(val) => (dest = val)"