Context menus (#133)

* Context Menus in home and library

* Menu impl

* FInalize context menus

* Update App.vue

* Update App.vue

* fix scrolling

theseus_gui/src/components/ui/ContextMenu.vue

@@ -0,0 +1,161 @@
+<template>
+  <transition name="fade">
+    <div
+      v-show="shown"
+      ref="contextMenu"
+      class="context-menu"
+      :style="{
+        left: left,
+        top: top,
+      }"
+    >
+      <div v-for="(option, index) in options" :key="index" @click.stop="optionClicked(option.name)">
+        <hr v-if="option.type === 'divider'" class="divider" />
+        <div v-else class="item clickable" :class="[option.color ?? 'base']">
+          <slot :name="option.name" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+
+const emit = defineEmits(['menu-closed', 'option-clicked'])
+
+const item = ref(null)
+const contextMenu = ref(null)
+const options = ref([])
+const left = ref('0px')
+const top = ref('0px')
+const shown = ref(false)
+
+defineExpose({
+  showMenu: (event, passedItem, passedOptions) => {
+    item.value = passedItem
+    options.value = passedOptions
+
+    const menuWidth = contextMenu.value.clientWidth
+    const menuHeight = contextMenu.value.clientHeight
+
+    if (menuWidth + event.pageX >= window.innerWidth) {
+      left.value = event.pageX - menuWidth + 2 + 'px'
+    } else {
+      left.value = event.pageX - 2 + 'px'
+    }
+
+    if (menuHeight + event.pageY >= window.innerHeight) {
+      top.value = event.pageY - menuHeight + 2 + 'px'
+    } else {
+      top.value = event.pageY - 2 + 'px'
+    }
+
+    shown.value = true
+  },
+})
+
+const hideContextMenu = () => {
+  shown.value = false
+  emit('menu-closed')
+}
+
+const optionClicked = (option) => {
+  console.log('item check', item.value)
+  emit('option-clicked', {
+    item: item.value,
+    option: option,
+  })
+  hideContextMenu()
+}
+
+const onEscKeyRelease = (event) => {
+  if (event.keyCode === 27) {
+    hideContextMenu()
+  }
+}
+
+const handleClickOutside = (event) => {
+  const elements = document.elementsFromPoint(event.clientX, event.clientY)
+  if (
+    contextMenu.value &&
+    contextMenu.value.$el !== event.target &&
+    !elements.includes(contextMenu.value.$el)
+  ) {
+    hideContextMenu()
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('click', handleClickOutside)
+  document.body.addEventListener('keyup', onEscKeyRelease)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('click', handleClickOutside)
+  document.removeEventListener('keyup', onEscKeyRelease)
+})
+</script>
+
+<style lang="scss" scoped>
+.context-menu {
+  background-color: var(--color-raised-bg);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-floating);
+  border: 1px solid var(--color-button-bg);
+  margin: 0;
+  position: fixed;
+  z-index: 1000000;
+  overflow: hidden;
+  padding: var(--gap-sm);
+
+  .item {
+    align-items: center;
+    color: var(--color-base);
+    cursor: pointer;
+    display: flex;
+    gap: var(--gap-sm);
+    padding: var(--gap-sm);
+    border-radius: var(--radius-sm);
+
+    &:hover,
+    &:active {
+      &.base {
+        background-color: var(--color-button-bg);
+        color: var(--color-contrast);
+      }
+
+      &.primary {
+        background-color: var(--color-brand);
+        color: var(--color-accent-contrast);
+      }
+
+      &.danger {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+      }
+
+      &.contrast {
+        background-color: var(--color-orange);
+        color: var(--color-accent-contrast);
+      }
+    }
+  }
+
+  .divider {
+    border: 1px solid var(--color-button-bg);
+    margin: var(--gap-sm);
+    pointer-events: none;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

theseus_gui/src/components/ui/Instance.vue

@@ -1,21 +1,24 @@
 <script setup>
 import { onUnmounted, ref, useSlots, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { Card, DownloadIcon, XIcon, Avatar, AnimatedLogo, PlayIcon } from 'omorphia'
+import { Card, DownloadIcon, StopCircleIcon, Avatar, AnimatedLogo, PlayIcon } from 'omorphia'
 import { convertFileSrc } from '@tauri-apps/api/tauri'
+import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
 import { install as pack_install } from '@/helpers/pack'
-import { run, list } from '@/helpers/profile'
+import { get, list, remove, run } from '@/helpers/profile'
 import {
-  kill_by_uuid,
   get_all_running_profile_paths,
   get_uuids_by_profile_path,
+  kill_by_uuid,
 } from '@/helpers/process'
 import { process_listener } from '@/helpers/events'
 import { useFetch } from '@/helpers/fetch.js'
-import { handleError } from '@/store/state.js'
-import InstallConfirmModal from '@/components/ui/InstallConfirmModal.vue'
+import { handleError, useSearch } from '@/store/state.js'
+import { showInFolder } from '@/helpers/utils.js'
 import InstanceInstallModal from '@/components/ui/InstanceInstallModal.vue'
 
+const searchStore = useSearch()
+
 const props = defineProps({
   instance: {
     type: Object,
@@ -69,7 +72,7 @@ const checkProcess = async () => {
 }
 
 const install = async (e) => {
-  e.stopPropagation()
+  e?.stopPropagation()
   modLoading.value = true
   const versions = await useFetch(
     `https://api.modrinth.com/v2/project/${props.instance.project_id}/version`,
@@ -108,7 +111,7 @@ const install = async (e) => {
 }
 
 const play = async (e) => {
-  e.stopPropagation()
+  e?.stopPropagation()
   modLoading.value = true
   uuid.value = await run(props.instance.path).catch(handleError)
   modLoading.value = false
@@ -116,7 +119,7 @@ const play = async (e) => {
 }
 
 const stop = async (e) => {
-  e.stopPropagation()
+  e?.stopPropagation()
   playing.value = false
 
   // If we lost the uuid for some reason, such as a user navigating
@@ -131,6 +134,31 @@ const stop = async (e) => {
   uuid.value = null
 }
 
+const deleteInstance = async () => {
+  await remove(props.instance.path).catch(handleError)
+}
+
+const openFolder = async () => {
+  await showInFolder(props.instance.path)
+}
+
+const addContent = async () => {
+  searchStore.instanceContext = await get(props.instance.path).catch(handleError)
+  await router.push({ path: '/browse/mod' })
+}
+
+defineExpose({
+  install,
+  playing,
+  play,
+  stop,
+  seeInstance,
+  openFolder,
+  deleteInstance,
+  addContent,
+  instance: props.instance,
+})
+
 const unlisten = await process_listener((e) => {
   if (e.event === 'finished' && e.uuid === uuid.value) playing.value = false
 })
@@ -176,7 +204,7 @@ onUnmounted(() => unlisten())
       @mouseenter="checkProcess"
     >
       <Avatar
-        size="none"
+        size="sm"
         :src="
           props.instance.metadata
             ? !props.instance.metadata.icon ||
@@ -213,7 +241,7 @@ onUnmounted(() => unlisten())
         @click="stop"
         @mousehover="checkProcess"
       >
-        <XIcon />
+        <StopCircleIcon />
       </div>
       <div v-else class="install cta button-base" @click="install"><DownloadIcon /></div>
     </template>