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/pages/project/Index.vue

@@ -2,7 +2,7 @@
   <div class="root-container">
     <div v-if="data" class="project-sidebar">
       <Instance v-if="instance" :instance="instance" small />
-      <Card class="sidebar-card">
+      <Card class="sidebar-card" @contextmenu.prevent.stop="handleRightClick">
         <Avatar size="lg" :src="data.icon_url" />
         <div class="instance-info">
           <h2 class="name">{{ data.title }}</h2>
@@ -197,6 +197,11 @@
   <InstallConfirmModal ref="confirmModal" />
   <InstanceInstallModal ref="modInstallModal" />
   <IncompatibilityWarningModal ref="incompatibilityWarning" />
+  <ContextMenu ref="options" @option-clicked="handleOptionsClick">
+    <template #install> <DownloadIcon /> Install </template>
+    <template #open_link> <GlobeIcon /> Open in Modrinth <ExternalIcon /> </template>
+    <template #copy_link> <ClipboardCopyIcon /> Copy link </template>
+  </ContextMenu>
 </template>
 
 <script setup>
@@ -220,6 +225,8 @@ import {
   formatNumber,
   ExternalIcon,
   CheckIcon,
+  GlobeIcon,
+  ClipboardCopyIcon,
 } from 'omorphia'
 import {
   BuyMeACoffeeIcon,
@@ -245,6 +252,7 @@ import { useBreadcrumbs } from '@/store/breadcrumbs'
 import IncompatibilityWarningModal from '@/components/ui/IncompatibilityWarningModal.vue'
 import { useFetch } from '@/helpers/fetch.js'
 import { handleError } from '@/store/notifications.js'
+import ContextMenu from '@/components/ui/ContextMenu.vue'
 
 const searchStore = useSearch()
 
@@ -255,6 +263,7 @@ const breadcrumbs = useBreadcrumbs()
 const confirmModal = ref(null)
 const modInstallModal = ref(null)
 const incompatibilityWarning = ref(null)
+const options = ref(null)
 const instance = ref(searchStore.instanceContext)
 const installing = ref(false)
 
@@ -394,6 +403,37 @@ async function install(version) {
 
   installing.value = false
 }
+
+const handleRightClick = (e) => {
+  options.value.showMenu(e, data.value, [
+    { name: 'install' },
+    { type: 'divider' },
+    { name: 'open_link' },
+    { name: 'copy_link' },
+  ])
+}
+
+const handleOptionsClick = (args) => {
+  switch (args.option) {
+    case 'install':
+      install(null)
+      break
+    case 'open_link':
+      window.__TAURI_INVOKE__('tauri', {
+        __tauriModule: 'Shell',
+        message: {
+          cmd: 'open',
+          path: `https://modrinth.com/${args.item.project_type}/${args.item.slug}`,
+        },
+      })
+      break
+    case 'copy_link':
+      navigator.clipboard.writeText(
+        `https://modrinth.com/${args.item.project_type}/${args.item.slug}`
+      )
+      break
+  }
+}
 </script>
 
 <style scoped lang="scss">