From 78a57527535ca1cb3efef74bbbdce8289a50ac07 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 15 Oct 2024 16:25:59 +0200
Subject: [PATCH 01/11] chore: fix TokenDialog

---
 components/custom-ui/dialog/TokenDialog.vue   |  9 ++++
 components/ui/select/Select.vue               | 15 ++++++
 components/ui/select/SelectContent.vue        | 53 +++++++++++++++++++
 components/ui/select/SelectGroup.vue          | 19 +++++++
 components/ui/select/SelectItem.vue           | 44 +++++++++++++++
 components/ui/select/SelectItemText.vue       | 11 ++++
 components/ui/select/SelectLabel.vue          | 13 +++++
 .../ui/select/SelectScrollDownButton.vue      | 24 +++++++++
 components/ui/select/SelectScrollUpButton.vue | 24 +++++++++
 components/ui/select/SelectSeparator.vue      | 17 ++++++
 components/ui/select/SelectTrigger.vue        | 31 +++++++++++
 components/ui/select/SelectValue.vue          | 11 ++++
 components/ui/select/index.ts                 | 11 ++++
 13 files changed, 282 insertions(+)
 create mode 100644 components/ui/select/Select.vue
 create mode 100644 components/ui/select/SelectContent.vue
 create mode 100644 components/ui/select/SelectGroup.vue
 create mode 100644 components/ui/select/SelectItem.vue
 create mode 100644 components/ui/select/SelectItemText.vue
 create mode 100644 components/ui/select/SelectLabel.vue
 create mode 100644 components/ui/select/SelectScrollDownButton.vue
 create mode 100644 components/ui/select/SelectScrollUpButton.vue
 create mode 100644 components/ui/select/SelectSeparator.vue
 create mode 100644 components/ui/select/SelectTrigger.vue
 create mode 100644 components/ui/select/SelectValue.vue
 create mode 100644 components/ui/select/index.ts

diff --git a/components/custom-ui/dialog/TokenDialog.vue b/components/custom-ui/dialog/TokenDialog.vue
index e6341a6..5940426 100644
--- a/components/custom-ui/dialog/TokenDialog.vue
+++ b/components/custom-ui/dialog/TokenDialog.vue
@@ -19,6 +19,15 @@ import {
 } from '@/components/ui/form'
 import {Input} from '@/components/ui/input'
 import {Popover, PopoverTrigger, PopoverContent} from '@/components/ui/popover'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
 import {type v2Permission, v2PermissionLevel,} from "~/composables/aruna_api_json";
 import {useForm} from "vee-validate";
 import {toTypedSchema} from '@vee-validate/zod'
diff --git a/components/ui/select/Select.vue b/components/ui/select/Select.vue
new file mode 100644
index 0000000..adc42fd
--- /dev/null
+++ b/components/ui/select/Select.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { SelectRootEmits, SelectRootProps } from 'radix-vue'
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<SelectRootProps>()
+const emits = defineEmits<SelectRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <SelectRoot v-bind="forwarded">
+    <slot />
+  </SelectRoot>
+</template>
diff --git a/components/ui/select/SelectContent.vue b/components/ui/select/SelectContent.vue
new file mode 100644
index 0000000..5e23f3e
--- /dev/null
+++ b/components/ui/select/SelectContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+  },
+)
+const emits = defineEmits<SelectContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      v-bind="{ ...forwarded, ...$attrs }" :class="cn(
+        'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        position === 'popper'
+          && 'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+        props.class,
+      )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport :class="cn('p-1', position === 'popper' && 'h-[--radix-select-trigger-height] w-full min-w-[--radix-select-trigger-width]')">
+        <slot />
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>
diff --git a/components/ui/select/SelectGroup.vue b/components/ui/select/SelectGroup.vue
new file mode 100644
index 0000000..364f403
--- /dev/null
+++ b/components/ui/select/SelectGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectGroupProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectGroup :class="cn('p-1 w-full', props.class)" v-bind="delegatedProps">
+    <slot />
+  </SelectGroup>
+</template>
diff --git a/components/ui/select/SelectItem.vue b/components/ui/select/SelectItem.vue
new file mode 100644
index 0000000..544f1ab
--- /dev/null
+++ b/components/ui/select/SelectItem.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { CheckIcon } from '@radix-icons/vue'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <CheckIcon class="h-4 w-4" />
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot />
+    </SelectItemText>
+  </SelectItem>
+</template>
diff --git a/components/ui/select/SelectItemText.vue b/components/ui/select/SelectItemText.vue
new file mode 100644
index 0000000..a0bb5c2
--- /dev/null
+++ b/components/ui/select/SelectItemText.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectItemText, type SelectItemTextProps } from 'radix-vue'
+
+const props = defineProps<SelectItemTextProps>()
+</script>
+
+<template>
+  <SelectItemText v-bind="props">
+    <slot />
+  </SelectItemText>
+</template>
diff --git a/components/ui/select/SelectLabel.vue b/components/ui/select/SelectLabel.vue
new file mode 100644
index 0000000..9ead9a6
--- /dev/null
+++ b/components/ui/select/SelectLabel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+
+const props = defineProps<SelectLabelProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <SelectLabel :class="cn('px-2 py-1.5 text-sm font-semibold', props.class)">
+    <slot />
+  </SelectLabel>
+</template>
diff --git a/components/ui/select/SelectScrollDownButton.vue b/components/ui/select/SelectScrollDownButton.vue
new file mode 100644
index 0000000..a2ea19a
--- /dev/null
+++ b/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { ChevronDownIcon } from '@radix-icons/vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollDownButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronDownIcon />
+    </slot>
+  </SelectScrollDownButton>
+</template>
diff --git a/components/ui/select/SelectScrollUpButton.vue b/components/ui/select/SelectScrollUpButton.vue
new file mode 100644
index 0000000..d9723d6
--- /dev/null
+++ b/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { ChevronUpIcon } from '@radix-icons/vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectScrollUpButton v-bind="forwardedProps" :class="cn('flex cursor-default items-center justify-center py-1', props.class)">
+    <slot>
+      <ChevronUpIcon />
+    </slot>
+  </SelectScrollUpButton>
+</template>
diff --git a/components/ui/select/SelectSeparator.vue b/components/ui/select/SelectSeparator.vue
new file mode 100644
index 0000000..9dbc63a
--- /dev/null
+++ b/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>
diff --git a/components/ui/select/SelectTrigger.vue b/components/ui/select/SelectTrigger.vue
new file mode 100644
index 0000000..327ce5e
--- /dev/null
+++ b/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { CaretSortIcon } from '@radix-icons/vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <SelectTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:truncate text-start',
+      props.class,
+    )"
+  >
+    <slot />
+    <SelectIcon as-child>
+      <CaretSortIcon class="w-4 h-4 opacity-50 shrink-0" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>
diff --git a/components/ui/select/SelectValue.vue b/components/ui/select/SelectValue.vue
new file mode 100644
index 0000000..4bc37dd
--- /dev/null
+++ b/components/ui/select/SelectValue.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { SelectValue, type SelectValueProps } from 'radix-vue'
+
+const props = defineProps<SelectValueProps>()
+</script>
+
+<template>
+  <SelectValue v-bind="props">
+    <slot />
+  </SelectValue>
+</template>
diff --git a/components/ui/select/index.ts b/components/ui/select/index.ts
new file mode 100644
index 0000000..31b9294
--- /dev/null
+++ b/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectValue } from './SelectValue.vue'

From ff631fbfb891bccefa1a96884a5c8af378577544 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 15 Oct 2024 16:26:33 +0200
Subject: [PATCH 02/11] chore: add TokenDialog to create page

---
 pages/objects/create.vue | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/pages/objects/create.vue b/pages/objects/create.vue
index 1ae9434..41c4086 100644
--- a/pages/objects/create.vue
+++ b/pages/objects/create.vue
@@ -26,6 +26,7 @@ import {OBJECT_REGEX, PROJECT_REGEX, S3_KEY_REGEX, ULID_REGEX} from "~/composabl
 import type {ObjectInfo} from "~/composables/proto_conversions"
 import {deleteObject, getObjectBucketAndKey} from "~/composables/api_wrapper"
 import EventBus from "~/composables/EventBus";
+import TokenDialog from "~/components/custom-ui/dialog/TokenDialog.vue";
 
 import {HeadObjectCommand, S3Client, type S3ClientConfig} from "@aws-sdk/client-s3";
 import {Upload} from "@aws-sdk/lib-storage";
@@ -273,6 +274,7 @@ function removeAuthor(key: string) {
 /* ----- End Resource Authors ----- */
 /* ----- Resource key-values ----- */
 const keyValues = ref(new Map())
+const tokenDialogOpen = ref(false)
 
 function addKeyValue(key: string, val: string, type: v2KeyValueVariant) {
   keyValues.value.set(key, {key: key, value: val, variant: type} as v2KeyValue)
@@ -769,6 +771,10 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
         <div class="flex flex-row mb-2 mt-6 justify-start items-center">
           <label for="key-values-input"
                  class="block text-lg font-medium text-gray-700 dark:text-white">Key-Values</label>
+          <Button @click="tokenDialogOpen = true"
+                  class="mt-2 bg-aruna-800 hover:bg-aruna-700 text-white text-md rounded-sm">
+            Create Token
+          </Button>
           <button type="button"
                   class="ms-4 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-gray-400 rounded-md text-gray-500 hover:text-blue-800 hover:border-blue-800 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:border-neutral-600 dark:text-white dark:hover:text-aruna-700 dark:focus:bg-neutral-700"
                   data-hs-overlay="#key-value-add">
@@ -901,7 +907,10 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
   </div>
 
   <ModalAuthor modalId="author-add" @add-author="addAuthor"/>
-  <ModalKeyValue modalId="key-value-add" @add-key-value="addKeyValue"/>
+  <!-- <ModalKeyValue modalId="key-value-add" @add-key-value="addKeyValue"/> -->
+  <TokenDialog :initial-open="tokenDialogOpen"
+               :with-button="false"
+               @update:open="tokenDialogOpen = false"/>
   <ModalOntology modalId="ontology-add" @add-key-value="addKeyValue"/>
   <ModalRelation modalId="relation-add" @add-relation="addRelation"/>
   <ModalObjectDisplay modalId="object-display" :object="createdResource" :progress="uploadProgress"

From 6079f06577b50ece9729b94ed40cadb8c71bb0de Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 15 Oct 2024 16:35:21 +0200
Subject: [PATCH 03/11] chore: fix tokendialog

---
 components/custom-ui/dialog/TokenDialog.vue   |  1 +
 components/ui/calendar/Calendar.vue           | 60 +++++++++++++++++++
 components/ui/calendar/CalendarCell.vue       | 24 ++++++++
 .../ui/calendar/CalendarCellTrigger.vue       | 38 ++++++++++++
 components/ui/calendar/CalendarGrid.vue       | 24 ++++++++
 components/ui/calendar/CalendarGridBody.vue   | 11 ++++
 components/ui/calendar/CalendarGridHead.vue   | 12 ++++
 components/ui/calendar/CalendarGridRow.vue    | 21 +++++++
 components/ui/calendar/CalendarHeadCell.vue   | 21 +++++++
 components/ui/calendar/CalendarHeader.vue     | 21 +++++++
 components/ui/calendar/CalendarHeading.vue    | 27 +++++++++
 components/ui/calendar/CalendarNextButton.vue | 32 ++++++++++
 components/ui/calendar/CalendarPrevButton.vue | 32 ++++++++++
 components/ui/calendar/index.ts               | 12 ++++
 14 files changed, 336 insertions(+)
 create mode 100644 components/ui/calendar/Calendar.vue
 create mode 100644 components/ui/calendar/CalendarCell.vue
 create mode 100644 components/ui/calendar/CalendarCellTrigger.vue
 create mode 100644 components/ui/calendar/CalendarGrid.vue
 create mode 100644 components/ui/calendar/CalendarGridBody.vue
 create mode 100644 components/ui/calendar/CalendarGridHead.vue
 create mode 100644 components/ui/calendar/CalendarGridRow.vue
 create mode 100644 components/ui/calendar/CalendarHeadCell.vue
 create mode 100644 components/ui/calendar/CalendarHeader.vue
 create mode 100644 components/ui/calendar/CalendarHeading.vue
 create mode 100644 components/ui/calendar/CalendarNextButton.vue
 create mode 100644 components/ui/calendar/CalendarPrevButton.vue
 create mode 100644 components/ui/calendar/index.ts

diff --git a/components/custom-ui/dialog/TokenDialog.vue b/components/custom-ui/dialog/TokenDialog.vue
index 5940426..5bf6afe 100644
--- a/components/custom-ui/dialog/TokenDialog.vue
+++ b/components/custom-ui/dialog/TokenDialog.vue
@@ -28,6 +28,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
+import { Calendar } from "@/components/ui/calendar"
 import {type v2Permission, v2PermissionLevel,} from "~/composables/aruna_api_json";
 import {useForm} from "vee-validate";
 import {toTypedSchema} from '@vee-validate/zod'
diff --git a/components/ui/calendar/Calendar.vue b/components/ui/calendar/Calendar.vue
new file mode 100644
index 0000000..e95300c
--- /dev/null
+++ b/components/ui/calendar/Calendar.vue
@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { cn } from '@/utils/shadcn'
+import { CalendarRoot, type CalendarRootEmits, type CalendarRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+import { CalendarCell, CalendarCellTrigger, CalendarGrid, CalendarGridBody, CalendarGridHead, CalendarGridRow, CalendarHeadCell, CalendarHeader, CalendarHeading, CalendarNextButton, CalendarPrevButton } from '.'
+
+const props = defineProps<CalendarRootProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<CalendarRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <CalendarRoot
+    v-slot="{ grid, weekDays }"
+    :class="cn('p-3', props.class)"
+    v-bind="forwarded"
+  >
+    <CalendarHeader>
+      <CalendarPrevButton />
+      <CalendarHeading />
+      <CalendarNextButton />
+    </CalendarHeader>
+
+    <div class="flex flex-col gap-y-4 mt-4 sm:flex-row sm:gap-x-4 sm:gap-y-0">
+      <CalendarGrid v-for="month in grid" :key="month.value.toString()">
+        <CalendarGridHead>
+          <CalendarGridRow>
+            <CalendarHeadCell
+              v-for="day in weekDays" :key="day"
+            >
+              {{ day }}
+            </CalendarHeadCell>
+          </CalendarGridRow>
+        </CalendarGridHead>
+        <CalendarGridBody>
+          <CalendarGridRow v-for="(weekDates, index) in month.rows" :key="`weekDate-${index}`" class="mt-2 w-full">
+            <CalendarCell
+              v-for="weekDate in weekDates"
+              :key="weekDate.toString()"
+              :date="weekDate"
+            >
+              <CalendarCellTrigger
+                :day="weekDate"
+                :month="month.value"
+              />
+            </CalendarCell>
+          </CalendarGridRow>
+        </CalendarGridBody>
+      </CalendarGrid>
+    </div>
+  </CalendarRoot>
+</template>
diff --git a/components/ui/calendar/CalendarCell.vue b/components/ui/calendar/CalendarCell.vue
new file mode 100644
index 0000000..34a4b41
--- /dev/null
+++ b/components/ui/calendar/CalendarCell.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { cn } from '@/utils/shadcn'
+import { CalendarCell, type CalendarCellProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCell
+    :class="cn('relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCell>
+</template>
diff --git a/components/ui/calendar/CalendarCellTrigger.vue b/components/ui/calendar/CalendarCellTrigger.vue
new file mode 100644
index 0000000..61f0e01
--- /dev/null
+++ b/components/ui/calendar/CalendarCellTrigger.vue
@@ -0,0 +1,38 @@
+<script lang="ts" setup>
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/utils/shadcn'
+import { CalendarCellTrigger, type CalendarCellTriggerProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarCellTrigger
+    :class="cn(
+      buttonVariants({ variant: 'ghost' }),
+      'h-8 w-8 p-0 font-normal',
+      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+      // Selected
+      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 data-[selected]:hover:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
+      // Disabled
+      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
+      // Unavailable
+      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
+      // Outside months
+      'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarCellTrigger>
+</template>
diff --git a/components/ui/calendar/CalendarGrid.vue b/components/ui/calendar/CalendarGrid.vue
new file mode 100644
index 0000000..7dafdaf
--- /dev/null
+++ b/components/ui/calendar/CalendarGrid.vue
@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import { cn } from '@/utils/shadcn'
+import { CalendarGrid, type CalendarGridProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGrid
+    :class="cn('w-full border-collapse space-y-1', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot />
+  </CalendarGrid>
+</template>
diff --git a/components/ui/calendar/CalendarGridBody.vue b/components/ui/calendar/CalendarGridBody.vue
new file mode 100644
index 0000000..23d71ce
--- /dev/null
+++ b/components/ui/calendar/CalendarGridBody.vue
@@ -0,0 +1,11 @@
+<script lang="ts" setup>
+import { CalendarGridBody, type CalendarGridBodyProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridBodyProps>()
+</script>
+
+<template>
+  <CalendarGridBody v-bind="props">
+    <slot />
+  </CalendarGridBody>
+</template>
diff --git a/components/ui/calendar/CalendarGridHead.vue b/components/ui/calendar/CalendarGridHead.vue
new file mode 100644
index 0000000..b1356fb
--- /dev/null
+++ b/components/ui/calendar/CalendarGridHead.vue
@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { CalendarGridHead, type CalendarGridHeadProps } from 'radix-vue'
+
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <CalendarGridHead v-bind="props">
+    <slot />
+  </CalendarGridHead>
+</template>
diff --git a/components/ui/calendar/CalendarGridRow.vue b/components/ui/calendar/CalendarGridRow.vue
new file mode 100644
index 0000000..4280559
--- /dev/null
+++ b/components/ui/calendar/CalendarGridRow.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { cn } from '@/utils/shadcn'
+import { CalendarGridRow, type CalendarGridRowProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarGridRow :class="cn('flex', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarGridRow>
+</template>
diff --git a/components/ui/calendar/CalendarHeadCell.vue b/components/ui/calendar/CalendarHeadCell.vue
new file mode 100644
index 0000000..4eb6401
--- /dev/null
+++ b/components/ui/calendar/CalendarHeadCell.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { cn } from '@/utils/shadcn'
+import { CalendarHeadCell, type CalendarHeadCellProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeadCell :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeadCell>
+</template>
diff --git a/components/ui/calendar/CalendarHeader.vue b/components/ui/calendar/CalendarHeader.vue
new file mode 100644
index 0000000..e599c2b
--- /dev/null
+++ b/components/ui/calendar/CalendarHeader.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { cn } from '@/utils/shadcn'
+import { CalendarHeader, type CalendarHeaderProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeader :class="cn('relative flex w-full items-center justify-between pt-1', props.class)" v-bind="forwardedProps">
+    <slot />
+  </CalendarHeader>
+</template>
diff --git a/components/ui/calendar/CalendarHeading.vue b/components/ui/calendar/CalendarHeading.vue
new file mode 100644
index 0000000..93aacec
--- /dev/null
+++ b/components/ui/calendar/CalendarHeading.vue
@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import { cn } from '@/utils/shadcn'
+import { CalendarHeading, type CalendarHeadingProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarHeading
+    v-slot="{ headingValue }"
+    :class="cn('text-sm font-medium', props.class)"
+    v-bind="forwardedProps"
+  >
+    <slot :heading-value>
+      {{ headingValue }}
+    </slot>
+  </CalendarHeading>
+</template>
diff --git a/components/ui/calendar/CalendarNextButton.vue b/components/ui/calendar/CalendarNextButton.vue
new file mode 100644
index 0000000..7daa6db
--- /dev/null
+++ b/components/ui/calendar/CalendarNextButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/utils/shadcn'
+import { ChevronRightIcon } from '@radix-icons/vue'
+import { CalendarNext, type CalendarNextProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarNext
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronRightIcon class="h-4 w-4" />
+    </slot>
+  </CalendarNext>
+</template>
diff --git a/components/ui/calendar/CalendarPrevButton.vue b/components/ui/calendar/CalendarPrevButton.vue
new file mode 100644
index 0000000..03026a3
--- /dev/null
+++ b/components/ui/calendar/CalendarPrevButton.vue
@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/utils/shadcn'
+import { ChevronLeftIcon } from '@radix-icons/vue'
+import { CalendarPrev, type CalendarPrevProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <CalendarPrev
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
+      props.class,
+    )"
+    v-bind="forwardedProps"
+  >
+    <slot>
+      <ChevronLeftIcon class="h-4 w-4" />
+    </slot>
+  </CalendarPrev>
+</template>
diff --git a/components/ui/calendar/index.ts b/components/ui/calendar/index.ts
new file mode 100644
index 0000000..5239a1b
--- /dev/null
+++ b/components/ui/calendar/index.ts
@@ -0,0 +1,12 @@
+export { default as Calendar } from './Calendar.vue'
+export { default as CalendarCell } from './CalendarCell.vue'
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
+export { default as CalendarGrid } from './CalendarGrid.vue'
+export { default as CalendarGridBody } from './CalendarGridBody.vue'
+export { default as CalendarGridHead } from './CalendarGridHead.vue'
+export { default as CalendarGridRow } from './CalendarGridRow.vue'
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
+export { default as CalendarHeader } from './CalendarHeader.vue'
+export { default as CalendarHeading } from './CalendarHeading.vue'
+export { default as CalendarNextButton } from './CalendarNextButton.vue'
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue'

From 5c17e37776c4bf2902e8186dd643b24008f0b1c0 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 15 Oct 2024 17:16:25 +0200
Subject: [PATCH 04/11] chore: remove unneeded imports

---
 components/custom-ui/dialog/TokenDialog.vue | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/components/custom-ui/dialog/TokenDialog.vue b/components/custom-ui/dialog/TokenDialog.vue
index 5bf6afe..e6341a6 100644
--- a/components/custom-ui/dialog/TokenDialog.vue
+++ b/components/custom-ui/dialog/TokenDialog.vue
@@ -19,16 +19,6 @@ import {
 } from '@/components/ui/form'
 import {Input} from '@/components/ui/input'
 import {Popover, PopoverTrigger, PopoverContent} from '@/components/ui/popover'
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select"
-import { Calendar } from "@/components/ui/calendar"
 import {type v2Permission, v2PermissionLevel,} from "~/composables/aruna_api_json";
 import {useForm} from "vee-validate";
 import {toTypedSchema} from '@vee-validate/zod'

From 3d3a9e6156a73aec99c8ef596488ca1c05a21a15 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 22 Oct 2024 14:51:55 +0200
Subject: [PATCH 05/11] chore: add missing component

---
 components/ui/separator/Separator.vue | 38 +++++++++++++++++++++++++++
 components/ui/separator/index.ts      |  1 +
 2 files changed, 39 insertions(+)
 create mode 100644 components/ui/separator/Separator.vue
 create mode 100644 components/ui/separator/index.ts

diff --git a/components/ui/separator/Separator.vue b/components/ui/separator/Separator.vue
new file mode 100644
index 0000000..a1df517
--- /dev/null
+++ b/components/ui/separator/Separator.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { Separator, type SeparatorProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<
+  SeparatorProps & { class?: HTMLAttributes['class'], label?: string }
+>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <Separator
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'shrink-0 bg-border relative',
+        props.orientation === 'vertical' ? 'w-px h-full' : 'h-px w-full',
+        props.class,
+      )
+    "
+  >
+    <span
+      v-if="props.label"
+      :class="
+        cn(
+          'text-xs text-muted-foreground bg-background absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex justify-center items-center',
+          props.orientation === 'vertical' ? 'w-[1px] px-1 py-2' : 'h-[1px] py-1 px-2',
+        )
+      "
+    >{{ props.label }}</span>
+  </Separator>
+</template>
diff --git a/components/ui/separator/index.ts b/components/ui/separator/index.ts
new file mode 100644
index 0000000..2287bcb
--- /dev/null
+++ b/components/ui/separator/index.ts
@@ -0,0 +1 @@
+export { default as Separator } from './Separator.vue'

From e1e37271528c103628b5e7b9b3f3c02d84f93c66 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 22 Oct 2024 15:11:13 +0200
Subject: [PATCH 06/11] chore: change keyvalue dialog to use shadcn components

---
 .../custom-ui/dialog/KeyValueDialog.vue       | 130 ++++++++++++++++++
 components/ui/textarea/Textarea.vue           |  24 ++++
 components/ui/textarea/index.ts               |   1 +
 pages/objects/create.vue                      |  22 ++-
 4 files changed, 164 insertions(+), 13 deletions(-)
 create mode 100644 components/custom-ui/dialog/KeyValueDialog.vue
 create mode 100644 components/ui/textarea/Textarea.vue
 create mode 100644 components/ui/textarea/index.ts

diff --git a/components/custom-ui/dialog/KeyValueDialog.vue b/components/custom-ui/dialog/KeyValueDialog.vue
new file mode 100644
index 0000000..4791a50
--- /dev/null
+++ b/components/custom-ui/dialog/KeyValueDialog.vue
@@ -0,0 +1,130 @@
+<script setup lang="ts">
+import {Button} from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {FormControl, FormField, FormItem, FormLabel, FormMessage,} from '@/components/ui/form'
+import {Input} from '@/components/ui/input'
+import {type v2KeyValue, v2KeyValueVariant} from "~/composables/aruna_api_json";
+import {useForm} from "vee-validate";
+import {toTypedSchema} from '@vee-validate/zod'
+import * as z from 'zod'
+
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean,
+  withButton: boolean
+}>()
+const externalTrigger = toRef(props, 'initialOpen')
+const open = ref(props.initialOpen)
+watch(externalTrigger, () => open.value = externalTrigger.value)
+/* ----- END PROPERTIES ----- */
+
+/* ----- EVENT EMITS ----- */
+const emit = defineEmits<{
+  'add-key-value': [keyValue: v2KeyValue]
+}>()
+/* ----- END EVENT EMITS ----- */
+
+/* ----- FORM SCHEMA ----- */
+const formSchema = toTypedSchema(z.object({
+  key: z.string({required_error: "Key is required."}).min(2).max(256),
+  value: z.string().optional(),
+  variant: z.nativeEnum(v2KeyValueVariant) //.default(v2KeyValueVariant.KEY_VALUE_VARIANT_LABEL),
+}))
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = form.handleSubmit(async (values) => {
+  emit('add-key-value', {
+    key: values.key,
+    value: values.value,
+    variant: values.variant
+  })
+})
+/* ----- END FORM SCHEMA ----- */
+const validVariants = computed(() => Object.keys(v2KeyValueVariant).filter(variant => variant !== 'KEY_VALUE_VARIANT_UNSPECIFIED'))
+
+function formatKeyValueLabel(variant: string): string {
+  const label = variant.replace('KEY_VALUE_VARIANT_', '').replace('_', ' ').toLowerCase()
+  return label.charAt(0).toUpperCase() + label.slice(1)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger v-if="withButton" as-child>
+      <Button variant="outline">
+        Add Key-Value
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[425px] sm:rounded-md"
+                   @pointer-down-outside="(event) => event.preventDefault()">
+      <DialogHeader>
+        <DialogTitle class="mb-2 text-center text-aruna-700 font-bold">Add Key-Value</DialogTitle>
+        <DialogDescription class="text-center">
+          Add an individual key-value to your resource.
+        </DialogDescription>
+      </DialogHeader>
+
+      <form id="dialogForm" @submit="onSubmit" class="space-y-4">
+        <FormField v-slot="{ componentField }" name="variant">
+          <FormItem>
+            <FormLabel>Variant</FormLabel>
+            <Select v-bind="componentField">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a key-value variant"/>
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem class="" v-for="variant in validVariants" :value="variant">
+                    {{ formatKeyValueLabel(variant) }}
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="key">
+          <FormItem>
+            <FormLabel>Key</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Here you can enter the key" v-bind="componentField" class="mt-0"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="value">
+          <FormItem>
+            <FormLabel>Value</FormLabel>
+            <FormControl>
+              <Textarea v-bind="componentField"
+                        :rows="5"
+                        placeholder="Here you can enter the value"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+      </form>
+      <DialogFooter>
+        <Button type="submit" form="dialogForm" class="bg-aruna-800 hover:bg-aruna-700">
+          Add key-value
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/components/ui/textarea/Textarea.vue b/components/ui/textarea/Textarea.vue
new file mode 100644
index 0000000..b98b71f
--- /dev/null
+++ b/components/ui/textarea/Textarea.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+import { useVModel } from '@vueuse/core'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+  defaultValue?: string | number
+  modelValue?: string | number
+}>()
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: string | number): void
+}>()
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  passive: true,
+  defaultValue: props.defaultValue,
+})
+</script>
+
+<template>
+  <textarea v-model="modelValue" :class="cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+</template>
diff --git a/components/ui/textarea/index.ts b/components/ui/textarea/index.ts
new file mode 100644
index 0000000..6a7ab2a
--- /dev/null
+++ b/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'
diff --git a/pages/objects/create.vue b/pages/objects/create.vue
index b66265a..9bbef81 100644
--- a/pages/objects/create.vue
+++ b/pages/objects/create.vue
@@ -26,11 +26,12 @@ import {OBJECT_REGEX, PROJECT_REGEX, S3_KEY_REGEX, ULID_REGEX} from "~/composabl
 import type {ObjectInfo} from "~/composables/proto_conversions"
 import {deleteObject, getObjectBucketAndKey} from "~/composables/api_wrapper"
 import EventBus from "~/composables/EventBus";
-import TokenDialog from "~/components/custom-ui/dialog/TokenDialog.vue";
+import KeyValueDialog from "~/components/custom-ui/dialog/KeyValueDialog.vue";
 
 import {HeadObjectCommand, S3Client, type S3ClientConfig} from "@aws-sdk/client-s3";
 import {Upload} from "@aws-sdk/lib-storage";
 import {prettyDisplayJson} from "~/composables/utils";
+import { ValueIcon } from '@radix-icons/vue'
 
 // Router to navigate back
 const router = useRouter()
@@ -274,7 +275,7 @@ function removeAuthor(key: string) {
 /* ----- End Resource Authors ----- */
 /* ----- Resource key-values ----- */
 const keyValues = ref(new Map())
-const tokenDialogOpen = ref(false)
+const keyValueDialogOpen = ref(false);
 
 function addKeyValue(key: string, val: string, type: v2KeyValueVariant) {
   keyValues.value.set(key, {key: key, value: val, variant: type} as v2KeyValue)
@@ -799,16 +800,11 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
         <div class="flex flex-row mb-2 mt-6 justify-start items-center">
           <label for="key-values-input"
                  class="block text-lg font-medium text-gray-300">Key-Values</label>
-          <Button @click="tokenDialogOpen = true"
-                  class="mt-2 bg-aruna-800 hover:bg-aruna-300 text-white text-md rounded-sm">
-            Create Token
-          </Button>
           <button type="button"
-                  class="ms-4 px-1 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-gray-300 rounded-md text-gray-300 text-sm hover:text-aruna-700 hover:border-aruna-700 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
-                  data-hs-overlay="#key-value-add">
+                  @click="keyValueDialogOpen = true"
+                  class="ms-4 px-1 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-gray-300 rounded-md text-gray-300 text-sm hover:text-aruna-700 hover:border-aruna-700 focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
             <IconPlus class="flex-shrink-0 size-4"/>
           </button>
-
           <button type="button"
                   class="ms-4 px-1 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-gray-300 rounded-md text-gray-300 text-sm hover:text-aruna-700 hover:border-aruna-700 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
                   data-hs-overlay="#ontology-add">
@@ -929,10 +925,10 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
   </div>
   </div>
   <ModalAuthor modalId="author-add" @add-author="addAuthor"/>
-  <!-- <ModalKeyValue modalId="key-value-add" @add-key-value="addKeyValue"/> -->
-  <TokenDialog :initial-open="tokenDialogOpen"
-               :with-button="false"
-               @update:open="tokenDialogOpen = false"/>
+  <KeyValueDialog  :initial-open="keyValueDialogOpen"
+                   :with-button="false"
+                   @update:open="keyValueDialogOpen = false"
+                   @add-key-value="({key, value, variant}) => addKeyValue(key, value, variant)"/>
   <ModalOntology modalId="ontology-add" @add-key-value="addKeyValue"/>
   <ModalRelation modalId="relation-add" @add-relation="addRelation"/>
   <ModalObjectDisplay modalId="object-display" :object="createdResource" :progress="uploadProgress"

From 45df724a6d8aee68fd443185ccc37fc5fcad4e12 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 22 Oct 2024 16:56:09 +0200
Subject: [PATCH 07/11] chore: change author dialog to shadcn components

---
 components/custom-ui/dialog/AuthorDialog.vue | 177 +++++++++++++++++++
 pages/objects/create.vue                     |  41 +++--
 2 files changed, 208 insertions(+), 10 deletions(-)
 create mode 100644 components/custom-ui/dialog/AuthorDialog.vue

diff --git a/components/custom-ui/dialog/AuthorDialog.vue b/components/custom-ui/dialog/AuthorDialog.vue
new file mode 100644
index 0000000..23ac548
--- /dev/null
+++ b/components/custom-ui/dialog/AuthorDialog.vue
@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import {IconHelp} from "@tabler/icons-vue"
+import {Button} from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/ui/form'
+import {Input} from '@/components/ui/input'
+import {Popover, PopoverTrigger, PopoverContent} from '@/components/ui/popover'
+import type {v2Author} from "~/composables/aruna_api_json";
+import {useForm} from "vee-validate";
+import {toTypedSchema} from '@vee-validate/zod'
+import * as z from 'zod'
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean,
+  withButton: boolean
+}>()
+const externalTrigger = toRef(props, 'initialOpen')
+const open = ref(props.initialOpen)
+watch(externalTrigger, () => open.value = externalTrigger.value)
+/* ----- END PROPERTIES ----- */
+
+/* ----- EVENT EMITS ----- */
+const emit = defineEmits<{
+  'add-author': [relation: v2Author]
+}>()
+/* ----- END EVENT EMITS ----- */
+
+/* ----- FORM SCHEMA ----- */
+const formSchema = toTypedSchema(z.object({
+  firstName: z.string({required_error: "First name is required."}).min(2).max(128),
+  lastName: z.string({required_error: "Last name is required."}).min(2).max(128),
+  email: z.string().email('Invalid email format.').optional(),
+  orcid: z.string().regex(ORCID_REGEX, 'Not a valid ORCID').optional(),
+  userId: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
+}))
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = form.handleSubmit(async (values) => {
+  emit('add-author', {
+    firstName: values.firstName,
+    lastName: values.lastName,
+    email: values.email || '',
+    orcid: values.orcid || '',
+    id: values.userId || ''
+  })})
+/* ----- END FORM SCHEMA ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger v-if="withButton" as-child>
+      <Button variant="outline">
+        Add Author
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[425px] sm:rounded-md"
+                   @pointer-down-outside="(event) => event.preventDefault()">
+      <DialogHeader>
+        <DialogTitle class="mb-2 text-center text-aruna-800 font-bold">Add Author</DialogTitle>
+        <DialogDescription class="text-center">
+          Add an additional author to the resource.
+        </DialogDescription>
+      </DialogHeader>
+
+      <form id="dialogForm" @submit="onSubmit" class="space-y-4">
+        <div class="flex flex-col space-y-2 sm:flex-row sm:space-x-4 sm:space-y-0">
+          <div class="flex grow flex-col">
+            <FormField v-slot="{ componentField }" name="firstName">
+              <FormItem>
+                <FormLabel>First Name</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder="Author's first name" v-bind="componentField" class="mt-0"/>
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+          </div>
+          <div class="flex grow flex-col">
+            <FormField v-slot="{ componentField }" name="lastName">
+              <FormItem>
+                <FormLabel>Last Name</FormLabel>
+                <FormControl>
+                  <Input type="text" placeholder="Author's last name" v-bind="componentField"/>
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+          </div>
+        </div>
+
+        <FormField v-slot="{ componentField }" name="email">
+          <FormItem>
+            <div class="flex items-center justify-between">
+              <FormLabel>Email</FormLabel>
+              <Popover>
+                <PopoverTrigger>
+                  <IconHelp class="size-4 text-aruna-800 font-bold"/>
+                </PopoverTrigger>
+                <PopoverContent class="text-sm rounded-sm">
+                  A valid email address that can be used to contact the author.
+                </PopoverContent>
+              </Popover>
+            </div>
+            <FormControl>
+              <Input type="text" placeholder="A valid email address" v-bind="componentField"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="orcid">
+          <FormItem>
+            <FormLabel class="flex items-center justify-between">
+              <span>ORCID</span>
+              <Popover>
+                <PopoverTrigger>
+                  <IconHelp class="size-4 text-aruna-800 font-bold"/>
+                </PopoverTrigger>
+                <PopoverContent class="text-sm rounded-sm">
+                  If available, you can enter the ORCID of the author here.
+                </PopoverContent>
+              </Popover>
+            </FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Author's ORCID" v-bind="componentField"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="userId">
+          <FormItem>
+            <FormLabel class="flex items-center justify-between">
+              <span>User Id</span>
+              <Popover>
+                <PopoverTrigger>
+                  <IconHelp class="size-4 text-aruna-800 font-bold"/>
+                </PopoverTrigger>
+                <PopoverContent class="text-sm rounded-sm">
+                  If available, you can enter the Aruna user id of the author here.
+                </PopoverContent>
+              </Popover>
+            </FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Author's user id in Aruna" v-bind="componentField"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+      </form>
+
+      <DialogFooter>
+        <Button type="submit" form="dialogForm" class="bg-aruna-800 hover:bg-aruna-700">
+          Add Author
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/pages/objects/create.vue b/pages/objects/create.vue
index 9bbef81..14411fd 100644
--- a/pages/objects/create.vue
+++ b/pages/objects/create.vue
@@ -26,6 +26,7 @@ import {OBJECT_REGEX, PROJECT_REGEX, S3_KEY_REGEX, ULID_REGEX} from "~/composabl
 import type {ObjectInfo} from "~/composables/proto_conversions"
 import {deleteObject, getObjectBucketAndKey} from "~/composables/api_wrapper"
 import EventBus from "~/composables/EventBus";
+import AuthorDialog from "~/components/custom-ui/dialog/AuthorDialog.vue";
 import KeyValueDialog from "~/components/custom-ui/dialog/KeyValueDialog.vue";
 
 import {HeadObjectCommand, S3Client, type S3ClientConfig} from "@aws-sdk/client-s3";
@@ -263,6 +264,7 @@ function dataFileChange(e) {
 
 /* ----- Resource Authors ----- */
 const authors: Ref<Map<string, v2Author>> = ref(new Map())
+  const authorDialogOpen = ref(false);
 
 function addAuthor(author: v2Author) {
   authors.value.set(getUniqueId(), author)
@@ -745,11 +747,13 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
         <div class="flex flex-row mb-2 justify-start items-center">
           <label for="key-values-input"
                  class="block text-lg font-medium text-gray-300">Authors</label>
-          <button type="button"
-                  class="ms-4 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-gray-300 rounded-md text-gray-300 hover:text-aruna-700 hover:border-aruna-700 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
-                  data-hs-overlay="#author-add">
-            <IconPlus class="flex-shrink-0 size-4"/>
-          </button>
+            <button
+              type="button"
+              @click="authorDialogOpen = true"
+              class="ms-4 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-gray-300 rounded-md text-gray-300 hover:text-aruna-700 hover:border-aruna-700 focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
+            >
+              <IconPlus class="flex-shrink-0 size-4" />
+            </button>
         </div>
 
         <div class="-m-1.5 overflow-x-auto">
@@ -924,11 +928,28 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
     </div>
   </div>
   </div>
-  <ModalAuthor modalId="author-add" @add-author="addAuthor"/>
-  <KeyValueDialog  :initial-open="keyValueDialogOpen"
-                   :with-button="false"
-                   @update:open="keyValueDialogOpen = false"
-                   @add-key-value="({key, value, variant}) => addKeyValue(key, value, variant)"/>
+  <AuthorDialog
+    :initial-open="authorDialogOpen"
+    :with-button="false"
+    @update:open="authorDialogOpen = false"
+    @add-author="
+      (author) => {
+        addAuthor(author);
+        authorDialogOpen = false;
+      }
+    "
+  />
+  <KeyValueDialog
+    :initial-open="keyValueDialogOpen"
+    :with-button="false"
+    @update:open="keyValueDialogOpen = false"
+    @add-key-value="
+      ({ key, value, variant }) => {
+        addKeyValue(key, value, variant);
+        keyValueDialogOpen = false;
+      }
+    "
+  />
   <ModalOntology modalId="ontology-add" @add-key-value="addKeyValue"/>
   <ModalRelation modalId="relation-add" @add-relation="addRelation"/>
   <ModalObjectDisplay modalId="object-display" :object="createdResource" :progress="uploadProgress"

From 897d00cc0541fd806c3e5935fabe9784fe695dd1 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 29 Oct 2024 16:02:44 +0100
Subject: [PATCH 08/11] add unfinished ontologydialog

---
 .../custom-ui/autocomplete/AutoComplete.vue   |  57 ++++++++
 .../custom-ui/dialog/OntologyDialog.vue       | 135 ++++++++++++++++++
 components/ui/command/Command.vue             |  30 ++++
 components/ui/command/CommandDialog.vue       |  21 +++
 components/ui/command/CommandEmpty.vue        |  20 +++
 components/ui/command/CommandGroup.vue        |  29 ++++
 components/ui/command/CommandInput.vue        |  33 +++++
 components/ui/command/CommandItem.vue         |  26 ++++
 components/ui/command/CommandList.vue         |  27 ++++
 components/ui/command/CommandSeparator.vue    |  23 +++
 components/ui/command/CommandShortcut.vue     |  14 ++
 components/ui/command/index.ts                |   9 ++
 pages/objects/create.vue                      |  22 ++-
 13 files changed, 445 insertions(+), 1 deletion(-)
 create mode 100644 components/custom-ui/autocomplete/AutoComplete.vue
 create mode 100644 components/custom-ui/dialog/OntologyDialog.vue
 create mode 100644 components/ui/command/Command.vue
 create mode 100644 components/ui/command/CommandDialog.vue
 create mode 100644 components/ui/command/CommandEmpty.vue
 create mode 100644 components/ui/command/CommandGroup.vue
 create mode 100644 components/ui/command/CommandInput.vue
 create mode 100644 components/ui/command/CommandItem.vue
 create mode 100644 components/ui/command/CommandList.vue
 create mode 100644 components/ui/command/CommandSeparator.vue
 create mode 100644 components/ui/command/CommandShortcut.vue
 create mode 100644 components/ui/command/index.ts

diff --git a/components/custom-ui/autocomplete/AutoComplete.vue b/components/custom-ui/autocomplete/AutoComplete.vue
new file mode 100644
index 0000000..d6070fc
--- /dev/null
+++ b/components/custom-ui/autocomplete/AutoComplete.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  selectedValue: string;
+  onSelectedValueChange: (value: string) => void;
+  searchValue: string;
+  onSearchValueChange: (value: string) => void;
+  items: { value: string; label: string }[];
+  isLoading?: boolean;
+  emptyMessage?: string;
+  placeholder?: string;
+}>()
+/* ----- END PROPERTIES ----- */
+
+const open = ref(false);
+
+var labels = Object();
+for (const item of props.items) {
+  labels[item.value] = item.label;
+}
+
+var values = Object();
+for (const item of props.items) {
+  values[item.value] = item.value;
+}
+
+/*
+const labels2 = props.items.reduce((acc, item) => {
+  acc[item.id] = item.label;
+  return acc;
+}, {} as Record<string, string>);
+*/
+
+const reset = () => {
+  props.onSelectedValueChange("");
+  props.onSearchValueChange("");
+};
+
+const onSelectItem = (inputValue: string) => {
+  if (inputValue === props.selectedValue) {
+    reset();
+  } else {
+    props.onSelectedValueChange(values[inputValue]);
+    props.onSearchValueChange(labels[inputValue] ?? "");
+  }
+  open.value = false;
+};
+
+</script>
+
+<template>
+  <div className="flex items-center">
+    <Popover open={open} onOpenChange={setOpen}>
+      <Command shouldFilter={false}>
+        <PopoverAnchor asChild>
+          <CommandInput
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dialog/OntologyDialog.vue b/components/custom-ui/dialog/OntologyDialog.vue
new file mode 100644
index 0000000..f092bf7
--- /dev/null
+++ b/components/custom-ui/dialog/OntologyDialog.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+
+import {v2KeyValueVariant} from "~/composables/aruna_api_json";
+import {toTypedSchema} from "@vee-validate/zod";
+import {z} from "zod";
+import {useForm} from "vee-validate";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription, DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "~/components/ui/dialog";
+import {Button} from "~/components/ui/button";
+import type {OntologyDoc} from "~/composables/ts_api/OntologyDoc";
+import {ComboboxAnchor} from "radix-vue";
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean,
+  withButton: boolean
+}>()
+const externalTrigger = toRef(props, 'initialOpen')
+const dialogOpen = ref(props.initialOpen)
+watch(externalTrigger, () => dialogOpen.value = externalTrigger.value)
+/* ----- END PROPERTIES ----- */
+
+/* ----- EVENT EMITS ----- */
+const emit = defineEmits<{
+  'add-key-value': [key: string, value: string, kvType: v2KeyValueVariant]
+}>()
+/* ----- END EVENT EMITS ----- */
+
+const currentSelection: Ref<OntologyDoc | undefined> = ref(undefined);
+const popoverOpen: Ref<boolean> = ref(false);
+
+function createMetadataLink(id: string) {
+  id = id.replace(':', '')
+  return `https://service.tib.eu/ts4tib/api/ontologies/${id}`
+}
+
+function reset() {
+  currentSelection.value = undefined;
+}
+
+function submit() {
+  if (currentSelection.value) {
+    emit('add-key-value',
+        'http://purl.org/dc/terms/conformsTo',
+        `{
+          "@type": "CreativeWork",
+          "@id": "${currentSelection.value.iri}",
+          "url": "${createMetadataLink(currentSelection.value.id)}"
+         }`,
+        v2KeyValueVariant.KEY_VALUE_VARIANT_STATIC_LABEL)
+    reset()
+  }
+}
+</script>
+
+<template>
+
+  <Dialog v-model:open="dialogOpen">
+    <DialogTrigger v-if="withButton" as-child>
+      <Button variant="outline">
+        Add Author
+      </Button>
+    </DialogTrigger>
+
+    <DialogContent class="sm:max-w-[425px] sm:rounded-md"
+                   @pointer-down-outside="(event) => event.preventDefault()">
+      <DialogHeader>
+        <DialogTitle class="mb-2 text-center text-aruna-800 font-bold">Add Ontology Definition</DialogTitle>
+        <DialogDescription class="text-center">
+          Add an ontology definition to the resource.
+        </DialogDescription>
+      </DialogHeader>
+
+      <Popover v-model:open="popoverOpen">
+        <PopoverTrigger as-child>
+          <Button
+              variant="outline"
+              role="combobox"
+              :aria-expanded="popoverOpen"
+              class="w-[200px] justify-between"
+          >
+            {{ value
+              ? frameworks.find((framework) => framework.value === value)?.label
+              : "Select framework..." }}
+            <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="w-[200px] p-0">
+          <Command>
+            <CommandInput class="h-9" placeholder="Search framework..." />
+            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandList>
+              <CommandGroup>
+                <CommandItem
+                    v-for="framework in frameworks"
+                    :key="framework.value"
+                    :value="framework.value"
+                    @select="(ev) => {
+                if (typeof ev.detail.value === 'string') {
+                  value = ev.detail.value
+                }
+                popoverOpen = false
+              }"
+                >
+                  {{ framework.label }}
+                  <Check
+                      :class="cn(
+                  'ml-auto h-4 w-4',
+                  value === framework.value ? 'opacity-100' : 'opacity-0',
+                )"
+                  />
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      <DialogFooter>
+        <Button
+            type="submit"
+            :disabled="currentSelection === undefined"
+            class="bg-aruna-800 hover:bg-aruna-700">
+          Add Ontology
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/components/ui/command/Command.vue b/components/ui/command/Command.vue
new file mode 100644
index 0000000..4a99189
--- /dev/null
+++ b/components/ui/command/Command.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+})
+
+const emits = defineEmits<ComboboxRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>
diff --git a/components/ui/command/CommandDialog.vue b/components/ui/command/CommandDialog.vue
new file mode 100644
index 0000000..8b109c4
--- /dev/null
+++ b/components/ui/command/CommandDialog.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import { Dialog, DialogContent } from 'components/ui/dialog'
+import { useForwardPropsEmits } from 'radix-vue'
+import Command from './Command.vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>
diff --git a/components/ui/command/CommandEmpty.vue b/components/ui/command/CommandEmpty.vue
new file mode 100644
index 0000000..00a2385
--- /dev/null
+++ b/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxEmpty } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>
diff --git a/components/ui/command/CommandGroup.vue b/components/ui/command/CommandGroup.vue
new file mode 100644
index 0000000..e830a0f
--- /dev/null
+++ b/components/ui/command/CommandGroup.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>
diff --git a/components/ui/command/CommandInput.vue b/components/ui/command/CommandInput.vue
new file mode 100644
index 0000000..18059f5
--- /dev/null
+++ b/components/ui/command/CommandInput.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <MagnifyingGlassIcon class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>
diff --git a/components/ui/command/CommandItem.vue b/components/ui/command/CommandItem.vue
new file mode 100644
index 0000000..c2d727e
--- /dev/null
+++ b/components/ui/command/CommandItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>
diff --git a/components/ui/command/CommandList.vue b/components/ui/command/CommandList.vue
new file mode 100644
index 0000000..45b4e31
--- /dev/null
+++ b/components/ui/command/CommandList.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  dismissable: false,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>
diff --git a/components/ui/command/CommandSeparator.vue b/components/ui/command/CommandSeparator.vue
new file mode 100644
index 0000000..70b864c
--- /dev/null
+++ b/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+import { ComboboxSeparator } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>
diff --git a/components/ui/command/CommandShortcut.vue b/components/ui/command/CommandShortcut.vue
new file mode 100644
index 0000000..bcec760
--- /dev/null
+++ b/components/ui/command/CommandShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>
diff --git a/components/ui/command/index.ts b/components/ui/command/index.ts
new file mode 100644
index 0000000..0e35f4b
--- /dev/null
+++ b/components/ui/command/index.ts
@@ -0,0 +1,9 @@
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
diff --git a/pages/objects/create.vue b/pages/objects/create.vue
index 14411fd..877b9dd 100644
--- a/pages/objects/create.vue
+++ b/pages/objects/create.vue
@@ -33,6 +33,7 @@ import {HeadObjectCommand, S3Client, type S3ClientConfig} from "@aws-sdk/client-
 import {Upload} from "@aws-sdk/lib-storage";
 import {prettyDisplayJson} from "~/composables/utils";
 import { ValueIcon } from '@radix-icons/vue'
+import OntologyDialog from "~/components/custom-ui/dialog/OntologyDialog.vue";
 
 // Router to navigate back
 const router = useRouter()
@@ -264,7 +265,7 @@ function dataFileChange(e) {
 
 /* ----- Resource Authors ----- */
 const authors: Ref<Map<string, v2Author>> = ref(new Map())
-  const authorDialogOpen = ref(false);
+const authorDialogOpen = ref(false);
 
 function addAuthor(author: v2Author) {
   authors.value.set(getUniqueId(), author)
@@ -275,9 +276,11 @@ function removeAuthor(key: string) {
 }
 
 /* ----- End Resource Authors ----- */
+
 /* ----- Resource key-values ----- */
 const keyValues = ref(new Map())
 const keyValueDialogOpen = ref(false);
+const ontologyDialogOpen = ref(false);
 
 function addKeyValue(key: string, val: string, type: v2KeyValueVariant) {
   keyValues.value.set(key, {key: key, value: val, variant: type} as v2KeyValue)
@@ -288,6 +291,7 @@ function removeKeyValue(key: string) {
 }
 
 /* ----- End Resource key-values ----- */
+
 /* ----- Resource relations ----- */
 const relations: Ref<Map<string, v2Relation>> = ref(new Map())
 
@@ -814,6 +818,11 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
                   data-hs-overlay="#ontology-add">
             Add Ontology
           </button>
+          <button type="button"
+                  @click="ontologyDialogOpen = true"
+                  class="ms-4 px-1 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-gray-300 rounded-md text-gray-300 text-sm hover:text-aruna-700 hover:border-aruna-700 focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
+            Add Ontology
+          </button>
         </div>
 
         <div class="-m-1.5 overflow-hidden overflow-x-auto">
@@ -950,6 +959,17 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
       }
     "
   />
+  <OntologyDialog
+      :initial-open="ontologyDialogOpen"
+      :with-button="false"
+      @update:open="ontologyDialogOpen = false"
+      @add-author="
+      (author) => {
+        // addAuthor(author);
+        ontologyDialogOpen = false;
+      }
+    "
+  />
   <ModalOntology modalId="ontology-add" @add-key-value="addKeyValue"/>
   <ModalRelation modalId="relation-add" @add-relation="addRelation"/>
   <ModalObjectDisplay modalId="object-display" :object="createdResource" :progress="uploadProgress"

From 0e8b24008e5d738b5f94a7f709d7ceff38c46e2c Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 20 Nov 2024 13:25:37 +0100
Subject: [PATCH 09/11] fix: Broken import in CommandDialog

---
 components/ui/command/CommandDialog.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ui/command/CommandDialog.vue b/components/ui/command/CommandDialog.vue
index 8b109c4..6620ad3 100644
--- a/components/ui/command/CommandDialog.vue
+++ b/components/ui/command/CommandDialog.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
-import { Dialog, DialogContent } from 'components/ui/dialog'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
 import { useForwardPropsEmits } from 'radix-vue'
 import Command from './Command.vue'
 

From f6eb368a8ff9845f770be23a21362c61096ce264 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 20 Nov 2024 13:55:54 +0100
Subject: [PATCH 10/11] feat: Integrate shadcn based OntologyDialog

---
 .../custom-ui/autocomplete/AutoComplete.vue   |  57 -----
 .../custom-ui/dialog/OntologyDialog.vue       | 236 ++++++++++++------
 components/modal/Ontology.vue                 | 216 ----------------
 pages/objects/create.vue                      |  74 ++----
 4 files changed, 178 insertions(+), 405 deletions(-)
 delete mode 100644 components/custom-ui/autocomplete/AutoComplete.vue
 delete mode 100644 components/modal/Ontology.vue

diff --git a/components/custom-ui/autocomplete/AutoComplete.vue b/components/custom-ui/autocomplete/AutoComplete.vue
deleted file mode 100644
index d6070fc..0000000
--- a/components/custom-ui/autocomplete/AutoComplete.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup lang="ts">
-/* ----- PROPERTIES ----- */
-const props = defineProps<{
-  selectedValue: string;
-  onSelectedValueChange: (value: string) => void;
-  searchValue: string;
-  onSearchValueChange: (value: string) => void;
-  items: { value: string; label: string }[];
-  isLoading?: boolean;
-  emptyMessage?: string;
-  placeholder?: string;
-}>()
-/* ----- END PROPERTIES ----- */
-
-const open = ref(false);
-
-var labels = Object();
-for (const item of props.items) {
-  labels[item.value] = item.label;
-}
-
-var values = Object();
-for (const item of props.items) {
-  values[item.value] = item.value;
-}
-
-/*
-const labels2 = props.items.reduce((acc, item) => {
-  acc[item.id] = item.label;
-  return acc;
-}, {} as Record<string, string>);
-*/
-
-const reset = () => {
-  props.onSelectedValueChange("");
-  props.onSearchValueChange("");
-};
-
-const onSelectItem = (inputValue: string) => {
-  if (inputValue === props.selectedValue) {
-    reset();
-  } else {
-    props.onSelectedValueChange(values[inputValue]);
-    props.onSearchValueChange(labels[inputValue] ?? "");
-  }
-  open.value = false;
-};
-
-</script>
-
-<template>
-  <div className="flex items-center">
-    <Popover open={open} onOpenChange={setOpen}>
-      <Command shouldFilter={false}>
-        <PopoverAnchor asChild>
-          <CommandInput
-</template>
\ No newline at end of file
diff --git a/components/custom-ui/dialog/OntologyDialog.vue b/components/custom-ui/dialog/OntologyDialog.vue
index f092bf7..b8879cf 100644
--- a/components/custom-ui/dialog/OntologyDialog.vue
+++ b/components/custom-ui/dialog/OntologyDialog.vue
@@ -1,132 +1,202 @@
 <script setup lang="ts">
-
-import {v2KeyValueVariant} from "~/composables/aruna_api_json";
-import {toTypedSchema} from "@vee-validate/zod";
-import {z} from "zod";
-import {useForm} from "vee-validate";
+/* ----- PROPERTIES ----- */
 import {
   Dialog,
   DialogContent,
-  DialogDescription, DialogFooter,
+  DialogFooter,
   DialogHeader,
   DialogTitle,
   DialogTrigger
 } from "~/components/ui/dialog";
 import {Button} from "~/components/ui/button";
 import type {OntologyDoc} from "~/composables/ts_api/OntologyDoc";
-import {ComboboxAnchor} from "radix-vue";
+import {IconBraces, IconExternalLink, IconLoader2} from "@tabler/icons-vue";
+import {v2KeyValueVariant} from "~/composables/aruna_api_json";
 
 /* ----- PROPERTIES ----- */
 const props = defineProps<{
-  initialOpen: boolean,
+  initialOpen: boolean
   withButton: boolean
+  buttonCss: string
 }>()
 const externalTrigger = toRef(props, 'initialOpen')
-const dialogOpen = ref(props.initialOpen)
-watch(externalTrigger, () => dialogOpen.value = externalTrigger.value)
+const open = ref(props.initialOpen)
+watch(externalTrigger, () => (open.value = externalTrigger.value))
 /* ----- END PROPERTIES ----- */
 
-/* ----- EVENT EMITS ----- */
+/* ----- EMITS ----- */
 const emit = defineEmits<{
   'add-key-value': [key: string, value: string, kvType: v2KeyValueVariant]
 }>()
-/* ----- END EVENT EMITS ----- */
+/* ----- END EMITS ----- */
 
-const currentSelection: Ref<OntologyDoc | undefined> = ref(undefined);
-const popoverOpen: Ref<boolean> = ref(false);
+const queryInput = ref('')
+const fetching = ref(false)
+const results: Ref<OntologyDoc[]> = ref([]) //ref([{label: 'test'}, {label: 'test2'}, {label: 'test3'}])
+const currentSelection: Ref<OntologyDoc | undefined> = ref(undefined)
 
-function createMetadataLink(id: string) {
+// Debounce input to decrease number of requests
+watch(queryInput, () => {
+  // Empty input only clears results
+  if (!queryInput.value) {
+    results.value = []
+    return
+  }
+
+  fetching.value = true
+  results.value = []
+  debouncedInput()
+})
+const debouncedInput = debounce(async () => await searchOntologies(queryInput.value), 250)
+
+async function searchOntologies(ontologyName: string): Promise<void> {
+  // No need to search with empty input
+  if (!ontologyName) {
+    results.value = []
+    return
+  }
+
+  results.value = await $fetch<OntologyDoc[]>('/api/ontology', {
+    query: {
+      ontologyName: ontologyName
+    }
+  }).catch(error => {
+    console.log(error)
+    return []
+  })
+  fetching.value = false
+}
+
+function selectOntology(selection: OntologyDoc) {
+  currentSelection.value = selection
+  queryInput.value = ''
+  results.value = []
+}
+
+function createLandingPageLink(id: string) {
   id = id.replace(':', '')
-  return `https://service.tib.eu/ts4tib/api/ontologies/${id}`
+  return `https://terminology.tib.eu/ts/ontologies/${id}`
 }
 
-function reset() {
-  currentSelection.value = undefined;
+function createMetadataLink(id: string) {
+  id = id.replace(':', '')
+  return `https://service.tib.eu/ts4tib/api/ontologies/${id}`
 }
 
 function submit() {
   if (currentSelection.value) {
     emit('add-key-value',
         'http://purl.org/dc/terms/conformsTo',
-        `{
-          "@type": "CreativeWork",
-          "@id": "${currentSelection.value.iri}",
-          "url": "${createMetadataLink(currentSelection.value.id)}"
-         }`,
+        `{"@type": "CreativeWork", "@id": "${currentSelection.value.iri}", "url": "${createMetadataLink(currentSelection.value.id)}"}`,
         v2KeyValueVariant.KEY_VALUE_VARIANT_STATIC_LABEL)
-    reset()
+    clear()
+    open.value = false
   }
 }
+
+function clear() {
+  currentSelection.value = undefined
+  results.value = []
+}
 </script>
 
 <template>
-
-  <Dialog v-model:open="dialogOpen">
+  <Dialog v-model:open="open" @update:open="clear">
     <DialogTrigger v-if="withButton" as-child>
-      <Button variant="outline">
-        Add Author
+      <Button variant="outline"
+              :class="cn('rounded-sm text-aruna-highlight border border-aruna-highlight bg-transparent hover:bg-aruna-highlight hover:text-aruna-text-accent', props.buttonCss)">
+        Add Ontology
       </Button>
     </DialogTrigger>
-
-    <DialogContent class="sm:max-w-[425px] sm:rounded-md"
-                   @pointer-down-outside="(event) => event.preventDefault()">
+    <DialogContent class="sm:max-w-2xl sm:rounded-md"
+                   @pointer-down-outside="event => event.preventDefault()">
       <DialogHeader>
-        <DialogTitle class="mb-2 text-center text-aruna-800 font-bold">Add Ontology Definition</DialogTitle>
-        <DialogDescription class="text-center">
-          Add an ontology definition to the resource.
-        </DialogDescription>
+        <DialogTitle class="mb-2 text-center text-aruna-highlight font-bold">Add Ontology Definition</DialogTitle>
       </DialogHeader>
 
-      <Popover v-model:open="popoverOpen">
-        <PopoverTrigger as-child>
-          <Button
-              variant="outline"
-              role="combobox"
-              :aria-expanded="popoverOpen"
-              class="w-[200px] justify-between"
-          >
-            {{ value
-              ? frameworks.find((framework) => framework.value === value)?.label
-              : "Select framework..." }}
-            <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
-          </Button>
-        </PopoverTrigger>
-        <PopoverContent class="w-[200px] p-0">
-          <Command>
-            <CommandInput class="h-9" placeholder="Search framework..." />
-            <CommandEmpty>No framework found.</CommandEmpty>
-            <CommandList>
-              <CommandGroup>
-                <CommandItem
-                    v-for="framework in frameworks"
-                    :key="framework.value"
-                    :value="framework.value"
-                    @select="(ev) => {
-                if (typeof ev.detail.value === 'string') {
-                  value = ev.detail.value
-                }
-                popoverOpen = false
-              }"
-                >
-                  {{ framework.label }}
-                  <Check
-                      :class="cn(
-                  'ml-auto h-4 w-4',
-                  value === framework.value ? 'opacity-100' : 'opacity-0',
-                )"
-                  />
-                </CommandItem>
-              </CommandGroup>
-            </CommandList>
-          </Command>
-        </PopoverContent>
-      </Popover>
+      <!-- Display current selection -->
+      <div class="rounded-sm border border-aruna-text/50 p-4">
+        <div class="flex flex-wrap items-center px-4 sm:px-0">
+          <h3 class="text-base font-semibold leading-7 text-aruna-text-accent">Currently selected ontology:</h3>
+          <p class="ms-4 font-bold max-w-2xl leading-6 text-aruna-highlight">
+            {{ currentSelection ? currentSelection.label : 'None' }}
+          </p>
+
+        </div>
+
+        <Separator v-if="currentSelection" class="my-4 bg-aruna-text/50"/>
+
+        <div v-if="currentSelection">
+          <dl>
+            <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-bold leading-6 text-aruna-text-accent">Id</dt>
+              <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                {{ currentSelection.id }}
+              </dd>
+            </div>
+            <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-bold leading-6 text-aruna-text-accent">IRI</dt>
+              <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                <NuxtLink :to="currentSelection.iri"
+                          target="_blank"
+                          class="hs-tooltip-toggle text-aruna-highlight hover:text-aruna-highlight/80">
+                  {{ currentSelection.iri }}
+                </NuxtLink>
+
+              </dd>
+            </div>
+            <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-bold leading-6 text-aruna-text-accent">Description</dt>
+              <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                {{ currentSelection.description.join(' ') }}
+              </dd>
+            </div>
+            <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-bold leading-6 text-aruna-text-accent">More Information</dt>
+              <dd class="inline-flex mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                <NuxtLink :to="createLandingPageLink(currentSelection.id)"
+                          target="_blank"
+                          class="font-semibold text-aruna-highlight hover:text-aruna-highlight/80">
+                  <IconExternalLink class="size-6 flex-shrink-0"/>
+                </NuxtLink>
+                <NuxtLink :to="createMetadataLink(currentSelection.id)"
+                          target="_blank"
+                          class="font-semibold text-aruna-highlight hover:text-aruna-highlight/80">
+                  <IconBraces class="ms-6 size-6 flex-shrink-0"/>
+                </NuxtLink>
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+      <!-- End display current selection -->
+
+      <!-- COMMAND -->
+      <Command class="rounded-sm border">
+        <CommandInput placeholder="Search here for an ontology"
+                      class="border-0 focus:border-0 outline-0 focus:outline-0 focus:ring-0"
+                      @input="(event) => queryInput = event.target.value"/>
+        <CommandList class="gap-y-2">
+          <CommandEmpty v-if="queryInput && results.length <= 0 && fetching"
+                        class="flex items-center justify-center gap-x-4">
+            Fetching ontologies <IconLoader2 class="mr-2 animate-spin"/>
+          </CommandEmpty>
+          <CommandEmpty v-if="queryInput && results.length <= 0 && !fetching">
+            No ontologies found.
+          </CommandEmpty>
+          <CommandItem v-for="ontology in results"
+                       :value="ontology"
+                       @select="selectOntology(ontology)">
+            {{ ontology.label }}
+          </CommandItem>
+        </CommandList>
+      </Command>
+      <!-- END COMMAND -->
 
       <DialogFooter>
-        <Button
-            type="submit"
-            :disabled="currentSelection === undefined"
-            class="bg-aruna-800 hover:bg-aruna-700">
+        <Button variant="outline"
+                @click="submit"
+                class="rounded-sm text-aruna-highlight border border-aruna-highlight bg-transparent hover:bg-aruna-highlight hover:text-aruna-text-accent">
           Add Ontology
         </Button>
       </DialogFooter>
diff --git a/components/modal/Ontology.vue b/components/modal/Ontology.vue
deleted file mode 100644
index 67a9efb..0000000
--- a/components/modal/Ontology.vue
+++ /dev/null
@@ -1,216 +0,0 @@
-<script lang="ts" setup>
-import {IconBraces, IconExternalLink, IconX} from "@tabler/icons-vue";
-import {v2KeyValueVariant} from "~/composables/aruna_api_json";
-import type {OntologyDoc} from "~/composables/ts_api/OntologyDoc";
-
-const props = defineProps<{
-  modalId: string,
-}>()
-
-const emit = defineEmits<{
-  'add-key-value': [key: string, value: string, kvType: v2KeyValueVariant]
-}>()
-
-const queryInput = ref('')
-const results: Ref<OntologyDoc[]> = ref([])
-const currentSelection: Ref<OntologyDoc | undefined> = ref(undefined)
-
-watch(queryInput, () => debouncedInput())
-const debouncedInput = debounce(async () => await searchOntologies(queryInput.value), 250)
-
-async function searchOntologies(ontologyName: string): Promise<void> {
-  if (!ontologyName) {
-    results.value = []
-    return
-  }
-
-  results.value = await $fetch<OntologyDoc[]>('/api/ontology', {
-    query: {
-      ontologyName: ontologyName
-    }
-  }).catch(error => {
-    console.log(error)
-    return []
-  })
-}
-
-function createLandingPageLink(id: string) {
-  id = id.replace(':', '')
-  return `https://terminology.tib.eu/ts/ontologies/${id}`
-}
-
-function createMetadataLink(id: string) {
-  id = id.replace(':', '')
-  return `https://service.tib.eu/ts4tib/api/ontologies/${id}`
-}
-
-function selectOntology(selection: OntologyDoc) {
-  currentSelection.value = selection
-  queryInput.value = ''
-  results.value = []
-}
-
-function reset() {
-  currentSelection.value = undefined
-}
-
-function submit() {
-  if (currentSelection.value) {
-    emit('add-key-value',
-        'http://purl.org/dc/terms/conformsTo',
-        `{"@type": "CreativeWork", "@id": "${currentSelection.value.iri}", "url": "${createMetadataLink(currentSelection.value.id)}"}`,
-        v2KeyValueVariant.KEY_VALUE_VARIANT_STATIC_LABEL)
-    reset()
-  }
-}
-</script>
-
-<template>
-  <ClientOnly>
-    <div :id="props.modalId"
-         class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none [--tab-accessibility-limited:false]">
-      <div
-          class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
-        <div
-            class="flex flex-col bg-gray-800 border border-neutral-700 shadow-sm rounded-md pointer-events-auto shadow-neutral-700/70">
-          <div class="flex justify-between items-center py-3 px-4 border-b border-neutral-700">
-            <h3 class="font-bold text-gray-200">
-              Add Ontology Definition
-            </h3>
-            <button :data-hs-overlay="`#${props.modalId}`"
-                    @click="reset"
-                    class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-200 hover:bg-gray-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700"
-                    type="button">
-              <span class="sr-only">Close</span>
-              <IconX class="flex-shrink-0 size-4"/>
-            </button>
-          </div>
-
-          <div class="space-y-4 p-4">
-            <!-- Display current selection -->
-            <div v-if="currentSelection">
-              <div>
-                <div class="px-4 sm:px-0">
-                  <h3 class="text-base font-semibold leading-7 text-gray-300">Currently selected ontology:</h3>
-                  <p class="mt-1 font-bold max-w-2xl leading-6 text-aruna-700">
-                    {{ currentSelection.label }}
-                  </p>
-                </div>
-                <div class="my-6 border-y border-gray-100">
-                  <dl class="divide-y divide-gray-100">
-                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                      <dt class="text-sm font-bold leading-6 text-gray-400">Id</dt>
-                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
-                        {{ currentSelection.id }}
-                      </dd>
-                    </div>
-                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                      <dt class="text-sm font-bold leading-6 text-gray-400">IRI</dt>
-                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
-                        <NuxtLink :to="currentSelection.iri"
-                                  target="_blank"
-                                  class="hs-tooltip-toggle text-aruna-700 hover:text-aruna-600">
-                          {{ currentSelection.iri }}
-                        </NuxtLink>
-
-                      </dd>
-                    </div>
-                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                      <dt class="text-sm font-bold leading-6 text-gray-400">Description</dt>
-                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
-                        {{ currentSelection.description.join(' ') }}
-                      </dd>
-                    </div>
-                    <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                      <dt class="text-sm font-bold leading-6 text-gray-400">More Information</dt>
-                      <dd class="inline-flex mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
-                        <NuxtLink :to="createLandingPageLink(currentSelection.id)"
-                                  target="_blank"
-                                  class="hs-tooltip-toggle font-semibold text-aruna-700 hover:text-aruna-600">
-                          <IconExternalLink class="size-6 flex-shrink-0"/>
-                        </NuxtLink>
-                        <NuxtLink :to="createMetadataLink(currentSelection.id)"
-                                  target="_blank"
-                                  class="font-semibold text-aruna-700 hover:text-aruna-600">
-                          <IconBraces class="ms-6 size-6 flex-shrink-0"/>
-                        </NuxtLink>
-                      </dd>
-                    </div>
-                  </dl>
-                </div>
-              </div>
-            </div>
-            <div v-else>
-              <h3 class="text-base font-semibold leading-7 text-gray-300">Currently selected ontology: None</h3>
-            </div>
-            <!-- End display current selection -->
-
-            <!-- Floating Input -->
-            <div class="relative">
-              <div class="relative">
-                <input v-model="queryInput"
-                       type="text"
-                       id="ontology-search"
-                       placeholder="Search an ontology definition"
-                       class="peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                  focus:pt-6
-                  focus:pb-2
-                  [&:not(:placeholder-shown)]:pt-6
-                  [&:not(:placeholder-shown)]:pb-2
-                  autofill:pt-6
-                  autofill:pb-2">
-                <label for="ontology-search"
-                       class="absolute top-0 start-0 p-4 h-full text-sm text-gray-300 truncate pointer-events-none transition ease-in-out duration-100 border border-transparent origin-[0_0] peer-disabled:opacity-50 peer-disabled:pointer-events-none
-                  peer-focus:scale-90
-                  peer-focus:translate-x-0.5
-                  peer-focus:-translate-y-1.5
-                  peer-focus:text-neutral-500
-                  peer-[:not(:placeholder-shown)]:scale-90
-                  peer-[:not(:placeholder-shown)]:translate-x-0.5
-                  peer-[:not(:placeholder-shown)]:-translate-y-1.5
-                  peer-[:not(:placeholder-shown)]:text-gray-500">
-                  Search for an ontology definition
-                </label>
-              </div>
-
-              <!-- Display search results -->
-              <div v-if="results.length > 0"
-                   class="absolute z-50 mt-2 min-w-96 max-w-md max-h-72 p-1 bg-slate-900 border border-gray-700 rounded-md overflow-hidden overflow-y-auto focus:outline-none focus:border-aruna-700 focus:ring-aruna-700
-                   [&::-webkit-scrollbar]:w-2
-                   [&::-webkit-scrollbar-thumb]:rounded-full
-                   [&::-webkit-scrollbar-track]:bg-neutral-700
-                   [&::-webkit-scrollbar-thumb]:bg-neutral-500">
-                <div v-for="ontology in results"
-                     @click="selectOntology(ontology)"
-                     class="cursor-pointer p-2 space-y-0.5 w-full text-sm text-gray-300 hover:bg-gray-700 rounded-md focus:outline-none">
-                  <div class="flex justify-between items-center w-full">
-                    <div>{{ ontology.label }}</div>
-                  </div>
-                </div>
-              </div>
-              <!-- End display search results -->
-            </div>
-            <!-- End Floating Input -->
-          </div>
-
-
-          <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-gray-700">
-            <button type="button" @click="reset"
-                    class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-700 bg-slate-900 text-white shadow-sm hover:bg-gray-800 disabled:opacity-50 disabled:pointer-events-none"
-                    :data-hs-overlay="`#${props.modalId}`">
-              Close
-            </button>
-            <button type="button"
-                    :disabled="currentSelection === undefined"
-                    @click="submit"
-                    class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent bg-aruna-800 text-white hover:bg-aruna-700 disabled:opacity-50 disabled:pointer-events-none"
-                    :data-hs-overlay="`#${props.modalId}`">
-              Add Ontology
-            </button>
-          </div>
-
-        </div>
-      </div>
-    </div>
-  </ClientOnly>
-</template>
\ No newline at end of file
diff --git a/pages/objects/create.vue b/pages/objects/create.vue
index 067dd8d..18b975d 100644
--- a/pages/objects/create.vue
+++ b/pages/objects/create.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {IconArrowLeft, IconExclamationCircle, IconPlus, IconTrash} from '@tabler/icons-vue'
+import {IconExclamationCircle, IconPlus, IconTrash} from '@tabler/icons-vue'
 import {
   v2DataClass,
   v2InternalRelationVariant,
@@ -28,12 +28,11 @@ import {deleteObject, getObjectBucketAndKey} from "~/composables/api_wrapper"
 import EventBus from "~/composables/EventBus";
 import AuthorDialog from "~/components/custom-ui/dialog/AuthorDialog.vue";
 import KeyValueDialog from "~/components/custom-ui/dialog/KeyValueDialog.vue";
+import OntologyDialog from "~/components/custom-ui/dialog/OntologyDialog.vue";
 
 import {HeadObjectCommand, S3Client, type S3ClientConfig} from "@aws-sdk/client-s3";
 import {Upload} from "@aws-sdk/lib-storage";
 import {prettyDisplayJson} from "~/composables/utils";
-import { ValueIcon } from '@radix-icons/vue'
-import OntologyDialog from "~/components/custom-ui/dialog/OntologyDialog.vue";
 
 // Router to navigate back
 const router = useRouter()
@@ -803,24 +802,18 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
           </div>
         </div>
 
-        <div class="flex flex-row mb-2 mt-6 justify-start items-center">
+        <div class="flex flex-row mb-2 mt-6 justify-start items-center gap-x-4">
           <label for="key-values-input"
                  class="block text-lg font-medium text-aruna-text-accent">Key-Values</label>
           <button type="button"
                   @click="keyValueDialogOpen = true"
-                  class="ms-4 px-1 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent text-sm hover:text-aruna-highlight hover:border-aruna-highlight focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
+                  class="px-1 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent text-sm hover:text-aruna-highlight hover:border-aruna-highlight focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
             <IconPlus class="flex-shrink-0 size-4"/>
           </button>
-          <button type="button"
-                  class="ms-4 px-1 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent text-sm hover:text-aruna-highlight hover:border-aruna-highlight focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
-                  data-hs-overlay="#ontology-add">
-            Add Ontology
-          </button>
-          <button type="button"
-                  @click="ontologyDialogOpen = true"
-                  class="ms-4 px-1 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-gray-300 rounded-md text-gray-300 text-sm hover:text-aruna-700 hover:border-aruna-700 focus:outline-none disabled:opacity-50 disabled:pointer-events-none">
-            Add Ontology
-          </button>
+          <OntologyDialog :initial-open="false"
+                          :with-button="true"
+                          button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-text-accent border-aruna-text-accent hover:border-aruna-highlight hover:bg-transparent hover:text-aruna-highlight"
+                          @add-key-value="addKeyValue"/>
         </div>
 
         <div class="-m-1.5 overflow-x-auto">
@@ -938,40 +931,23 @@ const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, de
     </div>
   </div>
   </div>
-  <AuthorDialog
-    :initial-open="authorDialogOpen"
-    :with-button="false"
-    @update:open="authorDialogOpen = false"
-    @add-author="
-      (author) => {
-        addAuthor(author);
-        authorDialogOpen = false;
-      }
-    "
-  />
-  <KeyValueDialog
-    :initial-open="keyValueDialogOpen"
-    :with-button="false"
-    @update:open="keyValueDialogOpen = false"
-    @add-key-value="
-      ({ key, value, variant }) => {
-        addKeyValue(key, value, variant);
-        keyValueDialogOpen = false;
-      }
-    "
-  />
-  <OntologyDialog
-      :initial-open="ontologyDialogOpen"
-      :with-button="false"
-      @update:open="ontologyDialogOpen = false"
-      @add-author="
-      (author) => {
-        // addAuthor(author);
-        ontologyDialogOpen = false;
-      }
-    "
-  />
-  <ModalOntology modalId="ontology-add" @add-key-value="addKeyValue"/>
+
+  <AuthorDialog :initial-open="authorDialogOpen"
+                :with-button="false"
+                @update:open="authorDialogOpen = false"
+                @add-author="(author) => {
+                  addAuthor(author);
+                  authorDialogOpen = false;
+                }"/>
+
+  <KeyValueDialog :initial-open="keyValueDialogOpen"
+                  :with-button="false"
+                  @update:open="keyValueDialogOpen = false"
+                  @add-key-value="({ key, value, variant }) => {
+                    addKeyValue(key, value, variant);
+                    keyValueDialogOpen = false;
+                  }"/>
+
   <ModalRelation modalId="relation-add" @add-relation="addRelation"/>
   <ModalObjectDisplay modalId="object-display" :object="createdResource" :progress="uploadProgress"
                       :errorMsg="creationError"/>

From 936b34cfebe485320ff8ee28d0804cea2587e9d1 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 20 Nov 2024 13:56:31 +0100
Subject: [PATCH 11/11] chore: Remove deprecated Preline based modals

---
 components/modal/author.vue    | 320 ---------------------------------
 components/modal/key_value.vue | 124 -------------
 2 files changed, 444 deletions(-)
 delete mode 100644 components/modal/author.vue
 delete mode 100644 components/modal/key_value.vue

diff --git a/components/modal/author.vue b/components/modal/author.vue
deleted file mode 100644
index 224d547..0000000
--- a/components/modal/author.vue
+++ /dev/null
@@ -1,320 +0,0 @@
-<script lang="ts" setup>
-import {IconExclamationCircle, IconX} from "@tabler/icons-vue";
-import {type v2Author,} from "~/composables/aruna_api_json";
-import {ULID_REGEX, ORCID_REGEX, EMAIL_REGEX} from "~/composables/constants";
-
-const props = defineProps<{
-  modalId: string,
-}>()
-
-const emit = defineEmits<{
-  'add-author': [relation: v2Author]
-}>()
-
-const firstName = ref('')
-const firstNameErr: Ref<string | undefined> = ref('Please enter a first name')
-const lastName = ref('')
-const lastNameErr: Ref<string | undefined> = ref('Please enter a last name')
-const email = ref('')
-const emailErr: Ref<string | undefined> = ref(undefined)
-const orcid = ref('')
-const orcidErr: Ref<string | undefined> = ref(undefined)
-const userId = ref('')
-const userIdErr: Ref<string | undefined> = ref(undefined)
-
-const validState = ref(true)
-const validationStates = ref(new Map<string, boolean>)
-validationStates.value.set('firstname', false)
-validationStates.value.set('lastname', false)
-validationStates.value.set('email', true)
-validationStates.value.set('orcid', true)
-validationStates.value.set('userid', true)
-
-watch(firstName, () => validateName())
-watch(lastName, () => validateName())
-
-function validateName() {
-  // First name
-  const firstValid = firstName.value.length > 0
-  validationStates.value.set('firstname', firstValid)
-  firstNameErr.value = firstValid ? undefined : 'Please enter a first name'
-
-  // Last name
-  const lastValid = lastName.value.length > 0
-  validationStates.value.set('lastname', lastValid)
-  lastNameErr.value = lastValid ? undefined : 'Please enter a last name'
-
-  validation()
-}
-
-watch(email, () => validateEmail())
-
-function validateEmail() {
-  if (email.value.length > 0) {
-    const valid = EMAIL_REGEX.test(email.value)
-    validationStates.value.set('email', valid)
-    emailErr.value = valid ? undefined : 'Please enter a valid email address'
-  } else {
-    validationStates.value.set('email', true)
-    emailErr.value = undefined
-  }
-  validation()
-}
-
-watch(orcid, () => validateOrcid())
-
-function validateOrcid() {
-  if (orcid.value.length > 0) {
-    const valid = ORCID_REGEX.test(orcid.value)
-    validationStates.value.set('orcid', valid)
-    orcidErr.value = valid ? undefined : 'Please enter a valid ORCID'
-  } else {
-    validationStates.value.set('orcid', true)
-    orcidErr.value = undefined
-  }
-  validation()
-}
-
-watch(userId, () => validateUserId())
-
-function validateUserId() {
-  if (userId.value.length > 0) {
-    const valid = ULID_REGEX.test(userId.value)
-    validationStates.value.set('userid', valid)
-    userIdErr.value = valid ? undefined : 'Please enter a valid ULID'
-  } else {
-    validationStates.value.set('userid', true)
-    userIdErr.value = undefined
-  }
-  validation()
-}
-
-function validation() {
-  for (const state of validationStates.value.values()) {
-    if (!state) {
-      validState.value = false
-      return
-    }
-  }
-  validState.value = true
-}
-
-function reset() {
-  firstName.value = ''
-  lastName.value = ''
-  email.value = ''
-  orcid.value = ''
-  userId.value = ''
-}
-
-function submit() {
-  emit('add-author', {
-    firstName: firstName.value,
-    lastName: lastName.value,
-    email: email.value,
-    orcid: orcid.value.length > 0 ? orcid.value : undefined,
-    id: userId.value.length > 0 ? userId.value : undefined
-  })
-  reset()
-}
-</script>
-
-<template>
-  <div :id="props.modalId"
-       class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none [--tab-accessibility-limited:false]">
-    <div
-        class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all sm:max-w-lg sm:w-full m-3 sm:mx-auto">
-      <div
-          class="flex flex-col bg-gray-800 border shadow-sm rounded-md pointer-events-auto border-neutral-700 shadow-neutral-700/70">
-        <div class="flex justify-between items-center py-3 px-4 border-b border-neutral-700">
-          <h3 class="font-bold text-gray-200">
-            Add Author
-          </h3>
-          <button :data-hs-overlay="`#${props.modalId}`" @click="reset"
-                  class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-300 hover:bg-gray-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700"
-                  type="button">
-            <span class="sr-only">Close</span>
-            <IconX class="flex-shrink-0 size-4"/>
-          </button>
-        </div>
-
-        <div class="space-y-4 p-4 overflow-y-auto">
-          <!-- Author First Name -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="firstName"
-                     required
-                     autofocus
-                     id="first-name-input"
-                     class="mt-2 peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                   focus:pt-6
-                   focus:pb-2
-                   [&:not(:placeholder-shown)]:pt-6
-                   [&:not(:placeholder-shown)]:pb-2
-                   autofill:pt-6
-                   autofill:pb-2"
-                     placeholder="Author first name" type="text">
-              <label class="text-gray-300 absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
-            peer-focus:text-xs
-            peer-focus:-translate-y-1.5
-            peer-focus:text-gray-500
-            peer-[:not(:placeholder-shown)]:text-xs
-            peer-[:not(:placeholder-shown)]:-translate-y-1.5
-            peer-[:not(:placeholder-shown)]:text-gray-500" for="first-name-input">First Name</label>
-              <div :class="{ 'hidden': validationStates.get('firstname') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-red-500"/>
-              </div>
-            </div>
-            <p :class="{ 'hidden': validationStates.get('firstname') }" class="text-sm text-red-600"
-               id="hs-validation-name-error-helper">{{ firstNameErr }}
-            </p>
-          </div>
-          <!-- End Author First Name -->
-
-          <!-- Author Last Name -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="lastName"
-                     required
-                     id="last-name-input"
-                     class="mt-2 peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                   focus:pt-6
-                   focus:pb-2
-                   [&:not(:placeholder-shown)]:pt-6
-                   [&:not(:placeholder-shown)]:pb-2
-                   autofill:pt-6
-                   autofill:pb-2"
-                     placeholder="Author last name"
-                     type="text">
-              <label class="text-gray-300 absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
-            peer-focus:text-xs
-            peer-focus:-translate-y-1.5
-            peer-focus:text-gray-500
-            peer-[:not(:placeholder-shown)]:text-xs
-            peer-[:not(:placeholder-shown)]:-translate-y-1.5
-            peer-[:not(:placeholder-shown)]:text-gray-500" for="last-name-input">Last Name</label>
-              <div :class="{ 'hidden': validationStates.get('lastname') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-red-500"/>
-              </div>
-            </div>
-            <p :class="{ 'hidden': validationStates.get('lastname') }" class="text-sm text-red-600"
-               id="hs-validation-name-error-helper">{{ lastNameErr }}
-            </p></div>
-          <!-- End Author First Name -->
-
-          <!-- Author Email -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="email"
-                     id="author-email-input"
-                     class="mt-2 peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                   focus:pt-6
-                   focus:pb-2
-                   [&:not(:placeholder-shown)]:pt-6
-                   [&:not(:placeholder-shown)]:pb-2
-                   autofill:pt-6
-                   autofill:pb-2"
-                     placeholder="Author email"
-                     type="email">
-              <label class="text-gray-300 absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
-            peer-focus:text-xs
-            peer-focus:-translate-y-1.5
-            peer-focus:text-gray-500
-            peer-[:not(:placeholder-shown)]:text-xs
-            peer-[:not(:placeholder-shown)]:-translate-y-1.5
-            peer-[:not(:placeholder-shown)]:text-gray-500" for="author-email-input">Email</label>
-              <div :class="{ 'hidden': validationStates.get('email') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-red-500"/>
-              </div>
-            </div>
-            <p :class="{ 'hidden': validationStates.get('email') }" class="text-sm text-red-600"
-               id="hs-validation-name-error-helper">{{ emailErr }}
-            </p>
-          </div>
-          <!-- End Author Email -->
-
-          <!-- Author ORCID -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="orcid"
-                     id="author-orcid-input"
-                     class="mt-2 peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                   focus:pt-6
-                   focus:pb-2
-                   [&:not(:placeholder-shown)]:pt-6
-                   [&:not(:placeholder-shown)]:pb-2
-                   autofill:pt-6
-                   autofill:pb-2"
-                     placeholder="Author ORCID"
-                     type="email">
-              <label class="text-gray-300 absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
-            peer-focus:text-xs
-            peer-focus:-translate-y-1.5
-            peer-focus:text-gray-500
-            peer-[:not(:placeholder-shown)]:text-xs
-            peer-[:not(:placeholder-shown)]:-translate-y-1.5
-            peer-[:not(:placeholder-shown)]:text-gray-500" for="author-orcid-input">ORCID</label>
-              <div :class="{ 'hidden': validationStates.get('orcid') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-red-500"/>
-              </div>
-            </div>
-            <p :class="{ 'hidden': validationStates.get('orcid') }" class="text-sm text-red-600"
-               id="hs-validation-name-error-helper">{{ orcidErr }}
-            </p>
-          </div>
-          <!-- End Author ORCID -->
-
-          <!-- Author User ID -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="userId"
-                     id="author-userid-input"
-                     class="mt-2 peer p-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm placeholder:text-transparent focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none
-                   focus:pt-6
-                   focus:pb-2
-                   [&:not(:placeholder-shown)]:pt-6
-                   [&:not(:placeholder-shown)]:pb-2
-                   autofill:pt-6
-                   autofill:pb-2"
-                     placeholder="Author user id"
-                     type="email">
-              <label class="text-gray-300 absolute top-0 start-0 p-4 h-full text-sm truncate pointer-events-none transition ease-in-out duration-100 border border-transparent peer-disabled:opacity-50 peer-disabled:pointer-events-none
-            peer-focus:text-xs
-            peer-focus:-translate-y-1.5
-            peer-focus:text-gray-500
-            peer-[:not(:placeholder-shown)]:text-xs
-            peer-[:not(:placeholder-shown)]:-translate-y-1.5
-            peer-[:not(:placeholder-shown)]:text-gray-500" for="author-userid-input">User ID</label>
-              <div :class="{ 'hidden': validationStates.get('userid') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-red-500"/>
-              </div>
-            </div>
-            <p :class="{ 'hidden': validationStates.get('userid') }" class="text-sm text-red-600"
-               id="hs-validation-name-error-helper">{{ userIdErr }}
-            </p>
-          </div>
-          <!-- End User ID -->
-        </div>
-
-        <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-gray-700">
-          <button type="button" @click="reset"
-                  class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-700 bg-slate-900 text-gray-200 shadow-sm hover:bg-gray-800 disabled:opacity-50 disabled:pointer-events-none"
-                  :data-hs-overlay="`#${props.modalId}`">
-            Close
-          </button>
-          <button type="button" :disabled="!validState"
-                  @click="submit"
-                  class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent bg-aruna-800 text-white hover:bg-aruna-700 disabled:opacity-50 disabled:pointer-events-none"
-                  :data-hs-overlay="`#${props.modalId}`">
-            Add Author
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
\ No newline at end of file
diff --git a/components/modal/key_value.vue b/components/modal/key_value.vue
deleted file mode 100644
index aa8225a..0000000
--- a/components/modal/key_value.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<script lang="ts" setup>
-import {IconX} from "@tabler/icons-vue";
-import {v2KeyValueVariant} from '~/composables/aruna_api_json';
-
-const props = defineProps<{
-  modalId: string,
-}>()
-
-const emit = defineEmits<{
-  'add-key-value': [key: string, value: string, kvType: v2KeyValueVariant]
-}>()
-
-enum KeyValueVariant {
-  Label = 'Label',
-  StaticLabel = 'Static Label',
-  Hook = 'Hook'
-}
-
-const kvKey = ref('')
-const kvValue = ref('')
-const kvType = ref(KeyValueVariant.Label)
-
-function convertKeyValueVariant(variant: KeyValueVariant): v2KeyValueVariant {
-  switch (variant) {
-    case KeyValueVariant.Label:
-      return v2KeyValueVariant.KEY_VALUE_VARIANT_LABEL
-    case KeyValueVariant.StaticLabel:
-      return v2KeyValueVariant.KEY_VALUE_VARIANT_STATIC_LABEL
-    case KeyValueVariant.Hook:
-      return v2KeyValueVariant.KEY_VALUE_VARIANT_HOOK
-  }
-}
-
-function displayKeyValueVariant(variant: KeyValueVariant) {
-  switch (variant) {
-    case KeyValueVariant.Label:
-      return "Label"
-    case KeyValueVariant.StaticLabel:
-      return "Static Label"
-    case KeyValueVariant.Hook:
-      return "Hook"
-  }
-}
-
-function reset() {
-  kvKey.value = ''
-  kvValue.value = ''
-  kvType.value = KeyValueVariant.Label
-}
-
-function submit() {
-  emit('add-key-value', kvKey.value, kvValue.value, convertKeyValueVariant(kvType.value))
-  reset()
-}
-</script>
-
-<template>
-  <div :id="props.modalId"
-       class="hs-overlay hidden size-full fixed top-0 start-0 z-[80] overflow-x-hidden overflow-y-auto pointer-events-none [--tab-accessibility-limited:false]">
-    <div
-        class="hs-overlay-open:mt-7 hs-overlay-open:opacity-100 hs-overlay-open:duration-500 mt-0 opacity-0 ease-out transition-all lg:max-w-4xl lg:w-full m-3 lg:mx-auto">
-      <div
-          class="flex flex-col bg-gray-800 border border-gray-700 shadow-sm rounded-md pointer-events-auto shadow-slate-700/[.7]">
-        <div class="flex justify-between items-center py-3 px-4 border-b border-gray-700">
-          <h3 class="font-bold text-gray-200">
-            Add Key-Value
-          </h3>
-          <button :data-hs-overlay="`#${props.modalId}`"
-                  @click="reset"
-                  class="flex justify-center items-center size-7 text-sm font-semibold rounded-full border border-transparent text-gray-200 hover:bg-gray-700 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700"
-                  type="button">
-            <span class="sr-only">Close</span>
-            <IconX class="flex-shrink-0 size-4" />
-          </button>
-        </div>
-        <div class="flex flex-row space-x-4 p-4 overflow-y-auto">
-          <div class="flex flex-col grow">
-            <label for="key-input-label"
-                   class="block text-sm font-medium mb-2 text-gray-200">Key</label>
-            <input v-model="kvKey" type="text" id="key-input-label"
-                   class="py-3 px-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm focus:border-aruna-800 focus:ring-aruna-800"
-                   placeholder="Enter a key" autofocus>
-          </div>
-          <div class="flex flex-col grow">
-            <label for="value-input-label"
-                   class="block text-sm font-medium mb-2 text-gray-200">Value</label>
-            <input v-model="kvValue" type="text" id="value-input-label"
-                   class="py-3 px-4 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm focus:border-aruna-800 focus:ring-aruna-800"
-                   placeholder="Enter a value">
-          </div>
-
-          <div class="flex flex-col grow">
-            <label for="type-input-select"
-                   class="block text-sm font-medium mb-2 text-gray-200">Variant</label>
-            <select v-model="kvType" id="type-input-select"
-                    class="py-3 px-4 pe-9 block w-full border-gray-700 rounded-md bg-slate-900 text-gray-300 text-sm focus:border-aruna-700 focus:ring-aruna-700 disabled:opacity-50 disabled:pointer-events-none">
-              <option v-for="kvv in KeyValueVariant" :value="kvv"
-                      v-bind:selected="kvv === KeyValueVariant.Label">
-                {{ displayKeyValueVariant(kvv) }}
-              </option>
-            </select>
-
-
-          </div>
-        </div>
-        <div class="flex justify-end items-center gap-x-2 py-3 px-4 border-t border-gray-700">
-          <button type="button"
-                  @click="reset"
-                  class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-700 bg-slate-900 text-white shadow-sm hover:bg-gray-800 disabled:opacity-50 disabled:pointer-events-none"
-                  :data-hs-overlay="`#${props.modalId}`">
-            Close
-          </button>
-          <button type="button"
-                  @click="submit"
-                  class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-md border border-transparent bg-aruna-800 text-white hover:bg-aruna-700 disabled:opacity-50 disabled:pointer-events-none"
-                  :data-hs-overlay="`#${props.modalId}`">
-            Add KeyValue
-          </button>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
\ No newline at end of file