Monorepo missing features (#1273)

* fix tauri config * fix package patch * regen pnpm lock * use new workflow * New GH actions * Update lockfile * update scripts * Fix build script * Fix missing deps * Fix assets eslint * Update libraries lint * Fix all lint configs * update lockfile * add fmt + clippy fails * Separate App Tauri portion * fix app features * Fix lints * install tauri cli * update lockfile * corepack, fix lints * add store path * fix unused import * Fix tests * Issue templates + port over tauri release * fix actions * fix before build command * Add X86 target * Update build matrix * finalize actions * make debug build smaller * Use debug build to make cache smaller * dummy commit * change proj name * update file name * Use release builds for less space use * Remove rust cache * Readd for app build * add merge queue trigger
2024-07-09 15:17:38 -07:00
parent dab284f339
commit d1bc65c266
265 changed files with 1810 additions and 1871 deletions
--- a/apps/app-frontend/src/components/ui/ContextMenu.vue
+++ b/apps/app-frontend/src/components/ui/ContextMenu.vue
@@ -0,0 +1,176 @@
+<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-if="!(isLinkedData(item) && option.name === `add_content`)"
+          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 isLinkedData = (item) => {
+  if (item.instance != undefined && item.instance.metadata.linked_data) {
+    return true
+  } else if (item.metadata != undefined && item.metadata.linked_data) {
+    return true
+  }
+  return false
+}
+
+const hideContextMenu = () => {
+  shown.value = false
+  emit('menu-closed')
+}
+
+const optionClicked = (option) => {
+  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);
+        font-weight: bold;
+      }
+
+      &.danger {
+        background-color: var(--color-red);
+        color: var(--color-accent-contrast);
+        font-weight: bold;
+      }
+
+      &.contrast {
+        background-color: var(--color-orange);
+        color: var(--color-accent-contrast);
+        font-weight: bold;
+      }
+    }
+  }
+
+  .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>