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 001/125] 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 e6341a63..5940426b 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 00000000..adc42fdf
--- /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 00000000..5e23f3e4
--- /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 00000000..364f403b
--- /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 00000000..544f1ab7
--- /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 00000000..a0bb5c24
--- /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 00000000..9ead9a67
--- /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 00000000..a2ea19a5
--- /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 00000000..d9723d63
--- /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 00000000..9dbc63a7
--- /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 00000000..327ce5e9
--- /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 00000000..4bc37dd8
--- /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 00000000..31b92946
--- /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 002/125] 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 1ae94343..41c4086a 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 003/125] 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 5940426b..5bf6afe4 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 00000000..e95300cf
--- /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 00000000..34a4b41b
--- /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 00000000..61f0e01c
--- /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 00000000..7dafdaf5
--- /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 00000000..23d71ced
--- /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 00000000..b1356fb7
--- /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 00000000..4280559e
--- /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 00000000..4eb64014
--- /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 00000000..e599c2bb
--- /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 00000000..93aacec2
--- /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 00000000..7daa6db7
--- /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 00000000..03026a3d
--- /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 00000000..5239a1bd
--- /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 004/125] 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 5bf6afe4..e6341a63 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 005/125] 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 00000000..a1df517a
--- /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 00000000..2287bcb9
--- /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 006/125] 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 00000000..4791a50f
--- /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 00000000..b98b71f8
--- /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 00000000..6a7ab2a7
--- /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 b66265a5..9bbef810 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 007/125] 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 00000000..23ac5489
--- /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 9bbef810..14411fd0 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 008/125] 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 00000000..d6070fcc
--- /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 00000000..f092bf79
--- /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 00000000..4a99189b
--- /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 00000000..8b109c47
--- /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 00000000..00a2385c
--- /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 00000000..e830a0f2
--- /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 00000000..18059f59
--- /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 00000000..c2d727ed
--- /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 00000000..45b4e31b
--- /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 00000000..70b864cb
--- /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 00000000..bcec7604
--- /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 00000000..0e35f4b9
--- /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 14411fd0..877b9dd6 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 009/125] 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 8b109c47..6620ad3c 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 010/125] 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 d6070fcc..00000000
--- 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 f092bf79..b8879cfc 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 67a9efb0..00000000
--- 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 067dd8d8..18b975da 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 011/125] 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 224d5476..00000000
--- 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 aa8225a5..00000000
--- 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

From 0c126a5079ae6ca37fda253af8afbcd80a85fe2b Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Sun, 1 Dec 2024 09:45:05 +0100
Subject: [PATCH 012/125] chore: Import several shadcn-vue components

---
 components/ui/avatar/Avatar.vue               | 21 +++++++
 components/ui/avatar/AvatarFallback.vue       | 11 ++++
 components/ui/avatar/AvatarImage.vue          |  9 +++
 components/ui/avatar/index.ts                 | 24 ++++++++
 components/ui/breadcrumb/Breadcrumb.vue       | 13 +++++
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      | 22 +++++++
 components/ui/breadcrumb/BreadcrumbItem.vue   | 16 ++++++
 components/ui/breadcrumb/BreadcrumbLink.vue   | 19 +++++++
 components/ui/breadcrumb/BreadcrumbList.vue   | 16 ++++++
 components/ui/breadcrumb/BreadcrumbPage.vue   | 19 +++++++
 .../ui/breadcrumb/BreadcrumbSeparator.vue     | 21 +++++++
 components/ui/breadcrumb/index.ts             |  7 +++
 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 +++
 components/ui/radio-group/RadioGroup.vue      | 25 ++++++++
 components/ui/radio-group/RadioGroupItem.vue  | 37 ++++++++++++
 components/ui/radio-group/index.ts            |  2 +
 components/ui/resizable/ResizableHandle.vue   | 26 +++++++++
 .../ui/resizable/ResizablePanelGroup.vue      | 21 +++++++
 components/ui/resizable/index.ts              |  3 +
 components/ui/scroll-area/ScrollArea.vue      | 29 ++++++++++
 components/ui/scroll-area/ScrollBar.vue       | 30 ++++++++++
 components/ui/scroll-area/index.ts            |  2 +
 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 ++++
 components/ui/sheet/Sheet.vue                 | 14 +++++
 components/ui/sheet/SheetClose.vue            | 11 ++++
 components/ui/sheet/SheetContent.vue          | 57 +++++++++++++++++++
 components/ui/sheet/SheetDescription.vue      | 22 +++++++
 components/ui/sheet/SheetFooter.vue           | 19 +++++++
 components/ui/sheet/SheetHeader.vue           | 16 ++++++
 components/ui/sheet/SheetTitle.vue            | 22 +++++++
 components/ui/sheet/SheetTrigger.vue          | 11 ++++
 components/ui/sheet/index.ts                  | 31 ++++++++++
 components/ui/skeleton/Skeleton.vue           | 14 +++++
 components/ui/skeleton/index.ts               |  1 +
 components/ui/table/Table.vue                 | 16 ++++++
 components/ui/table/TableBody.vue             | 14 +++++
 components/ui/table/TableCaption.vue          | 14 +++++
 components/ui/table/TableCell.vue             | 21 +++++++
 components/ui/table/TableEmpty.vue            | 37 ++++++++++++
 components/ui/table/TableFooter.vue           | 14 +++++
 components/ui/table/TableHead.vue             | 14 +++++
 components/ui/table/TableHeader.vue           | 14 +++++
 components/ui/table/TableRow.vue              | 14 +++++
 components/ui/table/index.ts                  |  9 +++
 components/ui/tags-input/TagsInput.vue        | 22 +++++++
 components/ui/tags-input/TagsInputInput.vue   | 19 +++++++
 components/ui/tags-input/TagsInputItem.vue    | 22 +++++++
 .../ui/tags-input/TagsInputItemDelete.vue     | 24 ++++++++
 .../ui/tags-input/TagsInputItemText.vue       | 19 +++++++
 components/ui/tags-input/index.ts             |  5 ++
 components/ui/textarea/Textarea.vue           | 24 ++++++++
 components/ui/textarea/index.ts               |  1 +
 72 files changed, 1399 insertions(+)
 create mode 100644 components/ui/avatar/Avatar.vue
 create mode 100644 components/ui/avatar/AvatarFallback.vue
 create mode 100644 components/ui/avatar/AvatarImage.vue
 create mode 100644 components/ui/avatar/index.ts
 create mode 100644 components/ui/breadcrumb/Breadcrumb.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbEllipsis.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbItem.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbLink.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbList.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbPage.vue
 create mode 100644 components/ui/breadcrumb/BreadcrumbSeparator.vue
 create mode 100644 components/ui/breadcrumb/index.ts
 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
 create mode 100644 components/ui/radio-group/RadioGroup.vue
 create mode 100644 components/ui/radio-group/RadioGroupItem.vue
 create mode 100644 components/ui/radio-group/index.ts
 create mode 100644 components/ui/resizable/ResizableHandle.vue
 create mode 100644 components/ui/resizable/ResizablePanelGroup.vue
 create mode 100644 components/ui/resizable/index.ts
 create mode 100644 components/ui/scroll-area/ScrollArea.vue
 create mode 100644 components/ui/scroll-area/ScrollBar.vue
 create mode 100644 components/ui/scroll-area/index.ts
 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
 create mode 100644 components/ui/sheet/Sheet.vue
 create mode 100644 components/ui/sheet/SheetClose.vue
 create mode 100644 components/ui/sheet/SheetContent.vue
 create mode 100644 components/ui/sheet/SheetDescription.vue
 create mode 100644 components/ui/sheet/SheetFooter.vue
 create mode 100644 components/ui/sheet/SheetHeader.vue
 create mode 100644 components/ui/sheet/SheetTitle.vue
 create mode 100644 components/ui/sheet/SheetTrigger.vue
 create mode 100644 components/ui/sheet/index.ts
 create mode 100644 components/ui/skeleton/Skeleton.vue
 create mode 100644 components/ui/skeleton/index.ts
 create mode 100644 components/ui/table/Table.vue
 create mode 100644 components/ui/table/TableBody.vue
 create mode 100644 components/ui/table/TableCaption.vue
 create mode 100644 components/ui/table/TableCell.vue
 create mode 100644 components/ui/table/TableEmpty.vue
 create mode 100644 components/ui/table/TableFooter.vue
 create mode 100644 components/ui/table/TableHead.vue
 create mode 100644 components/ui/table/TableHeader.vue
 create mode 100644 components/ui/table/TableRow.vue
 create mode 100644 components/ui/table/index.ts
 create mode 100644 components/ui/tags-input/TagsInput.vue
 create mode 100644 components/ui/tags-input/TagsInputInput.vue
 create mode 100644 components/ui/tags-input/TagsInputItem.vue
 create mode 100644 components/ui/tags-input/TagsInputItemDelete.vue
 create mode 100644 components/ui/tags-input/TagsInputItemText.vue
 create mode 100644 components/ui/tags-input/index.ts
 create mode 100644 components/ui/textarea/Textarea.vue
 create mode 100644 components/ui/textarea/index.ts

diff --git a/components/ui/avatar/Avatar.vue b/components/ui/avatar/Avatar.vue
new file mode 100644
index 00000000..80ac365a
--- /dev/null
+++ b/components/ui/avatar/Avatar.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { AvatarRoot } from 'radix-vue'
+import { type AvatarVariants, avatarVariant } from '.'
+import { cn } from '@/utils/shadcn'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  size?: AvatarVariants['size']
+  shape?: AvatarVariants['shape']
+}>(), {
+  size: 'sm',
+  shape: 'circle',
+})
+</script>
+
+<template>
+  <AvatarRoot :class="cn(avatarVariant({ size, shape }), props.class)">
+    <slot />
+  </AvatarRoot>
+</template>
diff --git a/components/ui/avatar/AvatarFallback.vue b/components/ui/avatar/AvatarFallback.vue
new file mode 100644
index 00000000..a671a219
--- /dev/null
+++ b/components/ui/avatar/AvatarFallback.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
+
+const props = defineProps<AvatarFallbackProps>()
+</script>
+
+<template>
+  <AvatarFallback v-bind="props">
+    <slot />
+  </AvatarFallback>
+</template>
diff --git a/components/ui/avatar/AvatarImage.vue b/components/ui/avatar/AvatarImage.vue
new file mode 100644
index 00000000..43499fa2
--- /dev/null
+++ b/components/ui/avatar/AvatarImage.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { AvatarImage, type AvatarImageProps } from 'radix-vue'
+
+const props = defineProps<AvatarImageProps>()
+</script>
+
+<template>
+  <AvatarImage v-bind="props" class="h-full w-full object-cover" />
+</template>
diff --git a/components/ui/avatar/index.ts b/components/ui/avatar/index.ts
new file mode 100644
index 00000000..c4af1a66
--- /dev/null
+++ b/components/ui/avatar/index.ts
@@ -0,0 +1,24 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
+
+export const avatarVariant = cva(
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
+  {
+    variants: {
+      size: {
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl',
+      },
+      shape: {
+        circle: 'rounded-full',
+        square: 'rounded-md',
+      },
+    },
+  },
+)
+
+export type AvatarVariants = VariantProps<typeof avatarVariant>
diff --git a/components/ui/breadcrumb/Breadcrumb.vue b/components/ui/breadcrumb/Breadcrumb.vue
new file mode 100644
index 00000000..72ca1437
--- /dev/null
+++ b/components/ui/breadcrumb/Breadcrumb.vue
@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <nav aria-label="breadcrumb" :class="props.class">
+    <slot />
+  </nav>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/components/ui/breadcrumb/BreadcrumbEllipsis.vue
new file mode 100644
index 00000000..c6d5841a
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+import { DotsHorizontalIcon } from '@radix-icons/vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
+  >
+    <slot>
+      <DotsHorizontalIcon class="h-4 w-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbItem.vue b/components/ui/breadcrumb/BreadcrumbItem.vue
new file mode 100644
index 00000000..4140a500
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    :class="cn('inline-flex items-center gap-1.5', props.class)"
+  >
+    <slot />
+  </li>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbLink.vue b/components/ui/breadcrumb/BreadcrumbLink.vue
new file mode 100644
index 00000000..6afcb6cd
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+import { Primitive, type PrimitiveProps } from 'radix-vue'
+
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+  as: 'a',
+})
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn('transition-colors hover:text-foreground', props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbList.vue b/components/ui/breadcrumb/BreadcrumbList.vue
new file mode 100644
index 00000000..d57efa1d
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbList.vue
@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <ol
+    :class="cn('flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5', props.class)"
+  >
+    <slot />
+  </ol>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbPage.vue b/components/ui/breadcrumb/BreadcrumbPage.vue
new file mode 100644
index 00000000..8984c0f3
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <span
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    :class="cn('font-normal text-foreground', props.class)"
+  >
+    <slot />
+  </span>
+</template>
diff --git a/components/ui/breadcrumb/BreadcrumbSeparator.vue b/components/ui/breadcrumb/BreadcrumbSeparator.vue
new file mode 100644
index 00000000..c3ea923d
--- /dev/null
+++ b/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+import { ChevronRightIcon } from '@radix-icons/vue'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <li
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRightIcon />
+    </slot>
+  </li>
+</template>
diff --git a/components/ui/breadcrumb/index.ts b/components/ui/breadcrumb/index.ts
new file mode 100644
index 00000000..05909832
--- /dev/null
+++ b/components/ui/breadcrumb/index.ts
@@ -0,0 +1,7 @@
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
diff --git a/components/ui/command/Command.vue b/components/ui/command/Command.vue
new file mode 100644
index 00000000..fd1bdcaa
--- /dev/null
+++ b/components/ui/command/Command.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..53f520bc
--- /dev/null
+++ b/components/ui/command/CommandDialog.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { useForwardPropsEmits } from 'radix-vue'
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue'
+import Command from './Command.vue'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
+
+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 00000000..45c158f7
--- /dev/null
+++ b/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxEmptyProps } from 'radix-vue'
+import { ComboboxEmpty } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..c82464b4
--- /dev/null
+++ b/components/ui/command/CommandGroup.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxGroupProps } from 'radix-vue'
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..1829cc86
--- /dev/null
+++ b/components/ui/command/CommandInput.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..5e08d2ad
--- /dev/null
+++ b/components/ui/command/CommandItem.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..34f5528d
--- /dev/null
+++ b/components/ui/command/CommandList.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..aed591f9
--- /dev/null
+++ b/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import type { ComboboxSeparatorProps } from 'radix-vue'
+import { ComboboxSeparator } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..bcec7604
--- /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 00000000..0e35f4b9
--- /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/components/ui/radio-group/RadioGroup.vue b/components/ui/radio-group/RadioGroup.vue
new file mode 100644
index 00000000..eec5d4d8
--- /dev/null
+++ b/components/ui/radio-group/RadioGroup.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { RadioGroupRoot, type RadioGroupRootEmits, type RadioGroupRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <RadioGroupRoot
+    :class="cn('grid gap-2', props.class)"
+    v-bind="forwarded"
+  >
+    <slot />
+  </RadioGroupRoot>
+</template>
diff --git a/components/ui/radio-group/RadioGroupItem.vue b/components/ui/radio-group/RadioGroupItem.vue
new file mode 100644
index 00000000..6be2145e
--- /dev/null
+++ b/components/ui/radio-group/RadioGroupItem.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { CheckIcon } from '@radix-icons/vue'
+import {
+  RadioGroupIndicator,
+  RadioGroupItem,
+  type RadioGroupItemProps,
+  useForwardProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <RadioGroupItem
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <RadioGroupIndicator class="flex items-center justify-center">
+      <CheckIcon class="h-3.5 w-3.5 fill-primary" />
+    </RadioGroupIndicator>
+  </RadioGroupItem>
+</template>
diff --git a/components/ui/radio-group/index.ts b/components/ui/radio-group/index.ts
new file mode 100644
index 00000000..fa1da9c2
--- /dev/null
+++ b/components/ui/radio-group/index.ts
@@ -0,0 +1,2 @@
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'
diff --git a/components/ui/resizable/ResizableHandle.vue b/components/ui/resizable/ResizableHandle.vue
new file mode 100644
index 00000000..7800add1
--- /dev/null
+++ b/components/ui/resizable/ResizableHandle.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SplitterResizeHandle, type SplitterResizeHandleEmits, type SplitterResizeHandleProps, useForwardPropsEmits } from 'radix-vue'
+import { DragHandleDots2Icon } from '@radix-icons/vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<SplitterResizeHandleProps & { class?: HTMLAttributes['class'], withHandle?: boolean }>()
+const emits = defineEmits<SplitterResizeHandleEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterResizeHandle v-bind="forwarded" :class="cn('relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 [&[data-orientation=vertical]]:h-px [&[data-orientation=vertical]]:w-full [&[data-orientation=vertical]]:after:left-0 [&[data-orientation=vertical]]:after:h-1 [&[data-orientation=vertical]]:after:w-full [&[data-orientation=vertical]]:after:-translate-y-1/2 [&[data-orientation=vertical]]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90', props.class)">
+    <template v-if="props.withHandle">
+      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
+        <DragHandleDots2Icon class="h-2.5 w-2.5" />
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>
diff --git a/components/ui/resizable/ResizablePanelGroup.vue b/components/ui/resizable/ResizablePanelGroup.vue
new file mode 100644
index 00000000..8fc0ad89
--- /dev/null
+++ b/components/ui/resizable/ResizablePanelGroup.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SplitterGroup, type SplitterGroupEmits, type SplitterGroupProps, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<SplitterGroupProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<SplitterGroupEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <SplitterGroup v-bind="forwarded" :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)">
+    <slot />
+  </SplitterGroup>
+</template>
diff --git a/components/ui/resizable/index.ts b/components/ui/resizable/index.ts
new file mode 100644
index 00000000..22a0a8a8
--- /dev/null
+++ b/components/ui/resizable/index.ts
@@ -0,0 +1,3 @@
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
+export { default as ResizableHandle } from './ResizableHandle.vue'
+export { SplitterPanel as ResizablePanel } from 'radix-vue'
diff --git a/components/ui/scroll-area/ScrollArea.vue b/components/ui/scroll-area/ScrollArea.vue
new file mode 100644
index 00000000..f4f9b869
--- /dev/null
+++ b/components/ui/scroll-area/ScrollArea.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  ScrollAreaCorner,
+  ScrollAreaRoot,
+  type ScrollAreaRootProps,
+  ScrollAreaViewport,
+} from 'radix-vue'
+import ScrollBar from './ScrollBar.vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<ScrollAreaRootProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
+    <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
+      <slot />
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>
diff --git a/components/ui/scroll-area/ScrollBar.vue b/components/ui/scroll-area/ScrollBar.vue
new file mode 100644
index 00000000..e5350531
--- /dev/null
+++ b/components/ui/scroll-area/ScrollBar.vue
@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
+  orientation: 'vertical',
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    v-bind="delegatedProps"
+    :class="
+      cn('flex touch-none select-none transition-colors',
+         orientation === 'vertical'
+           && 'h-full w-2.5 border-l border-l-transparent p-px',
+         orientation === 'horizontal'
+           && 'h-2.5 flex-col border-t border-t-transparent p-px',
+         props.class)"
+  >
+    <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
+  </ScrollAreaScrollbar>
+</template>
diff --git a/components/ui/scroll-area/index.ts b/components/ui/scroll-area/index.ts
new file mode 100644
index 00000000..2bd4fae5
--- /dev/null
+++ b/components/ui/scroll-area/index.ts
@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'
diff --git a/components/ui/select/Select.vue b/components/ui/select/Select.vue
new file mode 100644
index 00000000..adc42fdf
--- /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 00000000..10c7fa5b
--- /dev/null
+++ b/components/ui/select/SelectContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SelectContent,
+  type SelectContentEmits,
+  type SelectContentProps,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..8ce69f93
--- /dev/null
+++ b/components/ui/select/SelectGroup.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectGroup, type SelectGroupProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..d31e59ef
--- /dev/null
+++ b/components/ui/select/SelectItem.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  SelectItem,
+  SelectItemIndicator,
+  type SelectItemProps,
+  SelectItemText,
+  useForwardProps,
+} from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..a0bb5c24
--- /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 00000000..92bf4169
--- /dev/null
+++ b/components/ui/select/SelectLabel.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { SelectLabel, type SelectLabelProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..e86ab856
--- /dev/null
+++ b/components/ui/select/SelectScrollDownButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollDownButton, type SelectScrollDownButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronDownIcon } from '@radix-icons/vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..c19b6602
--- /dev/null
+++ b/components/ui/select/SelectScrollUpButton.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from 'radix-vue'
+import { ChevronUpIcon } from '@radix-icons/vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..2a4a2979
--- /dev/null
+++ b/components/ui/select/SelectSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectSeparator, type SelectSeparatorProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..f3c87e30
--- /dev/null
+++ b/components/ui/select/SelectTrigger.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from 'radix-vue'
+import { CaretSortIcon } from '@radix-icons/vue'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..4bc37dd8
--- /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 00000000..b1d89eed
--- /dev/null
+++ b/components/ui/select/index.ts
@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue'
+export { default as SelectValue } from './SelectValue.vue'
+export { default as SelectTrigger } from './SelectTrigger.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 SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
diff --git a/components/ui/sheet/Sheet.vue b/components/ui/sheet/Sheet.vue
new file mode 100644
index 00000000..a04c0262
--- /dev/null
+++ b/components/ui/sheet/Sheet.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>
diff --git a/components/ui/sheet/SheetClose.vue b/components/ui/sheet/SheetClose.vue
new file mode 100644
index 00000000..a64703e5
--- /dev/null
+++ b/components/ui/sheet/SheetClose.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'radix-vue'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>
diff --git a/components/ui/sheet/SheetContent.vue b/components/ui/sheet/SheetContent.vue
new file mode 100644
index 00000000..18e7bdb1
--- /dev/null
+++ b/components/ui/sheet/SheetContent.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { Cross2Icon } from '@radix-icons/vue'
+import { type SheetVariants, sheetVariants } from '.'
+import { cn } from '@/utils/shadcn'
+
+interface SheetContentProps extends DialogContentProps {
+  class?: HTMLAttributes['class']
+  side?: SheetVariants['side']
+  hideClose?: boolean
+}
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, side, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      :class="cn(sheetVariants({ side }), props.class)"
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+
+      <DialogClose v-if="!props.hideClose"
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+      >
+        <Cross2Icon class="w-4 h-4" />
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>
diff --git a/components/ui/sheet/SheetDescription.vue b/components/ui/sheet/SheetDescription.vue
new file mode 100644
index 00000000..f219fe00
--- /dev/null
+++ b/components/ui/sheet/SheetDescription.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogDescription, type DialogDescriptionProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogDescription
+    :class="cn('text-sm text-muted-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogDescription>
+</template>
diff --git a/components/ui/sheet/SheetFooter.vue b/components/ui/sheet/SheetFooter.vue
new file mode 100644
index 00000000..bd1fc85f
--- /dev/null
+++ b/components/ui/sheet/SheetFooter.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sheet/SheetHeader.vue b/components/ui/sheet/SheetHeader.vue
new file mode 100644
index 00000000..8fbc9d34
--- /dev/null
+++ b/components/ui/sheet/SheetHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/components/ui/sheet/SheetTitle.vue b/components/ui/sheet/SheetTitle.vue
new file mode 100644
index 00000000..7ea63ec3
--- /dev/null
+++ b/components/ui/sheet/SheetTitle.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { DialogTitle, type DialogTitleProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <DialogTitle
+    :class="cn('text-lg font-semibold text-foreground', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </DialogTitle>
+</template>
diff --git a/components/ui/sheet/SheetTrigger.vue b/components/ui/sheet/SheetTrigger.vue
new file mode 100644
index 00000000..ee0c12ff
--- /dev/null
+++ b/components/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
diff --git a/components/ui/sheet/index.ts b/components/ui/sheet/index.ts
new file mode 100644
index 00000000..fae3f08c
--- /dev/null
+++ b/components/ui/sheet/index.ts
@@ -0,0 +1,31 @@
+import { type VariantProps, cva } from 'class-variance-authority'
+
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
+
+export const sheetVariants = cva(
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
+        bottom:
+            'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
+        right:
+            'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',
+      },
+    },
+    defaultVariants: {
+      side: 'right',
+    },
+  },
+)
+
+export type SheetVariants = VariantProps<typeof sheetVariants>
diff --git a/components/ui/skeleton/Skeleton.vue b/components/ui/skeleton/Skeleton.vue
new file mode 100644
index 00000000..dfe4b41a
--- /dev/null
+++ b/components/ui/skeleton/Skeleton.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+interface SkeletonProps {
+  class?: HTMLAttributes['class']
+}
+
+const props = defineProps<SkeletonProps>()
+</script>
+
+<template>
+  <div :class="cn('animate-pulse rounded-md bg-primary/10', props.class)" />
+</template>
diff --git a/components/ui/skeleton/index.ts b/components/ui/skeleton/index.ts
new file mode 100644
index 00000000..be21fad3
--- /dev/null
+++ b/components/ui/skeleton/index.ts
@@ -0,0 +1 @@
+export { default as Skeleton } from './Skeleton.vue'
diff --git a/components/ui/table/Table.vue b/components/ui/table/Table.vue
new file mode 100644
index 00000000..5b42b40e
--- /dev/null
+++ b/components/ui/table/Table.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div class="relative w-full overflow-auto">
+    <table :class="cn('w-full caption-bottom text-sm', props.class)">
+      <slot />
+    </table>
+  </div>
+</template>
diff --git a/components/ui/table/TableBody.vue b/components/ui/table/TableBody.vue
new file mode 100644
index 00000000..81fb04ac
--- /dev/null
+++ b/components/ui/table/TableBody.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>
+  <tbody :class="cn('[&_tr:last-child]:border-0', props.class)">
+    <slot />
+  </tbody>
+</template>
diff --git a/components/ui/table/TableCaption.vue b/components/ui/table/TableCaption.vue
new file mode 100644
index 00000000..aafe126b
--- /dev/null
+++ b/components/ui/table/TableCaption.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>
+  <caption :class="cn('mt-4 text-sm text-muted-foreground', props.class)">
+    <slot />
+  </caption>
+</template>
diff --git a/components/ui/table/TableCell.vue b/components/ui/table/TableCell.vue
new file mode 100644
index 00000000..0ca9bb34
--- /dev/null
+++ b/components/ui/table/TableCell.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <td
+    :class="
+      cn(
+        'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>
diff --git a/components/ui/table/TableEmpty.vue b/components/ui/table/TableEmpty.vue
new file mode 100644
index 00000000..6065327e
--- /dev/null
+++ b/components/ui/table/TableEmpty.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import TableRow from './TableRow.vue'
+import TableCell from './TableCell.vue'
+import { cn } from '@/utils/shadcn'
+
+const props = withDefaults(defineProps<{
+  class?: HTMLAttributes['class']
+  colspan?: number
+}>(), {
+  colspan: 1,
+})
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>
diff --git a/components/ui/table/TableFooter.vue b/components/ui/table/TableFooter.vue
new file mode 100644
index 00000000..7de47a55
--- /dev/null
+++ b/components/ui/table/TableFooter.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>
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
+    <slot />
+  </tfoot>
+</template>
diff --git a/components/ui/table/TableHead.vue b/components/ui/table/TableHead.vue
new file mode 100644
index 00000000..881e75ef
--- /dev/null
+++ b/components/ui/table/TableHead.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>
+  <th :class="cn('h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5', props.class)">
+    <slot />
+  </th>
+</template>
diff --git a/components/ui/table/TableHeader.vue b/components/ui/table/TableHeader.vue
new file mode 100644
index 00000000..b1d2dbad
--- /dev/null
+++ b/components/ui/table/TableHeader.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>
+  <thead :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>
diff --git a/components/ui/table/TableRow.vue b/components/ui/table/TableRow.vue
new file mode 100644
index 00000000..7e4797af
--- /dev/null
+++ b/components/ui/table/TableRow.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>
+  <tr :class="cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)">
+    <slot />
+  </tr>
+</template>
diff --git a/components/ui/table/index.ts b/components/ui/table/index.ts
new file mode 100644
index 00000000..6fa181be
--- /dev/null
+++ b/components/ui/table/index.ts
@@ -0,0 +1,9 @@
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableRow } from './TableRow.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
diff --git a/components/ui/tags-input/TagsInput.vue b/components/ui/tags-input/TagsInput.vue
new file mode 100644
index 00000000..2bbadde0
--- /dev/null
+++ b/components/ui/tags-input/TagsInput.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { TagsInputRoot, type TagsInputRootEmits, type TagsInputRootProps, useForwardPropsEmits } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TagsInputRootEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TagsInputRoot v-bind="forwarded" :class="cn('flex flex-wrap gap-2 items-center rounded-md border border-input bg-background px-3 py-1.5 text-sm', props.class)">
+    <slot />
+  </TagsInputRoot>
+</template>
diff --git a/components/ui/tags-input/TagsInputInput.vue b/components/ui/tags-input/TagsInputInput.vue
new file mode 100644
index 00000000..7d316a13
--- /dev/null
+++ b/components/ui/tags-input/TagsInputInput.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { TagsInputInput, type TagsInputInputProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputInputProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputInput v-bind="forwardedProps" :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)" />
+</template>
diff --git a/components/ui/tags-input/TagsInputItem.vue b/components/ui/tags-input/TagsInputItem.vue
new file mode 100644
index 00000000..9209caf6
--- /dev/null
+++ b/components/ui/tags-input/TagsInputItem.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { TagsInputItem, type TagsInputItemProps, useForwardProps } from 'radix-vue'
+
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItem v-bind="forwardedProps" :class="cn('flex h-5 items-center rounded-md bg-secondary data-[state=active]:ring-ring data-[state=active]:ring-2 data-[state=active]:ring-offset-2 ring-offset-background', props.class)">
+    <slot />
+  </TagsInputItem>
+</template>
diff --git a/components/ui/tags-input/TagsInputItemDelete.vue b/components/ui/tags-input/TagsInputItemDelete.vue
new file mode 100644
index 00000000..7a0f84d1
--- /dev/null
+++ b/components/ui/tags-input/TagsInputItemDelete.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { Cross2Icon } from '@radix-icons/vue'
+import { TagsInputItemDelete, type TagsInputItemDeleteProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputItemDeleteProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemDelete v-bind="forwardedProps" :class="cn('flex rounded bg-transparent mr-1', props.class)">
+    <slot>
+      <Cross2Icon class="w-4 h-4" />
+    </slot>
+  </TagsInputItemDelete>
+</template>
diff --git a/components/ui/tags-input/TagsInputItemText.vue b/components/ui/tags-input/TagsInputItemText.vue
new file mode 100644
index 00000000..c499bad3
--- /dev/null
+++ b/components/ui/tags-input/TagsInputItemText.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from '@/utils/shadcn'
+import { TagsInputItemText, type TagsInputItemTextProps, useForwardProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<TagsInputItemTextProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TagsInputItemText v-bind="forwardedProps" :class="cn('py-0.5 px-2 text-sm rounded bg-transparent', props.class)" />
+</template>
diff --git a/components/ui/tags-input/index.ts b/components/ui/tags-input/index.ts
new file mode 100644
index 00000000..31305f34
--- /dev/null
+++ b/components/ui/tags-input/index.ts
@@ -0,0 +1,5 @@
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/components/ui/textarea/Textarea.vue b/components/ui/textarea/Textarea.vue
new file mode 100644
index 00000000..32fa7fd9
--- /dev/null
+++ b/components/ui/textarea/Textarea.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/utils/shadcn'
+
+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 00000000..6a7ab2a7
--- /dev/null
+++ b/components/ui/textarea/index.ts
@@ -0,0 +1 @@
+export { default as Textarea } from './Textarea.vue'

From 13956b75625496cfbdf33bf4941335661b87d64f Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Sun, 1 Dec 2024 13:19:41 +0100
Subject: [PATCH 013/125] chore: Add Aruna v3 draft API definition

---
 types/aruna-v3-enums.ts |   69 +
 types/aruna-v3.d.ts     | 4186 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 4255 insertions(+)
 create mode 100644 types/aruna-v3-enums.ts
 create mode 100644 types/aruna-v3.d.ts

diff --git a/types/aruna-v3-enums.ts b/types/aruna-v3-enums.ts
new file mode 100644
index 00000000..ac2b0a79
--- /dev/null
+++ b/types/aruna-v3-enums.ts
@@ -0,0 +1,69 @@
+export enum ComponentType {
+    Server = "Server",
+    Data = "Data",
+    Compute = "Compute"
+}
+export enum Direction {
+    Incoming = "Incoming",
+    Outgoing = "Outgoing",
+    All = "All"
+}
+export enum GenericNodeType {
+    Resource = "Resource"
+}
+export enum GenericNodeType {
+    User = "User"
+}
+export enum GenericNodeType {
+    ServiceAccount = "ServiceAccount"
+}
+export enum GenericNodeType {
+    Group = "Group"
+}
+export enum GenericNodeType {
+    Realm = "Realm"
+}
+export enum GenericNodeType {
+    Component = "Component"
+}
+export enum GetGroupsFromUserResponseGroups {
+    None = "None",
+    Read = "Read",
+    Append = "Append",
+    Write = "Write",
+    Admin = "Admin"
+}
+export enum HashAlgorithm {
+    Sha256 = "Sha256",
+    MD5 = "MD5"
+}
+export enum Permission {
+    None = "None",
+    Read = "Read",
+    Append = "Append",
+    Write = "Write",
+    Admin = "Admin"
+}
+export enum ResourceVariant {
+    Project = "Project",
+    Folder = "Folder",
+    Object = "Object"
+}
+export enum Scope {
+    Personal = "Personal"
+}
+export enum SyncingStatus {
+    Pending = "Pending",
+    Running = "Running",
+    Finished = "Finished",
+    Error = "Error"
+}
+export enum TokenType {
+    Aruna = "Aruna",
+    S3 = "S3"
+}
+export enum VisibilityClass {
+    Public = "Public",
+    PublicMetadata = "PublicMetadata",
+    Private = "Private"
+}
\ No newline at end of file
diff --git a/types/aruna-v3.d.ts b/types/aruna-v3.d.ts
new file mode 100644
index 00000000..56c0e838
--- /dev/null
+++ b/types/aruna-v3.d.ts
@@ -0,0 +1,4186 @@
+/**
+ * This file was auto-generated by openapi-typescript.
+ * Do not make direct changes to the file.
+ */
+
+export type paths = {
+    "/api/v3/global/components": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create a new component */
+        post: operations["create_component"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/global/relation_variant": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create a new relation variant */
+        post: operations["create_relation_variant"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/global/relations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get relation info */
+        get: operations["get_relation_infos"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/groups": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create a new group */
+        post: operations["create_group"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/groups/{group_id}/user/{user_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        /** Add user to group */
+        patch: operations["add_user"];
+        trace?: never;
+    };
+    "/api/v3/groups/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get group by id */
+        get: operations["get_group"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/groups/{id}/join": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Request user join group */
+        post: operations["request_user_access_group"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/groups/{id}/users": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get users from group */
+        get: operations["get_group_users"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/info/events": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get events information */
+        get: operations["get_events"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/info/search": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Search for resources */
+        get: operations["search"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/info/stats": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get global server stats */
+        get: operations["get_stats"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/realms": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create a new realm */
+        post: operations["create_realm"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/realms/{id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get realm */
+        get: operations["get_realm"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/realms/{id}/access": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Request group join realm */
+        post: operations["request_group_access_realm"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/realms/{id}/components": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get components of a realm (server, dataproxies, etc) */
+        get: operations["get_realm_components"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/realms/{id}/components/{component_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        /** Add a component to a realm (dataproxies, etc) */
+        patch: operations["add_component_to_realm"];
+        trace?: never;
+    };
+    "/api/v3/realms/{id}/groups": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get groups from realm */
+        get: operations["get_realm_groups"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/realms/{id}/groups/{group_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        /** Add group to realm */
+        patch: operations["add_group"];
+        trace?: never;
+    };
+    "/api/v3/resources": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get resources */
+        get: operations["get_resource"];
+        put?: never;
+        /** Create a new resource */
+        post: operations["create_resource"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/authors": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Update resource authors */
+        post: operations["update_resource_authors"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/batch": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create a new resource */
+        post: operations["create_resource_batch"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/description": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Update resource description */
+        post: operations["update_resource_description"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/identifiers": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Update resource identifiers */
+        post: operations["update_resource_identifiers"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/labels": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Update resource labels */
+        post: operations["update_resource_labels"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/license": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Update resource license */
+        post: operations["update_resource_license"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/name": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Update resource name */
+        post: operations["update_resource_name"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/projects": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create a new resource */
+        post: operations["create_project"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/relations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Create a new relation */
+        post: operations["create_relation"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/title": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Update resource title */
+        post: operations["update_resource_title"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/visibility": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Update resource visiblity */
+        post: operations["update_resource_visibility"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/{id}/data": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        /** Register data for an object */
+        post: operations["register_data"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/resources/{id}/relations": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get relations of a resource */
+        get: operations["get_relations"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/users": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get current user */
+        get: operations["get_user"];
+        put?: never;
+        /** Register a new user */
+        post: operations["register_user"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/users/groups": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get all groups from the current user */
+        get: operations["get_user_groups"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/users/realms": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** Get all realms from the current user */
+        get: operations["get_user_realms"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/users/s3credentials": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** List all tokens from the current user */
+        get: operations["get_s3_credentials"];
+        put?: never;
+        /** Create a s3credential */
+        post: operations["create_s3_credential"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/api/v3/users/tokens": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        /** List all tokens from the current user */
+        get: operations["get_tokens"];
+        put?: never;
+        /** Create a token */
+        post: operations["create_token"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+};
+export type webhooks = Record<string, never>;
+export type components = {
+    schemas: {
+        AddComponentToRealmResponse: Record<string, never>;
+        AddGroupRequest: {
+            /** Format: ulid */
+            group_id: string;
+            /** Format: ulid */
+            realm_id: string;
+        };
+        AddGroupResponse: Record<string, never>;
+        AddUserResponse: Record<string, never>;
+        Author: {
+            email: string;
+            first_name: string;
+            /** Format: ulid */
+            id: string;
+            identifier: string;
+            last_name: string;
+        };
+        BatchResource: {
+            authors?: components["schemas"]["Author"][];
+            description?: string;
+            identifiers?: string[];
+            labels?: components["schemas"]["KeyValue"][];
+            license_tag?: string;
+            name: string;
+            parent: components["schemas"]["Parent"];
+            title?: string;
+            variant: components["schemas"]["ResourceVariant"];
+            visibility?: components["schemas"]["VisibilityClass"];
+        };
+        Component: {
+            component_type: components["schemas"]["ComponentType"];
+            description: string;
+            endpoints: components["schemas"]["Endpoint"][];
+            /** Format: ulid */
+            id: string;
+            name: string;
+            public: boolean;
+        };
+        /** @enum {string} */
+        ComponentType: ComponentType;
+        Constraints: Record<string, never>;
+        CreateComponentRequest: {
+            component_type: components["schemas"]["ComponentType"];
+            description: string;
+            endpoints: components["schemas"]["Endpoint"][];
+            name: string;
+            pubkey: string;
+            public: boolean;
+        };
+        CreateComponentResponse: {
+            component: components["schemas"]["Component"];
+        };
+        CreateGroupRequest: {
+            description: string;
+            name: string;
+        };
+        CreateGroupResponse: {
+            group: components["schemas"]["Group"];
+        };
+        CreateProjectRequest: {
+            authors?: components["schemas"]["Author"][];
+            /** Format: ulid */
+            data_endpoint?: string | null;
+            description?: string;
+            /** Format: ulid */
+            group_id: string;
+            identifiers?: string[];
+            labels?: components["schemas"]["KeyValue"][];
+            license_tag?: string;
+            name: string;
+            /** Format: ulid */
+            realm_id: string;
+            title?: string;
+            visibility?: components["schemas"]["VisibilityClass"];
+        };
+        CreateProjectResponse: {
+            resource: components["schemas"]["Resource"];
+        };
+        CreateRealmRequest: {
+            description: string;
+            name: string;
+            tag: string;
+        };
+        CreateRealmResponse: {
+            /** Format: ulid */
+            admin_group_id: string;
+            realm: components["schemas"]["Realm"];
+        };
+        CreateRelationRequest: {
+            /** Format: ulid */
+            source: string;
+            /** Format: ulid */
+            target: string;
+            /** Format: int32 */
+            variant: number;
+        };
+        CreateRelationResponse: Record<string, never>;
+        CreateRelationVariantRequest: {
+            backward_type: string;
+            forward_type: string;
+        };
+        CreateRelationVariantResponse: {
+            /** Format: int32 */
+            idx: number;
+        };
+        CreateResourceBatchRequest: {
+            resources: components["schemas"]["BatchResource"][];
+        };
+        CreateResourceRequest: {
+            authors?: components["schemas"]["Author"][];
+            description?: string;
+            identifiers?: string[];
+            labels?: components["schemas"]["KeyValue"][];
+            license_tag?: string;
+            name: string;
+            /** Format: ulid */
+            parent_id: string;
+            title?: string;
+            variant: components["schemas"]["ResourceVariant"];
+            visibility?: components["schemas"]["VisibilityClass"];
+        };
+        CreateResourceResponse: {
+            resource: components["schemas"]["Resource"];
+        };
+        CreateS3CredentialsRequest: {
+            /** Format: ulid */
+            component_id: string;
+            /** Format: date-time */
+            expires_at?: string | null;
+            /** Format: ulid */
+            group_id: string;
+            name: string;
+            /** Format: ulid */
+            realm_id: string;
+            scope?: components["schemas"]["Scope"];
+        };
+        CreateS3CredentialsResponse: {
+            access_key: string;
+            /** Format: ulid */
+            component_id: string;
+            secret_key: string;
+            token: components["schemas"]["Token"];
+        };
+        CreateTokenRequest: {
+            /** Format: date-time */
+            expires_at?: string | null;
+            /** Format: ulid */
+            group_id?: string | null;
+            name: string;
+            /** Format: ulid */
+            realm_id?: string | null;
+            scope?: components["schemas"]["Scope"];
+        };
+        CreateTokenResponse: {
+            secret: string;
+            token: components["schemas"]["Token"];
+        };
+        DataLocation: {
+            /** Format: ulid */
+            endpoint_id: string;
+            status: components["schemas"]["SyncingStatus"];
+        };
+        /** @enum {string} */
+        Direction: Direction;
+        Endpoint: {
+            /** Format: uri */
+            S3: string;
+        } | {
+            /** Format: uri */
+            Json: string;
+        } | {
+            /** Format: uri */
+            Grpc: string;
+        } | {
+            /** Format: uri */
+            Consensus: string;
+        };
+        GenericNode: (components["schemas"]["Resource"] & {
+            /** @enum {string} */
+            type: GenericNodeType;
+        }) | (components["schemas"]["User"] & {
+            /** @enum {string} */
+            type: GenericNodeType;
+        }) | (components["schemas"]["ServiceAccount"] & {
+            /** @enum {string} */
+            type: GenericNodeType;
+        }) | (components["schemas"]["Group"] & {
+            /** @enum {string} */
+            type: GenericNodeType;
+        }) | (components["schemas"]["Realm"] & {
+            /** @enum {string} */
+            type: GenericNodeType;
+        }) | (components["schemas"]["Component"] & {
+            /** @enum {string} */
+            type: GenericNodeType;
+        });
+        GetEventsResponse: {
+            events: {
+                [key: string]: unknown;
+            }[];
+        };
+        GetGroupResponse: {
+            group: components["schemas"]["Group"];
+        };
+        GetGroupsFromRealmResponse: {
+            groups: components["schemas"]["Group"][];
+        };
+        GetGroupsFromUserResponse: {
+            groups: [
+                {
+                    description: string;
+                    /** Format: ulid */
+                    id: string;
+                    name: string;
+                },
+                GetGroupsFromUserResponseGroups
+            ][];
+        };
+        GetRealmComponentsResponse: {
+            components: components["schemas"]["Component"][];
+        };
+        GetRealmResponse: {
+            realm: components["schemas"]["Realm"];
+        };
+        GetRealmsFromUserResponse: {
+            realms: components["schemas"]["Realm"][];
+        };
+        GetRelationInfosResponse: {
+            relation_infos: components["schemas"]["RelationInfo"][];
+        };
+        GetRelationsResponse: {
+            offset?: number | null;
+            relations: components["schemas"]["Relation"][];
+        };
+        GetResourcesResponse: {
+            resources: components["schemas"]["Resource"][];
+        };
+        GetS3CredentialsResponse: {
+            tokens: components["schemas"]["S3Credential"][];
+        };
+        GetStatsResponse: {
+            projects: number;
+            realms: number;
+            resources: number;
+            storage: number;
+            users: number;
+        };
+        GetTokensResponse: {
+            tokens: components["schemas"]["Token"][];
+        };
+        GetUserResponse: {
+            user: components["schemas"]["User"];
+        };
+        GetUsersFromGroupResponse: {
+            users: components["schemas"]["User"][];
+        };
+        Group: {
+            description: string;
+            /** Format: ulid */
+            id: string;
+            name: string;
+        };
+        GroupAccessRealmResponse: Record<string, never>;
+        Hash: {
+            algorithm: components["schemas"]["HashAlgorithm"];
+            value: string;
+        };
+        /** @enum {string} */
+        HashAlgorithm: HashAlgorithm;
+        KeyValue: {
+            key: string;
+            locked: boolean;
+            value: string;
+        };
+        Parent: {
+            /** Format: ulid */
+            ID: string;
+        } | {
+            /** Format: int32 */
+            Idx: number;
+        };
+        /** @enum {string} */
+        Permission: Permission;
+        Realm: {
+            description: string;
+            /** Format: ulid */
+            id: string;
+            name: string;
+            tag: string;
+        };
+        RegisterDataRequest: {
+            /** Format: ulid */
+            component_id: string;
+            hashes: components["schemas"]["Hash"][];
+            /** Format: ulid */
+            object_id?: string;
+        };
+        RegisterDataResponse: Record<string, never>;
+        RegisterUserRequest: {
+            email: string;
+            first_name: string;
+            identifier: string;
+            last_name: string;
+        };
+        RegisterUserResponse: {
+            user: components["schemas"]["User"];
+        };
+        Relation: {
+            /** Format: ulid */
+            from_id: string;
+            relation_type: string;
+            /** Format: ulid */
+            to_id: string;
+        };
+        RelationInfo: {
+            backward_type: string;
+            forward_type: string;
+            idx: components["schemas"]["u32"];
+            internal: boolean;
+        };
+        Resource: {
+            authors: components["schemas"]["Author"][];
+            /** Format: int64 */
+            content_len: number;
+            /** Format: int64 */
+            count: number;
+            /** Format: date-time */
+            created_at: string;
+            description: string;
+            hashes: components["schemas"]["Hash"][];
+            /** Format: ulid */
+            id: string;
+            identifiers: string[];
+            labels: components["schemas"]["KeyValue"][];
+            /** Format: date-time */
+            last_modified: string;
+            license_tag: string;
+            location: components["schemas"]["DataLocation"][];
+            locked: boolean;
+            name: string;
+            /** Format: int64 */
+            revision: number;
+            title: string;
+            variant: components["schemas"]["ResourceVariant"];
+            visibility: components["schemas"]["VisibilityClass"];
+        };
+        /** @enum {string} */
+        ResourceVariant: ResourceVariant;
+        S3Credential: {
+            access_key: string;
+            token_info: components["schemas"]["Token"];
+        };
+        Scope: Scope | {
+            Ressource: {
+                permission: components["schemas"]["Permission"];
+                /** Format: ulid */
+                resource_id: string;
+            };
+        };
+        SearchResponse: {
+            expected_hits: number;
+            resources: components["schemas"]["GenericNode"][];
+        };
+        ServiceAccount: {
+            /** Format: ulid */
+            id: string;
+            name: string;
+        };
+        /** @enum {string} */
+        SyncingStatus: SyncingStatus;
+        Token: {
+            /** Format: ulid */
+            component_id?: string | null;
+            constraints?: null | components["schemas"]["Constraints"];
+            /** Format: ulid */
+            default_group?: string | null;
+            /** Format: ulid */
+            default_realm?: string | null;
+            /** Format: date-time */
+            expires_at: string;
+            /** Format: int32 */
+            id: number;
+            name: string;
+            scope: components["schemas"]["Scope"];
+            token_type: components["schemas"]["TokenType"];
+            /** Format: ulid */
+            user_id: string;
+        };
+        /** @enum {string} */
+        TokenType: TokenType;
+        UpdateResourceAuthorsRequest: {
+            authors_to_add: components["schemas"]["Author"][];
+            authors_to_remove: components["schemas"]["Author"][];
+            /** Format: ulid */
+            id: string;
+        };
+        UpdateResourceAuthorsResponse: {
+            resource: components["schemas"]["Resource"];
+        };
+        UpdateResourceDescriptionRequest: {
+            description: string;
+            /** Format: ulid */
+            id: string;
+        };
+        UpdateResourceDescriptionResponse: {
+            resource: components["schemas"]["Resource"];
+        };
+        UpdateResourceIdentifiersRequest: {
+            /** Format: ulid */
+            id: string;
+            ids_to_add: string[];
+            ids_to_remove: string[];
+        };
+        UpdateResourceIdentifiersResponse: {
+            resource: components["schemas"]["Resource"];
+        };
+        UpdateResourceLabelsRequest: {
+            /** Format: ulid */
+            id: string;
+            labels_to_add: components["schemas"]["KeyValue"][];
+            labels_to_remove: components["schemas"]["KeyValue"][];
+        };
+        UpdateResourceLabelsResponse: {
+            resource: components["schemas"]["Resource"];
+        };
+        UpdateResourceLicenseRequest: {
+            /** Format: ulid */
+            id: string;
+            license_tag: string;
+        };
+        UpdateResourceLicenseResponse: {
+            resource: components["schemas"]["Resource"];
+        };
+        UpdateResourceNameRequest: {
+            /** Format: ulid */
+            id: string;
+            name: string;
+        };
+        UpdateResourceNameResponse: {
+            resource: components["schemas"]["Resource"];
+        };
+        UpdateResourceTitleRequest: {
+            /** Format: ulid */
+            id: string;
+            title: string;
+        };
+        UpdateResourceTitleResponse: {
+            resource: components["schemas"]["Resource"];
+        };
+        UpdateResourceVisibilityRequest: {
+            /** Format: ulid */
+            id: string;
+            visibility: components["schemas"]["VisibilityClass"];
+        };
+        UpdateResourceVisibilityResponse: {
+            resource: components["schemas"]["Resource"];
+        };
+        User: {
+            email: string;
+            first_name: string;
+            global_admin: boolean;
+            /** Format: ulid */
+            id: string;
+            identifiers: string;
+            last_name: string;
+        };
+        UserAccessGroupResponse: Record<string, never>;
+        /** @enum {string} */
+        VisibilityClass: VisibilityClass;
+        /** Format: int32 */
+        u32: number;
+    };
+    responses: never;
+    parameters: never;
+    requestBodies: never;
+    headers: never;
+    pathItems: never;
+};
+export type $defs = Record<string, never>;
+export interface operations {
+    create_component: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateComponentRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CreateComponentResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    create_relation_variant: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateRelationVariantRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CreateRelationVariantResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_relation_infos: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetRelationInfosResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    create_group: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateGroupRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CreateGroupResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    add_user: {
+        parameters: {
+            query: {
+                /** @description Permission */
+                permission: components["schemas"]["Permission"];
+            };
+            header?: never;
+            path: {
+                /** @description Group ID */
+                group_id: string;
+                /** @description User ID */
+                user_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["AddUserResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_group: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Realm ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetGroupResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    request_user_access_group: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Group ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UserAccessGroupResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_group_users: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Group ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetUsersFromGroupResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_events: {
+        parameters: {
+            query: {
+                subscriber_id: string;
+                acknowledge_from?: string | null;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetEventsResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    search: {
+        parameters: {
+            query?: {
+                query?: string;
+                filter?: string | null;
+                limit?: number | null;
+                offset?: number | null;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["SearchResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_stats: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetStatsResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    create_realm: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateRealmRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CreateRealmResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_realm: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Realm ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetRealmResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    request_group_access_realm: {
+        parameters: {
+            query: {
+                /** @description Group ID */
+                group_id: string;
+            };
+            header?: never;
+            path: {
+                /** @description Realm ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GroupAccessRealmResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_realm_components: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Realm ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetRealmComponentsResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    add_component_to_realm: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Realm ID */
+                id: string;
+                /** @description Component ID */
+                component_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["AddComponentToRealmResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_realm_groups: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Realm ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetGroupsFromRealmResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    add_group: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Realm ID */
+                id: string;
+                /** @description Group ID */
+                group_id: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["AddGroupRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["AddGroupResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_resource: {
+        parameters: {
+            query: {
+                ids: string[];
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetResourcesResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    create_resource: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateResourceRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CreateResourceResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    update_resource_authors: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UpdateResourceAuthorsRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UpdateResourceAuthorsResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    create_resource_batch: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateResourceBatchRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CreateResourceResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    update_resource_description: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UpdateResourceDescriptionRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UpdateResourceDescriptionResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    update_resource_identifiers: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UpdateResourceIdentifiersRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UpdateResourceIdentifiersResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    update_resource_labels: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UpdateResourceLabelsRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UpdateResourceLabelsResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    update_resource_license: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UpdateResourceLicenseRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UpdateResourceLicenseResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    update_resource_name: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UpdateResourceNameRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UpdateResourceNameResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    create_project: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateProjectRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CreateProjectResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    create_relation: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateRelationRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CreateRelationResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    update_resource_title: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UpdateResourceTitleRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UpdateResourceTitleResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    update_resource_visibility: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UpdateResourceVisibilityRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["UpdateResourceVisibilityResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    register_data: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                /** @description Resource ID (Must be object) */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["RegisterDataRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RegisterDataResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_relations: {
+        parameters: {
+            query?: {
+                /** @description Direction of relation */
+                direction?: null | components["schemas"]["Direction"];
+                /** @description Filter relations by index */
+                filter?: number[] | null;
+                /** @description Offset for pagination */
+                offset?: number | null;
+                /** @description Page size for pagination */
+                page_size?: number | null;
+            };
+            header?: never;
+            path: {
+                /** @description Resource ID */
+                id: string;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetRelationsResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_user: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetUserResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    register_user: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["RegisterUserRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["RegisterUserResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_user_groups: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetGroupsFromUserResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_user_realms: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetRealmsFromUserResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_s3_credentials: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetS3CredentialsResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    create_s3_credential: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateS3CredentialsRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CreateS3CredentialsResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    get_tokens: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["GetTokensResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+    create_token: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["CreateTokenRequest"];
+            };
+        };
+        responses: {
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": components["schemas"]["CreateTokenResponse"];
+                };
+            };
+            400: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            401: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content?: never;
+            };
+            403: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            404: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+            409: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": {
+                        error: string;
+                        name: string;
+                    };
+                };
+            };
+            500: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "text/plain": string;
+                };
+            };
+        };
+    };
+}

From a242f73ebb86918d41bb0cb43e070629bc612c5f Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Sun, 1 Dec 2024 13:22:25 +0100
Subject: [PATCH 014/125] chore: Move ontology type definitions to correct
 directory

---
 components/modal/Ontology.vue                           | 2 +-
 pages/objects/create.vue                                | 1 +
 server/api/ontology.get.ts                              | 2 +-
 {composables/ts_api => types}/OntologyDoc.ts            | 0
 {composables/ts_api => types}/SelectOntologyResponse.ts | 2 +-
 5 files changed, 4 insertions(+), 3 deletions(-)
 rename {composables/ts_api => types}/OntologyDoc.ts (100%)
 rename {composables/ts_api => types}/SelectOntologyResponse.ts (77%)

diff --git a/components/modal/Ontology.vue b/components/modal/Ontology.vue
index 67a9efb0..8f206fed 100644
--- a/components/modal/Ontology.vue
+++ b/components/modal/Ontology.vue
@@ -1,7 +1,7 @@
 <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";
+import type {OntologyDoc} from "~/types/OntologyDoc";
 
 const props = defineProps<{
   modalId: string,
diff --git a/pages/objects/create.vue b/pages/objects/create.vue
index 063d2128..43886c97 100644
--- a/pages/objects/create.vue
+++ b/pages/objects/create.vue
@@ -30,6 +30,7 @@ import EventBus from "~/composables/EventBus";
 import {HeadObjectCommand, S3Client, type S3ClientConfig} from "@aws-sdk/client-s3";
 import {Upload} from "@aws-sdk/lib-storage";
 import {prettyDisplayJson} from "~/composables/utils";
+import OntologyDialog from "~/components/custom-ui/dialog/OntologyDialog.vue";
 
 // Router to navigate back
 const router = useRouter()
diff --git a/server/api/ontology.get.ts b/server/api/ontology.get.ts
index 7634a22d..74a851fd 100644
--- a/server/api/ontology.get.ts
+++ b/server/api/ontology.get.ts
@@ -1,4 +1,4 @@
-import {SelectOntologyResponse} from "~/composables/ts_api/SelectOntologyResponse";
+import {SelectOntologyResponse} from "~/types/SelectOntologyResponse";
 
 export default defineEventHandler(async event => {
   const queryParams = getQuery(event)
diff --git a/composables/ts_api/OntologyDoc.ts b/types/OntologyDoc.ts
similarity index 100%
rename from composables/ts_api/OntologyDoc.ts
rename to types/OntologyDoc.ts
diff --git a/composables/ts_api/SelectOntologyResponse.ts b/types/SelectOntologyResponse.ts
similarity index 77%
rename from composables/ts_api/SelectOntologyResponse.ts
rename to types/SelectOntologyResponse.ts
index 13a90ea8..c2493e3e 100644
--- a/composables/ts_api/SelectOntologyResponse.ts
+++ b/types/SelectOntologyResponse.ts
@@ -1,4 +1,4 @@
-import type {OntologyDoc} from "~/composables/ts_api/OntologyDoc";
+import type {OntologyDoc} from "~/types/OntologyDoc";
 
 export type SelectOntologyResponse = {
   // There are lots of other properties in the response

From 971d57e226b80006dc8a18ef511e55281b9fa710 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Sun, 1 Dec 2024 13:25:46 +0100
Subject: [PATCH 015/125] chore: Move constants to utils directory

---
 components/custom-ui/frontpage/Newsletter.vue | 2 +-
 components/modal/author.vue                   | 2 +-
 components/modal/relation.vue                 | 2 +-
 pages/objects/create.vue                      | 2 +-
 {composables => utils}/constants.ts           | 3 +--
 5 files changed, 5 insertions(+), 6 deletions(-)
 rename {composables => utils}/constants.ts (88%)

diff --git a/components/custom-ui/frontpage/Newsletter.vue b/components/custom-ui/frontpage/Newsletter.vue
index fce6c4a4..8355016f 100644
--- a/components/custom-ui/frontpage/Newsletter.vue
+++ b/components/custom-ui/frontpage/Newsletter.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {EMAIL_REGEX} from "~/composables/constants";
+import {EMAIL_REGEX} from "~/utils/constants";
 import {IconCircleCheck, IconExclamationCircle} from "@tabler/icons-vue";
 
 const email = ref('')
diff --git a/components/modal/author.vue b/components/modal/author.vue
index 224d5476..534da92a 100644
--- a/components/modal/author.vue
+++ b/components/modal/author.vue
@@ -1,7 +1,7 @@
 <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";
+import {ULID_REGEX, ORCID_REGEX, EMAIL_REGEX} from "~/utils/constants";
 
 const props = defineProps<{
   modalId: string,
diff --git a/components/modal/relation.vue b/components/modal/relation.vue
index 96a2afc8..8bcb1926 100644
--- a/components/modal/relation.vue
+++ b/components/modal/relation.vue
@@ -7,7 +7,7 @@ import {
   v2RelationDirection,
   v2ResourceVariant
 } from "~/composables/aruna_api_json";
-import {ULID_REGEX} from "~/composables/constants";
+import {ULID_REGEX} from "~/utils/constants";
 
 const props = defineProps<{
   modalId: string,
diff --git a/pages/objects/create.vue b/pages/objects/create.vue
index 43886c97..2e9e0e1e 100644
--- a/pages/objects/create.vue
+++ b/pages/objects/create.vue
@@ -22,7 +22,7 @@ import {
   fromDataClassStr,
   fromResourceTypeStr
 } from "~/composables/enum_conversions"
-import {OBJECT_REGEX, PROJECT_REGEX, S3_KEY_REGEX, ULID_REGEX} from "~/composables/constants"
+import {OBJECT_REGEX, PROJECT_REGEX, S3_KEY_REGEX, ULID_REGEX} from "~/utils/constants"
 import type {ObjectInfo} from "~/composables/proto_conversions"
 import {deleteObject, getObjectBucketAndKey} from "~/composables/api_wrapper"
 import EventBus from "~/composables/EventBus";
diff --git a/composables/constants.ts b/utils/constants.ts
similarity index 88%
rename from composables/constants.ts
rename to utils/constants.ts
index af649f0e..d14972dd 100644
--- a/composables/constants.ts
+++ b/utils/constants.ts
@@ -1,7 +1,6 @@
-
 export const PROJECT_REGEX: RegExp = new RegExp('^[a-z0-9\-]+$')
 export const S3_KEY_REGEX: RegExp = new RegExp('^[a-zA-Z0-9\-\!\_\.\*\_\'\(\)]+$')
 export const OBJECT_REGEX: RegExp = new RegExp('^[a-zA-Z0-9\-\!\_\.\*\_\'\(\)\/]+$')
 export const ULID_REGEX: RegExp = new RegExp('^[0-7][0-9A-HJKMNP-TV-Z]{25}$')
 export const ORCID_REGEX: RegExp = new RegExp('(\\d{4}-){3}\\d{3}(\\d|X)$')
-export const EMAIL_REGEX: RegExp= new RegExp('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$')
\ No newline at end of file
+export const EMAIL_REGEX: RegExp= new RegExp('^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\\.[a-zA-Z0-9-]+)*$')

From 990a53e76a160488485d3cb439f2c06b7b761038 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Sun, 1 Dec 2024 14:42:43 +0100
Subject: [PATCH 016/125] feat: Adapt user register/fetch to v3

---
 app.vue                                       | 101 +++---------------
 .../custom-ui/dialog/RegistrationDialog.vue   |  70 ++++--------
 components/navigation/top.vue                 |   4 +-
 composables/User.ts                           |  40 +++++++
 server/api/v3/user.get.ts                     |  12 +++
 server/api/v3/user.post.ts                    |  13 +++
 6 files changed, 99 insertions(+), 141 deletions(-)
 create mode 100644 composables/User.ts
 create mode 100644 server/api/v3/user.get.ts
 create mode 100644 server/api/v3/user.post.ts

diff --git a/app.vue b/app.vue
index 1ea909e3..bd267ade 100644
--- a/app.vue
+++ b/app.vue
@@ -1,19 +1,13 @@
 <script setup lang="ts">
-import {IconPlant} from "@tabler/icons-vue";
-import type {v2User} from "./composables/aruna_api_json";
 import EventBus from "~/composables/EventBus";
-import type {ArunaError} from "~/composables/ArunaError";
 import {parseJwt} from "~/composables/utils";
+import {useUser} from '~/composables/User'
 
-import {h} from 'vue';
-import Toaster from '@/components/ui/toast/Toaster.vue'
+import Toaster from '~/components/ui/toast/Toaster.vue'
 import RegistrationDialog from "~/components/custom-ui/dialog/RegistrationDialog.vue";
-import {useToast} from '@/components/ui/toast/use-toast'
 import Banner from "~/components/custom-ui/Banner.vue";
 import {addSeconds} from "date-fns";
 
-const {toast} = useToast()
-
 useHead({
   title: "Aruna | The data orchestration engine",
   meta: [
@@ -36,7 +30,7 @@ const bannerVisible = computed(() => {
     const validTo = Date.parse(bannerConf.validTo) || Number.MAX_SAFE_INTEGER
 
     // Check if in specified time range
-    if ((currentTimestamp-validFrom)*(currentTimestamp-validTo) <= 0) {
+    if ((currentTimestamp - validFrom) * (currentTimestamp - validTo) <= 0) {
       // Check if cookie is already present
       if (bannerCookie.value) {
         const cookieDate = Date.parse(bannerCookie.value)
@@ -61,87 +55,16 @@ function hideBanner() {
 }
 
 // Provide user object globally read-only
-const notRegistered = ref(false)
-const user: Ref<v2User | undefined> = ref(undefined)
+const {user, unregistered, refreshUser} = await useUser(useRuntimeConfig().public.maintenanceMode)
 provide('userRef', readonly(user))
 
-// Try to fetch user
-async function updateUser() {
-  // Only fetch user if not in maintenance mode
-  if (useRuntimeConfig().public.maintenanceMode)
-    return
-
-  await $fetch<v2User | ArunaError>('/api/user')
-      .then(response => {
-        if (typeof response === 'undefined') {
-          user.value = undefined
-          toast({
-            title: 'Error',
-            //description: 'Something went wrong. If this problem persists please contact an administrator.',
-            description: 'User fetch response is undefined. This should not be possible :/',
-            variant: 'destructive',
-            duration: 10000,
-          })
-        } else if (response.type === 'ArunaError') {
-          user.value = undefined
-          if ((response as ArunaError).message === 'Not registered') {
-            notRegistered.value = true
-          } else if ((response as ArunaError).code === 13) {
-            // gRPC code 13 = Internal
-            notRegistered.value = false
-            console.error(`${(response as ArunaError).code} - ${(response as ArunaError).message}`)
-          } else if ((response as ArunaError).code === 14) {
-            // gRPC code 14 = Unavailable
-            notRegistered.value = false
-            toast({
-              title: 'Error',
-              description: 'Aruna server is currently unavailable.',
-              variant: 'destructive',
-              duration: 10000,
-            })
-          } else if ((response as ArunaError).code === 16) {
-            // gRPC code 16 = Unauthorized
-            notRegistered.value = false
-          } else {
-            // Nuxt server-side error
-            notRegistered.value = false
-            console.error((response as ArunaError).message)
-          }
-        } else {
-          notRegistered.value = false
-          user.value = response as v2User
-
-          if (!user.value.active)
-            toast({
-              description: h('div',
-                  {class: 'flex space-x-2 items-center justify-center'},
-                  [
-                    h(IconPlant, {class: 'flex-shrink-0 size-5 text-green-400'}),
-                    h('span',
-                        {class: 'text-fuchsia-50'},
-                        ['Please wait until your account gets activated by an administrator.'])
-                  ]),
-              duration: 10000
-            })
-        }
-      }).catch(() => {
-        user.value = undefined
-        notRegistered.value = false
-        toast({
-          title: 'Error',
-          description: 'Something unexpected went wrong. If this problem persists please contact an administrator.',
-          variant: 'destructive',
-          duration: 10000,
-        })
-      })
-}
-
 // Re-fetch user on demand
-EventBus.on('updateUser', () => {
+EventBus.on('updateUser', async () => {
   console.log("Received user refresh event")
-  updateUser()
+  await refreshUser() //updateUser()
 })
 
+// Auto-refresh access/refresh token before expiry
 async function refreshTokens() {
   const refresh_token = useCookie<string>('refresh_token')
   const access_token = useCookie<string>('access_token')
@@ -165,16 +88,17 @@ async function refreshTokens() {
 }
 
 onBeforeMount(() => setInterval(refreshTokens, 30000))
-onBeforeMount(() => updateUser())
 </script>
 
 <template>
-  <RegistrationDialog @closeRegisterDialog="notRegistered=false" :withButton="false" :initialOpen="notRegistered"/>
+  <RegistrationDialog @closeRegisterDialog="refreshUser()" :withButton="false" :initialOpen="unregistered"/>
 
-  <!-- Header + Navigation -->
   <!-- Main body -->
   <div v-if="useRuntimeConfig().public.maintenanceMode"
-       class="h-[100vh] w-[100vw] bg-[url('/public/imgs/maintenance_sm.webp')] md:bg-[url('/public/imgs/maintenance_md.webp')] lg:bg-[url('/public/imgs/maintenance_lg.webp')] bg-no-repeat bg-center bg-cover to-transparent">
+       class="h-[100vh] w-[100vw] bg-no-repeat bg-center bg-cover to-transparent
+              bg-[url('/imgs/maintenance_sm.webp')]
+              md:bg-[url('/imgs/maintenance_md.webp')]
+              lg:bg-[url('/imgs/maintenance_lg.webp')]">
   </div>
 
   <div v-else
@@ -189,6 +113,7 @@ onBeforeMount(() => updateUser())
     <NuxtLoadingIndicator/>
     <NuxtPage/>
   </div>
+  <!-- End Main body -->
 
   <Toaster/>
 </template>
diff --git a/components/custom-ui/dialog/RegistrationDialog.vue b/components/custom-ui/dialog/RegistrationDialog.vue
index 98aab8e6..7fd91a76 100644
--- a/components/custom-ui/dialog/RegistrationDialog.vue
+++ b/components/custom-ui/dialog/RegistrationDialog.vue
@@ -21,13 +21,11 @@ import {
 import {Input} from '~/components/ui/input'
 import {Popover, PopoverTrigger, PopoverContent} from '~/components/ui/popover'
 import {useToast} from '~/components/ui/toast/use-toast'
-import type {v2RegisterUserResponse} from "~/composables/aruna_api_json";
 import {useForm} from "vee-validate";
 import {toTypedSchema} from '@vee-validate/zod'
 import {h} from "vue";
 import * as z from 'zod'
-
-const {toast} = useToast()
+import type {RegisterUserResponse} from "~/composables/api_wrapper";
 
 /* ----- PROPERTIES ----- */
 const props = defineProps<{
@@ -47,29 +45,31 @@ const emit = defineEmits(['closeRegisterDialog'])
 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),
-  displayName: z.string({required_error: "Display name is required."}).min(2).max(256),
   email: z.string({required_error: "Valid email is required."}).email('Invalid email format.').trim().min(1),
-  project: z.string().optional(),
+  identifiers: z.array(z.string()).optional(),
   tosAccepted: z.boolean({required_error: "Is not active man."}).default(false).refine(val => val, {message: "You have to accept the ToS"})
 }))
 
 const form = useForm({
   validationSchema: formSchema,
   initialValues: {
+    identifiers: [],
     tosAccepted: false,
   },
 })
 
+const {toast} = useToast()
 const onSubmit = form.handleSubmit(async (values) => {
-  await $fetch<v2RegisterUserResponse>('/api/register', {
+  await $fetch<RegisterUserResponse>('/api/v3/user', {
     method: 'POST',
     body: {
-      displayName: values.displayName,
+      first_name: values.firstName,
+      last_name: values.lastName,
       email: values.email,
-      project: values.project
+      identifier: '',
     }
   }).then(response => {
-    if (response.userId) {
+    if (response.user) {
       toast({
         description: h('div',
             {class: 'flex space-x-2 items-center justify-center text-gray-200'},
@@ -77,9 +77,17 @@ const onSubmit = form.handleSubmit(async (values) => {
               h(IconTrophy, {class: 'flex-shrink-0 size-5 text-yellow-200'}),
               h('span',
                   {class: 'text-fuchsia-50'},
-                  ['Your registration was successful. Please check your mails for more information.'])
+                  [
+                    'Your registration was successful. Have fun exploring the Aruna universe. Also check out the ',
+                    h('a', {
+                      href: 'https://docs.aruna-engine.org/latest',
+                      target: '_blank',
+                      class: 'text-aruna-highlight hover:text-aruna-highlight/80'
+                    }, ['documentation']),
+                    '.'
+                  ])
             ]),
-        duration: 10000
+        duration: 60000 // One Minute
       })
       emit('closeRegisterDialog')
     }
@@ -135,26 +143,6 @@ const onSubmit = form.handleSubmit(async (values) => {
           </div>
         </div>
 
-        <FormField v-slot="{ componentField }" name="displayName">
-          <FormItem>
-            <div class="flex items-center justify-between">
-              <FormLabel>Display Name</FormLabel>
-              <Popover>
-                <PopoverTrigger>
-                  <IconHelp class="size-4 text-aruna-800 font-bold"/>
-                </PopoverTrigger>
-                <PopoverContent class="text-sm rounded-sm">
-                  This name will be publicly displayed for your user.
-                </PopoverContent>
-              </Popover>
-            </div>
-            <FormControl>
-              <Input type="text" placeholder="An arbitrary display name" v-bind="componentField"/>
-            </FormControl>
-            <FormMessage/>
-          </FormItem>
-        </FormField>
-
         <FormField v-slot="{ componentField }" name="email">
           <FormItem>
             <div class="flex items-center justify-between">
@@ -175,26 +163,6 @@ const onSubmit = form.handleSubmit(async (values) => {
           </FormItem>
         </FormField>
 
-        <FormField v-slot="{ componentField }" name="project">
-          <FormItem>
-            <FormLabel class="flex items-center justify-between">
-              <span>Associated Project</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 project / consortium you are associated with here.
-                </PopoverContent>
-              </Popover>
-            </FormLabel>
-            <FormControl>
-              <Input type="text" placeholder="Your NFDI project / consortium" v-bind="componentField"/>
-            </FormControl>
-            <FormMessage/>
-          </FormItem>
-        </FormField>
-
         <FormField type="checkbox" v-slot="{ value, handleChange }" name="tosAccepted">
           <FormItem class="flex flex-row items-start gap-x-3 space-y-0">
             <FormControl>
diff --git a/components/navigation/top.vue b/components/navigation/top.vue
index f77ef90d..5bc2d753 100644
--- a/components/navigation/top.vue
+++ b/components/navigation/top.vue
@@ -11,11 +11,11 @@ import {
   IconNews,
   IconBook
 } from "@tabler/icons-vue"
-import type {v2User} from "~/composables/aruna_api_json/models/v2User"
 import LoginDialog from "~/components/custom-ui/dialog/LoginDialog.vue";
+import type {User} from "~/composables/api_wrapper";
 
 // Fetch user from global state
-const user_state: Ref<v2User | undefined> = inject('userRef', ref(undefined))
+const user_state: Ref<User | undefined> = inject('userRef', ref(undefined))
 const forceRefresh = ref(0)
 
 onMounted(() => forceRefresh.value += 1);
diff --git a/composables/User.ts b/composables/User.ts
new file mode 100644
index 00000000..240bed1a
--- /dev/null
+++ b/composables/User.ts
@@ -0,0 +1,40 @@
+import EventBus from "~/composables/EventBus";
+import type {GetUserResponse} from "~/composables/api_wrapper";
+
+// by convention, composable function names start with "use"
+export async function useUser(maintenanceMode: boolean) {
+  // state encapsulated and managed by the composable
+  const user: Ref<User | undefined> = ref(undefined)
+  const unregistered: Ref<boolean> = ref(false)
+  const {refresh: refreshUser} = await useFetch<GetUserResponse>('/api/v3/user', {
+    server: false,
+    lazy: true,
+    immediate: !maintenanceMode,
+    onResponse({response}) {
+      if (response.ok) {
+        user.value = response._data.user
+        unregistered.value = false
+        return
+      }
+
+      // Logout if user fetch fails
+      user.value = undefined
+    },
+    onResponseError({response}) {
+      console.error('[GetUser] Fetch Error:', response._data)
+      user.value = undefined
+
+      if (response._data.statusCode === 404)
+        unregistered.value = true
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateUser', async () => {
+    console.log('Triggered user update')
+    await refreshUser()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {user, unregistered, refreshUser}
+}
\ No newline at end of file
diff --git a/server/api/v3/user.get.ts b/server/api/v3/user.get.ts
new file mode 100644
index 00000000..eb2baa00
--- /dev/null
+++ b/server/api/v3/user.get.ts
@@ -0,0 +1,12 @@
+import {GetUserResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/users`
+
+  return await $fetch<GetUserResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/user.post.ts b/server/api/v3/user.post.ts
new file mode 100644
index 00000000..10bf6da2
--- /dev/null
+++ b/server/api/v3/user.post.ts
@@ -0,0 +1,13 @@
+import {RegisterUserResponse} from "~/composables/aruna_v3/RegisterUserResponse";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  return await $fetch<RegisterUserResponse>(`${baseUrl}/api/v3/users`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file

From 9ff995b39eb326d39c2f7021cca16d2d77cb5a5a Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Sun, 1 Dec 2024 14:48:23 +0100
Subject: [PATCH 017/125] feat: Adapt user register/fetch to v3

---
 composables/api_wrapper.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/composables/api_wrapper.ts b/composables/api_wrapper.ts
index 4ba88b62..e6e92d3e 100644
--- a/composables/api_wrapper.ts
+++ b/composables/api_wrapper.ts
@@ -36,6 +36,12 @@ import {
 import {type ObjectInfo, type EndpointInfo, toObjectInfo} from "~/composables/proto_conversions";
 import type {ArunaError} from "~/composables/ArunaError";
 
+/* ----- V3 ----- */
+import type {paths, components} from "~/types/aruna-v3"
+// ----- Responses
+export type GetUserResponse = paths["/api/v3/users"]["get"]["responses"][200]["content"]["application/json"];
+export type RegisterUserResponse = paths["/api/v3/users"]["post"]["responses"][200]["content"]["application/json"];
+export type User = components["schemas"]["User"]
 
 export async function getAnnouncements(start_after: string | undefined, limit: number | undefined): Promise<v2Announcement[]> {
   return await $fetch<v2GetAnnouncementsResponse>('/api/announcements', {

From 2b0c4d49aec18fa75c873c348edd68766239f140 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Sun, 1 Dec 2024 14:53:20 +0100
Subject: [PATCH 018/125] feat: Refactor simple user profile display in
 individual component

---
 components/custom-ui/user/Profile.vue | 99 +++++++++++++++++++++++++++
 1 file changed, 99 insertions(+)
 create mode 100644 components/custom-ui/user/Profile.vue

diff --git a/components/custom-ui/user/Profile.vue b/components/custom-ui/user/Profile.vue
new file mode 100644
index 00000000..a4b06378
--- /dev/null
+++ b/components/custom-ui/user/Profile.vue
@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import {
+  IconCheck,
+  IconHash,
+  IconMail,
+  IconSignature,
+  IconUserCancel,
+  IconUserCheck,
+  IconX
+} from "@tabler/icons-vue";
+import {Skeleton} from '@/components/ui/skeleton'
+import type {Group} from "~/composables/api_wrapper";
+
+interface ProfileProps {
+  userId?: string,
+  displayName?: string,
+  email?: string,
+  isActive?: boolean,
+  groups: Group[]
+}
+const {userId, displayName, email, isActive} = defineProps<ProfileProps>()
+</script>/
+<template>
+    <div class="m-4 pb-6 flex flex-col lg:flex-row flex-wrap justify-start gap-x-6 gap-y-6 border-b border-aruna-text/50">
+      <!-- User Id Card -->
+      <Card class="lg:basis-1/5">
+        <ClientOnly fallback-tag="span">
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-lg font-medium">
+              User Id
+            </CardTitle>
+            <IconHash class="size-6 text-muted-foreground"/>
+          </CardHeader>
+          <CardContent>
+            <div class="text-xl font-bold text-aruna-700">
+              {{ userId }}
+            </div>
+          </CardContent>
+          <template #fallback>
+            <div class="flex items-center justify-start space-x-4 h-full ms-4">
+              <Skeleton class="h-12 w-12 rounded-full"/>
+              <div class="space-y-2">
+                <Skeleton class="h-4 w-[250px]"/>
+                <Skeleton class="h-4 w-[200px]"/>
+              </div>
+            </div>
+          </template>
+        </ClientOnly>
+      </Card>
+      <!-- End User Id Card -->
+
+      <Card class="lg:basis-1/5">
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-lg font-medium">
+            Display Name
+          </CardTitle>
+          <IconSignature class="size-6 text-muted-foreground"/>
+        </CardHeader>
+        <CardContent>
+          <div class="text-xl font-bold text-aruna-700">
+            {{ displayName }}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card class="lg:basis-1/5">
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-lg font-medium">
+            Email
+          </CardTitle>
+          <IconMail class="size-6 text-muted-foreground"/>
+        </CardHeader>
+        <CardContent>
+          <div class="text-xl font-bold text-aruna-700">
+            {{ email ? email : 'No email provided' }}
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card class="">
+        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle class="text-lg font-medium">
+            Active
+          </CardTitle>
+          <IconUserCheck v-if="isActive" class="h-4 w-4 ms-4 me-2 text-muted-foreground"/>
+          <IconUserCancel v-else class="h-4 w-4 ms-4 me-2 text-muted-foreground"/>
+        </CardHeader>
+        <CardContent class="flex items-center justify-center">
+          <IconCheck v-if="isActive"
+                     class="flex-shrink-0 size-8 text-green-600"/>
+          <IconX v-else
+                 class="flex-shrink-0 text-red-600"/>
+        </CardContent>
+      </Card>
+    </div>
+
+
+  <!--  -->
+</template>
\ No newline at end of file

From 8be41b40f77c972ee45d3d871b5da9c602cd6369 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 2 Dec 2024 23:06:27 +0100
Subject: [PATCH 019/125] chore: Fix some minor bugs

---
 nuxt.config.ts              | 3 ++-
 server/api/resource-info.ts | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1a4d40c3..925d027a 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -41,7 +41,7 @@ export default defineNuxtConfig({
       local: {
         clientId: "test",
         clientSecret: "QgBl9I2CD3eVhL7LFvkHrYUK7oKL3LE2",
-        issuer: "http://localhost:1998",
+        issuer: "http://localhost:1998/realms/test",
         redirectUrl: "http://localhost:3000/callback",
         authUrl: 'http://localhost:1998/realms/test/protocol/openid-connect/auth',
         tokenUrl: 'http://localhost:1998/realms/test/protocol/openid-connect/token',
@@ -97,6 +97,7 @@ export default defineNuxtConfig({
         title: 'Banner Title',
         text: 'Info banner custom text with important <a href="/news" class="text-aruna-highlight hover:text-aruna-highlight/80">information<a/>',
         customImg: '', // URL to external or internal image
+        hidePeriod: 60 * 60 * 24, // Hide banner per default for one day
         validFrom: '', // Some valid date string
         validTo: '', // Some valid date string
       }
diff --git a/server/api/resource-info.ts b/server/api/resource-info.ts
index 4b78f15a..8b13db9f 100644
--- a/server/api/resource-info.ts
+++ b/server/api/resource-info.ts
@@ -1,5 +1,6 @@
 import type {v2GetResourceResponse} from '~/composables/aruna_api_json'
 import {ResourceInfo} from "~/composables/ResourceInfo";
+import {fetchCachedLicense} from "~/server/utils/licence";
 
 export default defineEventHandler(async event => {
   const access_token = getCookie(event, 'access_token') // Does not matter if undefined

From c32ce84c025cf7dd166e401782126f916c5dffef Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 3 Dec 2024 15:28:59 +0100
Subject: [PATCH 020/125] chore: Encapsulate v3 data fetching in composables

---
 composables/Groups.ts          | 38 ++++++++++++++++++++++++++++
 composables/Projects.ts        | 37 ++++++++++++++++++++++++++++
 composables/Realms.ts          | 29 ++++++++++++++++++++++
 composables/Stats.ts           | 20 +++++++++++++++
 composables/Tokens.ts          | 45 ++++++++++++++++++++++++++++++++++
 server/api/v3/events.get.ts    | 14 +++++++++++
 server/api/v3/group.post.ts    | 13 ++++++++++
 server/api/v3/groups.get.ts    | 27 ++++++++++++++++++++
 server/api/v3/project.post.ts  | 14 +++++++++++
 server/api/v3/realm.post.ts    | 13 ++++++++++
 server/api/v3/realms.get.ts    | 16 ++++++++++++
 server/api/v3/relations.get.ts | 24 ++++++++++++++++++
 server/api/v3/resource.post.ts | 14 +++++++++++
 server/api/v3/resources.get.ts | 23 +++++++++++++++++
 server/api/v3/search.get.ts    | 14 +++++++++++
 server/api/v3/stats.get.ts     | 12 +++++++++
 server/api/v3/tokens.get.ts    | 16 ++++++++++++
 server/api/v3/tokens.post.ts   | 13 ++++++++++
 18 files changed, 382 insertions(+)
 create mode 100644 composables/Groups.ts
 create mode 100644 composables/Projects.ts
 create mode 100644 composables/Realms.ts
 create mode 100644 composables/Stats.ts
 create mode 100644 composables/Tokens.ts
 create mode 100644 server/api/v3/events.get.ts
 create mode 100644 server/api/v3/group.post.ts
 create mode 100644 server/api/v3/groups.get.ts
 create mode 100644 server/api/v3/project.post.ts
 create mode 100644 server/api/v3/realm.post.ts
 create mode 100644 server/api/v3/realms.get.ts
 create mode 100644 server/api/v3/relations.get.ts
 create mode 100644 server/api/v3/resource.post.ts
 create mode 100644 server/api/v3/resources.get.ts
 create mode 100644 server/api/v3/search.get.ts
 create mode 100644 server/api/v3/stats.get.ts
 create mode 100644 server/api/v3/tokens.get.ts
 create mode 100644 server/api/v3/tokens.post.ts

diff --git a/composables/Groups.ts b/composables/Groups.ts
new file mode 100644
index 00000000..f436fedf
--- /dev/null
+++ b/composables/Groups.ts
@@ -0,0 +1,38 @@
+import EventBus from "~/composables/EventBus";
+import type {GetGroupsFromUserResponseGroups} from "~/types/aruna-v3-enums";
+
+export type GroupInfo = {
+  group: Group,
+  permission: GetGroupsFromUserResponseGroups
+}
+
+// by convention, composable function names start with "use"
+export async function useGroups() {
+  // state encapsulated and managed by the composable
+  const groups: Ref<GroupInfo[] | null> = ref(null)
+  const {refresh: refreshGroups} = await useFetch<GetGroupsFromUserResponse>('/api/v3/groups', {
+    server: false,
+    lazy: true,
+    onResponse({response}) {
+      if (response) {
+        groups.value = response._data.groups.map((ele: any) => {
+          const [group, permission] = ele
+          return {group: group, permission: permission} as GroupInfo
+        })
+        return
+      }
+
+      console.warn('[GetGroupsFromUser] Response was undefined. Returning empty array.')
+      groups.value = []
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateGroups', async () => {
+    console.log('Triggered groups update')
+    await refreshGroups()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {groups, refreshGroups}
+}
\ No newline at end of file
diff --git a/composables/Projects.ts b/composables/Projects.ts
new file mode 100644
index 00000000..a35ec820
--- /dev/null
+++ b/composables/Projects.ts
@@ -0,0 +1,37 @@
+import EventBus from "~/composables/EventBus";
+import type {ResourceElement, SearchResponse} from "~/composables/api_wrapper";
+
+// by convention, composable function names start with "use"
+export async function useProjects() {
+  // state encapsulated and managed by the composable
+  const projects: Ref<ResourceElement[] | null> = ref(null)
+  const {refresh: refreshProjects} = await useFetch<SearchResponse>('/api/v3/search', {
+    server: false,
+    lazy: true,
+    query: {
+      filter: 'variant=0' // Projects
+    },
+    onResponse({response}) {
+      if (response) {
+        let resources: ResourceElement[] = []
+        for (const resource of response._data.resources) {
+          if (resource.type === 'Resource') {
+            let extended = resource as any // lol, cast to any to allow dynamic adding of properties
+            extended.children = []
+            resources.push(extended as ResourceElement)
+          }
+        }
+        projects.value = resources
+      }
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateProjects', async () => {
+    console.log('Triggered projects update')
+    await refreshProjects()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {projects, refreshProjects}
+}
\ No newline at end of file
diff --git a/composables/Realms.ts b/composables/Realms.ts
new file mode 100644
index 00000000..95e7507b
--- /dev/null
+++ b/composables/Realms.ts
@@ -0,0 +1,29 @@
+import EventBus from "~/composables/EventBus";
+
+// by convention, composable function names start with "use"
+export async function useRealms() {
+  // state encapsulated and managed by the composable
+  const realms: Ref<Realm[] | null> = ref(null)
+  const {refresh: refreshRealms} = await useFetch<GetRealmsFromUserResponse>('/api/v3/realms', {
+    server: false,
+    lazy: true,
+    onResponse({response}) {
+      if (response) {
+        realms.value = response._data.realms
+        return
+      }
+
+      console.warn('[GetRealmsFromUser] Response was undefined. Returning empty array.')
+      realms.value = []
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateRealms', async () => {
+    console.log('Triggered realms update')
+    await refreshRealms()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {realms, refreshRealms}
+}
\ No newline at end of file
diff --git a/composables/Stats.ts b/composables/Stats.ts
new file mode 100644
index 00000000..b738677b
--- /dev/null
+++ b/composables/Stats.ts
@@ -0,0 +1,20 @@
+import EventBus from "~/composables/EventBus";
+
+// by convention, composable function names start with "use"
+export async function useStats(refs: Ref[] | undefined) {
+  // state encapsulated and managed by the composable
+  const {data: stats, refresh: refreshStats} = await useFetch<GetStatsResponse>('/api/v3/stats', {
+    server: false,
+    lazy: true,
+    watch: refs
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateStats', async () => {
+    console.log('Triggered stats update')
+    await refreshStats()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {stats, refreshStats}
+}
\ No newline at end of file
diff --git a/composables/Tokens.ts b/composables/Tokens.ts
new file mode 100644
index 00000000..ddac0504
--- /dev/null
+++ b/composables/Tokens.ts
@@ -0,0 +1,45 @@
+import EventBus from "~/composables/EventBus";
+import type {CreateTokenRequest, CreateTokenResponse} from "~/composables/api_wrapper";
+
+// by convention, composable function names start with "use"
+export async function useTokens() {
+  // state encapsulated and managed by the composable
+  const tokens: Ref<Token[] | null> = ref(null)
+  const {refresh: refreshTokens} = await useFetch<GetTokensFromUserResponse>('/api/v3/tokens', {
+    server: false,
+    lazy: true,
+    onResponse({response}) {
+      if (response) {
+        console.info('[GetTokensFromUser] Fetched tokens:', response._data.tokens)
+        tokens.value = response._data.tokens
+        return
+      }
+
+      console.warn('[GetTokensFromUser] Response was undefined. Returning empty array.')
+      tokens.value = []
+    },
+    onResponseError({ response }) {
+      console.error('[]')
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateTokens', async () => {
+    console.log('Triggered tokens update')
+    await refreshTokens()
+  })
+
+  async function createToken(request: CreateTokenRequest): Promise<CreateTokenResponse> {
+    return await $fetch<CreateTokenResponse>('/api/v3/tokens', {
+      method: 'POST'
+    }).then(response => {
+      if (response)
+        tokens.value ? tokens.value.push(response.token) : tokens.value = [response.token]
+
+      return response
+    })
+  }
+
+  // expose managed state (and refresh alternative) as return value
+  return {tokens, refreshTokens, createToken}
+}
\ No newline at end of file
diff --git a/server/api/v3/events.get.ts b/server/api/v3/events.get.ts
new file mode 100644
index 00000000..0a3fda9f
--- /dev/null
+++ b/server/api/v3/events.get.ts
@@ -0,0 +1,14 @@
+import {GetEventsResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const query = getQuery(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/info/events`
+
+  return await $fetch<GetEventsResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    query: query
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/group.post.ts b/server/api/v3/group.post.ts
new file mode 100644
index 00000000..12463715
--- /dev/null
+++ b/server/api/v3/group.post.ts
@@ -0,0 +1,13 @@
+import {CreateGroupResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  return await $fetch<CreateGroupResponse>(`${baseUrl}/api/v3/groups`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/groups.get.ts b/server/api/v3/groups.get.ts
new file mode 100644
index 00000000..69897987
--- /dev/null
+++ b/server/api/v3/groups.get.ts
@@ -0,0 +1,27 @@
+import {GetGroupsFromUserResponse} from "~/composables/aruna_v3/GetGroupsFromUserResponse";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/users/groups`
+
+  // Just return empty if unauthorized
+  if (!event.context.access_token)
+    return []
+
+  return await $fetch<GetGroupsFromUserResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  }).then(response => {
+    if (response) {
+      /*
+      for (const [group, permission] of response.groups) {
+        console.log(permission, group)
+      }
+      */
+    }
+    return response
+  }).catch(error => {
+    console.dir(error.data)
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/project.post.ts b/server/api/v3/project.post.ts
new file mode 100644
index 00000000..4c60db50
--- /dev/null
+++ b/server/api/v3/project.post.ts
@@ -0,0 +1,14 @@
+import {CreateResourceResponse} from "~/composables/aruna_v3/CreateResourceResponse";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<CreateResourceResponse>(`${baseUrl}/api/v3/resources/projects`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/realm.post.ts b/server/api/v3/realm.post.ts
new file mode 100644
index 00000000..ded38074
--- /dev/null
+++ b/server/api/v3/realm.post.ts
@@ -0,0 +1,13 @@
+import {CreateRealmResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  return await $fetch<CreateRealmResponse>(`${baseUrl}/api/v3/realms`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/realms.get.ts b/server/api/v3/realms.get.ts
new file mode 100644
index 00000000..7f0600ac
--- /dev/null
+++ b/server/api/v3/realms.get.ts
@@ -0,0 +1,16 @@
+import {GetRealmsFromUserResponse} from "~/composables/aruna_v3/GetRealmsFromUserResponse";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/users/realms`
+
+  // Just return empty if unauthorized
+  if (!event.context.access_token)
+    return []
+
+  return await $fetch<GetRealmsFromUserResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/relations.get.ts b/server/api/v3/relations.get.ts
new file mode 100644
index 00000000..e8242fc3
--- /dev/null
+++ b/server/api/v3/relations.get.ts
@@ -0,0 +1,24 @@
+import {GetRelationsResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const query = getQuery(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/resources/${query['node']}/relations?filter[]=0`
+
+  // Just return empty if unauthorized
+  if (!event.context.access_token)
+    return []
+
+  return await $fetch<GetRelationsResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    query: query,
+  })
+  /*
+  .then(response => {
+    console.dir(response)
+    return response
+  })
+  */
+})
\ No newline at end of file
diff --git a/server/api/v3/resource.post.ts b/server/api/v3/resource.post.ts
new file mode 100644
index 00000000..87be67fd
--- /dev/null
+++ b/server/api/v3/resource.post.ts
@@ -0,0 +1,14 @@
+import {CreateResourceResponse} from "~/composables/aruna_v3/CreateResourceResponse";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<CreateResourceResponse>(`${baseUrl}/api/v3/resources`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/resources.get.ts b/server/api/v3/resources.get.ts
new file mode 100644
index 00000000..33b78df2
--- /dev/null
+++ b/server/api/v3/resources.get.ts
@@ -0,0 +1,23 @@
+import {GetRelationsResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const query = getQuery(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/resources`
+
+  console.log(query)
+
+  // Just return empty if unauthorized
+  if (!event.context.access_token)
+    return []
+
+  return await $fetch<GetRelationsResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    query: query
+  }).catch(error => {
+    console.dir(error)
+    console.dir(error.data)
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/search.get.ts b/server/api/v3/search.get.ts
new file mode 100644
index 00000000..9e92480b
--- /dev/null
+++ b/server/api/v3/search.get.ts
@@ -0,0 +1,14 @@
+import {SearchResponse} from "~/composables/aruna_v3/SearchResponse";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/info/search`
+  const query = getQuery(event)
+
+  return await $fetch<SearchResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    query: query
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/stats.get.ts b/server/api/v3/stats.get.ts
new file mode 100644
index 00000000..274ac135
--- /dev/null
+++ b/server/api/v3/stats.get.ts
@@ -0,0 +1,12 @@
+import {GetStatsResponse} from "~/composables/aruna_v3/GetStatsResponse";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/info/stats`
+
+  return await $fetch<GetStatsResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/tokens.get.ts b/server/api/v3/tokens.get.ts
new file mode 100644
index 00000000..83ea73f3
--- /dev/null
+++ b/server/api/v3/tokens.get.ts
@@ -0,0 +1,16 @@
+import type {GetTokensFromUserResponse} from '~/composables/api_wrapper'
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/users/tokens`
+
+  // Just return empty if unauthorized
+  if (!event.context.access_token)
+    return []
+
+  return await $fetch<GetTokensFromUserResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/tokens.post.ts b/server/api/v3/tokens.post.ts
new file mode 100644
index 00000000..2d10c195
--- /dev/null
+++ b/server/api/v3/tokens.post.ts
@@ -0,0 +1,13 @@
+import {CreateTokenResponse} from '~/composables/api_wrapper'
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  return await $fetch<CreateTokenResponse>(`${baseUrl}/api/v3/users/tokens`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file

From 2e25b059936ad971cf19ae9f8e7bc1eb2f55af20 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 13:54:32 +0100
Subject: [PATCH 021/125] chore: Export v3 API through api_wrapper.ts

---
 composables/api_wrapper.ts | 48 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/composables/api_wrapper.ts b/composables/api_wrapper.ts
index e6e92d3e..f8cfc21e 100644
--- a/composables/api_wrapper.ts
+++ b/composables/api_wrapper.ts
@@ -38,11 +38,59 @@ import type {ArunaError} from "~/composables/ArunaError";
 
 /* ----- V3 ----- */
 import type {paths, components} from "~/types/aruna-v3"
+import type {GetGroupsFromUserResponseGroups} from "~/types/aruna-v3-enums";
+
+// ----- Requests
+export type CreateGroupRequest = paths["/api/v3/groups"]["post"]["requestBody"]["content"]["application/json"];
+export type CreateTokenRequest = paths["/api/v3/users/tokens"]["post"]["requestBody"]["content"]["application/json"];
+
 // ----- Responses
+export type GetEventsResponse = paths["/api/v3/info/events"]["get"]["responses"][200]["content"]["application/json"];
+export type GetStatsResponse = paths["/api/v3/info/stats"]["get"]["responses"][200]["content"]["application/json"];
+export type SearchResponse = paths["/api/v3/info/search"]["get"]["responses"][200]["content"]["application/json"];
+
 export type GetUserResponse = paths["/api/v3/users"]["get"]["responses"][200]["content"]["application/json"];
 export type RegisterUserResponse = paths["/api/v3/users"]["post"]["responses"][200]["content"]["application/json"];
+
+export type GetRealmsFromUserResponse = paths["/api/v3/users/realms"]["get"]["responses"][200]["content"]["application/json"];
+export type GetGroupsFromUserResponse = paths["/api/v3/users/groups"]["get"]["responses"][200]["content"]["application/json"];
+export type GetTokensFromUserResponse = paths["/api/v3/users/tokens"]["get"]["responses"][200]["content"]["application/json"];
+export type GetS3CredentialsFromUserResponse = paths["/api/v3/users/s3credentials"]["get"]["responses"][200]["content"]["application/json"];
+
+export type GetRelationsResponse = paths["/api/v3/resources/{id}/relations"]["get"]["responses"][200]["content"]["application/json"];
+export type GetResourcesResponse = paths["/api/v3/resources"]["get"]["responses"][200]["content"]["application/json"];
+
+export type GetRealmComponentsResponse = paths["/api/v3/realms/{id}/components"]["get"]["responses"][200]["content"]["application/json"];
+
+export type CreateProjectResponse = paths["/api/v3/resources/projects"]["post"]["responses"][200]["content"]["application/json"];
+export type CreateResourceResponse = paths["/api/v3/resources"]["post"]["responses"][200]["content"]["application/json"];
+export type CreateTokenResponse = paths["/api/v3/users/tokens"]["post"]["responses"][200]["content"]["application/json"];
+export type CreateRealmResponse = paths["/api/v3/realms"]["post"]["responses"][200]["content"]["application/json"];
+export type CreateGroupResponse = paths["/api/v3/groups"]["post"]["responses"][200]["content"]["application/json"];
+
+
+// ----- Structs
+export type Author = components["schemas"]["Author"]
+export type Group = components["schemas"]["Group"]
+export type KeyValue = components["schemas"]["KeyValue"]
+export type Realm = components["schemas"]["Realm"]
+export type Resource = components["schemas"]["Resource"]
+export type Token = components["schemas"]["Token"]
 export type User = components["schemas"]["User"]
 
+// ----- Custom
+export type ResourceElement = Resource & {
+  children: ResourceElement[]
+}
+
+export type GroupInfo = {
+  group: Group,
+  permission: GetGroupsFromUserResponseGroups
+}
+
+
+/* ----- END V3 ----- */
+
 export async function getAnnouncements(start_after: string | undefined, limit: number | undefined): Promise<v2Announcement[]> {
   return await $fetch<v2GetAnnouncementsResponse>('/api/announcements', {
     query: {

From d27f515a9794815056ca4794bf972f8e464d9aeb Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 15:04:30 +0100
Subject: [PATCH 022/125] refactor: Adapt existing dialogs to v3

---
 .../custom-ui/dialog/KeyValueDialog.vue       | 68 +++++++++----------
 components/custom-ui/dialog/LoginDialog.vue   |  1 -
 .../custom-ui/dialog/OntologyDialog.vue       |  4 +-
 3 files changed, 35 insertions(+), 38 deletions(-)

diff --git a/components/custom-ui/dialog/KeyValueDialog.vue b/components/custom-ui/dialog/KeyValueDialog.vue
index 4791a50f..12768209 100644
--- a/components/custom-ui/dialog/KeyValueDialog.vue
+++ b/components/custom-ui/dialog/KeyValueDialog.vue
@@ -9,22 +9,22 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog'
-import {FormControl, FormField, FormItem, FormLabel, FormMessage,} from '@/components/ui/form'
+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 {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,
+  initialOpen: boolean
   withButton: boolean
+  buttonCss?: string
 }>()
 const externalTrigger = toRef(props, 'initialOpen')
 const open = ref(props.initialOpen)
-watch(externalTrigger, () => open.value = externalTrigger.value)
+watch(externalTrigger, () => (open.value = externalTrigger.value))
 /* ----- END PROPERTIES ----- */
 
 /* ----- EVENT EMITS ----- */
@@ -34,25 +34,29 @@ const emit = defineEmits<{
 /* ----- 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 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) => {
+const onSubmit = form.handleSubmit(async values => {
   emit('add-key-value', {
     key: values.key,
     value: values.value,
-    variant: values.variant
+    variant: values.variant,
   })
 })
 /* ----- END FORM SCHEMA ----- */
-const validVariants = computed(() => Object.keys(v2KeyValueVariant).filter(variant => variant !== 'KEY_VALUE_VARIANT_UNSPECIFIED'))
+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()
@@ -63,27 +67,25 @@ function formatKeyValueLabel(variant: string): string {
 <template>
   <Dialog v-model:open="open">
     <DialogTrigger v-if="withButton" as-child>
-      <Button variant="outline">
+      <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 Key-Value
       </Button>
     </DialogTrigger>
-    <DialogContent class="sm:max-w-[425px] sm:rounded-md"
-                   @pointer-down-outside="(event) => event.preventDefault()">
+    <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>
+        <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">
+        <FormField v-slot="{componentField}" name="variant">
           <FormItem>
             <FormLabel>Variant</FormLabel>
             <Select v-bind="componentField">
               <FormControl>
                 <SelectTrigger>
-                  <SelectValue placeholder="Select a key-value variant"/>
+                  <SelectValue placeholder="Select a key-value variant" />
                 </SelectTrigger>
               </FormControl>
               <SelectContent>
@@ -94,37 +96,33 @@ function formatKeyValueLabel(variant: string): string {
                 </SelectGroup>
               </SelectContent>
             </Select>
-            <FormMessage/>
+            <FormMessage />
           </FormItem>
         </FormField>
 
-        <FormField v-slot="{ componentField }" name="key">
+        <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"/>
+              <Input type="text" placeholder="Here you can enter the key" v-bind="componentField" class="mt-0" />
             </FormControl>
-            <FormMessage/>
+            <FormMessage />
           </FormItem>
         </FormField>
 
-        <FormField v-slot="{ componentField }" name="value">
+        <FormField v-slot="{componentField}" name="value">
           <FormItem>
             <FormLabel>Value</FormLabel>
             <FormControl>
-              <Textarea v-bind="componentField"
-                        :rows="5"
-                        placeholder="Here you can enter the value"/>
+              <Textarea v-bind="componentField" :rows="5" placeholder="Here you can enter the value" />
             </FormControl>
-            <FormMessage/>
+            <FormMessage />
           </FormItem>
         </FormField>
       </form>
       <DialogFooter>
-        <Button type="submit" form="dialogForm" class="bg-aruna-800 hover:bg-aruna-700">
-          Add key-value
-        </Button>
+        <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
+</template>
diff --git a/components/custom-ui/dialog/LoginDialog.vue b/components/custom-ui/dialog/LoginDialog.vue
index 052f5b3c..51e1b5f6 100644
--- a/components/custom-ui/dialog/LoginDialog.vue
+++ b/components/custom-ui/dialog/LoginDialog.vue
@@ -8,7 +8,6 @@ import {
   DialogTrigger,
 } from '@/components/ui/dialog'
 
-console.log(window.location.hostname)
 const local = computed(() => window.location.hostname.includes('localhost'))
 </script>
 
diff --git a/components/custom-ui/dialog/OntologyDialog.vue b/components/custom-ui/dialog/OntologyDialog.vue
index b8879cfc..fe65f79c 100644
--- a/components/custom-ui/dialog/OntologyDialog.vue
+++ b/components/custom-ui/dialog/OntologyDialog.vue
@@ -9,7 +9,7 @@ import {
   DialogTrigger
 } from "~/components/ui/dialog";
 import {Button} from "~/components/ui/button";
-import type {OntologyDoc} from "~/composables/ts_api/OntologyDoc";
+import type {OntologyDoc} from "~/types/OntologyDoc";
 import {IconBraces, IconExternalLink, IconLoader2} from "@tabler/icons-vue";
 import {v2KeyValueVariant} from "~/composables/aruna_api_json";
 
@@ -173,7 +173,7 @@ function clear() {
 
       <!-- COMMAND -->
       <Command class="rounded-sm border">
-        <CommandInput placeholder="Search here for an ontology"
+        <CommandInput placeholder="Search 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">

From 80bc57642db45c23eec2db70b8540e5d442ccea5 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 15:05:41 +0100
Subject: [PATCH 023/125] refactor: Migrate user profile tabs in individual
 components

---
 components/custom-ui/user/Profile.vue | 179 ++++++++++++--------
 components/custom-ui/user/Proxies.vue | 231 ++++++++++++++++++++++++++
 components/custom-ui/user/Tokens.vue  | 109 ++++++++++++
 3 files changed, 449 insertions(+), 70 deletions(-)
 create mode 100644 components/custom-ui/user/Proxies.vue
 create mode 100644 components/custom-ui/user/Tokens.vue

diff --git a/components/custom-ui/user/Profile.vue b/components/custom-ui/user/Profile.vue
index a4b06378..f89cba29 100644
--- a/components/custom-ui/user/Profile.vue
+++ b/components/custom-ui/user/Profile.vue
@@ -9,91 +9,130 @@ import {
   IconX
 } from "@tabler/icons-vue";
 import {Skeleton} from '@/components/ui/skeleton'
-import type {Group} from "~/composables/api_wrapper";
+import type {User} from "~/composables/api_wrapper";
+import GroupDialog from "~/components/custom-ui/dialog/GroupDialog.vue";
 
 interface ProfileProps {
-  userId?: string,
-  displayName?: string,
-  email?: string,
-  isActive?: boolean,
-  groups: Group[]
+  user: User,
+  groups: GroupInfo[]
+}
+
+const props = defineProps<ProfileProps>()
+const user = toRef(() => props.user)
+const groups = toRef(() => props.groups)
+
+watch(groups, () => console.log('[Profile] Updated groups: ', groups))
+
+
+function displayDescription(description: string, maxLength: number = 50): string {
+  return description.length > maxLength ? description.slice(0, maxLength) + " ..." : description
 }
-const {userId, displayName, email, isActive} = defineProps<ProfileProps>()
 </script>/
 <template>
-    <div class="m-4 pb-6 flex flex-col lg:flex-row flex-wrap justify-start gap-x-6 gap-y-6 border-b border-aruna-text/50">
-      <!-- User Id Card -->
-      <Card class="lg:basis-1/5">
-        <ClientOnly fallback-tag="span">
-          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle class="text-lg font-medium">
-              User Id
-            </CardTitle>
-            <IconHash class="size-6 text-muted-foreground"/>
-          </CardHeader>
-          <CardContent>
-            <div class="text-xl font-bold text-aruna-700">
-              {{ userId }}
-            </div>
-          </CardContent>
-          <template #fallback>
-            <div class="flex items-center justify-start space-x-4 h-full ms-4">
-              <Skeleton class="h-12 w-12 rounded-full"/>
-              <div class="space-y-2">
-                <Skeleton class="h-4 w-[250px]"/>
-                <Skeleton class="h-4 w-[200px]"/>
-              </div>
-            </div>
-          </template>
-        </ClientOnly>
-      </Card>
-      <!-- End User Id Card -->
-
-      <Card class="lg:basis-1/5">
+  <!-- Display Profile Infos -->
+  <div class="m-4 pb-6 flex flex-col lg:flex-row flex-wrap justify-start gap-x-6 gap-y-6">
+    <!-- User Id Card -->
+    <Card class="lg:basis-1/5">
+      <ClientOnly fallback-tag="span">
         <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
           <CardTitle class="text-lg font-medium">
-            Display Name
+            User Id
           </CardTitle>
-          <IconSignature class="size-6 text-muted-foreground"/>
+          <IconHash class="size-6 text-muted-foreground"/>
         </CardHeader>
         <CardContent>
           <div class="text-xl font-bold text-aruna-700">
-            {{ displayName }}
+            {{ user.id || 'N/A' }}
           </div>
         </CardContent>
-      </Card>
-
-      <Card class="lg:basis-1/5">
-        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle class="text-lg font-medium">
-            Email
-          </CardTitle>
-          <IconMail class="size-6 text-muted-foreground"/>
-        </CardHeader>
-        <CardContent>
-          <div class="text-xl font-bold text-aruna-700">
-            {{ email ? email : 'No email provided' }}
+        <template #fallback>
+          <div class="flex items-center justify-start space-x-4 h-full ms-4">
+            <Skeleton class="h-12 w-12 rounded-full"/>
+            <div class="space-y-2">
+              <Skeleton class="h-4 w-[250px]"/>
+              <Skeleton class="h-4 w-[200px]"/>
+            </div>
           </div>
-        </CardContent>
-      </Card>
+        </template>
+      </ClientOnly>
+    </Card>
+    <!-- End User Id Card -->
 
-      <Card class="">
-        <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
-          <CardTitle class="text-lg font-medium">
-            Active
-          </CardTitle>
-          <IconUserCheck v-if="isActive" class="h-4 w-4 ms-4 me-2 text-muted-foreground"/>
-          <IconUserCancel v-else class="h-4 w-4 ms-4 me-2 text-muted-foreground"/>
-        </CardHeader>
-        <CardContent class="flex items-center justify-center">
-          <IconCheck v-if="isActive"
-                     class="flex-shrink-0 size-8 text-green-600"/>
-          <IconX v-else
-                 class="flex-shrink-0 text-red-600"/>
-        </CardContent>
-      </Card>
-    </div>
+    <Card class="lg:basis-1/5">
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-lg font-medium">
+          Display Name
+        </CardTitle>
+        <IconSignature class="size-6 text-muted-foreground"/>
+      </CardHeader>
+      <CardContent>
+        <div class="text-xl font-bold text-aruna-700">
+          {{ user.first_name }} {{ user.last_name }}
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card class="lg:basis-1/5">
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-lg font-medium">
+          Email
+        </CardTitle>
+        <IconMail class="size-6 text-muted-foreground"/>
+      </CardHeader>
+      <CardContent>
+        <div class="text-xl font-bold text-aruna-700">
+          {{ user.email || 'N/A' }}
+        </div>
+      </CardContent>
+    </Card>
+
+    <Card class="">
+      <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle class="text-lg font-medium">
+          Active
+        </CardTitle>
+        <IconUserCheck class="h-4 w-4 ms-4 me-2 text-muted-foreground"/>
+      </CardHeader>
+      <CardContent class="flex items-center justify-center">
+        <IconCheck class="flex-shrink-0 size-8 text-green-600"/>
+      </CardContent>
+    </Card>
+  </div>
+  <!-- End Display Profile Infos -->
+
+  <!-- Groups display/creation -->
+  <div class="m-4 flex flex-col gap-y-6 justify-start max-w-screen-2xl lg:max-w-[80vw]">
+    <Separator class="bg-aruna-text/50"/>
+    <h2 class="text-2xl font-bold text-aruna-text-accent">
+      Your groups
+    </h2>
+    <Table>
+      <TableCaption class="">A list of the groups you are member of</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead class="text-lg">Id</TableHead>
+          <TableHead class="text-lg">Name</TableHead>
+          <TableHead class="text-lg">Description</TableHead>
+          <TableHead class="text-lg">PermissionLevel</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow v-for="group in groups" :key="group.group.name">
+          <TableCell class="font-medium">
+            {{ group.group.id }}
+          </TableCell>
+          <TableCell>{{ group.group.name }}</TableCell>
+          <TableCell>{{ group.group.description ? displayDescription(group.group.description, 128) : 'N/A' }}
+          </TableCell>
+          <TableCell>{{ group.permission }}</TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
 
+    <GroupDialog :initial-open="false"
+                 :with-button="true"
+                 @add-group="v => console.log('[Profile] Received Add Group Event:', v.group.id)"/>
+  </div>
+  <!-- End Groups display/creation -->
 
-  <!--  -->
 </template>
\ No newline at end of file
diff --git a/components/custom-ui/user/Proxies.vue b/components/custom-ui/user/Proxies.vue
new file mode 100644
index 00000000..dd4adb85
--- /dev/null
+++ b/components/custom-ui/user/Proxies.vue
@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import {
+  storagemodelsv2ComponentStatus,
+  type v2Endpoint,
+  type v2User
+} from "~/composables/aruna_api_json";
+import {IconDiscountCheck, IconLoader} from "@tabler/icons-vue";
+import {useToast} from "~/components/ui/toast";
+import CredentialsDialog from "~/components/custom-ui/dialog/CredentialsDialog.vue";
+
+interface ProxiesProps {
+  userEndpoints: string[],
+  endpoints: v2Endpoint[]
+}
+
+const {userEndpoints, endpoints} = defineProps<ProxiesProps>()
+
+function hasEndpoint(endpointId?: string): boolean {
+  if (endpointId)
+    return userEndpoints.includes(endpointId)
+  return false
+}
+
+/* ----- CREDENTIALS DIALOG ----- */
+const enum Dialogs {
+  TokenDialog,
+  CredentialsDialog
+}
+
+type EndpointCredentials = {
+  endpointId: string,
+  endpointName?: string,
+  endpointHost: string,
+  accessKeyId: string,
+  accessSecret: string,
+}
+
+const {toast} = useToast()
+const credentials: Ref<EndpointCredentials | undefined> = ref(undefined)
+const loading: Ref<string | undefined> = ref(undefined)
+
+const credentialsDialogOpen = ref(false)
+const tokenDialogOpen = ref(false)
+
+function setVisibility(dialog: Dialogs, visible: boolean): void {
+  switch (dialog) {
+    case Dialogs.TokenDialog:
+      tokenDialogOpen.value = visible
+      break
+    case Dialogs.CredentialsDialog:
+      credentialsDialogOpen.value = visible
+      break
+    default:
+      console.log(`Dialog ${dialog} does not exist here.`)
+  }
+}
+
+function clear() {
+  credentials.value = undefined
+  credentialsDialogOpen.value = false
+}
+
+const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay))
+
+async function createS3Credentials(endpoint: v2Endpoint) {
+  // Indicate async loading in progress (disable buttons)
+  loading.value = `${endpoint.id}_create`
+
+  await sleep(3000)
+
+  // Create S3 credentials
+  await createUserS3Credentials(endpoint.id)
+      .then(response => {
+        loading.value = undefined // Re-activate buttons
+        if (response) {
+          credentials.value = {
+            endpointId: endpoint.id,
+            endpointName: endpoint.name,
+            endpointHost: response.s3EndpointUrl,
+            accessKeyId: response.s3AccessKey,
+            accessSecret: response.s3SecretKey
+          } as EndpointCredentials
+          setVisibility(Dialogs.CredentialsDialog, true)
+        } else {
+          // Empty remaining credentials and close if open
+          credentials.value = undefined
+          setVisibility(Dialogs.CredentialsDialog, false)
+
+          // Notify with error
+          toast({
+            title: 'Error',
+            description: 'Received empty response. If this problem persists please contact an administrator.',
+            variant: 'destructive',
+            duration: 10000,
+          })
+        }
+
+        EventBus.emit('updateUser')
+      }).catch(error => {
+        loading.value = undefined // Re-activate buttons
+        // Empty remaining credentials
+        credentials.value = undefined
+
+        // Notify with error
+        toast({
+          title: 'Error',
+          //description: 'Something went wrong. If this problem persists please contact an administrator.',
+          description: error.message,
+          variant: 'destructive',
+          duration: 10000,
+        })
+      })
+}
+
+async function getS3Credentials(endpoint: v2Endpoint) {
+  // Indicate async loading in progress (disable buttons)
+  loading.value = `${endpoint.id}_get`
+  EventBus.emit('spinStart')
+
+  await sleep(3000)
+
+  // Fetch existing S3 credentials
+  return await getUserS3Credentials(endpoint.id)
+      .then(response => {
+        loading.value = undefined // Re-activate buttons
+        EventBus.emit('spinStop')
+
+        if (response) {
+          credentials.value = {
+            endpointId: endpoint.id,
+            endpointName: endpoint.name,
+            endpointHost: response.s3EndpointUrl,
+            accessKeyId: response.s3AccessKey,
+            accessSecret: response.s3SecretKey
+          } as EndpointCredentials
+          setVisibility(Dialogs.CredentialsDialog, true)
+        } else {
+          // Empty remaining credentials and close if open
+          credentials.value = undefined
+          setVisibility(Dialogs.CredentialsDialog, false)
+
+          // Notify with error
+          toast({
+            title: 'Error',
+            description: 'Received empty response. If this problem persists please contact an administrator.',
+            variant: 'destructive',
+            duration: 10000,
+          })
+        }
+      }).catch(error => {
+        loading.value = undefined // Re-activate buttons
+        EventBus.emit('spinStop')
+
+        // Empty remaining credentials
+        credentials.value = undefined
+
+        // Notify with error
+        toast({
+          title: 'Error',
+          //description: 'Something went wrong. If this problem persists please contact an administrator.',
+          description: error.message,
+          variant: 'destructive',
+          duration: 10000,
+        })
+      })
+}
+
+/* ----- END CREDENTIALS DIALOG ----- */
+</script>
+<template>
+  <div class="m-4 p-4 flex flex-row flex-wrap rounded-sm border border-dashed border-aruna-text/50 gap-x-4 gap-y-4 text-gray-600">
+    <div v-for="endpoint in endpoints"
+         class="flex flex-col space-y-1 bg-slate-900 border border-gray-700 shadow-sm rounded-xl p-4 md:p-5 text-gray-300">
+      <div class="flex flex-row font-bold items-center justify-between text-aruna-700 text-lg">
+        <span :class="{'animate-spin': loading}">{{ endpoint.name }}</span>
+        <IconDiscountCheck v-if="hasEndpoint(endpoint.id)"
+                           class="lex-shrink-0 size-6 ms-4 text-green-700"
+                           :class="{'animate-spin': loading}"/>
+      </div>
+      <div class="flex flex-row"
+           :class="{'animate-spin': loading}">
+        <span class="font-bold me-2 text-gray-400">ID:</span>
+        {{ endpoint.id }}
+      </div>
+      <div class="flex flex-row"
+           :class="{'animate-spin': loading}">
+        <span class="font-bold me-2 text-gray-400">Variant:</span>
+        {{ toEndpointVariantStr(endpoint.epVariant) }}
+      </div>
+      <div class="flex flex-row"
+           :class="{'animate-spin': loading}">
+        <span class="font-bold me-2 text-gray-400">Public:</span>
+        {{ endpoint.isPublic }}
+      </div>
+      <div class="flex flex-row"
+           :class="{'animate-spin': loading}">
+        <span class="font-bold me-2 text-gray-400">Status:</span>
+        {{ toComponentStatusStr(endpoint.status) }}
+      </div>
+
+      <div class="flex flex-row justify-end space-x-4"
+           :class="{'animate-spin': loading}">
+        <Button v-if="endpoint.id && hasEndpoint(endpoint.id)"
+                :disabled="loading"
+                @click="getS3Credentials(endpoint)"
+                class="mt-2 bg-aruna-800 hover:bg-aruna-700 text-white text-md rounded-sm">
+          <IconLoader v-if="loading === endpoint.id+'_get'" class="w-4 h-4 mr-2 animate-spin"/>
+          Get Credentials
+        </Button>
+        <Button v-if="endpoint.id && endpoint.status === storagemodelsv2ComponentStatus.COMPONENT_STATUS_AVAILABLE"
+                :disabled="loading"
+                @click="createS3Credentials(endpoint)"
+                class="mt-2 bg-aruna-800 hover:bg-aruna-700 text-white text-md rounded-sm">
+          <IconLoader v-if="loading === endpoint.id+'_create'" class="w-4 h-4 mr-2 animate-spin"/>
+          Create Credentials
+        </Button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Credentials Dialog -->
+  <CredentialsDialog :initial-open="credentialsDialogOpen"
+                     :with-button="false"
+                     :host-id="credentials?.endpointId || ''"
+                     :host-name="credentials?.endpointName || ''"
+                     :host-url="credentials?.endpointHost || ''"
+                     :access-key-id="credentials?.accessKeyId || ''"
+                     :access-secret="credentials?.accessSecret || ''"
+                     @update:open="clear"/>
+  <!-- END Credentials Dialog -->
+</template>
diff --git a/components/custom-ui/user/Tokens.vue b/components/custom-ui/user/Tokens.vue
new file mode 100644
index 00000000..72162463
--- /dev/null
+++ b/components/custom-ui/user/Tokens.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import {deleteUserToken} from "~/composables/api_wrapper";
+import EventBus from "~/composables/EventBus";
+import TokenDialog from "~/components/custom-ui/dialog/TokenDialog.vue";
+import {useToast} from "~/components/ui/toast";
+import {IconTrash} from "@tabler/icons-vue";
+import {DateFormatter} from "@internationalized/date";
+import {Scope} from "~/types/aruna-v3-enums";
+
+// DateFormatter for token expiry dates
+const df = new DateFormatter((navigator && navigator.language) || "de-DE", {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+  hour: "2-digit",
+  minute: "2-digit",
+  second: "2-digit",
+})
+
+/* ----- Properties ----- */
+interface TokensProps {
+  tokens: Token[],
+}
+
+const props = defineProps<TokensProps>()
+const tokens = toRef(() => props.tokens)
+const personalTokens: Ref<Token[]> = ref([])
+const scopedTokens: Ref<Token[]> = ref([])
+watchEffect(() => {
+  personalTokens.value = scopedTokens.value = [] // Yeah. Don't do that.
+  for (const token of tokens.value) {
+    if (token.scope === Scope.Personal)
+      personalTokens.value.push(token)
+    else
+      scopedTokens.value.push(token)
+  }
+})
+/* ----- End Properties ----- */
+
+const {toast} = useToast();
+const dialogOpen = ref<boolean>(false)
+
+async function deleteToken(tokenId?: string) {
+  if (!tokenId) {
+    toast({
+      title: 'Warning',
+      description: 'Provided token id is empty or undefined.'
+    })
+    return
+  }
+
+  await deleteUserToken(tokenId)
+  EventBus.emit("updateUser")
+}
+
+// Update tokens on component activation
+onActivated(() => EventBus.emit('updateTokens'))
+</script>
+<template>
+  <div class="m-4 p-4 flex flex-col w-full lg:max-w-screen-xl lg:mx-auto gap-y-6 rounded-sm border border-dashed border-aruna-text/50">
+    <Table>
+      <TableCaption class="bg-aruna-muted p-2 text-lg text-aruna-text-accent">A list of your personal Aruna access tokens.</TableCaption>
+      <TableHeader>
+        <TableRow>
+          <TableHead class="text-lg">Id</TableHead>
+          <TableHead class="text-lg">Name</TableHead>
+          <TableHead class="text-lg">Scope</TableHead>
+          <TableHead class="text-lg">Expiry Date</TableHead>
+          <TableHead class="text-lg">Default Group</TableHead>
+          <TableHead class="text-lg">Default Realm</TableHead>
+          <TableHead class="text-lg">Component Id</TableHead>
+
+          <TableHead class="text-lg text-center">Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        <TableRow v-for="token in tokens" :key="token.id">
+          <TableCell class="font-medium">{{ token.id }}</TableCell>
+          <TableCell>{{ token.name }}</TableCell>
+          <TableCell>
+            {{ token.createdAt ? df.format(new Date(token.createdAt)) : 'Creation date is undefined' }}
+          </TableCell>
+          <TableCell>
+            {{ token.expiresAt ? df.format(new Date(token.expiresAt)) : 'Expiry date is undefined' }}
+          </TableCell>
+          <TableCell class="text-center">
+            <Button variant="outline"
+                    class="p-2 hover:bg-red-400"
+                    @click="deleteToken(token.id)">
+              <IconTrash/>
+            </Button>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+
+    <div class="w-full flex justify-end">
+      <Button @click="dialogOpen = true"
+              variant="outline"
+              class="mt-2 bg-transparent border-aruna-highlight text-aruna-highlight hover:hover:bg-aruna-highlight hover:text-aruna-text-accent rounded-sm">
+        Create Token
+      </Button>
+    </div>
+  </div>
+
+  <TokenDialog :initial-open="dialogOpen"
+               :with-button="false"
+               @update:open="dialogOpen = false"/>
+</template>
\ No newline at end of file

From 768d7361e47ddc6527385855f82d2d788ea814ed Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 15:06:07 +0100
Subject: [PATCH 024/125] feat: Add GroupDialog for group creation

---
 components/custom-ui/dialog/GroupDialog.vue | 120 ++++++++++++++++++++
 1 file changed, 120 insertions(+)
 create mode 100644 components/custom-ui/dialog/GroupDialog.vue

diff --git a/components/custom-ui/dialog/GroupDialog.vue b/components/custom-ui/dialog/GroupDialog.vue
new file mode 100644
index 00000000..c555e289
--- /dev/null
+++ b/components/custom-ui/dialog/GroupDialog.vue
@@ -0,0 +1,120 @@
+<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 {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-group': [group: GroupInfo]
+}>()
+/* ----- END EVENT EMITS ----- */
+
+/* ----- FORM SCHEMA ----- */
+const formSchema = toTypedSchema(
+  z.object({
+    name: z.string({required_error: 'Key is required.'}).min(2).max(256),
+    description: z.string().optional(),
+  })
+)
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+const onSubmit = form.handleSubmit(async values => {
+  // Create group
+  await $fetch<CreateGroupResponse>('/api/v3/group', {
+    method: 'POST',
+    body: {
+      name: values.name,
+      description: values.description
+    }
+  }).then(response => {
+    if (response.group) {
+      // Emit global groups re-fresh
+      EventBus.emit('updateGroups')
+      open.value = false
+
+      // Emit add group to parent component
+      /*
+      emit('add-group', {
+        id: '',
+        name: values.name,
+        description: values.description || ''
+      })
+      */
+    } else {
+
+    }
+  })
+})
+/* ----- END FORM SCHEMA ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger v-if="withButton" as-child>
+      <Button variant="outline"
+              class="w-fit rounded-sm text-aruna-highlight border border-aruna-highlight bg-transparent hover:bg-aruna-highlight hover:text-aruna-text-accent">
+        Create Group
+      </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">Create Group</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="name">
+          <FormItem>
+            <FormLabel>Name</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="Here you can enter the name of your group" v-bind="componentField" class="mt-0" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="description">
+          <FormItem>
+            <FormLabel>Description</FormLabel>
+            <FormControl>
+              <Textarea v-bind="componentField" :rows="5" placeholder="Here you can enter a brief description of your group" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </form>
+      <DialogFooter>
+        <Button type="submit"
+                form="dialogForm"
+                class="rounded-sm text-aruna-highlight border border-aruna-highlight bg-transparent hover:bg-aruna-highlight hover:text-aruna-text-accent">
+          Create Group
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

From 8977a63302ea66d0832c08302506f282539141cf Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 15:08:59 +0100
Subject: [PATCH 025/125] feat: Migrate resource creation in individual
 component

At the same time, the entire mask was adapted to the Aruna v3 API and
transferred to shadcn-vue Components.
---
 components/custom-ui/ResourceCreation.vue | 945 ++++++++++++++++++++++
 1 file changed, 945 insertions(+)
 create mode 100644 components/custom-ui/ResourceCreation.vue

diff --git a/components/custom-ui/ResourceCreation.vue b/components/custom-ui/ResourceCreation.vue
new file mode 100644
index 00000000..a45b65e2
--- /dev/null
+++ b/components/custom-ui/ResourceCreation.vue
@@ -0,0 +1,945 @@
+<script setup lang="ts">
+import {IconPlus, IconTrash} from '@tabler/icons-vue'
+import {type v2Author, type v2KeyValue, v2KeyValueVariant,} from '~/composables/aruna_api_json'
+import {
+  TagsInput,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText
+} from '~/components/ui/tags-input'
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "~/components/ui/form";
+import {Input} from "~/components/ui/input";
+import {Button} from "~/components/ui/button";
+import {useToast} from '~/components/ui/toast/use-toast'
+
+import {ULID_REGEX} from "~/utils/constants"
+import EventBus from "~/composables/EventBus";
+
+import {prettyDisplayJson} from "~/composables/utils";
+import {toTypedSchema} from "@vee-validate/zod";
+import * as z from "zod";
+import {useForm} from "vee-validate";
+
+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 {ResourceVariant, VisibilityClass} from "~/types/aruna-v3-enums";
+import type {Author, KeyValue, GroupInfo} from "~/composables/api_wrapper";
+
+import type {CreateProjectResponse, CreateResourceResponse} from "~/composables/api_wrapper";
+
+/* ----- Properties ----- */
+interface ResourceCreationProps {
+  realms: Realm[],
+  groups: GroupInfo[]
+}
+
+const props = defineProps<ResourceCreationProps>()
+const realms = toRef(() => props.realms)
+const groups = toRef(() => props.groups)
+watch(groups, () => console.log('[ResourceCreation] Updated groups:', groups.value))
+/* ----- End Properties ----- */
+
+// Use route to evaluate query parameter
+const route = useRoute()
+const licenses = [
+  {tag: 'CC0', label: 'Creative Commons Zero (CC0 1.0)'},
+  {tag: 'CC-BY-SA', label: 'Attribution-ShareAlike 4.0 International (CC-BY-SA 4.0)'},
+  {tag: 'CC-BY-NC', label: 'Attribution-NonCommercial 4.0 International (CC-BY-NC)'},
+  {tag: 'CC-BY-NC-SA', label: 'Attribution-NonCommercial-ShareAlike 4.0 International (CC-BY-NC-SA)'}
+] //await fetchLicenses()
+
+const createdResource: Ref<Resource | undefined> = ref(undefined)
+const creationError: Ref<string | undefined> = ref(undefined)
+
+/* ----- Query Parameter Evaluation ----- */
+function getParamSingle(param_name: string) {
+  const value = route.query[param_name];
+  if (Array.isArray(value)) {
+    return value[0];
+  } else if (typeof value === 'string') {
+    return value;
+  }
+}
+
+function setQueryParams() {
+  if (route.query) {
+    const resourceTypeParam = getParamSingle("type");
+    if (resourceTypeParam) {
+      //resourceType.value = fromResourceTypeStr(resourceTypeParam, v2ResourceVariant.RESOURCE_VARIANT_PROJECT);
+    }
+    const dataClassParam = getParamSingle("class");
+    if (dataClassParam) {
+      //resourceDataclass.value = fromDataClassStr(dataClassParam);
+    }
+    const parentIdParam = getParamSingle("parentId");
+    if (parentIdParam) {
+      //resourceParentId.value = parentIdParam;
+    }
+
+    /*
+    const relIdParam = getParamSingle("relId");
+    const relTypeParam = getParamSingle("relType");
+    if (relIdParam && relTypeParam) {
+      addRelation({
+        internal: {
+          resourceId: relIdParam,
+          resourceVariant: fromResourceTypeStr(relTypeParam),
+          definedVariant: v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_METADATA,
+          direction: v2RelationDirection.RELATION_DIRECTION_OUTBOUND
+        }
+      } as v2Relation)
+    }
+    */
+  }
+}
+
+onMounted(() => setQueryParams());
+/* ----- End Query Parameter Evaluation ----- */
+
+/* ----- Form Schema ----- */
+const formSchema = toTypedSchema(z.object({
+  name: z.string(),
+  title: z.string(),
+  description: z.string().max(1024, 'Description length is limited to 1024 characters.'),
+  identifiers: z.array(z.string()).optional(),
+  visibility: z.nativeEnum(VisibilityClass),
+  variant: z.nativeEnum(ResourceVariant),
+  realm_id: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
+  group_id: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
+  parent_id: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
+  license_tag: z.string(),
+  authors: z.array(z.custom<Author>()).optional(),
+  labels: z.array(z.custom<KeyValue>()).optional(),
+  file: z.custom<File>().optional()
+}).superRefine((values, ctx) => {
+  if (values.variant !== ResourceVariant.Project && !values.parent_id) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Parent id is required',
+      path: ['parent_id'],
+    })
+  }
+  if (values.variant === ResourceVariant.Project && !values.realm_id) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Realm id is required',
+      path: ['realm_id'],
+    })
+  }
+  if (values.variant === ResourceVariant.Project && !values.group_id) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'Group id is required',
+      path: ['group_id'],
+    })
+  }
+
+  if (values.variant === ResourceVariant.Object && !values.file) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: 'File is required for an Object',
+      path: ['file'],
+    })
+  }
+  //console.dir('[Form Super Refine] Context:', ctx)
+  return ctx
+}))
+
+const {handleSubmit, values, setFieldValue} = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    identifiers: [],
+    visibility: VisibilityClass.Public,
+    variant: ResourceVariant.Project,
+    license_tag: 'CC0',
+    authors: [],
+    labels: []
+  },
+  keepValuesOnUnmount: true,
+})
+
+const {toast} = useToast()
+const onSubmit = handleSubmit(async (values) => {
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(values, null, 2))),
+  })
+
+  const request = {
+    name: values.name,
+    title: values.title,
+    description: values.description,
+    variant: values.variant === ResourceVariant.Project ? undefined : values.variant,
+    realm_id: values.variant === ResourceVariant.Project ? values.realm_id : undefined,
+    group_id: values.variant === ResourceVariant.Project ? values.group_id : undefined,
+    parent_id: values.variant !== ResourceVariant.Project ? values.parent_id : undefined,
+    visibility: values.visibility,
+    identifiers: values.identifiers,
+    license_tag: values.license_tag,
+    authors: values.authors,
+    labels: values.labels,
+  }
+
+  // Create resource in Aruna
+  const api_endpoint = values.variant === ResourceVariant.Project ? '/api/v3/project' : '/api/v3/resource'
+  const response = await $fetch<CreateProjectResponse | CreateResourceResponse>(api_endpoint, {
+    method: 'POST',
+    body: request
+  }).then(response => {
+    console.log('[Resource Creation] Response:', response)
+    if (values.variant === ResourceVariant.Project)
+      EventBus.emit('updateProjects')
+
+    return response
+  }).catch(error => {
+    console.log('[Resource Creation] Error:', error.data.data)
+    toast({
+      title: 'Error',
+      description: `Resource creation failed: ${error.data.data}`
+    })
+
+    return {resource: undefined}
+  })
+
+  // Upload data if Object
+  if (response.resource && values.variant === ResourceVariant.Object) {
+    toast({
+      title: 'Info',
+      description: 'This is the moment where your data would be upload.'
+    })
+  }
+})
+/* ----- End Form Schema ----- */
+
+/* ----- Resource Authors ----- */
+const authors: Ref<Map<string, v2Author>> = ref(new Map())
+const authorDialogOpen = ref(false);
+
+function addAuthor(author: v2Author) {
+  authors.value.set(getUniqueId(), author)
+}
+
+function removeAuthor(key: string) {
+  authors.value.delete(key)
+}
+
+/* ----- 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)
+}
+
+function removeKeyValue(key: string) {
+  keyValues.value.delete(key)
+}
+
+/* ----- End Resource key-values ----- */
+
+/* ----- Upload ----- */
+const uploadProgress = ref(0)
+
+function updateProgress(current: number, total: number | undefined) {
+  if (!total)
+    return 0
+  const floatProgress = current / total * 100
+  uploadProgress.value = +floatProgress.toFixed(2)
+}
+
+/* ----- End Upload ----- */
+
+// ----- Helper functions -----
+let id = 0
+
+function getUniqueId(): string {
+  return id++ + '';
+}
+
+/*
+function textAreaAutoHeight(domElement: HTMLTextAreaElement | null, offset = 0) {
+  if (domElement) {
+    domElement.style.height = 'auto'
+    domElement.style.height = `${domElement.scrollHeight + offset}px`
+  }
+}
+
+function openModal(modalId: string) {
+  let element = document.querySelector(`#${modalId}`) as HTMLElement
+  import('preline').then(({HSOverlay}) => {
+    HSOverlay.open(element)
+  })
+}
+*/
+
+/*
+async function submit() {
+  // Better safe than sorry.
+  createdResource.value = undefined
+  creationError.value = undefined
+
+  // Create resource in server
+  switch (resourceType.value) {
+    case v2ResourceVariant.RESOURCE_VARIANT_PROJECT: {
+      await createProject({
+        name: resourceName.value,
+        title: resourceTitle.value,
+        description: resourceDescription.value,
+        keyValues: Array.from(keyValues.value.values()),
+        relations: Array.from(relations.value.values()),
+        dataClass: resourceDataclass.value,
+        preferredEndpoint: '',
+        metadataLicenseTag: metaLicense.value,
+        defaultDataLicenseTag: dataLicense.value,
+        authors: Array.from(authors.value.values())
+      }).then(project => {
+        console.log(project)
+        createdResource.value = project
+        creationError.value = undefined
+      }).catch(error => {
+        console.error(error)
+        creationError.value = error.toString()
+        createdResource.value = undefined
+      })
+      // Display created resource or error
+      openModal('object-display')
+      break
+    }
+    case v2ResourceVariant.RESOURCE_VARIANT_COLLECTION: {
+      await createCollection({
+        name: resourceName.value,
+        title: resourceTitle.value,
+        description: resourceDescription.value,
+        keyValues: Array.from(keyValues.value.values()),
+        relations: Array.from(relations.value.values()),
+        dataClass: resourceDataclass.value,
+        projectId: resourceParentId.value,
+        metadataLicenseTag: metaLicense.value,
+        defaultDataLicenseTag: dataLicense.value,
+        authors: Array.from(authors.value.values())
+      }).then(collection => {
+        console.log(collection)
+        createdResource.value = collection
+        creationError.value = undefined
+      }).catch(error => {
+        console.log(error)
+        creationError.value = error.toString()
+        createdResource.value = undefined
+      })
+      // Display created resource or error
+      openModal('object-display')
+      break
+    }
+    case v2ResourceVariant.RESOURCE_VARIANT_DATASET: {
+      await createDataset({
+        name: resourceName.value,
+        title: resourceTitle.value,
+        description: resourceDescription.value,
+        keyValues: Array.from(keyValues.value.values()),
+        relations: Array.from(relations.value.values()),
+        dataClass: resourceDataclass.value,
+        projectId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_PROJECT ? resourceParentId.value : undefined,
+        collectionId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_COLLECTION ? resourceParentId.value : undefined,
+        metadataLicenseTag: metaLicense.value,
+        defaultDataLicenseTag: dataLicense.value,
+        authors: Array.from(authors.value.values())
+      }).then(dataset => {
+        console.log(dataset)
+        createdResource.value = dataset
+        creationError.value = undefined
+      }).catch(error => {
+        console.log(error)
+        creationError.value = error.toString()
+        createdResource.value = undefined
+      })
+      // Display created resource or error
+      openModal('object-display')
+      break
+    }
+    case v2ResourceVariant.RESOURCE_VARIANT_OBJECT: {
+      if (dataUpload.value !== null) {
+        // Display created resource or error
+        openModal('object-display')
+
+        // Promise chain time
+        await createObject({
+          name: resourceName.value,
+          title: resourceTitle.value,
+          description: resourceDescription.value,
+          keyValues: Array.from(keyValues.value.values()),
+          relations: Array.from(relations.value.values()),
+          dataClass: resourceDataclass.value,
+          projectId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_PROJECT ? resourceParentId.value : undefined,
+          collectionId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_COLLECTION ? resourceParentId.value : undefined,
+          datasetId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_DATASET ? resourceParentId.value : undefined,
+          metadataLicenseTag: metaLicense.value,
+          dataLicenseTag: dataLicense.value,
+          authors: Array.from(authors.value.values())
+        }).then(async stagingObject => {
+          // Set created resource and reset error
+          createdResource.value = stagingObject
+          creationError.value = undefined
+
+          // Take any full sync dataproxy of the object and fetch credentials
+          const endpoint: v2DataEndpoint | undefined = createdResource.value.endpoints?.find(ep => !ep.partialSync)
+          return [stagingObject, await getUserS3Credentials(endpoint?.id)]
+        }).then(async ([stagingObject, response]) => {
+          // Fetch any fullsync bucket and key for upload
+          let [bucket, key] = await getObjectBucketAndKey((stagingObject as v2Object).id)
+
+          // Create S3 client for staging object
+          const s3client = new S3Client({
+            endpoint: (response as v2GetS3CredentialsUserTokenResponse).s3EndpointUrl,
+            region: 'region-one',
+            credentials: {
+              accessKeyId: (response as v2GetS3CredentialsUserTokenResponse).s3AccessKey,
+              secretAccessKey: (response as v2GetS3CredentialsUserTokenResponse).s3SecretKey
+            }
+          } as S3ClientConfig)
+
+          return [s3client, bucket, key]
+        }).then(async ([s3client, bucket, key]) => {
+          return [s3client, bucket, key, await waitForSync((s3client as S3Client), (bucket as string), (key as string))]
+        }).then(async ([s3client, bucket, key, synced]) => {
+          // Check if sync was successful
+          if (!synced)
+            throw Error('Object sync to DataProxy timed out')
+
+          const upload = new Upload({
+            client: s3client as S3Client,
+            queueSize: 4, // 4 uploads concurrently
+            partSize: dataUpload.value.size > 5 * 1024 * 1024 * 1024 ? 50 * 1024 * 1024 : 5 * 1024 * 1024, // 5MiB parts up to 5GiB; then 50MiB parts
+            leavePartsOnError: false, // Remove uploaded parts on error
+            params: {
+              Bucket: bucket as string,
+              Key: key as string,
+              Body: dataUpload.value
+            },
+          })
+
+          // Update progress bar value
+          upload.on("httpUploadProgress", progress =>
+              updateProgress(progress.loaded ? progress.loaded : 0, progress.total))
+
+          // Do something after upload succeeded
+          return await upload.done() //.then(() => console.log('Upload succeeded'))
+        }).then(response => {
+          console.log(`Upload completed with status code: ${response.$metadata.httpStatusCode}`)
+        }).catch(error => {
+          // Delete Object if already created
+          if (createdResource.value?.id)
+            deleteObject(createdResource.value.id, false).catch(error => console.log(error))
+
+          // Set error; unset created resource
+          console.log(error)
+          creationError.value = error.toString()
+          createdResource.value = undefined
+        })
+      } else {
+        // Display error toast that no file was selected for upload.
+      }
+    }
+
+      // Emit user update event
+      EventBus.emit('updateUser')
+  }
+}
+*/
+
+/*
+async function waitForSync(s3client: S3Client, bucket: string, key: string): Promise<boolean> {
+  // Define head object command
+  const command = new HeadObjectCommand({
+    Bucket: bucket,
+    Key: key
+  })
+
+  // Wait until object is synced
+  let synced = false
+  let tryCounter = 0
+  while (!synced) {
+    try {
+      tryCounter++
+      await s3client.send(command)
+          .then(response => {
+            console.log(response.$metadata.httpStatusCode)
+            synced = response.$metadata.httpStatusCode === 200
+          })
+    } catch (error: any) {
+      //console.error(error)
+      if (error.message.includes('NetworkError')) {
+        throw Error('CORS Error.<br/>Please check the CORS rules of your projects.')
+
+      } else if (tryCounter > 10) {
+        console.error('Wait for sync retries exhausted')
+        throw Error('Wait for sync retries exhausted')
+      }
+
+      await sleep(Math.pow(2, tryCounter))
+    }
+  }
+
+  return synced // Still false if try counter was exhausted
+}
+*/
+//const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay))
+</script>
+
+<template>
+  <!-- Resource Creation Form -->
+  <div class="m-4 flex flex-col grow h-full border border-dashed border-aruna-text/50 rounded-md p-6 gap-y-6">
+    <h1 class="text-3xl font-bold text-aruna-text-accent">
+      Resource creation
+    </h1>
+    <Separator class="bg-aruna-text/50"/>
+
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel id="resource-creation-left">
+        <div class="flex flex-col basis-1/2 h-full p-4">
+          <form id="dialogForm" @submit="onSubmit" class="flex flex-col space-y-4 grow">
+            <!-- Name Input -->
+            <FormField v-slot="{componentField}" name="name">
+              <FormItem>
+                <FormLabel>Name</FormLabel>
+                <FormControl>
+                  <Input type="text"
+                         placeholder="Name of the new resource"
+                         v-bind="componentField"
+                         class="py-2 px-3 h-auto w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                                focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                disabled:opacity-50 disabled:pointer-events-none"/>
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+            <!-- End Name Input -->
+
+            <!-- Title Input -->
+            <FormField v-slot="{componentField}" name="title">
+              <FormItem>
+                <FormLabel>Title</FormLabel>
+                <FormControl>
+                  <Input type="text"
+                         placeholder="Title of the new resource"
+                         v-bind="componentField"
+                         class="py-2 px-3 h-auto w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                                focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                disabled:opacity-50 disabled:pointer-events-none"/>
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+            <!-- End Title Input -->
+
+            <!-- Description Input -->
+            <FormField v-slot="{componentField}" name="description">
+              <FormItem>
+                <FormLabel class="flex justify-between">
+                  Description
+                  <span class="text-xs text-aruna-text"
+                        :class="{'text-destructive': values.description ? values.description?.length > 1024 : false}">
+                      Characters left: {{ values.description ? 1024 - values.description.length : 1024 }}
+                  </span>
+                </FormLabel>
+                <FormControl class="flex">
+                  <Textarea v-bind="componentField"
+                            :rows="5"
+                            placeholder="Here you can enter a description of your resource"
+                            class="py-3 px-4 w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                                   focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                   focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                   disabled:opacity-50 disabled:pointer-events-none"/>
+                  <div class="flex w-full pe-4 justify-end text-aruna-text">
+                  </div>
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+            <!-- End Description Input -->
+
+            <!-- Identifiers Input -->
+            <FormField v-slot="{ value }" name="identifiers">
+              <FormItem>
+                <FormLabel>External Identifiers</FormLabel>
+                <FormControl class="bg-aruna-muted">
+                  <TagsInput :model-value="value" class="p-0">
+                    <TagsInputItem v-for="item in value" :key="item" :value="item"
+                                   class="py-3 px-2 bg-aruna-fg text-aruna-text-accent">
+                      <TagsInputItemText/>
+                      <TagsInputItemDelete/>
+                    </TagsInputItem>
+                    <TagsInputInput placeholder="Other external identifiers e.g. DOI or ENA accession"
+                                    class="py-3 px-4 w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                                           focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                           focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                           disabled:opacity-50 disabled:pointer-events-none"/>
+                  </TagsInput>
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+            <!-- End Identifiers Input -->
+
+            <!-- Type Input -->
+            <FormField v-slot="{ componentField }" type="radio" name="variant">
+              <FormItem class="space-y-3">
+                <FormLabel>Resource Type</FormLabel>
+                <FormControl>
+                  <RadioGroup class="flex gap-x-0"
+                              v-bind="componentField"
+                              orientation="horizontal">
+                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                      <FormControl>
+                        <RadioGroupItem :value="ResourceVariant.Project"/>
+                      </FormControl>
+                      <FormLabel class="font-normal">Project</FormLabel>
+                    </FormItem>
+                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                      <FormControl>
+                        <RadioGroupItem :value="ResourceVariant.Folder"/>
+                      </FormControl>
+                      <FormLabel class="font-normal">Folder</FormLabel>
+                    </FormItem>
+                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                      <FormControl>
+                        <RadioGroupItem :value="ResourceVariant.Object"/>
+                      </FormControl>
+                      <FormLabel class="font-normal">Object</FormLabel>
+                    </FormItem>
+                  </RadioGroup>
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+            <!-- End Type Input -->
+
+            <div class="flex gap-x-4">
+              <!-- Realm Input -->
+              <FormField v-slot="{componentField}" name="realm_id">
+                <FormItem v-if="values.variant === ResourceVariant.Project"
+                          class="flex flex-col basis-1/2 space-y-4">
+                  <FormLabel>Realm Selection</FormLabel>
+                  <Select v-bind="componentField">
+                    <FormControl>
+                      <SelectTrigger class="bg-aruna-muted">
+                        <SelectValue placeholder="Select a realm for your project"/>
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent class="bg-aruna-bg/90">
+                      <SelectGroup>
+                        <SelectItem v-for="realm in realms" :value="realm.id"
+                                    class="hover:bg-aruna-fg">
+                          {{ realm.name }}
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage/>
+                </FormItem>
+              </FormField>
+              <!-- Realm Input -->
+
+              <!-- Group Input -->
+              <FormField v-slot="{componentField}" name="group_id">
+                <FormItem v-if="values.variant === ResourceVariant.Project"
+                          class="flex flex-col basis-1/2 space-y-4">
+                  <FormLabel>Group Selection</FormLabel>
+                  <Select v-bind="componentField">
+                    <FormControl>
+                      <SelectTrigger class="bg-aruna-muted">
+                        <SelectValue placeholder="Select an administration group for your project"/>
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent class="bg-aruna-bg/90">
+                      <SelectGroup>
+                        <SelectItem v-for="group in groups" :value="group.group.id"
+                                    class="hover:bg-aruna-fg">
+                          {{ group.group.name }}
+                        </SelectItem>
+                      </SelectGroup>
+                    </SelectContent>
+                  </Select>
+                  <FormMessage/>
+                </FormItem>
+              </FormField>
+              <!-- Group Input -->
+            </div>
+
+
+            <!-- Parent Id Input -->
+            <FormField v-slot="{componentField}"
+                       name="parent_id">
+              <FormItem v-if="values.variant !== ResourceVariant.Project">
+                <FormLabel>Parent Id</FormLabel>
+                <FormControl>
+                  <div class="flex rounded-sm">
+                    <span class="px-4 inline-flex items-center min-w-fit rounded-s-sm border border-e-0 border-aruna-highlight bg-transparent text-sm text-aruna-highlight">
+                      Unspecified
+                    </span>
+                    <Input type="text"
+                           placeholder="Id of the new resources direct parent"
+                           v-bind="componentField"
+                           class="py-2 px-3 pe-11 block w-full border-gray-200 shadow-sm rounded-s-none rounded-e-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"/>
+                  </div>
+                  <!--
+                  <Input type="text"
+                         placeholder="Id of the new resources direct parent"
+                         v-bind="componentField"
+                         class="mt-0"/>
+                  -->
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+            <!-- End Parent Id Input -->
+
+            <!-- File Input -->
+            <FormField name="file">
+              <FormItem class="invisible h-0"
+                        :class="{'visible h-auto': values.variant === ResourceVariant.Object}">
+                <FormLabel>File Select/Drag</FormLabel>
+                <FormControl>
+                  <input type="file"
+                         v-on:change="(v) => setFieldValue('file', v)"
+                         name="file-input"
+                         id="file-input"
+                         class="block w-full p-0 border border-aruna-text/50 shadow-sm rounded-md bg-aruna-muted text-aruna-text text-sm focus:z-10 focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none
+                            file:bg-aruna-fg
+                            file:text-aruna-text-accent
+                            file:border-0
+                            file:me-4
+                            file:p-2">
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+            <!-- File Id Input -->
+
+            <!-- Visibility Input -->
+            <FormField v-slot="{ componentField }" type="radio" name="visibility">
+              <FormItem class="space-y-3">
+                <FormLabel>Resource Visibility</FormLabel>
+                <FormControl>
+                  <RadioGroup class="flex gap-x-0"
+                              v-bind="componentField"
+                              orientation="horizontal">
+                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                      <FormControl>
+                        <RadioGroupItem :value="VisibilityClass.Public"/>
+                      </FormControl>
+                      <FormLabel class="font-normal">
+                        Public
+                      </FormLabel>
+                    </FormItem>
+                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                      <FormControl>
+                        <RadioGroupItem :value="VisibilityClass.PublicMetadata"/>
+                      </FormControl>
+                      <FormLabel class="font-normal">
+                        Only Metadata Public
+                      </FormLabel>
+                    </FormItem>
+                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                      <FormControl>
+                        <RadioGroupItem :value="VisibilityClass.Private"/>
+                      </FormControl>
+                      <FormLabel class="font-normal">
+                        Private
+                      </FormLabel>
+                    </FormItem>
+                  </RadioGroup>
+                </FormControl>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+            <!-- End Visibility Input -->
+
+            <!-- License Input -->
+            <FormField v-slot="{componentField}" name="license_tag">
+              <FormItem>
+                <FormLabel>License</FormLabel>
+                <Select v-bind="componentField">
+                  <FormControl>
+                    <SelectTrigger class="bg-aruna-muted">
+                      <SelectValue placeholder="Select a license for your resource"/>
+                    </SelectTrigger>
+                  </FormControl>
+                  <SelectContent class="bg-aruna-bg/90">
+                    <SelectGroup>
+                      <SelectItem v-for="license in licenses" :value="license.tag"
+                                  class="hover:bg-aruna-fg">
+                        {{ license.label }}
+                      </SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+                <FormMessage/>
+              </FormItem>
+            </FormField>
+            <!-- End License Input -->
+          </form>
+        </div>
+      </ResizablePanel>
+      <ResizableHandle id="resource-creation-handle" with-handle class="bg-aruna-text/50"/>
+      <ResizablePanel id="resource-creation-right"
+                      :default-size="60"
+                      :min-size="25"
+                      :max-size="75"
+                      :collapsible="true">
+        <div class="flex flex-col basis-1/2 h-full p-4">
+          <div class="flex px-4 grow flex-row md:flex-col overflow-x-auto">
+            <div class="flex flex-row mb-2 justify-start items-center">
+              <label for="key-values-input"
+                     class="block text-lg font-medium text-aruna-text-accent">Authors</label>
+              <button
+                  type="button"
+                  @click="authorDialogOpen = true"
+                  class="ms-4 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent 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>
+            </div>
+
+            <div class="-m-1.5 overflow-x-auto">
+              <div class="p-1.5 min-w-full inline-block align-middle">
+                <div class="overflow-hidden border border-aruna-text/50">
+                  <table class="min-w-full divide-y divide-aruna-text">
+                    <thead class="bg-aruna-muted">
+                    <tr>
+                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
+                        Name
+                      </th>
+                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
+                        Email
+                      </th>
+                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
+                        Orcid
+                      </th>
+                      <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
+                        Actions
+                      </th>
+                    </tr>
+                    </thead>
+                    <tbody class="divide-y divide-aruna-text/50">
+                    <tr v-for="[key, value] in authors">
+                      <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
+                        {{ value.firstName }} {{ value.lastName }}
+                      </td>
+                      <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
+                        {{ value.email }}
+                      </td>
+                      <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
+                        {{ value.orcid }}
+                      </td>
+                      <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-center">
+                        <button type="button"
+                                @click="removeAuthor(key)"
+                                class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-destructive focus:z-10 focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
+                          <IconTrash class="flex-shrink-0 size-6"/>
+                        </button>
+                      </td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+
+            <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="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>
+              <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">
+              <div class="p-1.5 min-w-full inline-block align-middle">
+                <div class="overflow-hidden border border-aruna-text/50">
+                  <table class="min-w-full divide-y divide-aruna-text">
+                    <thead class="bg-aruna-muted">
+                    <tr>
+                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
+                        Key
+                      </th>
+                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
+                        Value
+                      </th>
+                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
+                        Type
+                      </th>
+                      <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
+                        Actions
+                      </th>
+                    </tr>
+                    </thead>
+                    <tbody class="divide-y divide-aruna-text/50">
+                    <tr v-for="[key, value] in keyValues">
+                      <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-aruna-text">
+                        {{ key }}
+                      </td>
+                      <td v-html="prettyDisplayJson(value.value)"
+                          class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text"></td>
+                      <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
+                        {{ toKeyValueVariantStr(value.variant) }}
+                      </td>
+                      <td class="px-6 py-2 whitespace-nowrap text-center text-sm font-medium">
+                        <button type="button"
+                                @click="removeKeyValue(key)"
+                                class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-destructive focus:z-10 focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
+                          <IconTrash class="flex-shrink-0 size-6"/>
+                        </button>
+                      </td>
+                    </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+
+          </div>
+        </div>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+
+    <Button type="submit"
+            form="dialogForm"
+            variant="outline"
+            class="w-fit bg-transparent border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+      Create Resource
+    </Button>
+  </div>
+  <!-- End Resource Creation Form -->
+
+  <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;
+                  }"/>
+
+  <!-- TODO -->
+  <ModalObjectDisplay modalId="object-display" :object="createdResource" :progress="uploadProgress"
+                      :errorMsg="creationError"/>
+</template>
\ No newline at end of file

From 50d143629821ee3a4dbedb79c7b31bb549547d97 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 15:09:40 +0100
Subject: [PATCH 026/125] chore: Remove GroupInfo type from Groups composable

---
 composables/Groups.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/composables/Groups.ts b/composables/Groups.ts
index f436fedf..5a9f287b 100644
--- a/composables/Groups.ts
+++ b/composables/Groups.ts
@@ -1,10 +1,5 @@
 import EventBus from "~/composables/EventBus";
-import type {GetGroupsFromUserResponseGroups} from "~/types/aruna-v3-enums";
-
-export type GroupInfo = {
-  group: Group,
-  permission: GetGroupsFromUserResponseGroups
-}
+import type {GroupInfo} from '~/composables/api_wrapper'
 
 // by convention, composable function names start with "use"
 export async function useGroups() {

From d2f5e8dfad7bc01796381ee1f48a1a42a46a123c Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 15:10:15 +0100
Subject: [PATCH 027/125] chore: Minor CI adaptions on the explore page

---
 pages/explore.vue | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/pages/explore.vue b/pages/explore.vue
index f60cbee7..0980d9c5 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -137,10 +137,10 @@ onMounted(async () => await queryResources(true));
                    v-model="query"
                    id="search-query-input-with-icon"
                    name="search-query-input-with-icon"
-                   class="py-3 px-4 pe-11 block w-full border-e-0 border-aruna-text/50 shadow-sm rounded-s-md text-sm focus:z-10 focus:ring-1 focus:ring-aruna-highlight focus:border-aruna-highlight disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted text-aruna-text"
+                   class="py-3 px-4 pe-11 block w-full border-e-0 border-aruna-text/50 rounded-s-md text-sm focus:z-10 focus:ring-1 focus:ring-aruna-highlight focus:border-aruna-highlight disabled:opacity-50 disabled:pointer-events-none bg-aruna-bg/90 text-aruna-text"
                    placeholder="Search Aruna Resources"/>
             <button type="button"
-                    class="w-[2.875rem] h-[2.875rem] flex-shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-aruna-highlight bg-aruna-muted text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
+                    class="w-[2.875rem] h-[2.875rem] flex-shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-aruna-highlight bg-aruna-bg/90 text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
               <IconSearch class="flex-shrink-0 size-6"/>
             </button>
           </div>
@@ -159,7 +159,7 @@ onMounted(async () => await queryResources(true));
           </p>
 
           <label for="resource-type-all"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-muted border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
+                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
                    :value="v2ResourceVariant.RESOURCE_VARIANT_UNSPECIFIED"
@@ -171,7 +171,7 @@ onMounted(async () => await queryResources(true));
           </label>
 
           <label for="resource-type-projects"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-muted border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
+                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    checked
                    v-model="typeFilter"
@@ -184,7 +184,7 @@ onMounted(async () => await queryResources(true));
           </label>
 
           <label for="resource-type-collections"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-muted border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
+                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
                    :value="v2ResourceVariant.RESOURCE_VARIANT_COLLECTION"
@@ -196,7 +196,7 @@ onMounted(async () => await queryResources(true));
           </label>
 
           <label for="resource-type-datasets"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-muted border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
+                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
                    :value="v2ResourceVariant.RESOURCE_VARIANT_DATASET"
@@ -208,7 +208,7 @@ onMounted(async () => await queryResources(true));
           </label>
 
           <label for="resource-type-objects"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-muted border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
+                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
                    :value="v2ResourceVariant.RESOURCE_VARIANT_OBJECT"
@@ -227,7 +227,7 @@ onMounted(async () => await queryResources(true));
         <input type="text"
                v-model="customFilter"
                @keyup.enter="queryResources(true)"
-               class="py-3 px-4 block w-full rounded-md bg-aruna-muted border-aruna-text/50 text-aruna-text text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none"
+               class="py-3 px-4 block w-full rounded-md bg-aruna-bg/90 border-aruna-text/50 text-aruna-text text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none"
                placeholder="Custom filter"/>
 
         <div class="my-6 rounded-md bg-aruna-muted border border-aruna-text/50 border-t-4 border-t-aruna-highlight">

From e0f8e69edd2c97871eb0fcdf38139ab8879988a9 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 15:11:16 +0100
Subject: [PATCH 028/125] chore: Update vueuse/core dependency to 12.0.0

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 96b29f13..f3ace0a8 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@tabler/icons-vue": "^2.47.0",
     "@tailwindcss/forms": "^0.5.7",
     "@vee-validate/zod": "^4.13.2",
-    "@vueuse/core": "^11.1.0",
+    "@vueuse/core": "^12.0.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",

From b2e973ac4798e0f4070157781bf0883b1b837d38 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 15:53:15 +0100
Subject: [PATCH 029/125] fix: Broken profile display if user is undefined

---
 components/custom-ui/user/Profile.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/custom-ui/user/Profile.vue b/components/custom-ui/user/Profile.vue
index f89cba29..5c693ffa 100644
--- a/components/custom-ui/user/Profile.vue
+++ b/components/custom-ui/user/Profile.vue
@@ -12,9 +12,10 @@ import {Skeleton} from '@/components/ui/skeleton'
 import type {User} from "~/composables/api_wrapper";
 import GroupDialog from "~/components/custom-ui/dialog/GroupDialog.vue";
 
+/* ----- PROPERTIES ----- */
 interface ProfileProps {
   user: User,
-  groups: GroupInfo[]
+  groups: GroupInfo[] | null
 }
 
 const props = defineProps<ProfileProps>()
@@ -22,6 +23,7 @@ const user = toRef(() => props.user)
 const groups = toRef(() => props.groups)
 
 watch(groups, () => console.log('[Profile] Updated groups: ', groups))
+/* ----- END PROPERTIES ----- */
 
 
 function displayDescription(description: string, maxLength: number = 50): string {
@@ -30,7 +32,7 @@ function displayDescription(description: string, maxLength: number = 50): string
 </script>/
 <template>
   <!-- Display Profile Infos -->
-  <div class="m-4 pb-6 flex flex-col lg:flex-row flex-wrap justify-start gap-x-6 gap-y-6">
+  <div v-if="user" class="m-4 pb-6 flex flex-col lg:flex-row flex-wrap justify-start gap-x-6 gap-y-6">
     <!-- User Id Card -->
     <Card class="lg:basis-1/5">
       <ClientOnly fallback-tag="span">
@@ -67,7 +69,7 @@ function displayDescription(description: string, maxLength: number = 50): string
       </CardHeader>
       <CardContent>
         <div class="text-xl font-bold text-aruna-700">
-          {{ user.first_name }} {{ user.last_name }}
+          {{ user.first_name || '' }} {{ user.last_name || 'N/A' }}
         </div>
       </CardContent>
     </Card>
@@ -116,7 +118,7 @@ function displayDescription(description: string, maxLength: number = 50): string
           <TableHead class="text-lg">PermissionLevel</TableHead>
         </TableRow>
       </TableHeader>
-      <TableBody>
+      <TableBody v-if="groups">
         <TableRow v-for="group in groups" :key="group.group.name">
           <TableCell class="font-medium">
             {{ group.group.id }}

From 2d6edd4966080d3da91e4aeff6be49179ad4e718 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 15:58:01 +0100
Subject: [PATCH 030/125] feat: Adapted TokenDialog to v3

---
 components/custom-ui/dialog/TokenDialog.vue | 102 +++++++++++---------
 1 file changed, 54 insertions(+), 48 deletions(-)

diff --git a/components/custom-ui/dialog/TokenDialog.vue b/components/custom-ui/dialog/TokenDialog.vue
index c7292c88..cadb0b01 100644
--- a/components/custom-ui/dialog/TokenDialog.vue
+++ b/components/custom-ui/dialog/TokenDialog.vue
@@ -19,7 +19,7 @@ import {
 } from '@/components/ui/form'
 import {Input} from '@/components/ui/input'
 import {Popover, PopoverTrigger, PopoverContent} from '@/components/ui/popover'
-import {type v2Permission, v2PermissionLevel,} from "~/composables/aruna_api_json";
+import {type v2Permission} from "~/composables/aruna_api_json";
 import {useForm} from "vee-validate";
 import {toTypedSchema} from '@vee-validate/zod'
 import * as z from 'zod'
@@ -28,23 +28,30 @@ import {useToast} from "~/components/ui/toast";
 
 import {toDate} from 'radix-vue/date'
 import {DateFormatter, getLocalTimeZone, parseDate, today} from '@internationalized/date'
+import {Permission} from "~/types/aruna-v3-enums";
 
 const {toast} = useToast();
 
 /* ----- CUSTOM ENUMS ----- */
 enum Scopes {
   Personal = 'Personal',
+  Resource = 'Resource'
+  /*
   Project = 'Project',
   Collection = 'Collection',
   Dataset = 'Dataset',
   Object = 'Object'
+  */
 }
+
 /* ----- END CUSTOM ENUMS ----- */
 
 /* ----- PROPERTIES ----- */
 const props = defineProps<{
   initialOpen: boolean,
-  withButton: boolean
+  withButton: boolean,
+  realms: Realm[],
+  groups: Group[]
 }>()
 const externalTrigger = toRef(props, 'initialOpen')
 const open = ref(props.initialOpen)
@@ -57,7 +64,7 @@ const formSchema = toTypedSchema(z.object({
   tokenScope: z.nativeEnum(Scopes).default(Scopes.Personal),
   expiryDate: z.string().date('Invalid expiry date format.'),
   resourceId: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
-  permissionLevel: z.nativeEnum(v2PermissionLevel).optional(),
+  permissionLevel: z.nativeEnum(Permission).optional(),
 }).superRefine((values, ctx) => {
   if (values.tokenScope !== Scopes.Personal && !values.resourceId) {
     ctx.addIssue({
@@ -87,53 +94,52 @@ const {handleSubmit, values, setFieldValue} = useForm({
 })
 
 const onSubmit = handleSubmit(async (values) => {
-  // Prepare request values
-  const expiry = new Date(values.expiryDate)
-  const perm = values.tokenScope === Scopes.Personal ? undefined : {
-    projectId: values.tokenScope === Scopes.Project ? values.resourceId : undefined,
-    collectionId: values.tokenScope === Scopes.Collection ? values.resourceId  : undefined,
-    datasetId: values.tokenScope === Scopes.Dataset ? values.resourceId  : undefined,
-    objectId: values.tokenScope === Scopes.Object ? values.resourceId  : undefined,
-    permissionLevel: values.permissionLevel
-  } as v2Permission
+  // Prepare request body
+  const scope = values.tokenScope === Scopes.Personal ? Scopes.Personal : {
+    resourceId: values.resourceId,
+    permission: values.permissionLevel,
+  }
+  const body = {
+    name: values.tokenName,
+    expires_at: new Date(values.expiryDate).toISOString(),
+    group_id: undefined,
+    realm_id: undefined,
+    scope: scope
+  } as CreateTokenRequest
 
-  // Send request to create token
-  await createUserToken(values.tokenName, perm, expiry.toISOString())
-      .then(response => {
-        if (response?.tokenSecret) {
-          tokenSecret.value = response.tokenSecret
-          EventBus.emit('updateUser')
-        } else {
-          // Notify with error
-          toast({
-            title: 'Error',
-            //description: 'Something went wrong. If this problem persists please contact an administrator.',
-            description: 'Token secret in response was empty. Please try again later.',
-            variant: 'destructive',
-            duration: 10000,
-          })
-        }
-      }).catch(error => {
-        // Notify with error
-        toast({
-          title: 'Error',
-          //description: 'Something went wrong. If this problem persists please contact an administrator.',
-          description: error.message, // 'Token creation failed. Please try again later.',
-          variant: 'destructive',
-          duration: 10000,
-        })
-      })
+  // Create token
+  await $fetch<CreateTokenResponse>('/api/v3/tokens', {
+    method: 'POST',
+    body: body
+  }).then(response => {
+    if (response.secret) {
+      tokenSecret.value = response.secret
+      EventBus.emit('updateTokens')
+      return
+    }
+    // Show error if secret is undefined
+    toast({
+      title: 'Error',
+      //description: 'Something went wrong. If this problem persists please contact an administrator.',
+      description: 'Token secret in response was empty. Please try again later.',
+      variant: 'destructive',
+      duration: 10000,
+    })
+  }).catch(error => {
+    console.dir('[TokenDialog] Create Error:', error.data)
+    // Notify with error
+    toast({
+      title: 'Error',
+      //description: 'Something went wrong. If this problem persists please contact an administrator.',
+      description: `Token creation failed: ${error.data.data}.`, // 'Token creation failed. Please try again later.',
+      variant: 'destructive',
+      duration: 10000,
+    })
+  })
 })
-/* ----- END FORM SCHEMA ----- */
-
-const validPermissionLevels = computed(() => Object.keys(v2PermissionLevel).filter(variant => variant !== 'PERMISSION_LEVEL_UNSPECIFIED'))
-
-function formatPermissionLevel(variant: string): string {
-  const label = variant.replace('PERMISSION_LEVEL_', '').replace('_', ' ').toLowerCase()
-  return label.charAt(0).toUpperCase() + label.slice(1)
-}
 
 const tokenSecret: Ref<string | undefined> = ref(undefined)
+/* ----- END FORM SCHEMA ----- */
 
 const calendarValue = computed({
   get: () => values.expiryDate ? parseDate(values.expiryDate) : undefined,
@@ -273,8 +279,8 @@ function clear(visibility: boolean) {
                   </FormControl>
                   <SelectContent>
                     <SelectGroup>
-                      <SelectItem class="" v-for="level in validPermissionLevels" :value="level">
-                        {{ formatPermissionLevel(level) }}
+                      <SelectItem class="" v-for="level in Permission" :value="level">
+                        {{ level }}
                       </SelectItem>
                     </SelectGroup>
                   </SelectContent>

From 4ed5032477005a288c2ed31f8dffb375fadb4e42 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 15:58:35 +0100
Subject: [PATCH 031/125] feat: Extended AuthorDialog with button customization

---
 components/custom-ui/dialog/AuthorDialog.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/custom-ui/dialog/AuthorDialog.vue b/components/custom-ui/dialog/AuthorDialog.vue
index 23ac5489..7875240c 100644
--- a/components/custom-ui/dialog/AuthorDialog.vue
+++ b/components/custom-ui/dialog/AuthorDialog.vue
@@ -27,7 +27,8 @@ import * as z from 'zod'
 /* ----- PROPERTIES ----- */
 const props = defineProps<{
   initialOpen: boolean,
-  withButton: boolean
+  withButton: boolean,
+  buttonCss?: string
 }>()
 const externalTrigger = toRef(props, 'initialOpen')
 const open = ref(props.initialOpen)
@@ -67,8 +68,9 @@ const onSubmit = form.handleSubmit(async (values) => {
 <template>
   <Dialog v-model:open="open">
     <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 Author
       </Button>
     </DialogTrigger>
     <DialogContent class="sm:max-w-[425px] sm:rounded-md"

From 75e6884090790a4a8b5e0d65f0ca6072599e0dfc Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 16:07:29 +0100
Subject: [PATCH 032/125] feat: Implement first iteration of dashboard landing
 page

This page is supposed to show some stats for the user and give
quicklinks and stuff.
---
 .../custom-ui/dashboard/OverviewStats.vue     | 122 ++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 components/custom-ui/dashboard/OverviewStats.vue

diff --git a/components/custom-ui/dashboard/OverviewStats.vue b/components/custom-ui/dashboard/OverviewStats.vue
new file mode 100644
index 00000000..b25433b6
--- /dev/null
+++ b/components/custom-ui/dashboard/OverviewStats.vue
@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import {IconActivity} from '@tabler/icons-vue'
+
+/* ----- PROPERTIES ----- */
+interface OverviewStatsProps {
+  projects?: number
+  realms?: number
+  resources?: number
+  storage?: number
+  users?: number
+}
+const {projects, realms, resources, storage, users} = defineProps<OverviewStatsProps>()
+/* ----- END PROPERTIES ----- */
+
+function emitTabSwitch(tabId: string) {
+  EventBus.emit('setTab', tabId);
+}
+</script>
+
+<template>
+  <!--<div class="flex flex-1 items-center justify-center rounded-md border border-dashed border-slate-500 shadow-sm">-->
+  <div class="mx-4 mt-4 flex flex-1 flex-col rounded-md border border-dashed border-slate-500 shadow-sm">
+    <div class="flex flex-col my-6">
+      <div class="grid gap-4 p-4 md:grid-cols-2 md:gap-8 lg:grid-cols-5">
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total number of realms
+            </CardTitle>
+            <IconActivity class="h-4 w-4 text-muted-foreground"/>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <div class="text-2xl font-bold">
+              {{ realms || '-' }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              Nothing changed since last month
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total storage left in realms
+            </CardTitle>
+            <IconActivity class="h-4 w-4 text-muted-foreground"/>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <div class="text-2xl font-bold">
+              {{ storage ? formatBytes(+storage) : 'N/A' }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              -12.4% from last month
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total projects in realms
+            </CardTitle>
+            <IconActivity class="h-4 w-4 text-muted-foreground"/>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <div class="text-2xl font-bold">
+              {{ projects || '-' }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +2 more than last month
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total resources in realms
+            </CardTitle>
+            <IconActivity class="h-4 w-4 text-muted-foreground"/>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <div class="text-2xl font-bold">
+              {{ resources || '-' }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +256 more than last month
+            </p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader class="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle class="text-sm font-medium">
+              Total users in realms
+            </CardTitle>
+            <IconActivity class="h-4 w-4 text-muted-foreground"/>
+          </CardHeader>
+          <CardContent class="space-y-2">
+            <div class="text-2xl font-bold">
+              {{ users || '-' }}
+            </div>
+            <p class="text-xs text-muted-foreground">
+              +4 from last month
+            </p>
+          </CardContent>
+        </Card>
+
+      </div>
+    </div>
+
+    <hr class="m-4"/>
+
+    <div class="flex items-center justify-center gap-y-6 gap-x-1">
+      Wanna create or join a group? Take a look at your
+      <span class="font-bold text-aruna-highlight hover:text-aruna-highlight/80"
+            @click="emitTabSwitch('Profile')">
+        profile
+      </span>.
+    </div>
+  </div>
+</template>
\ No newline at end of file

From 582e25bface404a7846ca6a7e641d6b94255226c Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 16:08:18 +0100
Subject: [PATCH 033/125] feat: Add component to switch your current realm
 context

---
 .../custom-ui/dashboard/RealmSwitcher.vue     | 315 ++++++++++++++++++
 1 file changed, 315 insertions(+)
 create mode 100644 components/custom-ui/dashboard/RealmSwitcher.vue

diff --git a/components/custom-ui/dashboard/RealmSwitcher.vue b/components/custom-ui/dashboard/RealmSwitcher.vue
new file mode 100644
index 00000000..1313e52c
--- /dev/null
+++ b/components/custom-ui/dashboard/RealmSwitcher.vue
@@ -0,0 +1,315 @@
+<script setup lang="ts">
+import {ref} from 'vue'
+import {IconCaretUpDown, IconCheck, IconCirclePlus} from "@tabler/icons-vue";
+import {cn} from '@/utils/shadcn'
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from '@/components/ui/avatar'
+import {Button} from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator
+} from '@/components/ui/command'
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "~/components/ui/form";
+import {Input} from '@/components/ui/input'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
+import {useToast} from '@/components/ui/toast/use-toast'
+
+import type {Realm} from "~/composables/api_wrapper";
+import {toTypedSchema} from "@vee-validate/zod";
+import {z} from "zod";
+import {useForm} from "vee-validate";
+
+const {toast} = useToast()
+
+/* ----- PROPERTIES ----- */
+interface RealmSwitcherProps {
+  realms: Realm[] | null
+}
+const props = defineProps<RealmSwitcherProps>()
+console.log('[RealmSwitcher] Realms props type:', typeof props.realms)
+/* ----- END PROPERTIES ----- */
+const realms = toRef(() => props.realms)
+watch(realms, () => {
+  console.log('[RealmSwitcher] Updated realms:', realms.value)
+  if (realms.value && realms.value.length > 0 && selectedRealm.value.tag === 'placeholder')
+    selectedRealm.value = realms.value[0]
+})
+
+const realmsData = reactive({
+  label: 'Your Realms',
+  realms: realms
+})
+watch(realmsData, () => console.log('[RealmSwitcher] Updated realms data:', realmsData.realms ? realmsData.realms.length : 'null'))
+
+const open = ref(false)
+const showNewRealmDialog = ref(false)
+const selectedRealm = ref<Realm>(realms.value && realms.value.length > 0 ? realmsData.realms[0] : {
+  id: '',
+  name: 'Not a member of any realm',
+  tag: 'placeholder',
+  description: ''
+})
+
+function emitRealmSwitch() {
+  console.log('[RealmSwitcher]', `Emitted realm switch to: ${selectedRealm.value.name}`)
+  EventBus.emit('switchRealm', selectedRealm.value.name)
+}
+
+function addRealm(realm: Realm) {
+  console.log('[RealmSwitcher]', `Emitted realm add: ${realm.name}`)
+  realmsData.realms ? realmsData.realms.push(realm) : realmsData.realms = [realm]
+
+  if (selectedRealm.value.tag === 'placeholder')
+    selectedRealm.value = realm
+}
+
+/* ----- FORM SCHEMA ----- */
+const formSchema = toTypedSchema(
+    z.object({
+      name: z.string({required_error: 'Name is required.'}).min(5).max(256),
+      tag: z.string({required_error: 'Tag is required.'}).min(1).max(25),
+      description: z.string().optional(),
+    })
+)
+const form = useForm({
+  validationSchema: formSchema,
+})
+const onSubmit = form.handleSubmit(async values => {
+  await $fetch('/api/v3/realm', {
+    method: 'POST',
+    body: {
+      name: values.name,
+      tag: values.tag,
+      description: values.description
+    }
+  }).then(response => {
+    if (response.realm) {
+      addRealm(response.realm)
+      toast({
+        title: 'Info',
+        description: `Realm creation succeeded. Switched realm to: ${response.realm.name}`
+      })
+    } else {
+      toast({
+        title: 'Error',
+        description: 'Realm creation response is empty. This should not be possible :/',
+        variant: 'destructive',
+        duration: 10000,
+      })
+    }
+  }).catch(error => {
+    console.error('[Realm Switcher]', error)
+    toast({
+      title: 'Error',
+      description: 'Realm creation failed. Please try again later.',
+      variant: 'destructive',
+      duration: 10000,
+    })
+  })
+})
+/* ----- END FORM SCHEMA ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="showNewRealmDialog">
+    <Popover v-model:open="open">
+      <PopoverTrigger as-child>
+        <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded="open"
+            aria-label="Select a team"
+            :class="cn('w-[300px] justify-between hover:bg-[#1F375E]', $attrs.class ?? '')">
+          <!--
+          <Avatar class="mr-2 h-5 w-5">
+            <AvatarImage
+                :src="selectedRealm.logo || '/imgs/aruna_icon.webp'"
+                :alt="selectedRealm.name"/>
+            <AvatarFallback>SC</AvatarFallback>
+          </Avatar>
+          -->
+          <Avatar class="mr-2 h-5 w-5">
+            <AvatarImage
+                src="/imgs/aruna_icon.webp"
+                :alt="selectedRealm.name"/>
+            <AvatarFallback>SC</AvatarFallback>
+          </Avatar>
+          {{ selectedRealm.name }}
+          <IconCaretUpDown class="ml-auto h-4 w-4 shrink-0 opacity-50"/>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-[300px] p-1">
+        <Command :filter-function="(list, term) => list.filter(i => i.name?.toLowerCase()?.includes(term)) ">
+          <CommandList>
+            <CommandInput placeholder="Search realm..." class="my-1 focus:ring-aruna-800 focus:border-0"/>
+            <CommandEmpty>No realm found.</CommandEmpty>
+            <CommandGroup :key="realmsData.label" :heading="realmsData.label">
+              <CommandItem v-for="realm in realmsData.realms"
+                           :key="realm.tag"
+                           :value="realm"
+                           class="text-sm"
+                           @select="() => {
+                             selectedRealm = realm
+                             open = false
+                             emitRealmSwitch()
+                           }">
+                <!--
+                <Avatar class="mr-2 h-5 w-5">
+                  <AvatarImage
+                      :src="realm.logo || '/imgs/aruna_icon.webp'"
+                      :alt="realm.label"/>
+                  <AvatarFallback>SC</AvatarFallback>
+                </Avatar>
+                -->
+                <Avatar class="mr-2 h-5 w-5">
+                  <AvatarImage
+                      src="/imgs/aruna_icon.webp"
+                      :alt="selectedRealm.name"/>
+                  <AvatarFallback>SC</AvatarFallback>
+                </Avatar>
+                {{ realm.name }}
+                <IconCheck
+                    :class="cn('ml-auto h-4 w-4',
+                             selectedRealm.tag === realm.tag
+                               ? 'opacity-100'
+                               : 'opacity-0',
+                  )"/>
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+          <CommandSeparator/>
+          <CommandList>
+            <CommandGroup>
+              <DialogTrigger as-child>
+                <CommandItem value="create-realm"
+                             @select="() => {
+                               open = false
+                               showNewRealmDialog = true
+                             }">
+                  <IconCirclePlus class="mr-2 h-5 w-5"/>
+                  Create Realm
+                </CommandItem>
+              </DialogTrigger>
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Create Realm</DialogTitle>
+        <DialogDescription>
+          Add a new realm to manage your data products and data endpoints.
+        </DialogDescription>
+        <Separator class="my-4 bg-aruna-text/50"/>
+      </DialogHeader>
+
+      <form id="dialogForm" @submit="onSubmit" class="space-y-4">
+        <FormField v-slot="{componentField}" name="name">
+          <FormItem>
+            <FormLabel>Name</FormLabel>
+            <FormControl>
+              <Input type="text"
+                     placeholder="A name for your realm"
+                     v-bind="componentField"
+                     class="mt-0" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="tag">
+          <FormItem>
+            <FormLabel>Tag</FormLabel>
+            <FormControl>
+              <Input type="text"
+                     placeholder="A short tag for your realm"
+                     v-bind="componentField"
+                     class="mt-0" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="description">
+          <FormItem>
+            <FormLabel>Description</FormLabel>
+            <FormControl>
+              <Textarea v-bind="componentField"
+                        :rows="5"
+                        placeholder="A concise description of your realm." />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+      </form>
+
+      <!--
+      <div>
+        <div class="space-y-4 pb-4">
+          <div class="space-y-2">
+            <Label for="name">Realm name</Label>
+            <Input id="name" placeholder="A name for your realm"/>
+          </div>
+          <div class="space-y-2">
+            <Label for="plan">Subscription plan</Label>
+            <Select>
+              <SelectTrigger>
+                <SelectValue placeholder="Select a plan"/>
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="free">
+                  <span class="font-medium">Free</span> -
+                  <span class="text-muted-foreground">
+                    Trial for two weeks
+                  </span>
+                </SelectItem>
+                <SelectItem value="pro">
+                  <span class="font-medium">Pro</span> -
+                  <span class="text-muted-foreground">
+                    $90/month per user
+                  </span>
+                </SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+      </div>
+      -->
+
+      <DialogFooter>
+        <Button variant="outline"
+                class="text-aruna-text border border-aruna-text"
+                @click="showNewRealmDialog = false">
+          Cancel
+        </Button>
+        <Button type="submit"
+                form="dialogForm"
+                class="bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-white">
+          Continue
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file

From 9fdd2ff560837ecc17a760a450139d90137a02ec Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 9 Dec 2024 16:14:57 +0100
Subject: [PATCH 034/125] feat: Add a component for potential analytics content

---
 components/custom-ui/dashboard/DummyAnalytics.vue | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 components/custom-ui/dashboard/DummyAnalytics.vue

diff --git a/components/custom-ui/dashboard/DummyAnalytics.vue b/components/custom-ui/dashboard/DummyAnalytics.vue
new file mode 100644
index 00000000..c65a33fa
--- /dev/null
+++ b/components/custom-ui/dashboard/DummyAnalytics.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="m-4 p-4 rounded-sm border border-dashed border-aruna-text-accent flex items-center justify-center">
+    This is some dummy content for a potential analytics subcomponent.
+  </div>
+</template>
\ No newline at end of file

From 9a40675b6300bd230dfe975895d3f5cff891511c Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 10 Dec 2024 11:39:23 +0100
Subject: [PATCH 035/125] chore: remove duplicated import

---
 pages/objects/create.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/pages/objects/create.vue b/pages/objects/create.vue
index 548ea339..88da8062 100644
--- a/pages/objects/create.vue
+++ b/pages/objects/create.vue
@@ -33,7 +33,6 @@ 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 OntologyDialog from "~/components/custom-ui/dialog/OntologyDialog.vue";
 
 // Router to navigate back
 const router = useRouter()

From 9e838aabfea773a962930421617e43f8bb675976 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 10 Dec 2024 12:00:59 +0100
Subject: [PATCH 036/125] feat: Add composable for Event data fetching

---
 composables/Events.ts | 41 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 composables/Events.ts

diff --git a/composables/Events.ts b/composables/Events.ts
new file mode 100644
index 00000000..1688f993
--- /dev/null
+++ b/composables/Events.ts
@@ -0,0 +1,41 @@
+import EventBus from "~/composables/EventBus";
+
+// by convention, composable function names start with "use"
+export async function useEvents(refs: Ref[], user: Ref<User | undefined>) {
+
+  watch(user, () => console.log('[GetEvents] User updated:', user.value ? user.value.id : 'Undefined'))
+
+  // state encapsulated and managed by the composable
+  const events: Ref<any[] | null> = ref(null)
+  const {refresh: refreshEvents} = await useFetch<GetEventsResponse>('/api/v3/events', {
+    server: false,
+    lazy: true,
+    watch: refs,
+    query: {
+      subscriber_id: user.value ? user.value.id : ''
+    },
+    onResponse({response}) {
+      if (response.ok) {
+        console.log('[GetEvents]', response)
+        events.value = response._data.events
+        return
+      }
+
+      console.warn('[GetEvents] Response was not ok', response)
+      events.value = []
+    },
+    onResponseError({response}) {
+      console.error('[GetEvents] Error response:', response)
+      events.value = []
+    }
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateEvents', async () => {
+    console.log('Triggered events update')
+    await refreshEvents()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {events, refreshEvents}
+}
\ No newline at end of file

From a02f2aba2f4a54263c5500892c1872e2ee6d2aa3 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 10 Dec 2024 12:02:10 +0100
Subject: [PATCH 037/125] feat: Add first iteration of resource explorer
 component

---
 .../custom-ui/dashboard/FileExplorer.vue      | 520 ++++++++++++++++++
 1 file changed, 520 insertions(+)
 create mode 100644 components/custom-ui/dashboard/FileExplorer.vue

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
new file mode 100644
index 00000000..9e3586a1
--- /dev/null
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -0,0 +1,520 @@
+<script lang="ts" setup>
+import {
+  IconFile,
+  IconFolder,
+  IconInfoCircle,
+  IconLock,
+  IconPlus,
+  IconUpload,
+  IconWorld,
+} from '@tabler/icons-vue'
+import {Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator,} from '@/components/ui/breadcrumb'
+
+import type {GetRelationsResponse, ResourceElement} from "~/composables/api_wrapper"
+import {fetchChildren} from "~/composables/api_wrapper";
+import {ResourceVariant} from "~/types/aruna-v3-enums"
+import {toast} from "~/components/ui/toast";
+import {h} from "vue";
+
+const licenses = [
+  {tag: 'CC0', label: 'Creative Commons Zero (CC0 1.0)'},
+  {tag: 'CC-BY-SA 4.0', label: 'Attribution-ShareAlike 4.0 International (CC-BY-SA 4.0)'},
+  {tag: 'CC-BY-NC 4.0', label: 'Attribution-NonCommercial 4.0 International (CC-BY-NC)'},
+  {tag: 'CC-BY-NC-SA 4.0', label: 'Attribution-NonCommercial-ShareAlike 4.0 International (CC-BY-NC-SA)'}
+] //await fetchLicenses()
+
+/* ----- Dropzone ----- */
+import {useDropZone} from "@vueuse/core"
+import KeyValueDialog from "~/components/custom-ui/dialog/KeyValueDialog.vue";
+import AuthorDialog from "~/components/custom-ui/dialog/AuthorDialog.vue";
+
+const dropZoneRef = ref<HTMLDivElement>()
+
+// Object meta
+const fileUpload = ref<File | null>(null)
+const fileName = ref<string | null>(null)
+const fileTitle = ref<string | null>(null)
+const parent = ref<ResourceElement | null>(null)
+
+function onDrop(files: File[] | null) {
+  // called when files are dropped on zone
+  console.log('[FileExplorer] Dropped files:', files)
+
+  if (files && files.length > 0) {
+    fileUpload.value = files[0]
+    fileName.value = fileUpload.value.name
+    parent.value = currentHierarchy.value[currentHierarchy.value.length - 1]
+
+    infoOpen.value = true
+  }
+}
+
+const {isOverDropZone} = useDropZone(dropZoneRef, {
+  onDrop,
+  // control multi-file drop
+  multiple: false,
+  // whether to prevent default behavior for unhandled events
+  preventDefaultForUnhandled: false,
+})
+/* ----- End Dropzone ----- */
+
+
+/* ----- PROPERTIES ----- */
+interface FileExplorerProps {
+  resources: ResourceElement[]
+}
+
+const props = defineProps<FileExplorerProps>()
+// Loaded resources -> Default: your projects
+// Children are lazy loaded
+const loadedResources: Ref<ResourceElement[]> = toRef(() => props.resources)
+watch(loadedResources, () => console.log(loadedResources.value.length))
+/* ----- END PROPERTIES ----- */
+
+/* ----- Const variable magic */
+const currentHierarchy: Ref<ResourceElement[]> = ref([])
+const displayedResources: Ref<ResourceElement[]> = ref(loadedResources.value)
+
+const infoSelection: Ref<ResourceElement | undefined> = ref(undefined)
+watch(infoSelection, () => console.log('[FileExplorer] Current selection:', infoSelection.value))
+const infoOpen: Ref<boolean> = ref(false)
+
+watchEffect(async () => {
+  console.log('[FileExplorer] Current Hierarchy:', currentHierarchy.value.map(ele => ele.id).join(', '))
+  if (currentHierarchy.value.length <= 0) {
+    displayedResources.value = loadedResources.value
+  } else {
+    const currentResource = currentHierarchy.value.slice(-1)[0]
+
+    //if (currentResource && currentResource.children.length > 0) {
+    //  displayedRes.value = currentResource.children
+    //  return
+    //}
+
+    // Fetch children
+    const children: ResourceElement[] = await fetchChildren(currentResource.id)
+
+    // Add to loaded resources
+    addChildren(loadedResources.value, currentResource.id, children)
+
+    // Return children
+    displayedResources.value = children
+  }
+})
+
+/* ----- */
+
+function openInfo(resource: ResourceElement) {
+  infoSelection.value = resource
+  infoOpen.value = true
+}
+
+function closeInfo() {
+  fileUpload.value = null
+  infoOpen.value = false
+}
+
+function navigateBack(resourceId: string) {
+  // Clear met info field:
+  infoOpen.value = false
+  infoSelection.value = undefined
+
+  // Navigate
+  if (resourceId === 'root') {
+    currentHierarchy.value = []
+    return
+  }
+  const index = currentHierarchy.value.map(res => res.id).indexOf(resourceId)
+  currentHierarchy.value = currentHierarchy.value.slice(0, index)
+}
+
+async function navigateForward(element: ResourceElement) {
+
+  // Check if is locked
+  if (element.variant === ResourceVariant.Object || element.locked)
+    return
+
+  // Fetch child relations to check if user has permissions
+  //TODO: In future there will be an authorization endpoint?
+  await $fetch<GetRelationsResponse>(`/api/v3/relations`, {
+    query: {
+      node: element.id,
+      direction: 'Outgoing',
+      offset: 0,
+      page_size: Number.MAX_SAFE_INTEGER
+    }
+  }).then(response => {
+    console.info('[Navigate Forward] Fetched relations:', response.relations)
+    //return response.relations.filter(rel => rel.relation_type === 'HasPart').map(rel => rel.to_id)
+    currentHierarchy.value.push(element)
+    infoOpen.value = false
+    infoSelection.value = undefined
+  }).catch(error => {
+    console.dir(error.data)
+    if (error.data.statusCode === 403) {
+      toast({
+        description: h('div',
+            {class: 'flex space-x-2 items-center justify-center'},
+            [
+              h(IconLock, {class: 'flex-shrink-0 size-5'}),
+              h('span',
+                  {class: 'text-aruna-text-accent'},
+                  [`Not authorized to view sub-resources of ${element.title || element.name}`])
+            ]),
+        duration: 10000
+      })
+    } else {
+      toast({
+        title: 'Error',
+        description: `Error [${error.data.statusCode}]: ${error.data.data}`
+      })
+    }
+  })
+
+
+  /*
+  if (element.variant != ResourceVariant.Object) {
+    currentHierarchy.value.push(element)
+    infoOpen.value = false
+    infoSelection.value = undefined
+  }
+  */
+}
+
+function addChildren(array: ResourceElement[], id: string, children: ResourceElement[]): ResourceElement | undefined {
+  for (const item of array) {
+    if (item.id === id) {
+      item.children = children
+      return item;
+    }
+
+    if (item.children?.length) {
+      const innerResult = addChildren(item.children, id, children);
+      if (innerResult) return innerResult;
+    }
+  }
+}
+
+const actions = [
+  //{name: 'Upload', icon: IconUpload},
+  {name: 'Create', icon: IconPlus},
+  //{name: 'Download', icon: IconDownload},
+]
+
+function emitTabSwitch(tabId: string) {
+  EventBus.emit('setTab', tabId);
+}
+
+function checkDirection(): 'horizontal' | 'vertical' {
+  console.log(window.matchMedia('(min-width: 1024px)').matches)
+  if (window.matchMedia('(min-width: 1024px)').matches) {
+    return 'horizontal'
+  } else {
+    return 'vertical'
+  }
+}
+</script>
+<template>
+  <div class="flex flex-col h-full w-full py-6 ps-6">
+    <!-- Header -->
+    <div class="flex h-14 items-center justify-between border-b bg-gray-100 px-6 dark:border-gray-800 dark:bg-gray-900">
+      <nav aria-label="breadcrumb">
+        <Breadcrumb>
+          <BreadcrumbList>
+            <BreadcrumbItem @click="navigateBack('root')"
+                            class="hover:cursor-pointer">Your Projects
+            </BreadcrumbItem>
+            <div v-for="ele in currentHierarchy"
+                 class="flex items-center justify-center gap-2.5">
+              <BreadcrumbSeparator/>
+              <BreadcrumbItem v-if="ele.variant !== ResourceVariant.Object"
+                              @click="navigateBack(ele.id)"
+                              class="hover:cursor-pointer">{{ ele.name }}
+              </BreadcrumbItem>
+              <BreadcrumbItem v-else>{{ ele.name }}</BreadcrumbItem>
+            </div>
+          </BreadcrumbList>
+        </Breadcrumb>
+      </nav>
+
+      <!-- Action Buttons -->
+      <div class="flex items-center gap-4">
+        <button v-for="action in actions"
+                :key="action.name"
+                @click="emitTabSwitch('ResourceCreation')"
+                class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
+          <component :is="action.icon"
+                     class="h-4 w-4 mr-2"/>
+          {{ action.name }}
+        </button>
+      </div>
+      <!-- End Action Buttons -->
+    </div>
+    <!-- End Header -->
+
+    <ResizablePanelGroup id="file-explorer-list"
+                         :direction="checkDirection()"
+                         class="h-full">
+      <ResizablePanel>
+        <!--
+        <div :class="{'opacity-50': isOverDropZone}"
+            class="absolute flex w-full h-full items-center justify-center opacity-0 transition-all ease-in-out delay-50 duration-500">
+          <div class="flex flex-col bg-aruna-highlight items-center justify-center gap-y-6 p-32 border-2 border-dashed border-aruna-text-accent rounded-sm">
+            Drop your file here
+            <IconPlus class="flex-shrink-0 size-8 text-aruna-text-accent border rounded-full border-aruna-text-accent"/>
+          </div>
+        </div>
+        -->
+
+        <!-- Flexbox Resource Display -->
+        <div class="flex flex-row flex-wrap content-start items-start justify-start gap-x-6 gap-y-6 my-4">
+          <Card v-for="resource in displayedResources"
+                class="rounded-sm flex flex-col items-center justify-center min-w-[300px] h-fit"
+                @dblclick="navigateForward(resource)">
+            <CardContent class="group flex flex-col items-center">
+              <div class="flex h-20 w-full items-center justify-center">
+                <IconWorld v-if="resource.variant === ResourceVariant.Project"
+                           class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
+                <IconFolder v-else-if="resource.variant === ResourceVariant.Folder"
+                            class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
+                <IconFile v-else-if="resource.variant === ResourceVariant.Object"
+                          class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
+              </div>
+              <div class="flex gap-x-2">
+                {{ resource.title ? resource.title : resource.name }}
+                <IconInfoCircle @click="openInfo(resource)"/>
+              </div>
+              <span v-if="resource.variant === ResourceVariant.Object" class="text-aruna-text">
+              {{ `Size: ${formatBytes(resource.content_len)}` }}
+            </span>
+              <span v-else class="text-aruna-text">
+              {{ `Children: ${resource.children.length}` }}
+            </span>
+            </CardContent>
+          </Card>
+
+          <!-- Dropbox Card -->
+          <Card v-if="currentHierarchy.length > 0"
+                class="min-w-[200px] py-4 px-2 h-fit flex items-center justify-center rounded-sm border border-dashed border-aruna-highlight transition-all ease-in-out delay-50 duration-250"
+                :class="{'bg-aruna-highlight/25': isOverDropZone}"
+                ref="dropZoneRef">
+            <CardContent>
+              <div class="flex flex-col gap-y-6 items-center justify-center text-aruna-highlight">
+                <IconUpload class="h-12 w-12"/>
+                Drop your file here
+              </div>
+            </CardContent>
+          </Card>
+          <!-- End Dropbox Card -->
+        </div>
+        <!-- End Flexbox Resource Display -->
+
+        <!-- No resources display -->
+        <div v-if="loadedResources && loadedResources.length <= 0"
+             class="m-4 p-4 w-fit mx-auto flex flex-1 items-center justify-center rounded-md border border-dashed border-slate-500 shadow-sm">
+          <div class="flex flex-col items-center gap-1 text-center">
+            <h3 class="text-2xl font-bold tracking-tight">
+              You do not have created any resources yet.
+            </h3>
+            <p class="text-sm text-muted-foreground">
+              Start your exciting Aruna journey with the creation of your first resource.
+            </p>
+
+            <Button @click="emitTabSwitch('ResourceCreation')"
+                    class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary-foreground shadow h-9 px-4 py-2 mt-4 bg-aruna-800 hover:bg-aruna-700 dark:bg-aruna-700 dark:hover:bg-aruna-600">
+              Create Resource
+            </Button>
+          </div>
+        </div>
+        <!-- End no resources display -->
+      </ResizablePanel>
+      <ResizableHandle v-if="infoOpen" id="file-explorer-handle" class="mt-2" with-handle/>
+      <ResizablePanel v-if="infoOpen" id="file-explorer-info" :default-size="25" :min-size="25" :max-size="50">
+        <!-- Flexbox file meta display -->
+        <div style="transition-behavior: allow-discrete;"
+             :class="{'visible flex translate-x-0 ' : infoOpen, 'invisible hidden translate-x-full' : !infoOpen}"
+             class="transition-all duration-500 flex-col h-full mt-2 p-4 border-l border-aruna-text/50 gap-y-4 justify-between">
+
+          <div v-if="fileUpload" class="gap-y-4 flex flex-col">
+            <h2 class="text-2xl">Upload file</h2>
+            <Separator class="bg-aruna-text/50 my-4"/>
+
+            <Table>
+              <TableBody>
+                <TableRow>
+                  <TableCell class="w-[1%]">Name:</TableCell>
+                  <TableCell class="text-aruna-text">{{ fileUpload.name }}</TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell>Size:</TableCell>
+                  <TableCell class="text-aruna-text">{{ formatBytes(fileUpload.size) }}</TableCell>
+                </TableRow>
+                <TableRow v-if="fileUpload.type">
+                  <TableCell>Type:</TableCell>
+                  <TableCell class="text-aruna-text">{{ fileUpload.type }}</TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+
+            <!--
+            <dl class="flex flex-col">
+              <div class="flex gap-x-4">
+                <dt class="text-aruna-text-accent">Name:</dt>
+                <dd class="text-aruna-text truncate overflow-ellipsis">{{ fileUpload.name }}</dd>
+              </div>
+              <div class="flex gap-x-4">
+                <dt class="text-aruna-text-accent">Size:</dt>
+                <dd class="text-aruna-text">{{ formatBytes(fileUpload.size) }}</dd>
+              </div>
+              <div class="flex gap-x-4">
+                <dt class="text-aruna-text-accent">Type:</dt>
+                <dd class="text-aruna-text truncate overflow-ellipsis">{{ fileUpload.type || 'N/A' }}</dd>
+              </div>
+            </dl>
+            -->
+
+            <Separator class="bg-aruna-text/50 my-4"/>
+
+            <Label for="description">Description</Label>
+            <Textarea id="description"
+                      :rows="3"
+                      placeholder="Here you can enter a description of your resource"
+                      class="py-3 px-4 w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                                   focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                   focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                   disabled:opacity-50 disabled:pointer-events-none"/>
+
+            <div class="flex sm:flex-col w-fit gap-y-4">
+              <Label for="labels">Labels</Label>
+              <KeyValueDialog :initial-open="false" :with-button="true"/>
+            </div>
+
+            <div class="flex sm:flex-col w-fit gap-y-4">
+              <Label for="authors">Authors</Label>
+              <AuthorDialog :initial-open="false" :with-button="true"/>
+            </div>
+
+            <Label for="license">License</Label>
+            <Select>
+              <SelectTrigger class="w-fit bg-aruna-muted">
+                <SelectValue placeholder="Select a license for your resource"/>
+              </SelectTrigger>
+              <SelectContent class="bg-aruna-bg/90">
+                <SelectGroup>
+                  <SelectItem v-for="license in licenses" :value="license.tag"
+                              class="hover:bg-aruna-fg">
+                    {{ license.tag }}
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+
+          <div v-else class="gap-y-4">
+            <h2 class="text-2xl">{{ infoSelection?.title || 'Title not available' }}</h2>
+            <Separator class="bg-aruna-text/50 my-6"/>
+            <dl class="flex flex-col gap-y-4">
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium 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">{{
+                    infoSelection?.id || ''
+                  }}
+                </dd>
+              </div>
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Name:</dt>
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">{{
+                    infoSelection?.name || ''
+                  }}
+                </dd>
+              </div>
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium 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">{{
+                    infoSelection?.description || ''
+                  }}
+                </dd>
+              </div>
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Size:</dt>
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  {{ formatBytes(infoSelection?.content_len || 0) }}
+                </dd>
+              </div>
+              <div v-if="infoSelection?.variant !== ResourceVariant.Object"
+                   class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Children:</dt>
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">{{
+                    infoSelection?.count || 0
+                  }}
+                </dd>
+              </div>
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Created At:</dt>
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  {{ formatDate(infoSelection?.created_at || '') }}
+                </dd>
+              </div>
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Last Modified:</dt>
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  {{ formatDate(infoSelection?.last_modified || '') }}
+                </dd>
+              </div>
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">License:</dt>
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">{{
+                    infoSelection?.license_tag || ''
+                  }}
+                </dd>
+              </div>
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Locations:</dt>
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">[...]</dd>
+              </div>
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Locked:</dt>
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">{{
+                    infoSelection?.locked || 'N/A'
+                  }}
+                </dd>
+              </div>
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Visibility:</dt>
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">{{
+                    infoSelection?.visibility || ''
+                  }}
+                </dd>
+              </div>
+
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Labels:</dt>
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">[...]</dd>
+              </div>
+            </dl>
+          </div>
+
+
+          <div class="flex gap-x-4">
+            <Button v-if="fileUpload"
+                    variant="outline"
+                    @click="console.log('Create resource and upload file')"
+                    disabled
+                    class="inline-flex w-fit bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+              Upload
+            </Button>
+            <Button variant="outline"
+                    @click="closeInfo"
+                    class="inline-flex w-fit bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+              Close
+            </Button>
+          </div>
+
+        </div>
+        <!-- End Flexbox file meta display -->
+      </ResizablePanel>
+    </ResizablePanelGroup>
+
+
+  </div>
+</template>

From 43df113c4af030accc8b98b7e0a848e222f4f7b2 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 10 Dec 2024 12:07:51 +0100
Subject: [PATCH 038/125] feat: Add draft component for realm component
 visualization

---
 components/custom-ui/dashboard/Realms.vue     | 202 ++++++++++++++++++
 .../custom-ui/dialog/DataproxyDialog.vue      |  74 +++++++
 package.json                                  |   2 +
 3 files changed, 278 insertions(+)
 create mode 100644 components/custom-ui/dashboard/Realms.vue
 create mode 100644 components/custom-ui/dialog/DataproxyDialog.vue

diff --git a/components/custom-ui/dashboard/Realms.vue b/components/custom-ui/dashboard/Realms.vue
new file mode 100644
index 00000000..d6225dea
--- /dev/null
+++ b/components/custom-ui/dashboard/Realms.vue
@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import {VisSingleContainer, VisGraph, VisTooltip} from '@unovis/vue'
+import {Graph, GraphLayoutType, Position, Tooltip} from '@unovis/ts'
+import {ref, computed} from "vue"
+
+const realms = [
+  {
+    name: 'FAIR DS',
+    status: 'Active',
+    description: 'FAIR DS aims to create a comprehensive infrastructure that promotes the Findability, Accessibility, Interoperability, and Reusability (FAIR) of research data across various disciplines. By establishing data spaces that bridge different scientific fields, FAIR DS facilitates data sharing and collaboration on a national and international scale.',
+    quota: '2.3 / 5.0 TiB',
+  },
+  {
+    name: 'NFDI4Biodiversity',
+    status: 'Active',
+    description: 'NFDI4Biodiversity develops a digital infrastructure for biodiversity research, enabling the integration, sharing, and analysis of diverse biodiversity datasets. By providing resources and tools, it supports researchers and policymakers in understanding and addressing biodiversity-related challenges at local and global levels.',
+    quota: '1.4 / 5.0 TiB',
+  },
+  {
+    name: 'NFDI4Microbiota',
+    status: 'Active',
+    description: 'NFDI4Microbiota focuses on building a research data infrastructure specifically for microbiome and microbiota research. It provides standardized tools, protocols, and data management services to support data sharing, analysis, and long-term storage, fostering collaboration among microbiologists and related disciplines.',
+    quota: '2.9 / 5.0 TiB',
+  },
+  {
+    name: 'NFDI4Health',
+    status: 'Inactive',
+    description: 'NFDI4Health aims to establish a research data infrastructure tailored to public health and epidemiology. It provides tools, standards, and services to facilitate the secure collection, management, and sharing of health-related data. By promoting interoperability and supporting data-driven research, NFDI4Health enables researchers and policymakers to gain insights into population health trends and improve public health outcomes.',
+    quota: '4.6 / 5.0 TiB',
+  },
+]
+
+function displayDescription(description: string, maxLength: number = 50): string {
+  return description.length > maxLength ? description.slice(0, maxLength) + " ..." : description
+}
+
+const disableTooltips = ref<boolean>(false)
+const container = document.body
+watch(disableTooltips, () => console.log('[Disabled Tooltips]', disableTooltips.value))
+
+import {nodes, links, sites, StatusMap, type NodeDatum, type LinkDatum} from './data-circular'
+import type {v2Endpoint} from "~/composables/aruna_api_json";
+import DataproxyDialog from "~/components/custom-ui/dialog/DataproxyDialog.vue";
+
+// Reactive statements
+const expanded = ref<string[]>(['instance-gi', 'instance-bi', 'instance-be', 'instance-tu'])
+const panels = computed(() => expanded.value.map(site => sites[site].panel))
+const data = computed(() => ({
+  nodes: nodes.flatMap<NodeDatum>(n => expanded.value.includes(n.site) ? n.children : n),
+  links: links.map(l => ({
+    ...l,
+    source: expanded.value.includes(l.sourceGroup) ? l.source : sites[l.sourceGroup].groupNodeId,
+    target: expanded.value.includes(l.targetGroup) ? l.target : sites[l.targetGroup].groupNodeId,
+  })),
+}))
+
+
+const triggers = computed(() => {
+  return {
+    [Graph.selectors.node]: (n: NodeDatum) => {
+      if (n.metaInfo) {
+        return `<div id="${n.id}" class="p-4 bg-[#080d1f] rounded-sm border-2 border-gray-400 text-aruna-700">
+                  <h3 class="font-bold text-aruna-700">Meta Info</h3>
+                  <dl class="divide-y divide-gray-100">
+                    <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                      <dt class="text-sm font-medium leading-6 text-gray-400">Name</dt>
+                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">${n.metaInfo.name}
+                        <!--
+                        <button onClick="showMe('${n.metaInfo.name}')" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 w-9">
+                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
+                            <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
+                            <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
+                          </svg>
+                        </button>
+                        -->
+                      </dd>
+                    </div>
+                    <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                      <dt class="text-sm font-medium 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">${n.metaInfo.id}</dd>
+                    </div>
+                    <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                      <dt class="text-sm font-medium leading-6 text-gray-400">Variant</dt>
+                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">${n.metaInfo.epVariant}</dd>
+                    </div>
+                  </dl>
+                </div>`
+      }
+      return null
+    },
+  }
+})
+
+const clickedEndpoint: Ref<v2Endpoint  | undefined> = ref(undefined)
+const detailDialogOpen = ref<boolean>(false)
+
+// Graph config
+const graphConfig = computed(() => ({
+  events: {
+    [Graph.selectors.node]: {
+      click: (node: NodeDatum) => {
+        if (node.clickable) {
+          expanded.value.includes(node.site) ?
+              expanded.value.splice(expanded.value.indexOf(node.site), 1) :
+              expanded.value.push(node.site)
+        } else if (node.metaInfo) {
+          clickedEndpoint.value = node.metaInfo
+          detailDialogOpen.value = true
+        }
+      }
+    },
+  },
+  nodeGaugeValue: (n: NodeDatum) => n.score,
+  nodeGaugeFill: (n: NodeDatum) => StatusMap[n.status]?.color,
+  nodeIconSize: 20,
+  nodeShape: (n: NodeDatum) => n.shape,
+  nodeFill: (n: NodeDatum) => n.fill,
+  nodeSideLabels: (n: NodeDatum) => [{
+    radius: 12,
+    fontSize: 8,
+    ...(n.children ? {text: n.children.length} : StatusMap[n.status]),
+  }],
+  nodeSize: (n: NodeDatum) => n.children ? 75 : 50,
+  nodeSubLabel: (n: NodeDatum) => n.score && `${n.score}/100`,
+  nodeStrokeWidth: 3,
+  linkFlow: (l: LinkDatum) => l.showTraffic,
+  linkStroke: (l: LinkDatum) => StatusMap[l.status]?.color || null,
+  linkBandWidth: (l: LinkDatum) => l.showTraffic ? 12 : 6,
+}))
+</script>
+
+<template>
+  <DataproxyDialog :initial-open="detailDialogOpen"
+                   :with-button="false"
+                   :endpoint="clickedEndpoint"
+                   @update:open="detailDialogOpen = false"/>
+
+  <div class="flex flex-col">
+    <div class="flex flex-row items-center justify-center max-w-screen-2xl lg:max-w-[80vw]">
+      <Table>
+        <TableCaption>A list of your active realms</TableCaption>
+        <TableHeader>
+          <TableRow>
+            <TableHead class="text-lg">Realm</TableHead>
+            <TableHead class="text-lg">Status</TableHead>
+            <TableHead class="text-lg">Description</TableHead>
+            <TableHead class="text-lg text-center">Quota</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-for="realm in realms" :key="realm.name">
+            <TableCell class="font-medium">
+              {{ realm.name }}
+            </TableCell>
+            <TableCell>{{ realm.status }}</TableCell>
+            <TableCell>{{ displayDescription(realm.description, 128) }}</TableCell>
+            <TableCell class="text-right">
+              {{ realm.quota }}
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </div>
+    <Separator class="my-6"/>
+    <div class="flex flex-col chart">
+      <VisSingleContainer :data="data" height="60vh">
+        <VisGraph v-bind="graphConfig"
+                  :nodeLabelTrim="false"
+                  :layoutType="GraphLayoutType.Parallel"
+                  :layoutGroupOrder="['instance-bi', 'instance-gi', 'instance-be', 'instance-tu']"
+                  :layoutNodeGroup="(n: NodeDatum) => n.group"
+                  :layoutParallelNodeSubGroup="(n: NodeDatum) => n.subgroup"
+                  :layoutParallelNodesPerColumn="1"
+                  :layoutParallelGroupSpacing="100"
+                  :layoutParallelSubGroupsPerRow="1"
+                  :panels="panels"/>
+
+        <VisTooltip v-if="!disableTooltips"
+                    :container="container"
+                    :triggers="triggers"
+                    :follow-cursor="false"
+                    :allow-hover="true"
+                    :vertical-placement="Position.Auto"/>
+
+      </VisSingleContainer>
+    </div>
+  </div>
+</template>
+
+<style>
+.chart {
+  --vis-graph-icon-font-family: 'Font Awesome 6 Free';
+  --vis-graph-link-stroke-opacity: 0.8;
+  --vis-graph-link-band-opacity: 0.2;
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  src: url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/webfonts/fa-solid-900.woff2) format('woff2');
+}
+</style>
+
diff --git a/components/custom-ui/dialog/DataproxyDialog.vue b/components/custom-ui/dialog/DataproxyDialog.vue
new file mode 100644
index 00000000..dfebdb4a
--- /dev/null
+++ b/components/custom-ui/dialog/DataproxyDialog.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import {Button} from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog'
+import type {v2Endpoint} from "~/composables/aruna_api_json";
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean,
+  withButton: boolean,
+  endpoint: v2Endpoint
+}>()
+const externalTrigger = toRef(props, 'initialOpen')
+const open = ref(props.initialOpen)
+watch(externalTrigger, () => open.value = externalTrigger.value)
+/* ----- END PROPERTIES ----- */
+
+/* ----- EVENT EMITS ----- */
+const emit = defineEmits(['closeCredentialsDialog'])
+/* ----- END EVENT EMITS ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger v-if="withButton" as-child>
+      <Button variant="outline">
+        Show DataProxy
+      </Button>
+    </DialogTrigger>
+    <DialogContent @close="emit('closeCredentialsDialog')"
+                   class="sm:max-w-screen-md sm:rounded-md">
+      <DialogHeader>
+        <DialogTitle class="mb-2 text-center text-aruna-700 font-bold">{{ endpoint.name }}</DialogTitle>
+        <DialogDescription v-if="endpoint.name" class="text-center">
+          <p class="mb-2 text-md"><span class="font-bold italic">{{ endpoint.id }}</span></p>
+          <!--<p class="text-sm">{{ endpoint.id }}</p>-->
+        </DialogDescription>
+      </DialogHeader>
+      <div class="p-4 overflow-y-auto">
+        <div class="border-y border-gray-100">
+          <dl class="divide-y divide-gray-100">
+            <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-medium leading-6 text-gray-400">Status</dt>
+              <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">{{ endpoint.status }}</dd>
+            </div>
+            <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-medium leading-6 text-gray-400">Public Endpoint</dt>
+              <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">{{ endpoint.isPublic }}</dd>
+            </div>
+            <!--
+            <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-medium leading-6 text-gray-400">Has Modules</dt>
+              <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
+                {{ endpoint.hostConfigs && endpoint.hostConfigs.length > 0 }}
+              </dd>
+            </div>-->
+            <div v-if="endpoint.hostConfigs && endpoint.isPublic" class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-medium leading-6 text-gray-400">Modules</dt>
+              <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
+                <pre>{{ JSON.stringify(endpoint.hostConfigs, null, 2) }}</pre>
+              </dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/package.json b/package.json
index f3ace0a8..903cdf10 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
     "@shikijs/markdown-it": "^1.10.0",
     "@tabler/icons-vue": "^2.47.0",
     "@tailwindcss/forms": "^0.5.7",
+    "@unovis/ts": "^1.4.4",
+    "@unovis/vue": "^1.4.4",
     "@vee-validate/zod": "^4.13.2",
     "@vueuse/core": "^12.0.0",
     "class-variance-authority": "^0.7.0",

From 0813dac79093d056165e516dd2b1f163b1b03d11 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 10 Dec 2024 12:33:43 +0100
Subject: [PATCH 039/125] feat: Add dashboard draft with individual components

---
 components/custom-ui/dashboard/Dashboard.vue | 367 +++++++++++++++++++
 components/navigation/top.vue                |  34 +-
 pages/user/dashboard.vue                     |  13 +
 server/api/v3/events.get.ts                  |   7 +
 server/routes/callback.get.ts                |   2 +-
 5 files changed, 400 insertions(+), 23 deletions(-)
 create mode 100644 components/custom-ui/dashboard/Dashboard.vue
 create mode 100644 pages/user/dashboard.vue

diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
new file mode 100644
index 00000000..ba014f73
--- /dev/null
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -0,0 +1,367 @@
+<script lang="ts" setup>
+import {
+  IconAffiliate,
+  IconBell,
+  IconDeviceDesktopAnalytics,
+  IconHome,
+  IconChartLine,
+  IconFingerprint,
+  IconId,
+  IconLogout,
+  IconMenu2,
+  IconPackage,
+  IconPolygon,
+  IconSearch,
+  IconUserCircle,
+} from '@tabler/icons-vue'
+
+import {Badge} from '@/components/ui/badge'
+import {Button} from '@/components/ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import {Input} from '@/components/ui/input'
+import {Sheet, SheetContent, SheetTrigger} from '@/components/ui/sheet'
+
+import OverviewStats from "~/components/custom-ui/dashboard/OverviewStats.vue";
+import FileExplorer from "~/components/custom-ui/dashboard/FileExplorer.vue";
+import Realms from "~/components/custom-ui/dashboard/Realms.vue";
+import DummyAnalytics from "~/components/custom-ui/dashboard/DummyAnalytics.vue";
+import ResourceCreation from "~/components/custom-ui/ResourceCreation.vue";
+import RealmSwitcher from "~/components/custom-ui/dashboard/RealmSwitcher.vue";
+import Notifications from "~/components/custom-ui/dashboard/Notifications.vue";
+import Profile from "~/components/custom-ui/user/Profile.vue";
+import Tokens from "~/components/custom-ui/user/Tokens.vue";
+import Proxies from "~/components/custom-ui/user/Proxies.vue";
+
+import {notifis, v3_events} from './data-notifications'
+import type {User} from '~/composables/api_wrapper'
+import {toast} from "~/components/ui/toast";
+import {useStats} from "~/composables/Stats";
+import {useRealms} from "~/composables/Realms";
+import {useGroups} from "~/composables/Groups";
+import {useProjects} from "~/composables/Projects";
+import {useTokens} from "~/composables/Tokens";
+import {useEvents} from "~/composables/Events";
+
+
+const props = defineProps<{
+  user: User | undefined
+}>()
+const user = toRef(() => props.user)
+watchEffect(() => {
+  console.log('[Dashboard Component]', `User got updated: ${user.value ? user.value.id : 'Undefined'}`)
+})
+
+const route = useRoute()
+const tab = route.query.tab
+
+const endpoints = ref([]) //await fetchEndpoints() TODO
+
+const {events, refreshEvents} = await useEvents([user], user)
+const {realms, refreshRealms} = await useRealms()
+const {groups, refreshGroups} = await useGroups()
+const {tokens, refreshTokens} = await useTokens()
+const {projects, refreshProjects} = await useProjects()
+const {stats, refreshStats} = await useStats([]) //await useStats([realms, groups, projects])
+
+watch(realms, () => console.log('[Dashboard] Realms updated to value:', realms.value))
+watch(groups, () => console.log('[Dashboard] Groups updated to value:', groups.value))
+watch(events, () => console.log('[Dashboard] Events updated to value:', events.value))
+
+
+EventBus.on('updateStats', async () => await refreshStats())
+EventBus.on('updateRealms', async () => await refreshRealms())
+EventBus.on('updateGroups', async () => await refreshGroups())
+EventBus.on('updateProjects', async () => await refreshProjects())
+
+
+//const notifications = ref(3)
+const unreadEvents = computed(() => events.value ? events.value.filter((n: any) => !n.read).length : 0)
+
+/* ----- DASHBOARD CONTENT ----- */
+const currentContent: Ref<string> = ref(tab as string || 'OverviewStats')
+const contentComponents = {
+  'Notifications': {component: Notifications},
+  'OverviewStats': {component: OverviewStats},
+  'FileExplorer': {component: FileExplorer},
+  'ResourceCreation': {component: ResourceCreation},
+  'Realms': {component: Realms},
+  'DummyAnalytics': {component: DummyAnalytics},
+  'Profile': {component: Profile},
+  'Tokens': {component: Tokens,},
+  'Proxies': {component: Proxies},
+}
+const componentProps = computed(() => {
+  switch (currentContent.value) {
+    case 'OverviewStats':
+      return stats.value
+    case 'Events':
+      return {
+        events: v3_events,
+        navCollapsedSize: 4
+      }
+    case 'FileExplorer':
+      return {
+        resources: projects.value
+      }
+    case 'ResourceCreation':
+      return {
+        realms: realms.value,
+        groups: groups.value
+      }
+    case 'Profile':
+      return {
+        user: user.value,
+        groups: groups.value
+      }
+    case 'Tokens':
+      return {
+        tokens: tokens.value
+      }
+    case 'Proxies':
+      return {
+        userEndpoints: [], //TODO
+        endpoints: [], //TODO
+      }
+    default:
+      return {}
+  }
+})
+
+/* ----- EXTERNAL TAB SWITCH ----- */
+function setTab(tabId: string) {
+  currentContent.value = tabId
+}
+
+EventBus.on('setTab', (tabId: string) => setTab(tabId))
+/* ----- END EXTERNAL TAB SWITCH ----- */
+
+/* ----- REALM SWITCH ----- */
+function setRealm(realmId: string) {
+  //ToDo: Re-fetch things
+  console.log('[Dashboard Component]', `Switched realm to: ${realmId}`)
+  toast({
+    title: 'Info',
+    description: `Switched realm to: ${realmId}`
+  })
+}
+
+EventBus.on('switchRealm', (realmId: string) => setRealm(realmId))
+/* ----- END REALM SWITCH ----- */
+
+const spinBaby = ref(false)
+EventBus.on('spinStart', () => spinBaby.value = true)
+EventBus.on('spinStop', () => spinBaby.value = false)
+</script>
+
+<template>
+  <!--<div class="grid h-full min-h-[calc(100vh-64px)] w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">-->
+  <div class="grid h-full min-h-[calc(100vh-64px)] w-full md:grid-cols-[220px_1fr]">
+    <div class="hidden border-r bg-aruna-bg/90 md:block">
+      <div class="flex h-full max-h-screen flex-col gap-2">
+        <div class="flex items-center justify-between border-b px-4 lg:h-[60px] lg:px-6">
+          <div class="flex space-x-2">
+            <img alt="Aruna logo"
+                 class="inline w-24 h-auto align-middle hover:cursor-pointer"
+                 src="/imgs/aruna_dark.webp"
+                 @click="currentContent = 'OverviewStats'"/>
+          </div>
+
+          <div class="flex relative">
+            <Button disabled
+                    key="Notifications"
+                    :class="[{'bg-muted': currentContent === 'Notifications', 'text-primary': currentContent === 'Notifications' }]"
+                    class="ml-auto h-8 w-8"
+                    size="icon"
+                    variant="outline"
+                    @click="currentContent = 'Notifications'">
+              <IconBell class="h-4 w-4"/>
+              <span class="sr-only">Toggle notifications</span>
+            </Button>
+            <Badge v-if="unreadEvents > 0"
+                   class="absolute animate-bounce -bottom-1 -right-1 -mb-1 -mr-1 bg-red-400 hover:bg-red-400 text-white text-xs font-bold w-4 h-4 flex items-center justify-center rounded-full">
+              {{ unreadEvents }}
+            </Badge>
+          </div>
+        </div>
+
+        <!-- Side Navigation -->
+        <div class="flex-1">
+          <nav class="grid items-start px-2 text-sm font-medium lg:px-4">
+            <button key="OverviewStats"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'OverviewStats'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent='OverviewStats'">
+              <IconHome class="h-4 w-4"/>
+              Overview
+            </button>
+
+            <button key="Realms"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'Realms'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'Realms'">
+              <IconAffiliate class="h-5 w-5"/>
+              Realms
+            </button>
+
+            <button key="DummyStats"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'DummyStats'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'DummyStats'">
+              <IconDeviceDesktopAnalytics class="h-4 w-4"/>
+              Stats
+            </button>
+
+            <button key="DummyAnalytics"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'DummyAnalytics'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'DummyAnalytics'">
+              <IconChartLine class="h-4 w-4"/>
+              Analytics
+            </button>
+
+            <button key="FileExplorer"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'FileExplorer'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'FileExplorer'">
+              <IconPackage class="h-5 w-5"/>
+              Resources
+            </button>
+
+            <Separator class="my-4 bg-slate-300 dark:bg-slate-400"/>
+
+            <button key="Profile"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'Profile'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'Profile'">
+              <IconId class="h-4 w-4"/>
+              Profile
+            </button>
+
+            <button key="Tokens"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'Tokens'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'Tokens'">
+              <IconFingerprint class="h-4 w-4"/>
+              Tokens
+            </button>
+
+            <button key="Proxies"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'Proxies'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'Proxies'">
+              <IconPolygon class="h-4 w-4"/>
+              Data Proxies
+            </button>
+          </nav>
+        </div>
+        <!-- End Side Navigation -->
+      </div>
+    </div>
+
+    <!-- Sidebar for mobile devices -->
+    <div class="flex flex-col">
+      <header class="flex items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+        <Sheet>
+          <SheetTrigger as-child>
+            <Button class="shrink-0 md:hidden"
+                    size="icon"
+                    variant="outline">
+              <IconMenu2 class="h-5 w-5"/>
+              <span class="sr-only">Toggle navigation menu</span>
+            </Button>
+          </SheetTrigger>
+          <SheetContent class="flex flex-col" side="left">
+            <nav class="grid gap-2 text-lg font-medium">
+              <a class="flex items-center gap-2 text-lg font-semibold"
+                 href="/user/dashboard">
+                <img alt="Aruna logo"
+                     class="inline w-24 h-auto align-middle"
+                     src="/imgs/aruna_dark.webp"/>
+              </a>
+              <a class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                 href="#">
+                <IconHome class="h-5 w-5"/>
+                Overview
+              </a>
+              <a class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                 href="#">
+                <IconPackage class="h-5 w-5"/>
+                Resources
+                <Badge class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
+                  6
+                </Badge>
+              </a>
+              <a class="mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 text-muted-foreground hover:text-foreground"
+                 href="#">
+                <IconChartLine class="h-5 w-5"/>
+                Analytics
+              </a>
+            </nav>
+          </SheetContent>
+        </Sheet>
+
+        <div class="flex flex-col sm:flex-row w-full space-x-4">
+          <ClientOnly fallbackTag="span">
+            <RealmSwitcher :realms="realms" class="flex"/>
+            <template #fallback>
+              <Skeleton class="h-auto w-[300px]"/>
+            </template>
+          </ClientOnly>
+          <div class="relative flex">
+            <IconSearch class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"/>
+            <Input type="search"
+                   placeholder="Search Resources"
+                   class="w-[400px] appearance-none bg-background pl-8 shadow-none "/>
+          </div>
+        </div>
+        <DropdownMenu>
+          <ClientOnly fallbackTag="span">
+            <DropdownMenuTrigger as-child>
+              <Button class="rounded-full" size="icon" variant="secondary">
+                <IconUserCircle class="h-5 w-5"/>
+                <span class="sr-only">Toggle user menu</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <template #fallback>
+              <Skeleton class="h-9 w-9 rounded-full"/>
+            </template>
+          </ClientOnly>
+          <DropdownMenuContent align="end">
+            <DropdownMenuLabel v-if="user" class="text-md text-aruna-700">
+              {{ user.first_name }} {{ user.last_name }}
+            </DropdownMenuLabel>
+            <DropdownMenuLabel v-if="user" class="text-sm text-slate-500">
+              {{ user.email }}
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator v-if="user"/>
+            <DropdownMenuItem>
+              <a v-if="!user" href="/auth/login?provider=local">
+                <IconLogout class="inline-flex h-4 w-4 me-2"/>
+                Login
+              </a>
+              <a v-else href="/auth/logout">
+                <IconLogout class="inline-flex h-4 w-4 me-2"/>
+                Logout
+              </a>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </header>
+
+      <main class="flex flex-1 flex-col gap-4 lg:gap-6 bg-[#080d1f]/[.9]">
+        <KeepAlive>
+          <component :is="contentComponents[currentContent].component" v-bind="componentProps"/>
+        </KeepAlive>
+      </main>
+    </div>
+    <!-- END Sidebar for mobile devices -->
+
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/navigation/top.vue b/components/navigation/top.vue
index 5bc2d753..ef804187 100644
--- a/components/navigation/top.vue
+++ b/components/navigation/top.vue
@@ -43,6 +43,12 @@ onMounted(() => forceRefresh.value += 1);
             Search
           </NuxtLink>
 
+          <NuxtLink v-if="user_state"
+              class="font-medium text-aruna-text-accent focus:outline-none focus:ring-1 focus:ring-aruna-highlight"
+              to="/user/dashboard">
+            Dashboard
+          </NuxtLink>
+
           <NuxtLink
               class="font-medium text-aruna-text-accent focus:outline-none focus:ring-1 focus:ring-aruna-highlight"
               to="/news">
@@ -91,39 +97,23 @@ onMounted(() => forceRefresh.value += 1);
           <div>
             <DropdownMenu v-if="user_state">
               <DropdownMenuTrigger class="px-2 py-1 flex items-center justify-center gap-x-2 rounded-sm border border-aruna-text-accent">
-                {{ user_state?.displayName }}
+                {{ user_state?.first_name }} {{ user_state?.last_name }}
                 <IconMenu2 class="size-5"/>
               </DropdownMenuTrigger>
               <DropdownMenuContent class="bg-aruna-muted">
-                <DropdownMenuLabel v-if="user_state && user_state.attributes?.globalAdmin"
+                <DropdownMenuLabel v-if="user_state"
                                    class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
-                  <NuxtLink to="/user/admin"
-                            class="flex items-center gap-x-2">
-                    <IconUserUp class="size-4"/>
-                    Administration
-                  </NuxtLink>
-                </DropdownMenuLabel>
-
-                <DropdownMenuSeparator v-if="user_state && user_state.attributes?.globalAdmin"/>
-
-                <DropdownMenuLabel class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
-                  <NuxtLink to="/user/account"
+                  <NuxtLink to="/user/dashboard"
                             class="flex items-center gap-x-2">
                     <IconUserScan class="size-4"/>
-                    Account
-                  </NuxtLink>
-                </DropdownMenuLabel>
-                <DropdownMenuLabel class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
-                  <NuxtLink to="/user/resources"
-                            class="flex items-center gap-x-2">
-                    <IconBucket class="size-4"/>
-                    Resources
+                    Dashboard
                   </NuxtLink>
                 </DropdownMenuLabel>
 
                 <DropdownMenuSeparator/>
 
-                <DropdownMenuLabel class="flex sm:hidden hover:bg-aruna-fg focus:bg-aruna-fg">
+                <DropdownMenuLabel v-if="user_state"
+                                   class="flex sm:hidden hover:bg-aruna-fg focus:bg-aruna-fg">
                   <NuxtLink to="/explore"
                             class="flex items-center gap-x-2">
                     <IconSearch class="flex-shrink-0 size-4"/>
diff --git a/pages/user/dashboard.vue b/pages/user/dashboard.vue
new file mode 100644
index 00000000..005c2489
--- /dev/null
+++ b/pages/user/dashboard.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import Dashboard from "~/components/custom-ui/dashboard/Dashboard.vue";
+import type {User} from "~/composables/api_wrapper";
+
+/* ----- GLOBAL USER ----- */
+const user: Ref<User | undefined> = inject('userRef', ref(undefined))
+/* ----- END GLOBAL USER ----- */
+</script>
+<template>
+  <Dashboard :user="user"/>
+  <!-- TODO: Skeleton -->
+  <Footer/>
+</template>
\ No newline at end of file
diff --git a/server/api/v3/events.get.ts b/server/api/v3/events.get.ts
index 0a3fda9f..f92d54a7 100644
--- a/server/api/v3/events.get.ts
+++ b/server/api/v3/events.get.ts
@@ -5,10 +5,17 @@ export default defineEventHandler(async event => {
   const baseUrl = useRuntimeConfig().serverHostUrl
   const fetchUrl = `${baseUrl}/api/v3/info/events`
 
+  console.log('[GetEventsRoute]', query)
+
   return await $fetch<GetEventsResponse>(fetchUrl, {
     headers: {
       'Authorization': `Bearer ${event.context.access_token}`
     },
     query: query
+  }).then(response => {
+    if (response) {
+      console.log('[GetEventsRoute]', response)
+      return response
+    }
   })
 })
\ No newline at end of file
diff --git a/server/routes/callback.get.ts b/server/routes/callback.get.ts
index 4e73c81d..16b384c5 100644
--- a/server/routes/callback.get.ts
+++ b/server/routes/callback.get.ts
@@ -104,5 +104,5 @@ export default defineEventHandler(async event => {
       }
   )
 
-  return sendRedirect(event, "/") // "/user/dashboard"
+  return sendRedirect(event, "/user/dashboard")
 })
\ No newline at end of file

From 1c9cc507677652f69df41559bbddd6406d304553 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 10 Dec 2024 12:40:19 +0100
Subject: [PATCH 040/125] chore: Remove deprecated pages

---
 pages/objects/create.vue | 955 ---------------------------------------
 pages/user/account.vue   | 498 --------------------
 pages/user/admin.vue     | 148 ------
 pages/user/resources.vue |  82 ----
 4 files changed, 1683 deletions(-)
 delete mode 100644 pages/objects/create.vue
 delete mode 100644 pages/user/account.vue
 delete mode 100644 pages/user/admin.vue
 delete mode 100644 pages/user/resources.vue

diff --git a/pages/objects/create.vue b/pages/objects/create.vue
deleted file mode 100644
index 88da8062..00000000
--- a/pages/objects/create.vue
+++ /dev/null
@@ -1,955 +0,0 @@
-<script setup lang="ts">
-import {IconExclamationCircle, IconPlus, IconTrash} from '@tabler/icons-vue'
-import {
-  v2DataClass,
-  v2InternalRelationVariant,
-  v2KeyValueVariant,
-  v2RelationDirection,
-  v2ResourceVariant,
-  type v2Author,
-  type v2DataEndpoint,
-  type v2GetS3CredentialsUserTokenResponse,
-  type v2KeyValue,
-  type v2Object,
-  type v2Project,
-  type v2Relation,
-} from '~/composables/aruna_api_json'
-
-import {
-  toRelationDirectionStr,
-  toRelationVariantStr,
-  toResourceTypeStr,
-  fromDataClassStr,
-  fromResourceTypeStr
-} from "~/composables/enum_conversions"
-import {OBJECT_REGEX, PROJECT_REGEX, S3_KEY_REGEX, ULID_REGEX} from "~/utils/constants"
-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 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";
-
-// Router to navigate back
-const router = useRouter()
-const route = useRoute()
-const licenses = await fetchLicenses()
-
-const createdResource: Ref<v2Project | undefined> = ref(undefined)
-const creationError: Ref<string | undefined> = ref(undefined)
-
-// ----- Query Parameter ----- //
-function getParamSingle(param_name: string) {
-  const value = route.query[param_name];
-  if (Array.isArray(value)) {
-    return value[0];
-  } else if (typeof value === 'string') {
-    return value;
-  }
-}
-
-function setQueryParams() {
-  if (route.query) {
-    const resourceTypeParam = getParamSingle("type");
-    if (resourceTypeParam) {
-      resourceType.value = fromResourceTypeStr(resourceTypeParam, v2ResourceVariant.RESOURCE_VARIANT_PROJECT);
-    }
-    const dataClassParam = getParamSingle("class");
-    if (dataClassParam) {
-      resourceDataclass.value = fromDataClassStr(dataClassParam);
-    }
-    const parentIdParam = getParamSingle("parentId");
-    if (parentIdParam) {
-      resourceParentId.value = parentIdParam;
-    }
-    const relIdParam = getParamSingle("relId");
-    const relTypeParam = getParamSingle("relType");
-    if (relIdParam && relTypeParam) {
-      addRelation({
-        internal: {
-          resourceId: relIdParam,
-          resourceVariant: fromResourceTypeStr(relTypeParam),
-          definedVariant: v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_METADATA,
-          direction: v2RelationDirection.RELATION_DIRECTION_OUTBOUND
-        }
-      } as v2Relation)
-    }
-  }
-}
-onMounted(() => setQueryParams());
-
-// ----- Form validation ----- //
-const validState = ref(false)
-
-const validationStates = ref(new Map<string, boolean>())
-validationStates.value.set('resourceName', false)
-validationStates.value.set('resourceDescription', true)
-validationStates.value.set('resourceParentId', true)
-validationStates.value.set('dataUpload', true)
-
-function validate() {
-  validState.value = checkInputValidationStates()
-}
-
-function checkInputValidationStates(): boolean {
-  let states = validationStates.value.values()
-  while (true) {
-    let result = states.next();
-    if (result.done) break;
-    if (!result.value) {
-      return false
-    }
-  }
-  return true
-}
-
-// ----- Input bindings ----- //
-/* Resource name */
-const resourceName = ref('')
-const resourceNameError: Ref<string | undefined> = ref('Please enter a resource name')
-
-watch(resourceName, () => validateResourceName())
-
-function validateResourceName() {
-  if (resourceName.value.length > 0) {
-    switch (resourceType.value) {
-      case v2ResourceVariant.RESOURCE_VARIANT_PROJECT: {
-        const valid = PROJECT_REGEX.test(resourceName.value)
-        validationStates.value.set('resourceName', valid)
-        resourceNameError.value = valid ? undefined : "Project names can only contain lowercase alphanumeric characters and hyphens."
-        break
-      }
-      case v2ResourceVariant.RESOURCE_VARIANT_COLLECTION:
-      case v2ResourceVariant.RESOURCE_VARIANT_DATASET: {
-        const valid = S3_KEY_REGEX.test(resourceName.value)
-        validationStates.value.set('resourceName', valid)
-        resourceNameError.value = valid ? undefined : 'Collection/Dataset names can only contain the following characters [a-zA-z0-9!-_.*\'()]'
-        break
-      }
-      case v2ResourceVariant.RESOURCE_VARIANT_OBJECT: {
-        const valid = OBJECT_REGEX.test(resourceName.value)
-        validationStates.value.set('resourceName', valid)
-        resourceNameError.value = valid ? undefined : 'Object names can only contain the following characters [a-zA-z0-9!-_.*\'()/]'
-        break
-      }
-    }
-  } else {
-    validationStates.value.set('resourceName', false)
-    resourceNameError.value = "Please enter a resource name."
-  }
-  validate()
-}
-
-/* Resource title */
-const resourceTitle = ref('')
-
-/* Resource description */
-const textAreaElement = ref(null)
-const resourceDescription = ref('')
-const charsLeft = ref(1024)
-watch(resourceDescription, () => {
-  charsLeft.value = 1024 - resourceDescription.value.length
-  validationStates.value.set("resourceDescription", charsLeft.value >= 0)
-  validate()
-})
-
-/* ----- Resource type ----- */
-const resourceType = ref(v2ResourceVariant.RESOURCE_VARIANT_PROJECT)
-
-watch(resourceType, () => {
-  switch (resourceType.value) {
-    case v2ResourceVariant.RESOURCE_VARIANT_PROJECT: {
-      validationStates.value.set('resourceParentId', true) // No parent id needed
-      validationStates.value.set('dataUpload', true)  // No data upload
-      dataUpload.value = null
-      break
-    }
-    case v2ResourceVariant.RESOURCE_VARIANT_COLLECTION:
-    case v2ResourceVariant.RESOURCE_VARIANT_DATASET: {
-      validationStates.value.set('dataUpload', true) // No data upload
-      dataUpload.value = null
-      validateParentId()
-      break
-    }
-    case v2ResourceVariant.RESOURCE_VARIANT_OBJECT: {
-      if (dataUpload.value === null) {
-        validationStates.value.set('dataUpload', false) // Upload needed for Object creation
-      }
-      validateParentId()
-    }
-  }
-  validateResourceName()
-  validate()
-})
-
-/* Resource parent ID */
-const resourceParentId = ref('')
-const resourceParent: Ref<ObjectInfo | undefined> = ref(undefined)
-const resourceParentIdError: Ref<string | undefined> = ref('Please enter a valid parent id')
-
-watch(resourceParentId, async () => await validateParentId())
-
-async function validateParentId() {
-  // Check if input field is empty
-  if (resourceParentId.value.length > 0) {
-    // Check if input is a valid ULID
-    const valid = ULID_REGEX.test(resourceParentId.value)
-    validationStates.value.set('resourceParentId', valid)
-    resourceParentIdError.value = valid ? undefined : 'Parent id is not a valid ULID'
-
-    if (valid) {
-      // Check if resource exists
-      await fetchResource(resourceParentId.value)
-          .then(response => {
-            if (response?.resource && response?.permission) {
-              resourceParent.value = toObjectInfo(response.resource, response.permission)
-            } else {
-              resourceParent.value = undefined
-              validationStates.value.set('resourceParentId', false)
-              resourceParentIdError.value = 'Resource with this id does not exist'
-            }
-          })
-          .catch(() => {
-            resourceParent.value = undefined
-            validationStates.value.set('resourceParentId', false)
-            resourceParentIdError.value = 'Parent fetch failed with error'
-          })
-    }
-  } else {
-    validationStates.value.set('resourceParentId', false)
-    resourceParentIdError.value = 'Please enter a valid parent id'
-  }
-  validate()
-}
-
-/* Resource data class */
-const resourceDataclass = ref(v2DataClass.DATA_CLASS_PUBLIC)
-
-/* Resource licenses */
-const metaLicense = ref('AllRightsReserved')
-const dataLicense = ref('AllRightsReserved')
-
-/* Upload */
-const dataUpload: Ref<File | null> = ref(null)
-const metaUpload: Ref<File | null> = ref(null)
-
-const uploadProgress = ref(0)
-
-function updateProgress(current: number, total: number | undefined) {
-  if (!total) return 0
-
-  const floatProgress = current / total * 100
-  uploadProgress.value = +floatProgress.toFixed(2)
-}
-
-watch(dataUpload, (value) => {
-  validationStates.value.set('dataUpload', dataUpload.value !== null)
-  resourceName.value = value?.name ? value.name : resourceName.value
-  validate()
-})
-
-function dataFileChange(e) {
-  let files: FileList = (e.target as HTMLInputElement).files || (e.dataTransfer as DataTransfer).files;
-  if (files.length > 0) {
-    dataUpload.value = files.item(0)
-    uploadProgress.value = 0
-  } else {
-    dataUpload.value = null
-  }
-}
-
-/* ----- Resource Authors ----- */
-const authors: Ref<Map<string, v2Author>> = ref(new Map())
-const authorDialogOpen = ref(false);
-
-function addAuthor(author: v2Author) {
-  authors.value.set(getUniqueId(), author)
-}
-
-function removeAuthor(key: string) {
-  authors.value.delete(key)
-}
-
-/* ----- 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)
-}
-
-function removeKeyValue(key: string) {
-  keyValues.value.delete(key)
-}
-
-/* ----- End Resource key-values ----- */
-
-/* ----- Resource relations ----- */
-const relations: Ref<Map<string, v2Relation>> = ref(new Map())
-
-function addRelation(relation: v2Relation) {
-  relations.value.set(getUniqueId(), relation)
-}
-
-function removeRelation(key: string) {
-  relations.value.delete(key)
-}
-
-/* ----- End Resource relations ----- */
-
-// ----- Helper functions -----
-let id = 0
-
-function getUniqueId(): string {
-  return id++ + '';
-}
-
-function textAreaAutoHeight(domElement: HTMLTextAreaElement | null, offset = 0) {
-  if (domElement) {
-    domElement.style.height = 'auto'
-    domElement.style.height = `${domElement.scrollHeight + offset}px`
-  }
-}
-
-function openModal(modalId: string) {
-  let element = document.querySelector(`#${modalId}`) as HTMLElement
-  import('preline').then(({HSOverlay}) => {
-    HSOverlay.open(element)
-  })
-}
-
-async function submit() {
-  // Better safe than sorry.
-  createdResource.value = undefined
-  creationError.value = undefined
-
-  // Create resource in server
-  switch (resourceType.value) {
-    case v2ResourceVariant.RESOURCE_VARIANT_PROJECT: {
-      await createProject({
-        name: resourceName.value,
-        title: resourceTitle.value,
-        description: resourceDescription.value,
-        keyValues: Array.from(keyValues.value.values()),
-        relations: Array.from(relations.value.values()),
-        dataClass: resourceDataclass.value,
-        preferredEndpoint: '', //TODO
-        metadataLicenseTag: metaLicense.value,
-        defaultDataLicenseTag: dataLicense.value,
-        authors: Array.from(authors.value.values())
-      }).then(project => {
-        console.log(project)
-        createdResource.value = project
-        creationError.value = undefined
-      }).catch(error => {
-        console.error(error)
-        creationError.value = error.toString()
-        createdResource.value = undefined
-      })
-      // Display created resource or error
-      openModal('object-display')
-      break
-    }
-    case v2ResourceVariant.RESOURCE_VARIANT_COLLECTION: {
-      await createCollection({
-        name: resourceName.value,
-        title: resourceTitle.value,
-        description: resourceDescription.value,
-        keyValues: Array.from(keyValues.value.values()),
-        relations: Array.from(relations.value.values()),
-        dataClass: resourceDataclass.value,
-        projectId: resourceParentId.value,
-        metadataLicenseTag: metaLicense.value,
-        defaultDataLicenseTag: dataLicense.value,
-        authors: Array.from(authors.value.values())
-      }).then(collection => {
-        console.log(collection)
-        createdResource.value = collection
-        creationError.value = undefined
-      }).catch(error => {
-        console.log(error)
-        creationError.value = error.toString()
-        createdResource.value = undefined
-      })
-      // Display created resource or error
-      openModal('object-display')
-      break
-    }
-    case v2ResourceVariant.RESOURCE_VARIANT_DATASET: {
-      await createDataset({
-        name: resourceName.value,
-        title: resourceTitle.value,
-        description: resourceDescription.value,
-        keyValues: Array.from(keyValues.value.values()),
-        relations: Array.from(relations.value.values()),
-        dataClass: resourceDataclass.value,
-        projectId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_PROJECT ? resourceParentId.value : undefined,
-        collectionId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_COLLECTION ? resourceParentId.value : undefined,
-        metadataLicenseTag: metaLicense.value,
-        defaultDataLicenseTag: dataLicense.value,
-        authors: Array.from(authors.value.values())
-      }).then(dataset => {
-        console.log(dataset)
-        createdResource.value = dataset
-        creationError.value = undefined
-      }).catch(error => {
-        console.log(error)
-        creationError.value = error.toString()
-        createdResource.value = undefined
-      })
-      // Display created resource or error
-      openModal('object-display')
-      break
-    }
-    case v2ResourceVariant.RESOURCE_VARIANT_OBJECT: {
-      if (dataUpload.value !== null) {
-        // Display created resource or error
-        openModal('object-display')
-
-        // Promise chain time
-        await createObject({
-          name: resourceName.value,
-          title: resourceTitle.value,
-          description: resourceDescription.value,
-          keyValues: Array.from(keyValues.value.values()),
-          relations: Array.from(relations.value.values()),
-          dataClass: resourceDataclass.value,
-          projectId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_PROJECT ? resourceParentId.value : undefined,
-          collectionId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_COLLECTION ? resourceParentId.value : undefined,
-          datasetId: resourceParent.value?.variant === v2ResourceVariant.RESOURCE_VARIANT_DATASET ? resourceParentId.value : undefined,
-          metadataLicenseTag: metaLicense.value,
-          dataLicenseTag: dataLicense.value,
-          authors: Array.from(authors.value.values())
-        }).then(async stagingObject => {
-          // Set created resource and reset error
-          createdResource.value = stagingObject
-          creationError.value = undefined
-
-          // Take any full sync dataproxy of the object and fetch credentials
-          const endpoint: v2DataEndpoint | undefined = createdResource.value.endpoints?.find(ep => !ep.partialSync)
-          return [stagingObject, await getUserS3Credentials(endpoint?.id)]
-        }).then(async ([stagingObject, response]) => {
-          // Fetch any fullsync bucket and key for upload
-          let [bucket, key] = await getObjectBucketAndKey((stagingObject as v2Object).id)
-
-          // Create S3 client for staging object
-          const s3client = new S3Client({
-            endpoint: (response as v2GetS3CredentialsUserTokenResponse).s3EndpointUrl,
-            region: 'region-one',
-            credentials: {
-              accessKeyId: (response as v2GetS3CredentialsUserTokenResponse).s3AccessKey,
-              secretAccessKey: (response as v2GetS3CredentialsUserTokenResponse).s3SecretKey
-            }
-          } as S3ClientConfig)
-          /*
-          // Add CORS header to client requests [broken]
-          s3client.middlewareStack.add(
-              (next, context) => (args) => {
-                args.request.headers["access-control-request-headers"] = "access-control-allow-origin"
-                return next(args)
-              },
-              {
-                step: "build",
-              },
-          );
-          */
-
-          return [s3client, bucket, key]
-        }).then(async ([s3client, bucket, key]) => {
-          return [s3client, bucket, key, await waitForSync((s3client as S3Client), (bucket as string), (key as string))]
-        }).then(async ([s3client, bucket, key, synced]) => {
-          // Check if sync was successful
-          if (!synced)
-            throw Error('Object sync to DataProxy timed out')
-
-          const upload = new Upload({
-            client: s3client as S3Client,
-            queueSize: 4, // 4 uploads concurrently
-            partSize: dataUpload.value.size > 5 * 1024 * 1024 * 1024 ? 50 * 1024 * 1024 : 5 * 1024 * 1024, // 5MiB parts up to 5GiB; then 50MiB parts
-            leavePartsOnError: false, // Remove uploaded parts on error
-            params: {
-              Bucket: bucket as string,
-              Key: key as string,
-              Body: dataUpload.value
-            },
-          })
-
-          // Update progress bar value
-          upload.on("httpUploadProgress", progress =>
-              updateProgress(progress.loaded ? progress.loaded : 0, progress.total))
-
-          // Do something after upload succeeded
-          return await upload.done() //.then(() => console.log('Upload succeeded'))
-        }).then(response => {
-          console.log(`Upload completed with status code: ${response.$metadata.httpStatusCode}`)
-        }).catch(error => {
-          // Delete Object if already created
-          if (createdResource.value?.id)
-            deleteObject(createdResource.value.id, false).catch(error => console.log(error))
-
-          // Set error; unset created resource
-          console.log(error)
-          creationError.value = error.toString()
-          createdResource.value = undefined
-        })
-      } else {
-        // Display error toast that no file was selected for upload.
-      }
-    }
-
-      // Emit user update event
-      EventBus.emit('updateUser')
-  }
-}
-
-async function waitForSync(s3client: S3Client, bucket: string, key: string): Promise<boolean> {
-  // Define head object command
-  const command = new HeadObjectCommand({
-    Bucket: bucket,
-    Key: key
-  })
-
-  // Wait until object is synced
-  let synced = false
-  let tryCounter = 0
-  while (!synced) {
-    try {
-      tryCounter++
-      await s3client.send(command)
-          .then(response => {
-            console.log(response.$metadata.httpStatusCode)
-            synced = response.$metadata.httpStatusCode === 200
-          })
-    } catch (error: any) {
-      //console.error(error)
-      if (error.message.includes('NetworkError')) {
-        throw Error('CORS Error.<br/>Please check the CORS rules of your projects.')
-
-      } else if (tryCounter > 10) {
-        console.error('Wait for sync retries exhausted')
-        throw Error('Wait for sync retries exhausted')
-      }
-
-      await sleep(Math.pow(2, tryCounter))
-    }
-  }
-
-  return synced // Still false if try counter was exhausted
-}
-
-const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay))
-</script>
-
-<template>
-  <NavigationTop/>
-
-
-  <div class="min-h-[calc(100vh-110px)]">
-  <div
-      class="flex flex-col space-x-2 space-y-2 md:max-w-screen-2xl sm:mx-1 md:mx-auto my-10 p-4 border border-aruna-text/50 rounded-md bg-aruna-bg/90">
-    <h1 class="text-3xl font-bold text-aruna-text-accent">
-      Resource creation
-    </h1>
-
-    <Separator class="my-10 bg-aruna-text"/>
-
-    <div class="flex flex-col md:flex-row">
-      <div class="flex flex-row md:flex-col px-4 grow">
-        <!-- Resource Name Input -->
-        <label for="hs-validation-name-error"
-               class="block text-lg font-medium mb-2 text-aruna-text-accent">Name</label>
-        <div class="relative">
-          <input type="text"
-                 v-model="resourceName"
-                 id="hs-validation-name-error"
-                 name="hs-validation-name-error"
-                 :class="[{'border-destructive focus:border-destructive': !validationStates.get('resourceName')}]"
-                 class="py-3 px-4 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-highlight focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none"
-                 :disabled="dataUpload !== null"
-                 aria-describedby="hs-validation-name-error-helper"
-                 placeholder="Name of the resource" required>
-          <div :class="{ 'hidden': validationStates.get('resourceName') }"
-               class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-            <IconExclamationCircle class="flex-shrink-0 size-4 text-destructive"/>
-          </div>
-        </div>
-        <p :class="{ 'hidden': validationStates.get('resourceName') }" class="text-sm text-destructive mt-2"
-           id="hs-validation-name-error-helper">{{ resourceNameError }}
-        </p>
-        <!-- End Resource Name Input -->
-        <!-- Resource Title Input -->
-        <label for="display-name-input"
-               class="block mt-6 text-lg font-medium mb-2 text-aruna-text-accent">Title</label>
-        <input type="text"
-               v-model="resourceTitle"
-               id="display-name-input"
-               class="py-3 px-4 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-highlight focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none"
-               placeholder="Display name for the resource">
-        <!-- End Resource Title Input -->
-        <!-- Resource Description Input -->
-        <div class="relative">
-          <label for="hs-textarea-ex-1"
-                 class="block mt-6 text-lg font-medium mb-2 text-aruna-text-accent">Description</label>
-          <textarea id="hs-textarea-ex-1"
-                    v-model="resourceDescription"
-                    ref="textAreaElement"
-                    @input="textAreaAutoHeight(textAreaElement, 3)"
-                    :class="[{'border-destructive focus:border-destructive focus:ring-destructive': !validationStates.get('resourceDescription')}]"
-                    class="p-4 pb-12 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-highlight focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none"
-                    placeholder="A concise description of the resource"></textarea>
-          <!-- Toolbar -->
-          <div class="absolute bottom-px inset-x-px p-2 rounded-b-md bg-aruna-muted">
-            <hr class="my-2 border-aruna-text"/>
-            <div class="flex justify-end items-center">
-              <!-- Button Group -->
-              <div class="flex items-center">
-                <span :key="charsLeft"
-                      :class="[{ 'text-destructive': !validationStates.get('resourceDescription') }]"
-                      class="block text-sm text-aruna-text">{{ charsLeft }} characters left.</span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- End Description Input -->
-
-        <label for="resource-type-radio-label"
-               class="block mt-6 text-lg font-medium mb-2 text-aruna-text-accent">Resource Type</label>
-        <ul class="flex flex-col sm:flex-row">
-          <li v-for="(value, idx) in [v2ResourceVariant.RESOURCE_VARIANT_PROJECT, v2ResourceVariant.RESOURCE_VARIANT_COLLECTION, v2ResourceVariant.RESOURCE_VARIANT_DATASET, v2ResourceVariant.RESOURCE_VARIANT_OBJECT]"
-              class="inline-flex items-center gap-x-2.5 py-3 px-4 text-aruna-text-accent text-sm font-medium bg-aruna-muted border border-aruna-text/50 -mt-px first:rounded-t-sm first:mt-0 last:rounded-b-md sm:-ms-px sm:mt-0 sm:first:rounded-se-none sm:first:rounded-es-md sm:last:rounded-es-none sm:last:rounded-se-md">
-            <div class="relative flex items-start w-full">
-              <div class="flex items-center h-5">
-                <input type="radio"
-                       :id="`resource-type-radio-${idx}`"
-                       name="resource-type-radio"
-                       v-model="resourceType"
-                       :value="value"
-                       class="shrink-0 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
-              </div>
-              <label :for="`resource-type-radio-${idx}`"
-                     class="ms-3 block w-full text-sm font-bold text-aruna-text-accent">
-                {{ toResourceTypeStr(value) }}
-              </label>
-            </div>
-          </li>
-        </ul>
-
-        <!-- Resource Parent -->
-        <div v-if="resourceType !== v2ResourceVariant.RESOURCE_VARIANT_PROJECT">
-          <label for="parent-id-input"
-                 class="block mt-6 text-lg font-medium mb-2 text-aruna-text-accent">
-            Parent ID
-          </label>
-          <div class="flex rounded-md">
-            <span
-                class="px-4 inline-flex items-center min-w-fit rounded-s-md border border-e-0 border-aruna-text/50 bg-aruna-fg text-sm text-aruna-text-accent">
-              {{ resourceParent ? toResourceTypeStr(resourceParent.variant) : 'Unspecified' }}
-            </span>
-            <div class="flex grow relative">
-              <input type="text"
-                     v-model="resourceParentId"
-                     id="parent-id-input"
-                     name="parent-id-input"
-                     :class="[{'border-destructive ': !validationStates.get('resourceParentId') }]"
-                     class="py-3 px-4 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-highlight focus:ring-1 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none rounded-s-none"
-                     aria-describedby="hs-validation-name-error-helper">
-              <div :class="{ 'hidden': validationStates.get('resourceParentId') }"
-                   class="absolute inset-y-0 end-0 flex items-center pointer-events-none pe-3">
-                <IconExclamationCircle class="flex-shrink-0 size-4 text-destructive"/>
-              </div>
-            </div>
-          </div>
-          <p :class="{ 'hidden': validationStates.get('resourceParentId') }" class="text-sm text-destructive mt-2"
-             id="hs-validation-name-error-helper">{{ resourceParentIdError }}</p>
-        </div>
-        <!-- End Resource Parent -->
-
-        <label for="name-input-label"
-               class="block mt-6 text-lg font-medium mb-2 text-aruna-text-accent">
-          Data Class
-        </label>
-        <ul class="flex flex-col sm:flex-row">
-          <li v-for="(value, idx) in [v2DataClass.DATA_CLASS_PUBLIC, v2DataClass.DATA_CLASS_PRIVATE, v2DataClass.DATA_CLASS_WORKSPACE, v2DataClass.DATA_CLASS_CONFIDENTIAL]"
-              class="inline-flex items-center gap-x-2.5 py-3 px-4 text-aruna-text-accent text-sm font-medium bg-aruna-muted border border-aruna-text/50 -mt-px first:rounded-t-sm first:mt-0 last:rounded-b-md sm:-ms-px sm:mt-0 sm:first:rounded-se-none sm:first:rounded-es-md sm:last:rounded-es-none sm:last:rounded-se-md">
-            <div class="relative flex items-start w-full">
-              <div class="flex items-center h-5">
-                <input type="radio"
-                       :id="`resource-dataclass-radio-${idx}`"
-                       name="hs-horizontal-list-group-item-radio"
-                       v-model="resourceDataclass"
-                       :value="value"
-                       class="shrink-0 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"
-                       v-bind:checked="value === v2DataClass.DATA_CLASS_PUBLIC">
-              </div>
-              <label :for="`resource-dataclass-radio-${idx}`"
-                     class="ms-3 block w-full text-sm font-bold text-aruna-text-accent">
-                {{ toDataClassStr(value) }}
-              </label>
-            </div>
-          </li>
-        </ul>
-
-        <div class="flex flex-row space-x-4 mt-6">
-          <div class="flex flex-col basis-1/2">
-            <label for="meta-license-select"
-                   class="block text-lg font-medium mb-2 text-aruna-text-accent">
-              Metadata License
-            </label>
-            <select id="meta-license-select"
-                    v-model="metaLicense"
-                    class="py-3 px-4 pe-9 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none">
-              <option v-for="license in licenses"
-                      :value="license.tag"
-                      v-bind:selected="license.tag === 'AllRightsReserved'">{{ license.name }}
-              </option>
-            </select>
-          </div>
-          <div class="flex flex-col grow">
-            <label for="data-license-select"
-                   class="block text-lg font-medium mb-2 text-aruna-text-accent">
-              Data License
-            </label>
-            <select id="data-license-select"
-                    v-model="dataLicense"
-                    class="py-3 px-4 pe-9 block w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none">
-              <option v-for="license in licenses"
-                      :value="license.tag"
-                      v-bind:selected="license.tag === 'AllRightsReserved'">{{ license.name }}
-              </option>
-            </select>
-          </div>
-        </div>
-
-        <form class="mt-6" v-if="resourceType === v2ResourceVariant.RESOURCE_VARIANT_OBJECT">
-          <h3 class="block mb-2 text-lg font-medium text-aruna-text-accent">
-            Upload (Choose file or Drag 'n Drop)
-          </h3>
-          <label for="large-file-input" class="sr-only">Choose file or Drag 'n Drop</label>
-          <input type="file"
-                 v-on:change="dataFileChange"
-                 name="large-file-input"
-                 id="large-file-input"
-                 class="block w-full border border-aruna-text/50 shadow-sm rounded-md bg-aruna-muted text-aruna-text text-sm focus:z-10 focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none
-                        file:bg-aruna-fg
-                        file:text-aruna-text-accent
-                        file:border-0
-                        file:me-4
-                        file:p-4">
-        </form>
-      </div>
-
-      <div class="flex px-4 grow flex-row md:flex-col overflow-x-auto">
-        <div class="flex flex-row mb-2 justify-start items-center">
-          <label for="key-values-input"
-                 class="block text-lg font-medium text-aruna-text-accent">Authors</label>
-            <button
-              type="button"
-              @click="authorDialogOpen = true"
-              class="ms-4 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent 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>
-        </div>
-
-        <div class="-m-1.5 overflow-x-auto">
-          <div class="p-1.5 min-w-full inline-block align-middle">
-            <div class="overflow-hidden border border-aruna-text/50">
-              <table class="min-w-full divide-y divide-aruna-text">
-                <thead class="bg-aruna-muted">
-                <tr>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Name
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Email
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Orcid
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
-                    Actions
-                  </th>
-                </tr>
-                </thead>
-                <tbody class="divide-y divide-aruna-text/50">
-                <tr v-for="[key, value] in authors">
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ value.firstName }} {{ value.lastName }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ value.email }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ value.orcid }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-center">
-                    <button type="button"
-                            @click="removeAuthor(key)"
-                            class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-destructive focus:z-10 focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
-                      <IconTrash class="flex-shrink-0 size-6"/>
-                    </button>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-
-        <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="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>
-          <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">
-          <div class="p-1.5 min-w-full inline-block align-middle">
-            <div class="overflow-hidden border border-aruna-text/50">
-              <table class="min-w-full divide-y divide-aruna-text">
-                <thead class="bg-aruna-muted">
-                <tr>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">Key
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">Value
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">Type
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
-                    Actions
-                  </th>
-                </tr>
-                </thead>
-                <tbody class="divide-y divide-aruna-text/50">
-                <tr v-for="[key, value] in keyValues">
-                  <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-aruna-text">
-                    {{ key }}
-                  </td>
-                  <td v-html="prettyDisplayJson(value.value)"
-                      class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text"></td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ toKeyValueVariantStr(value.variant) }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-center text-sm font-medium">
-                    <button type="button"
-                            @click="removeKeyValue(key)"
-                            class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-destructive focus:z-10 focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
-                      <IconTrash class="flex-shrink-0 size-6"/>
-                    </button>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-
-        <div class="flex flex-row mb-2 justify-start items-center mt-6 ">
-          <label for="key-values-input"
-                 class="block text-lg font-medium text-gray-300">Additional Relations</label>
-          <button type="button"
-                  class="ms-4 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent hover:text-aruna-highlight hover:border-aruna-highlight focus:outline-none disabled:opacity-50 disabled:pointer-events-none"
-                  data-hs-overlay="#relation-add">
-            <IconPlus class="flex-shrink-0 size-4"/>
-          </button>
-        </div>
-
-        <div class="-m-1.5 overflow-x-auto">
-          <div class="p-1.5 min-w-full inline-block align-middle">
-            <div class="overflow-hidden border border-aruna-text/50">
-              <table class="min-w-full divide-y divide-aruna-text">
-                <thead class="bg-aruna-muted">
-                <tr>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Resource Id
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Resource Type
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Relation Type
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                    Direction
-                  </th>
-                  <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
-                    Actions
-                  </th>
-                </tr>
-                </thead>
-                <tbody class="divide-y divide-aruna-text/50">
-                <tr v-for="[key, value] in relations">
-                  <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-aruna-text">
-                    {{ value.internal?.resourceId }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ toResourceTypeStr(value.internal?.resourceVariant) }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ toRelationVariantStr(value.internal?.definedVariant) }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                    {{ toRelationDirectionStr(value.internal?.direction) }}
-                  </td>
-                  <td class="px-6 py-2 whitespace-nowrap text-center text-sm font-medium">
-                    <button type="button"
-                            @click="removeRelation(key)"
-                            class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-destructive focus:z-10 focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
-                      <IconTrash class="flex-shrink-0 size-6"/>
-                    </button>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-row grow justify-end">
-      <Button type="button"
-              v-bind:disabled="!validState"
-              @click="submit"
-              variant="outline"
-              class="px-4 py-6 inline-flex text-md rounded-md border border-aruna-highlight bg-transparent text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
-        Create Resource
-      </Button>
-    </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;
-                  }"/>
-
-  <ModalRelation modalId="relation-add" @add-relation="addRelation"/>
-  <ModalObjectDisplay modalId="object-display" :object="createdResource" :progress="uploadProgress"
-                      :errorMsg="creationError"/>
-  <Footer/>
-</template>
\ No newline at end of file
diff --git a/pages/user/account.vue b/pages/user/account.vue
deleted file mode 100644
index 50630707..00000000
--- a/pages/user/account.vue
+++ /dev/null
@@ -1,498 +0,0 @@
-<script setup lang="ts">
-import {
-  IconBuildingWarehouse,
-  IconCheck,
-  IconDiscountCheck,
-  IconExclamationCircle,
-  IconLoader,
-  IconPlant,
-  IconPokeball,
-  IconTrash,
-  IconUserScan,
-  IconX
-} from '@tabler/icons-vue'
-import type {v2Endpoint, v2Token, v2User} from '~/composables/aruna_api_json'
-import {storagemodelsv2ComponentStatus} from "~/composables/aruna_api_json";
-import {deleteUserToken} from "~/composables/api_wrapper";
-import EventBus from "~/composables/EventBus";
-import {useToast} from "~/components/ui/toast";
-import CredentialsDialog from "~/components/custom-ui/dialog/CredentialsDialog.vue";
-import TokenDialog from "~/components/custom-ui/dialog/TokenDialog.vue";
-import {DateFormatter} from "@internationalized/date";
-import {Button} from "~/components/ui/button";
-import {h} from "vue";
-
-// Toast for notifications
-const {toast} = useToast()
-
-// DateFormatter for token expiry dates
-const df = new DateFormatter((navigator && navigator.language) || "de-DE", {
-  dateStyle: 'long',
-})
-
-// Constants
-const arunaUser: Ref<v2User | undefined> = inject('userRef', ref(undefined))
-const endpoints: v2Endpoint[] | undefined = await fetchEndpoints()
-
-watch(arunaUser, () => {
-  console.log("User got updated")
-  // Refresh lists
-  console.log(arunaUser.value?.attributes?.tokens)
-})
-
-const get_user = () => {
-  if (arunaUser.value === undefined || typeof arunaUser.value === "string") {
-    return undefined
-  }
-  return arunaUser.value
-}
-
-function is_active(): boolean {
-  if (arunaUser.value === undefined || typeof arunaUser.value === "string") {
-    return false
-  } else if (arunaUser.value.active) {
-    return arunaUser.value.active
-  }
-  return false
-}
-
-function getTokens(): v2Token[] {
-  if (arunaUser.value === undefined || typeof arunaUser.value === "string") {
-    return []
-  } else {
-    if (arunaUser.value.attributes?.tokens) {
-      return arunaUser.value.attributes?.tokens
-    }
-  }
-  return []
-}
-
-async function deleteToken(tokenId: string) {
-  await deleteUserToken(tokenId)
-  EventBus.emit("updateUser")
-}
-
-function hasEndpoint(endpointId: string | undefined): boolean {
-  if (arunaUser.value === undefined || typeof arunaUser.value === "string") {
-    return false
-  } else {
-    let found = false
-    if (arunaUser.value?.attributes?.trustedEndpoints) {
-      for (const trustedEndpoint of arunaUser.value.attributes.trustedEndpoints) {
-        if (trustedEndpoint === endpointId) {
-          found = true
-          break
-        }
-      }
-    }
-    return found
-  }
-}
-
-/* ----- CREDENTIALS DIALOG ----- */
-const enum Dialogs {
-  TokenDialog,
-  CredentialsDialog
-}
-
-type EndpointCredentials = {
-  endpointId: string,
-  endpointName?: string,
-  endpointHost: string,
-  accessKeyId: string,
-  accessSecret: string,
-}
-
-const credentials: Ref<EndpointCredentials | undefined> = ref(undefined)
-const loading: Ref<string | undefined> = ref(undefined)
-
-const credentialsDialogOpen = ref(false)
-const tokenDialogOpen = ref(false)
-
-function setVisibility(dialog: Dialogs, visible: boolean): void {
-  switch (dialog) {
-    case Dialogs.TokenDialog:
-      tokenDialogOpen.value = visible
-      break
-    case Dialogs.CredentialsDialog:
-      credentialsDialogOpen.value = visible
-      break
-    default:
-      console.log(`Dialog ${dialog} does not exist here.`)
-  }
-}
-
-function clear() {
-  credentials.value = undefined
-  credentialsDialogOpen.value = false
-}
-
-async function createS3Credentials(endpoint: v2Endpoint) {
-  // Indicate async loading in progress (disable buttons)
-  loading.value = `${endpoint.id}_create`
-  // Create S3 credentials
-  await createUserS3Credentials(endpoint.id)
-      .then(response => {
-        loading.value = undefined // Re-activate buttons
-        if (response) {
-          credentials.value = {
-            endpointId: endpoint.id,
-            endpointName: endpoint.name,
-            endpointHost: response.s3EndpointUrl,
-            accessKeyId: response.s3AccessKey,
-            accessSecret: response.s3SecretKey
-          } as EndpointCredentials
-          setVisibility(Dialogs.CredentialsDialog, true)
-        } else {
-          // Empty remaining credentials and close if open
-          credentials.value = undefined
-          setVisibility(Dialogs.CredentialsDialog, false)
-
-          // Notify with error
-          toast({
-            title: 'Error',
-            description: 'Received empty response. If this problem persists please contact an administrator.',
-            variant: 'destructive',
-            duration: 10000,
-          })
-        }
-
-        EventBus.emit('updateUser')
-      }).catch(error => {
-        loading.value = undefined // Re-activate buttons
-        // Empty remaining credentials
-        credentials.value = undefined
-
-        // Notify with error
-        toast({
-          title: 'Error',
-          //description: 'Something went wrong. If this problem persists please contact an administrator.',
-          description: error.message,
-          variant: 'destructive',
-          duration: 10000,
-        })
-      })
-}
-
-async function getS3Credentials(endpoint: v2Endpoint) {
-// Indicate async loading in progress (disable buttons)
-  loading.value = `${endpoint.id}_create`
-  // Fetch existing S3 credentials
-  return await getUserS3Credentials(endpoint.id)
-      .then(response => {
-        loading.value = undefined // Re-activate buttons
-        if (response) {
-          credentials.value = {
-            endpointId: endpoint.id,
-            endpointName: endpoint.name,
-            endpointHost: response.s3EndpointUrl,
-            accessKeyId: response.s3AccessKey,
-            accessSecret: response.s3SecretKey
-          } as EndpointCredentials
-          setVisibility(Dialogs.CredentialsDialog, true)
-        } else {
-          // Empty remaining credentials and close if open
-          credentials.value = undefined
-          setVisibility(Dialogs.CredentialsDialog, false)
-
-          // Notify with error
-          toast({
-            title: 'Error',
-            description: 'Received empty response. If this problem persists please contact an administrator.',
-            variant: 'destructive',
-            duration: 10000,
-          })
-        }
-      }).catch(error => {
-        loading.value = undefined // Re-activate buttons
-        // Empty remaining credentials
-        credentials.value = undefined
-
-        // Notify with error
-        toast({
-          title: 'Error',
-          //description: 'Something went wrong. If this problem persists please contact an administrator.',
-          description: error.message,
-          variant: 'destructive',
-          duration: 10000,
-        })
-      })
-}
-
-/* ----- END CREDENTIALS DIALOG ----- */
-
-/* ----- ALTERNATIVE CALLBACK RESPONSE -----*/
-const route = useRoute()
-const add_response = route.query['add']
-
-if (add_response === 'success') {
-  toast({
-    description: h('div',
-        {class: 'flex space-x-2 items-center justify-center'},
-        [
-          h(IconPlant, {class: 'flex-shrink-0 size-5 text-green-400'}),
-          h('span',
-              {class: 'text-fuchsia-50'},
-              ['Successfully added the login to your Aruna account.'])
-        ]),
-    duration: 10000
-  })
-} else if (add_response === 'failure') {
-  toast({
-    description: h('div',
-        {class: 'flex space-x-2 items-center justify-center'},
-        [
-          h(IconExclamationCircle, {class: 'flex-shrink-0 size-5 text-destructive'}),
-          h('span',
-              {class: 'text-aruna-text-accent'},
-              ['Adding the login to your Aruna account failed. Please try again later.'])
-        ]),
-    duration: 10000
-  })
-}
-/* ----- END ALTERNATIVE CALLBACK RESPONSE -----*/
-</script>
-
-<template>
-  <NavigationTop/>
-
-  <CredentialsDialog :initial-open="credentialsDialogOpen"
-                     :with-button="false"
-                     :host-id="credentials?.endpointId || ''"
-                     :host-name="credentials?.endpointName || ''"
-                     :host-url="credentials?.endpointHost || ''"
-                     :access-key-id="credentials?.accessKeyId || ''"
-                     :access-secret="credentials?.accessSecret || ''"
-                     @update:open="clear"/>
-
-  <TokenDialog :initial-open="tokenDialogOpen"
-               :with-button="false"
-               @update:open="setVisibility(Dialogs.TokenDialog, false)"/>
-
-  <div class="min-h-[calc(100vh-110px)]">
-    <div class="md:container sm:mx-1 md:mx-auto mt-[10vh] p-4 border border-aruna-text rounded-md bg-aruna-bg/90">
-      <div class="border-b border-aruna-text/50">
-        <nav class="flex space-x-6" aria-label="Tabs" role="tablist">
-          <button type="button"
-                  class="hs-tab-active:font-semibold hs-tab-active:border-aruna-highlight hs-tab-active:text-aruna-highlight py-4 px-1 inline-flex items-center gap-x-2 border-b border-transparent text-sm whitespace-nowrap text-aruna-text disabled:opacity-50 disabled:pointer-events-none :focus:outline-none focus:ring-1 focus:rounded-sm focus:ring-aruna-highlight active"
-                  id="tabs-with-icons-item-1"
-                  data-hs-tab="#tabs-with-icons-1"
-                  aria-controls="tabs-with-icons-1"
-                  role="tab">
-            <IconUserScan class="flex-shrink-0"/>
-            Profile
-          </button>
-          <button type="button"
-                  class="hs-tab-active:font-semibold hs-tab-active:border-aruna-highlight hs-tab-active:text-aruna-highlight py-4 px-1 inline-flex items-center gap-x-2 border-b border-transparent text-sm whitespace-nowrap text-aruna-text disabled:opacity-50 disabled:pointer-events-none :focus:outline-none focus:ring-1 focus:rounded-sm focus:ring-aruna-highlight"
-                  id="tabs-with-icons-item-2"
-                  data-hs-tab="#tabs-with-icons-2"
-                  aria-controls="tabs-with-icons-2"
-                  role="tab">
-            <IconPokeball class="flex-shrink-0 size-4"/>
-            Tokens
-          </button>
-          <button type="button"
-                  class="hs-tab-active:font-semibold hs-tab-active:border-aruna-highlight hs-tab-active:text-aruna-highlight py-4 px-1 inline-flex items-center gap-x-2 border-b border-transparent text-sm whitespace-nowrap text-aruna-text disabled:opacity-50 disabled:pointer-events-none :focus:outline-none focus:ring-1 focus:rounded-sm focus:ring-aruna-highlight"
-                  id="tabs-with-icons-item-3"
-                  data-hs-tab="#tabs-with-icons-3"
-                  aria-controls="tabs-with-icons-3"
-                  role="tab">
-            <IconBuildingWarehouse class="flex-shrink-0 size-4"/>
-            Data Proxies
-          </button>
-        </nav>
-      </div>
-
-      <div class="mt-3">
-        <div id="tabs-with-icons-1"
-             role="tabpanel"
-             aria-labelledby="tabs-with-icons-item-1">
-          <div v-if="!is_active()"
-               class="my-6 text-center bg-yellow-800/10 border border-yellow-900 text-yellow-500 text-sm rounded-lg p-4"
-               role="alert">
-            <span class="font-bold">
-              Info:</span> Your account is currently not active. We will activate your account as soon as possible.
-          </div>
-
-          <div class="flex flex-col gap-y-4 lg:flex-row justify-between">
-            <Card class="basis-1/5 bg-aruna-muted border-aruna-text/50">
-              <CardHeader class="text-center">
-                <CardTitle class="text-xl text-aruna-text-accent">User Id</CardTitle>
-                <CardDescription class="text-lg text-aruna-text">{{ get_user()?.id || '-' }}</CardDescription>
-              </CardHeader>
-            </Card>
-
-            <Card class="basis-1/5 bg-aruna-muted border-aruna-text/50">
-              <CardHeader class="text-center">
-                <CardTitle class="text-xl text-aruna-text-accent">Display Name</CardTitle>
-                <CardDescription class="text-lg text-aruna-text">{{ get_user()?.displayName || '-' }}</CardDescription>
-              </CardHeader>
-            </Card>
-
-            <Card class="basis-1/5 bg-aruna-muted border-aruna-text/50">
-              <CardHeader class="text-center">
-                <CardTitle class="text-xl text-aruna-text-accent">Email</CardTitle>
-                <CardDescription class="text-lg text-aruna-text">
-                  {{ get_user()?.email ? get_user()?.email : "No email provided" }}
-                </CardDescription>
-              </CardHeader>
-            </Card>
-
-            <Card class="basis-1/5 bg-aruna-muted border-aruna-text/50">
-              <CardHeader class="text-center">
-                <CardTitle class="text-xl text-aruna-text-accent">Active</CardTitle>
-                <CardDescription class="flex text-lg items-center justify-center">
-                  <IconCheck v-if="is_active()" class="flex-shrink-0 size-8 text-green-600"/>
-                  <IconX v-else class="flex-shrink-0 text-red-600"/>
-                </CardDescription>
-              </CardHeader>
-            </Card>
-          </div>
-
-          <Separator class="my-8 bg-aruna-text"/>
-
-          <Card class="max-w-md mx-auto bg-aruna-muted border-aruna-text/50">
-            <CardHeader class="text-center">
-              <CardTitle class="text-xl text-aruna-text-accent">Connect AAI</CardTitle>
-              <CardDescription class="flex flex-col">
-                <p>Connect your LifeScience RI accounts to the Aruna account you're currently logged in with.</p>
-                <Button variant="outline"
-                        class="inline-flex shrink mx-auto mt-4 px-4 border-aruna-text/50 text-lg hover:bg-aruna-fg">
-                  <a href="/auth/login?provider=lifescience&add_idp=true" class="flex">
-                    <img src="/imgs/ls-ri.webp"
-                         alt="LifeScience Login"
-                         class="h-6 mr-2"/>
-                    Connect LifeScience RI
-                  </a>
-                </Button>
-              </CardDescription>
-            </CardHeader>
-          </Card>
-
-
-        </div>
-
-        <div id="tabs-with-icons-2" class="hidden" role="tabpanel" aria-labelledby="tabs-with-icons-item-2">
-          <div class="flex flex-col">
-            <div class="-m-1.5 overflow-x-auto">
-              <div class="p-1.5 min-w-full inline-block align-middle">
-                <div class="overflow-hidden">
-                  <table class="min-w-full divide-y divide-aruna-text/50">
-                    <thead>
-                    <tr>
-                      <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">
-                        ID
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">
-                        Name
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">
-                        Last
-                        Used
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">
-                        Expiry
-                        date
-                      </th>
-                      <th scope="col"
-                          class="px-6 py-3 text-center text-md font-medium text-aruna-text-accent uppercase">Actions
-                      </th>
-                    </tr>
-                    </thead>
-
-                    <tbody v-if="getTokens().length > 0" class="divide-y divide-aruna-text">
-                    <tr v-for="token in getTokens()" class="hover:bg-aruna-fg">
-                      <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-aruna-text">
-                        {{ token.id }}
-                      </td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-aruna-text">
-                        {{ token.name }}
-                      </td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-aruna-text">
-                        Not yet implemented
-                      </td>
-                      <td class="px-6 py-4 whitespace-nowrap text-sm text-aruna-text">
-                        {{ token.expiresAt ? df.format(new Date(token.expiresAt)) : 'Expiry date is undefined' }}
-                      </td>
-
-                      <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
-                        <button v-if="token.id" type="button"
-                                @click="deleteToken(token.id)"
-                                class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-red-700 hover:border hover:border-red-700 focus:z-10 focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
-                          <IconTrash/>
-                        </button>
-                      </td>
-                    </tr>
-                    </tbody>
-                    <tbody v-else>
-                    <tr class="hover:bg-aruna-fg">
-                      <td colspan="5" class="px-6 py-4 whitespace-nowrap text-center text-sm text-aruna-text-accent">
-                        <strong>Looks like you currently have no active tokens!</strong>
-                      </td>
-                    </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="flex flex-row justify-end">
-            <Button @click="setVisibility(Dialogs.TokenDialog, true)"
-                    variant="outline"
-                    class="mt-2 text-aruna-highlight border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent text-md rounded-sm">
-              Create Token
-            </Button>
-          </div>
-        </div>
-
-        <div id="tabs-with-icons-3" class="hidden" role="tabpanel" aria-labelledby="tabs-with-icons-item-3">
-          <div class="flex flex-auto flex-wrap gap-x-4 gap-y-4">
-            <div v-for="endpoint in endpoints"
-                 class="flex flex-col space-y-1 bg-aruna-muted border border-aruna-text/50 shadow-sm rounded-xl p-4 md:p-5 text-aruna-text">
-              <div class="flex flex-row font-bold items-center justify-between text-aruna-highlight text-lg">
-                <span>{{ endpoint.name }}</span>
-                <IconDiscountCheck class="lex-shrink-0 size-6 ms-4 text-green-700" v-if="hasEndpoint(endpoint.id)"/>
-              </div>
-              <div class="flex flex-row text-aruna-text-accent">
-                <span class="font-bold me-2 text-aruna-text">ID:</span>
-                {{ endpoint.id }}
-              </div>
-              <div class="flex flex-row text-aruna-text-accent">
-                <span class="font-bold me-2 text-aruna-text">Variant:</span>
-                {{ toEndpointVariantStr(endpoint.epVariant) }}
-              </div>
-              <div class="flex flex-row text-aruna-text-accent">
-                <span class="font-bold me-2 text-aruna-text">Public:</span>
-                {{ endpoint.isPublic }}
-              </div>
-              <div class="flex flex-row text-aruna-text-accent">
-                <span class="font-bold me-2 text-aruna-text">Status:</span>
-                {{ toComponentStatusStr(endpoint.status) }}
-              </div>
-
-              <div class="flex flex-row justify-end space-x-4">
-                <Button v-if="endpoint.id && hasEndpoint(endpoint.id)"
-                        :disabled="loading"
-                        @click="getS3Credentials(endpoint)"
-                        class="mt-2 bg-transparent border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent text-aruna-highlight text-md rounded-sm">
-                  <IconLoader v-if="loading === endpoint.id+'_get'" class="w-4 h-4 mr-2 animate-spin"/>
-                  Get Credentials
-                </Button>
-                <Button variant="outline"
-                        v-if="endpoint.id && endpoint.status === storagemodelsv2ComponentStatus.COMPONENT_STATUS_AVAILABLE"
-                        :disabled="loading"
-                        @click="createS3Credentials(endpoint)"
-                        class="mt-2 bg-transparent border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent text-aruna-highlight text-md rounded-sm">
-                  <IconLoader v-if="loading === endpoint.id+'_create'" class="w-4 h-4 mr-2 animate-spin"/>
-                  Create Credentials
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <Footer/>
-</template>
\ No newline at end of file
diff --git a/pages/user/admin.vue b/pages/user/admin.vue
deleted file mode 100644
index 6cc4a225..00000000
--- a/pages/user/admin.vue
+++ /dev/null
@@ -1,148 +0,0 @@
-<script setup lang="ts">
-import {IconCheck, IconMinus, IconPlus, IconSearch, IconX} from '@tabler/icons-vue'
-import type {v2User} from '~/composables/aruna_api_json'
-
-const users: Ref<v2User[] | undefined> = ref(undefined)
-const forceRefresh = ref(0)
-
-async function fillUsers() {
-  users.value = await fetchUsers()
-
-  // Sort by admin status, then name and then id (just in case)
-  if (users.value && users.value.every(user => user.attributes?.globalAdmin !== undefined)) {
-    users.value.sort((a, b) => {
-      if (a.attributes?.globalAdmin && !b.attributes?.globalAdmin)
-        return -1
-      else if (!a.attributes?.globalAdmin && b.attributes?.globalAdmin)
-        return 1
-      else if (a.displayName && b.displayName)
-        return a.displayName.localeCompare(b.displayName)
-      else
-        return (a.id || '').localeCompare(b.id || '')
-    })
-  }
-
-  forceRefresh.value += 1
-}
-
-async function deactivate(userId: string) {
-  await deactivateUser(userId)
-  await fillUsers()
-}
-
-async function activate(userId: string) {
-  await activateUser(userId)
-  await fillUsers()
-}
-
-onMounted(async () => await fillUsers())
-</script>
-
-<template>
-  <NavigationTop/>
-
-  <div class="min-h-[calc(100vh-110px)]">
-    <div class="md:container sm:mx-1 md:mx-auto mt-10 p-4 border border-aruna-text rounded-lg bg-aruna-bg/90">
-      <h1 class="text-3xl font-bold text-white">
-        User Administration
-      </h1>
-      <Separator class="bg-aruna-text my-4"/>
-
-      <div class="flex flex-col">
-        <div class="-m-1.5 overflow-x-auto">
-          <div class="p-1.5 min-w-full inline-block align-middle">
-            <div class="overflow-hidden">
-              <table class="min-w-full divide-y divide-aruna-text">
-                <thead>
-                <tr>
-                  <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">ID</th>
-                  <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">Name</th>
-                  <th scope="col" class="px-6 py-3 text-start text-md font-medium text-aruna-text-accent uppercase">Email</th>
-                  <th scope="col" class="px-6 py-3 text-center text-md font-medium text-aruna-text-accent uppercase">Status</th>
-                  <th scope="col" class="px-6 py-3 text-center text-md font-medium text-aruna-text-accent uppercase">Actions</th>
-                </tr>
-                </thead>
-
-                <tbody v-if="users" class="divide-y divide-aruna-text/50">
-                <tr v-for="user in users"
-                    :key="forceRefresh"
-                    class="hover:bg-aruna-fg">
-                  <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-aruna-text">
-                    {{ user.id }}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-aruna-text">
-                    {{ user.displayName }}
-                  </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-sm text-aruna-text">
-                    {{ user.email ? user.email : "No email provided" }}
-                  </td>
-                  <td
-                      class="flex justify-center space-x-2 px-6 py-4 whitespace-nowrap text-center content-center text-sm text-aruna-text">
-                    <span v-if="user.attributes?.globalAdmin"
-                          class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium text-red-500 bg-red-800/30 ">
-                      Admin
-                    </span>
-                    <span v-else
-                          class="inline-flex items-center gap-x-1.5 py-1.5 px-3 rounded-full text-xs font-medium text-aruna-highlight bg-aruna-highlight/50">
-                      User
-                    </span>
-
-                    <span v-if="user.active"
-                          class="py-1.5 px-3 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-teal-100 text-teal-500 bg-teal-500/10">
-                      <IconCheck class="flex-shrink-0 size-4"/>
-                      Active
-                    </span>
-                    <span v-else
-                          class="py-1 px-1.5 inline-flex items-center gap-x-1 text-xs font-medium rounded-full bg-red-100 text-red-500 bg-red-500/10">
-                      <IconX class="flex-shrink-0 size-3"/>
-                      Disabled
-                    </span>
-                  </td>
-
-                  <td class="px-6 py-4 whitespace-nowrap text-center text-sm font-medium">
-                    <Button variant="ghost"
-                            disabled
-                            class="me-2 p-1 rounded-sm border border-aruna-text text-aruna-text disabled:border-aruna-text/50 disabled:text-aruna-text/50">
-                      <IconSearch/>
-                    </Button>
-                    <TooltipProvider>
-                      <Tooltip>
-                        <TooltipTrigger as-child>
-                          <Button v-if="user.active && user.id"
-                                  variant="ghost"
-                                  @click="deactivate(user.id)"
-                                  class="me-2 p-1 rounded-sm border border-aruna-text text-aruna-text disabled:border-aruna-text/50 disabled:text-aruna-text/50">
-                            <IconMinus class="flex-shrink-0"/>
-                          </Button>
-                          <Button v-if="!user.active && user.id"
-                                  variant="ghost"
-                                  @click="activate(user.id)"
-                                  class="me-2 p-1 rounded-sm border border-aruna-text text-aruna-text disabled:border-aruna-text/50 disabled:text-aruna-text/50">
-                            <IconPlus class="flex-shrink-0"/>
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent class="rounded-sm border-aruna-text bg-aruna-muted text-aruna-text">
-                          <p>{{ user.active && user.id ? 'Deactivate' : 'Activate' }} this user</p>
-                        </TooltipContent>
-                      </Tooltip>
-                    </TooltipProvider>
-                  </td>
-                </tr>
-                </tbody>
-                <tbody v-else>
-                <tr>
-                  <td colspan="5" class="px-6 py-4 whitespace-nowrap text-center text-md text-aruna-text-accent">
-                    <strong>Looks like no users are available!</strong>
-                  </td>
-                </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <Footer/>
-</template>
\ No newline at end of file
diff --git a/pages/user/resources.vue b/pages/user/resources.vue
deleted file mode 100644
index faff0a43..00000000
--- a/pages/user/resources.vue
+++ /dev/null
@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import {IconArrowLeft} from '@tabler/icons-vue';
-import {modelsv2Status, type v2ResourceWithPermission, type v2User} from "~/composables/aruna_api_json";
-
-// Check refresh and access before navigation
-
-//TODO: GetUserResources
-const userRef: Ref<v2User | undefined> = inject('userRef', ref(undefined))
-let resources: v2ResourceWithPermission[] = []
-const display: Ref<v2ResourceWithPermission[]> = ref([])
-
-const displayDeleted = ref(false)
-const forceRefresh = ref(0)
-watch(displayDeleted, () => {
-  console.log(displayDeleted)
-  fillDisplay()
-})
-
-async function fetchResources() {
-  // Wait for user injection
-  while (userRef.value === undefined) {
-    await sleep(100)
-  }
-  resources = await fetchUserResources(userRef.value)
-}
-
-function fillDisplay() {
-  if (resources) {
-    display.value = !displayDeleted.value ? resources.filter(ele => {
-      // Currently assuming only projects were fetched
-      return ele.resource?.project?.status !== modelsv2Status.STATUS_DELETED
-    }) : resources
-  } else {
-    display.value = []
-  }
-  forceRefresh.value++
-}
-
-onMounted(async () => {
-  await fetchResources()
-  fillDisplay()
-})
-
-// Used for back link to last page in navigation history
-const router = useRouter()
-const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay))
-</script>
-
-<template>
-  <NavigationTop/>
-
-  <div class="min-h-[calc(100vh-110px)]">
-    <div class="flex md:container sm:mx-1 md:mx-auto my-10 p-4 border border-aruna-text/50 rounded-md bg-muted/40">
-      <div class="flex flex-col grow">
-        <div class="flex flex-row grow justify-between">
-          <div class="flex items-center space-x-2">
-            <Switch @update:checked="(v) => displayDeleted = v"
-                    id="display-deleted"
-                    class="border border-aruna-text/50 data-[state=checked]:bg-aruna-highlight data-[state=unchecked]:bg-aruna-text/50"/>
-            <Label for="display-deleted">Display deleted resources</Label>
-          </div>
-          <NuxtLink to="/objects/create"
-                    class="py-1 px-2 mt-2 inline-flex gap-x-2 text-md rounded-md bg-transparent border border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
-            Create new resource
-          </NuxtLink>
-        </div>
-
-        <Separator class="my-5 bg-gray-500"/>
-
-        <div class="flex flex-col grow">
-          <div :key="forceRefresh" v-for="resource in display" class="flex flex-row grow">
-            <CardResource v-if="resource.resource" :resource="resource.resource"/>
-          </div>
-          <div class="flex flex-col grow" v-if="resources.length == 0">
-            Seems like you do not own any resources.
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <Footer/>
-</template>
\ No newline at end of file

From a99a98eb717dd9928666f0f3e65256cbe5cc23d2 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 10 Dec 2024 12:57:16 +0100
Subject: [PATCH 041/125] chore: Add static dummy data

---
 .../custom-ui/dashboard/data-circular.ts      | 404 ++++++++++++++++++
 .../custom-ui/dashboard/data-notifications.ts |  45 ++
 2 files changed, 449 insertions(+)
 create mode 100644 components/custom-ui/dashboard/data-circular.ts
 create mode 100644 components/custom-ui/dashboard/data-notifications.ts

diff --git a/components/custom-ui/dashboard/data-circular.ts b/components/custom-ui/dashboard/data-circular.ts
new file mode 100644
index 00000000..01a8645f
--- /dev/null
+++ b/components/custom-ui/dashboard/data-circular.ts
@@ -0,0 +1,404 @@
+import {GraphNodeShape, type GraphPanelConfig} from '@unovis/ts'
+import {
+  storagemodelsv2ComponentStatus,
+  type v2Endpoint,
+  type v2EndpointHostConfig,
+  v2EndpointHostVariant,
+  v2EndpointVariant
+} from "~/composables/aruna_api_json";
+
+enum Status {
+  Aruna = 'aruna',
+  Healthy = 'healthy',
+  Warning = 'warning',
+  Inactive = 'inactive',
+  Alert = 'alert'
+}
+
+export const StatusMap = {
+  [Status.Aruna]: { color: '#005299', text: '&#xf00c;' },
+  [Status.Healthy]: { color: '#47e845', text: '&#xf00c;' },
+  [Status.Warning]: { color: '#ffc226', text: '&#xf071;' },
+  [Status.Inactive]: { color: '#dddddd', text: '&#xf00d;' },
+  [Status.Alert]: { color: '#f88080', text: '&#x21;' },
+}
+
+export type NodeDatum = {
+  id: string;
+  group: string;
+  subgroup: string;
+  label: string;
+  site: string;
+  shape: GraphNodeShape;
+  fill?: string,
+  clickable?: boolean,
+  children?: NodeDatum[];
+  icon?: string;
+  score?: number;
+  status?: string;
+  groupLabel?: string;
+  metaInfo?: v2Endpoint;
+}
+
+export type LinkDatum = {
+  source: string;
+  target: string;
+  sourceGroup: string;
+  targetGroup: string;
+  status: Status;
+  showTraffic: boolean;
+}
+
+type SiteConfig = {
+  groupNodeId: string;
+  panel: GraphPanelConfig;
+}
+
+export const nodes: NodeDatum[] = [
+  {
+    id: 'giessen-node',
+    site: 'instance-gi',
+    shape: GraphNodeShape.Circle,
+    icon: '&#xf043;', //'&#xf0ac;',
+    label: 'Gießen',
+    group: 'instance-gi',
+    subgroup: 'instance-gi',
+    clickable: true,
+    children: [
+      {
+        id: 'N:giessen-server,instance-gi',
+        site: 'instance-gi',
+        status: Status.Aruna,
+        score: 87,
+        icon: '&#xf233;', // '&#xf542;',
+        shape: GraphNodeShape.Square,
+        fill: '#007BC2',
+        label: 'Aruna Server',
+        group: 'instance-gi',
+        subgroup: 'instance-gi-main',
+        groupLabel: 'Gießen',
+        clickable: true,
+      },
+      {
+        id: 'N:giessen-storage-s3,instance-gi',
+        site: 'instance-gi',
+        status: Status.Healthy,
+        score: 87,
+        icon: '&#xe4cf;',
+        shape: GraphNodeShape.Hexagon,
+        label: 'S3 Proxy',
+        group: 'instance-gi',
+        subgroup: 'instance-gi-storage',
+        groupLabel: 'Gießen',
+        metaInfo: {
+          id: '01JA5QVENNHZF9XZJ44QESBRS2',
+          name: 'Gießen S3 Proxy',
+          epVariant: v2EndpointVariant.ENDPOINT_VARIANT_PERSISTENT,
+          status: storagemodelsv2ComponentStatus.COMPONENT_STATUS_AVAILABLE,
+          isPublic: true,
+          hostConfigs: [
+            {
+              url: 'https://data.gi.dev.aruna-storage.org',
+              isPrimary: true,
+              ssl: true,
+              public: true,
+              hostVariant: v2EndpointHostVariant.ENDPOINT_HOST_VARIANT_S3
+            } as v2EndpointHostConfig
+          ]
+        } as v2Endpoint
+      },
+      {
+        id: 'N:giessen-storage-file,instance-gi',
+        site: 'instance-gi',
+        status: Status.Healthy,
+        score: 87,
+        icon: '&#xf802;',
+        shape: GraphNodeShape.Hexagon,
+        label: 'Ceph FS Proxy',
+        group: 'instance-gi',
+        subgroup: 'instance-gi-storage',
+        groupLabel: 'Gießen',
+        metaInfo: {
+          id: '01JA7ESTTVX4W7WEY8SYQ72JB3',
+          name: 'Gießen Ceph FS Proxy',
+          epVariant: v2EndpointVariant.ENDPOINT_VARIANT_PERSISTENT,
+          status: storagemodelsv2ComponentStatus.COMPONENT_STATUS_UNAVAILABLE,
+          isPublic: false
+        }
+      },
+      {
+        id: 'N:giessen-compute,instance-gi',
+        site: 'instance-gi',
+        status: Status.Healthy,
+        score: 92,
+        icon: '&#xe4e2;', //f233
+        shape: GraphNodeShape.Hexagon,
+        label: 'Slurm proxy',
+        group: 'instance-gi',
+        subgroup: 'instance-gi-compute',
+        groupLabel: 'Gießen',
+      },
+    ],
+  },
+  {
+    id: 'bielefeld-node',
+    site: 'instance-bi',
+    shape: GraphNodeShape.Circle,
+    icon: '&#xf0ac;',
+    label: 'Bielefeld',
+    group: 'instance-bi',
+    subgroup: 'instance-bi',
+    clickable: true,
+    children: [
+      {
+        id: 'N:bielefeld-server,instance-bi',
+        site: 'instance-bi',
+        status: Status.Warning,
+        score: 87,
+        icon: '&#xf542;',
+        shape: GraphNodeShape.Square,
+        fill: '#007BC2',
+        label: 'Bielefeld Server',
+        group: 'instance-bi',
+        subgroup: 'instance-bi-main',
+        groupLabel: 'Bielefeld',
+        clickable: true,
+      },
+      {
+        id: 'N:bielefeld-storage,instance-bi',
+        site: 'instance-bi',
+        status: Status.Healthy,
+        score: 87,
+        icon: '&#xf542;',
+        shape: GraphNodeShape.Hexagon,
+        label: 'Bielefeld Storage',
+        group: 'instance-bi',
+        subgroup: 'instance-bi-storage',
+        groupLabel: 'Bielefeld',
+      },
+      {
+        id: 'N:bielefeld-compute-clowm,instance-bi',
+        site: 'instance-bi',
+        status: Status.Healthy,
+        score: 87,
+        icon: '&#xf542;',
+        shape: GraphNodeShape.Hexagon,
+        label: 'Bielefeld CloWM',
+        group: 'instance-bi',
+        subgroup: 'instance-bi-compute',
+        groupLabel: 'Bielefeld',
+      },
+      {
+        id: 'N:bielefeld-compute-bibigrid,instance-bi',
+        site: 'instance-bi',
+        status: Status.Healthy,
+        score: 87,
+        icon: '&#xf542;',
+        shape: GraphNodeShape.Hexagon,
+        label: 'Bielefeld BiBi Grid',
+        group: 'instance-bi',
+        subgroup: 'instance-bi-compute',
+        groupLabel: 'Bielefeld',
+      },
+    ],
+  },
+  {
+    id: 'berlin-node',
+    site: 'instance-be',
+    shape: GraphNodeShape.Circle,
+    icon: '&#xf0ac;',
+    label: 'Berlin',
+    group: 'instance-be',
+    subgroup: 'instance-be',
+    clickable: true,
+    children: [
+      {
+        id: 'N:berlin-server,instance-be',
+        site: 'instance-be',
+        status: Status.Aruna,
+        score: 87,
+        icon: '&#xf542;',
+        shape: GraphNodeShape.Square,
+        fill: '#007BC2',
+        label: 'Berlin Server',
+        group: 'instance-be',
+        subgroup: 'instance-be-main',
+        groupLabel: 'Berlin',
+        clickable: true,
+      },
+      {
+        id: 'N:berlin-storage-s3,instance-be',
+        site: 'instance-be',
+        status: Status.Healthy,
+        score: 87,
+        icon: '&#xf542;',
+        shape: GraphNodeShape.Hexagon,
+        label: 'Berlin S3',
+        group: 'instance-be',
+        subgroup: 'instance-be-storage',
+        groupLabel: 'Berlin',
+      },
+      {
+        id: 'N:berlin-storage-file,instance-be',
+        site: 'instance-be',
+        status: Status.Healthy,
+        score: 87,
+        icon: '&#xf542;',
+        shape: GraphNodeShape.Hexagon,
+        label: 'Berlin File',
+        group: 'instance-be',
+        subgroup: 'instance-be-storage',
+        groupLabel: 'Berlin',
+      },
+      {
+        id: 'N:berlin-storage-mongodb,instance-be',
+        site: 'instance-be',
+        status: Status.Alert,
+        score: 87,
+        icon: '&#xf542;',
+        shape: GraphNodeShape.Hexagon,
+        label: 'Berlin Mongo DB',
+        group: 'instance-be',
+        subgroup: 'instance-be-storage',
+        groupLabel: 'Berlin',
+      },
+    ],
+  },
+  {
+    id: 'tuebingen-node',
+    site: 'instance-tu',
+    shape: GraphNodeShape.Circle,
+    icon: '&#xf0ac;',
+    label: 'Tübingen',
+    group: 'instance-tu',
+    subgroup: 'instance-tu',
+    clickable: true,
+    children: [
+      {
+        id: 'N:tuebingen-server,instance-tu',
+        site: 'instance-tu',
+        status: Status.Aruna,
+        score: 87,
+        icon: '&#xf542;',
+        shape: GraphNodeShape.Square,
+        fill: '#007BC2',
+        label: 'Tübingen Server',
+        group: 'instance-tu',
+        subgroup: 'instance-tu-main',
+        groupLabel: 'Tübingen',
+        clickable: true,
+      },
+      {
+        id: 'N:tuebingen-storage-s3,instance-tu',
+        site: 'instance-tu',
+        status: Status.Healthy,
+        score: 87,
+        icon: '&#xf542;',
+        shape: GraphNodeShape.Hexagon,
+        label: 'Tübingen S3',
+        group: 'instance-tu',
+        subgroup: 'instance-tu-storage',
+        groupLabel: 'Tübingen',
+      },
+    ]
+  }
+]
+
+export const links: LinkDatum[] = [
+  {
+    source: 'N:giessen-server,instance-gi',
+    target: 'N:giessen-compute,instance-gi',
+    status: Status.Inactive,
+  },
+  {
+    source: 'N:giessen-server,instance-gi',
+    target: 'N:giessen-storage-s3,instance-gi',
+    status: Status.Inactive,
+  },
+  {
+    source: 'N:giessen-server,instance-gi',
+    target: 'N:giessen-storage-file,instance-gi',
+    status: Status.Inactive,
+  },
+  {
+    source: 'N:giessen-server,instance-gi',
+    target: 'N:bielefeld-server,instance-bi',
+    status: Status.Warning,
+  },
+
+  {
+    source: 'N:bielefeld-server,instance-bi',
+    target: 'N:bielefeld-compute-clowm,instance-bi',
+    status: Status.Inactive,
+  },
+  {
+    source: 'N:bielefeld-server,instance-bi',
+    target: 'N:bielefeld-compute-bibigrid,instance-bi',
+    status: Status.Inactive,
+  },
+  {
+    source: 'N:bielefeld-server,instance-bi',
+    target: 'N:bielefeld-storage,instance-bi',
+    status: Status.Inactive,
+  },
+  {
+    source: 'N:bielefeld-server,instance-bi',
+    target: 'N:berlin-server,instance-be',
+    status: Status.Warning,
+  },
+
+  {
+    source: 'N:berlin-server,instance-be',
+    target: 'N:berlin-storage-file,instance-be',
+    status: Status.Inactive,
+  },
+  {
+    source: 'N:berlin-server,instance-be',
+    target: 'N:berlin-storage-s3,instance-be',
+    status: Status.Inactive,
+  },
+  {
+    source: 'N:berlin-server,instance-be',
+    target: 'N:berlin-storage-mongodb,instance-be',
+    status: Status.Alert,
+  },
+  {
+    source: 'N:berlin-server,instance-be',
+    target: 'N:tuebingen-server,instance-tu',
+    status: Status.Healthy,
+  },
+
+  {
+    source: 'N:tuebingen-server,instance-tu',
+    target: 'N:tuebingen-storage-s3,instance-tu',
+    status: Status.Inactive,
+  },
+  {
+    source: 'N:tuebingen-server,instance-tu',
+    target: 'N:giessen-server,instance-gi',
+    status: Status.Healthy,
+  },
+].map(l => ({
+  ...l,
+  showTraffic: (l.status !== Status.Alert) && (l.status !== Status.Inactive),
+  sourceGroup: nodes.find(n => n.children.map(c => c.id).includes(l.source))?.site,
+  targetGroup: nodes.find(n => n.children.map(c => c.id).includes(l.target))?.site,
+}))
+
+export const sites: Record<string, SiteConfig> = nodes.reduce((acc, curr) => ({
+  ...acc,
+  [curr.site]: {
+    groupNodeId: curr.id,
+    panel: {
+      nodes: curr.children.map(d => d.id),
+      label: curr.label,
+      borderWidth: 4,
+      padding: 25,
+      dashedOutline: true, //curr === nodes[0],
+      sideIconFontSize: '20px',
+      sideIconShape: GraphNodeShape.Circle,
+      sideIconSymbol: curr.icon,
+      sideIconShapeSize: 40,
+    } as GraphPanelConfig,
+  },
+}), {})
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/data-notifications.ts b/components/custom-ui/dashboard/data-notifications.ts
new file mode 100644
index 00000000..dc0d3471
--- /dev/null
+++ b/components/custom-ui/dashboard/data-notifications.ts
@@ -0,0 +1,45 @@
+export const v3_events = [
+  {
+    "type": "RegisterUserRequestTx",
+    "id": "01JDPGX26PDFD4Y3771K28MPN5",
+    event_id: "01JDPGX26PA5C40MV8T7NNBFK9",
+    "req": {
+      "email": "admin@test.com",
+      "first_name": "aruna",
+      "last_name": "admin",
+      "identifier": ""
+    },
+    "requester": {
+      "Unregistered": {
+        "oidc_realm": "http://localhost:1998/realms/test",
+        "oidc_subject": "14f0e7bf-0947-4aa1-a8cd-337ddeff4573"
+      }
+    }
+  },
+  {
+    "type": "CreateComponentRequestTx",
+    "id": "01JDQ7PRHD2FWKF6Y34CWPHKSQ",
+    event_id: "01JDQ7PRHDWYH99R8PGCQ96CN6",
+    "req": {
+      "name": "proxy",
+      "description": "A proxy",
+      "component_type": "Data",
+      "endpoints": [
+        {
+          "S3": "https://example.com/"
+        }
+      ],
+      "pubkey": "string",
+      "public": true
+    },
+    "requester": {
+      "User": {
+        "user_id": "01JDPGX26PDFD4Y3771K28MPN5",
+        "auth_method": {
+          "Aruna": 0
+        },
+        "impersonated_by": null
+      }
+    }
+  }
+]

From fc237854469cc148047f77401567e0da34e773fc Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 10 Dec 2024 13:03:30 +0100
Subject: [PATCH 042/125] chore: Add broken Event display component

---
 .../custom-ui/dashboard/NotificationList.vue  | 102 +++++++
 .../custom-ui/dashboard/Notifications.vue     | 121 +++++++++
 .../dashboard/NotificationsDisplay.vue        | 249 ++++++++++++++++++
 composables/api_wrapper.ts                    |  56 ++++
 server/api/v3/search.get.ts                   |   2 +-
 5 files changed, 529 insertions(+), 1 deletion(-)
 create mode 100644 components/custom-ui/dashboard/NotificationList.vue
 create mode 100644 components/custom-ui/dashboard/Notifications.vue
 create mode 100644 components/custom-ui/dashboard/NotificationsDisplay.vue

diff --git a/components/custom-ui/dashboard/NotificationList.vue b/components/custom-ui/dashboard/NotificationList.vue
new file mode 100644
index 00000000..77b9332d
--- /dev/null
+++ b/components/custom-ui/dashboard/NotificationList.vue
@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import {formatDistanceToNow} from 'date-fns'
+import type {Notification} from './data-notifications'
+import {ScrollArea} from '@/components/ui/scroll-area'
+import {cn} from '@/utils/shadcn'
+import {Badge} from '@/components/ui/badge'
+import {v2PersonalNotificationVariant} from "~/composables/aruna_api_json";
+
+interface MailListProps {
+  items: Notification[] //Mail[]
+}
+
+defineProps<MailListProps>()
+const selectedMail = defineModel<string>('selectedMail', {required: false})
+
+function getBadgeVariantFromLabel(label: string) {
+  if (['work'].includes(label.toLowerCase()))
+    return 'default'
+
+  if (['personal', 'permission'].includes(label.toLowerCase()))
+    return 'outline'
+
+  return 'secondary'
+}
+
+function displayVariant(variant: v2PersonalNotificationVariant) {
+  const label = variant.replace('PERSONAL_NOTIFICATION_VARIANT_', '').replace('_', ' ').toLowerCase()
+  return label.charAt(0).toUpperCase() + label.slice(1)
+}
+</script>
+
+<template>
+  <ScrollArea class="h-screen flex">
+    <div class="flex-1 flex flex-col gap-2 p-4 pt-0">
+      <TransitionGroup name="list" appear>
+        <button
+            v-for="item of items"
+            :key="item.id"
+            :class="cn(
+            'flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
+            selectedMail === item.id && 'bg-muted',
+          )"
+            @click="selectedMail = item.id"
+        >
+          <div class="flex w-full flex-col gap-1">
+            <div class="flex items-center">
+              <div class="flex items-center gap-2">
+                <div class="font-semibold">
+                  {{ item.from }}
+                  <!--{{ item.name }}-->
+                </div>
+                <span v-if="!item.read" class="flex h-2 w-2 rounded-full bg-blue-600"/>
+              </div>
+              <div
+                  :class="cn(
+                  'ml-auto text-xs',
+                  selectedMail === item.id
+                    ? 'text-foreground'
+                    : 'text-muted-foreground',
+                )"
+              >
+                {{ formatDistanceToNow(new Date(item.date), {addSuffix: true}) }}
+              </div>
+            </div>
+
+            <div class="text-xs font-medium">
+              {{ displayVariant(item.variant) }}
+              <!--{{ item.subject }}-->
+            </div>
+          </div>
+          <div class="line-clamp-2 text-xs text-muted-foreground">
+            {{ item.message.substring(0, 300) }}
+            <!--{{ item.text.substring(0, 300) }}-->
+          </div>
+          <div class="flex items-center gap-2">
+            <Badge v-for="label of item.labels" :key="label" :variant="getBadgeVariantFromLabel(label)">
+              {{ label }}
+            </Badge>
+          </div>
+        </button>
+      </TransitionGroup>
+    </div>
+  </ScrollArea>
+</template>
+
+<style scoped>
+.list-move,
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s ease;
+}
+
+.list-enter-from,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(15px);
+}
+
+.list-leave-active {
+  position: absolute;
+}
+</style>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/Notifications.vue b/components/custom-ui/dashboard/Notifications.vue
new file mode 100644
index 00000000..2156bd87
--- /dev/null
+++ b/components/custom-ui/dashboard/Notifications.vue
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import {IconSearch} from '@tabler/icons-vue'
+import {refDebounced} from '@vueuse/core'
+import {type Mail, type Notification} from './data-notifications'
+import NotificationList from './NotificationList.vue'
+import NotificationDisplay from './NotificationsDisplay.vue'
+import {Separator} from '@/components/ui/separator'
+import {Input} from '@/components/ui/input'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@/components/ui/tabs'
+import {TooltipProvider} from '@/components/ui/tooltip'
+import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable'
+
+interface MailProps {
+  accounts: {
+    label: string
+    email: string
+    icon: string
+  }[]
+  mails: Notification[] //Mail[]
+  defaultLayout?: number[]
+  defaultCollapsed?: boolean
+  navCollapsedSize: number
+}
+
+const props = withDefaults(defineProps<MailProps>(), {
+  defaultCollapsed: false,
+  defaultLayout: () => [440, 655],
+})
+
+const isCollapsed = ref(props.defaultCollapsed)
+const selectedMail = ref<string | undefined>(props.mails[0].id)
+const searchValue = ref('')
+const debouncedSearch = refDebounced(searchValue, 250)
+
+const filteredMailList = computed(() => {
+  let output: Notification[] //Mail[] = []
+  const searchValue = debouncedSearch.value?.trim()
+  if (!searchValue) {
+    output = props.mails
+  } else {
+    output = props.mails.filter((item) => {
+      return item.message.includes(debouncedSearch.value)
+          || item.variant.includes(debouncedSearch.value)
+          || item.from.includes(debouncedSearch.value)
+
+      /*
+      return item.name.includes(debouncedSearch.value)
+          || item.email.includes(debouncedSearch.value)
+          || item.name.includes(debouncedSearch.value)
+          || item.subject.includes(debouncedSearch.value)
+          || item.text.includes(debouncedSearch.value)
+      */
+    })
+  }
+
+  return output
+})
+
+const unreadMailList = computed(() => filteredMailList.value.filter(item => !item.read))
+
+const selectedMailData = computed(() => props.mails.find(item => item.id === selectedMail.value))
+
+function onCollapse() {
+  isCollapsed.value = true
+}
+
+function onExpand() {
+  isCollapsed.value = false
+}
+</script>
+
+<template>
+  <TooltipProvider :delay-duration="0">
+    <ResizablePanelGroup
+        id="resize-panel-group-1"
+        direction="horizontal"
+        class="h-full max-h-[calc(100vh-225px)] items-stretch">
+      <ResizablePanel id="resize-panel-1" :default-size="defaultLayout[0]" :min-size="30">
+        <Tabs default-value="all">
+          <div class="flex items-center px-4 py-2">
+            <h1 class="text-xl font-bold">
+              Inbox
+            </h1>
+            <TabsList class="ml-auto">
+              <TabsTrigger value="all" class="text-zinc-600 dark:text-zinc-200">
+                All mail
+              </TabsTrigger>
+              <TabsTrigger value="unread" class="text-zinc-600 dark:text-zinc-200">
+                Unread
+              </TabsTrigger>
+            </TabsList>
+          </div>
+          <Separator/>
+          <div class="p-4">
+            <form>
+              <div class="relative">
+                <IconSearch class="absolute left-2 top-2.5 size-4 text-muted-foreground"/>
+                <Input v-model="searchValue" placeholder="Search" class="pl-8 bg-muted"/>
+              </div>
+            </form>
+          </div>
+          <TabsContent value="all" class="m-0">
+            <NotificationList v-model:selected-mail="selectedMail" :items="filteredMailList"/>
+          </TabsContent>
+          <TabsContent value="unread" class="m-0">
+            <NotificationList v-model:selected-mail="selectedMail" :items="unreadMailList"/>
+          </TabsContent>
+        </Tabs>
+      </ResizablePanel>
+      <ResizableHandle id="resiz-handle-1" with-handle/>
+      <ResizablePanel id="resize-panel-2" :default-size="defaultLayout[1]">
+        <NotificationDisplay :mail="selectedMailData"/>
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  </TooltipProvider>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/NotificationsDisplay.vue b/components/custom-ui/dashboard/NotificationsDisplay.vue
new file mode 100644
index 00000000..89d06d8f
--- /dev/null
+++ b/components/custom-ui/dashboard/NotificationsDisplay.vue
@@ -0,0 +1,249 @@
+<script lang="ts" setup>
+import {
+  IconArchive,
+    IconArchiveOff,
+    IconCornerUpLeft,
+    IconCornerUpLeftDouble,
+    IconCornerUpRight,
+    IconDotsVertical,
+    IconTrash
+} from "@tabler/icons-vue";
+
+import {format} from 'date-fns/format'
+import type { Mail, Notification } from './data-notifications'
+import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@/components/ui/dropdown-menu'
+import {Avatar, AvatarFallback} from '@/components/ui/avatar'
+import {Button} from '@/components/ui/button'
+import {Separator} from '@/components/ui/separator'
+import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip'
+import {v2PersonalNotificationVariant} from "~/composables/aruna_api_json";
+
+interface MailDisplayProps {
+  mail: Notification | undefined //Mail | undefined
+}
+
+const props = defineProps<MailDisplayProps>()
+
+const mailFallbackName = computed(() => {
+  return 'A' //ToDo
+  /*
+  return props.mail?.name
+      .split(' ')
+      .map(chunk => chunk[0])
+      .join('')
+  */
+})
+
+const today = new Date()
+
+function displayVariant(variant: v2PersonalNotificationVariant) {
+  const label = variant.replace('PERSONAL_NOTIFICATION_VARIANT_', '').replace('_', ' ').toLowerCase()
+  return label.charAt(0).toUpperCase() + label.slice(1)
+}
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <div class="flex items-center p-2">
+      <div class="flex items-center gap-2">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!mail">
+              <IconArchive class="size-4"/>
+              <span class="sr-only">Archive</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Archive</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!mail">
+              <IconArchiveOff class="size-4"/>
+              <span class="sr-only">Move to junk</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Move to junk</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!mail">
+              <IconTrash class="size-4"/>
+              <span class="sr-only">Move to trash</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Move to trash</TooltipContent>
+        </Tooltip>
+        <!--
+        <Separator orientation="vertical" class="mx-1 h-6" />
+        <Tooltip>
+          <Popover>
+            <PopoverTrigger as-child>
+              <TooltipTrigger as-child>
+                <Button variant="ghost" size="icon" :disabled="!mail">
+                  <Clock class="size-4" />
+                  <span class="sr-only">Snooze</span>
+                </Button>
+              </TooltipTrigger>
+            </PopoverTrigger>
+            <PopoverContent class="flex w-[535px] p-0">
+              <div class="flex flex-col gap-2 border-r px-2 py-4">
+                <div class="px-4 text-sm font-medium">
+                  Snooze until
+                </div>
+                <div class="grid min-w-[250px] gap-1">
+                  <Button
+                      variant="ghost"
+                      class="justify-start font-normal"
+                  >
+                    Later today
+                    <span class="ml-auto text-muted-foreground">
+                      {{ format(addHours(today, 4), "E, h:m b") }}
+                    </span>
+                  </Button>
+                  <Button
+                      variant="ghost"
+                      class="justify-start font-normal"
+                  >
+                    Tomorrow
+                    <span class="ml-auto text-muted-foreground">
+                      {{ format(addDays(today, 1), "E, h:m b") }}
+                    </span>
+                  </Button>
+                  <Button
+                      variant="ghost"
+                      class="justify-start font-normal"
+                  >
+                    This weekend
+                    <span class="ml-auto text-muted-foreground">
+                      {{ format(nextSaturday(today), "E, h:m b") }}
+                    </span>
+                  </Button>
+                  <Button
+                      variant="ghost"
+                      class="justify-start font-normal"
+                  >
+                    Next week
+                    <span class="ml-auto text-muted-foreground">
+                      {{ format(addDays(today, 7), "E, h:m b") }}
+                    </span>
+                  </Button>
+                </div>
+              </div>
+              <div class="p-2">
+                <Calendar />
+              </div>
+            </PopoverContent>
+          </Popover>
+          <TooltipContent>Snooze</TooltipContent>
+        </Tooltip>
+        -->
+      </div>
+      <div class="ml-auto flex items-center gap-2">
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!mail">
+              <IconCornerUpLeft class="size-4"/>
+              <span class="sr-only">Reply</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Reply</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!mail">
+              <IconCornerUpLeftDouble class="size-4"/>
+              <span class="sr-only">Reply all</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Reply all</TooltipContent>
+        </Tooltip>
+        <Tooltip>
+          <TooltipTrigger as-child>
+            <Button variant="ghost" size="icon" :disabled="!mail">
+              <IconCornerUpRight class="size-4"/>
+              <span class="sr-only">Forward</span>
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>Forward</TooltipContent>
+        </Tooltip>
+      </div>
+      <Separator orientation="vertical" class="mx-2 h-6"/>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="ghost" size="icon" :disabled="!mail">
+            <IconDotsVertical class="size-4"/>
+            <span class="sr-only">More</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>Mark as unread</DropdownMenuItem>
+          <DropdownMenuItem>Star thread</DropdownMenuItem>
+          <DropdownMenuItem>Add label</DropdownMenuItem>
+          <DropdownMenuItem>Mute thread</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+    <Separator/>
+    <div v-if="mail" class="flex flex-1 flex-col">
+      <div class="flex items-start p-4">
+        <div class="flex items-start gap-4 text-sm">
+          <Avatar>
+            <AvatarFallback>
+              {{ mailFallbackName }}
+            </AvatarFallback>
+          </Avatar>
+          <div class="grid gap-1">
+            <div class="font-semibold">
+              {{ mail.from }}
+              <!--{{ mail.name || 'Aruna System' }}-->
+            </div>
+            <div class="line-clamp-1 text-xs">
+              {{ displayVariant(mail.variant) }}
+              <!--{{ mail.subject }}-->
+            </div>
+            <div class="line-clamp-1 text-xs">
+              <span class="font-medium">Reply-To:</span>
+              {{ 'some-mail.email.com' }}
+              <!--{{ mail.email }}-->
+            </div>
+          </div>
+        </div>
+        <div v-if="mail.date" class="ml-auto text-xs text-muted-foreground">
+          {{ format(new Date(mail.date), "PPpp") }}
+        </div>
+      </div>
+
+      <Separator/>
+      <div class="flex-1 whitespace-pre-wrap p-4 text-sm">
+        {{ mail.message }}
+        <!--{{ mail.text }}-->
+      </div>
+      <!--
+      <Separator class="mt-auto"/>
+      <div class="p-4">
+        <form>
+          <div class="grid gap-4">
+            <Textarea class="p-4"
+                      :placeholder="`Reply ${mail.name}...`"/>
+            <div class="flex items-center">
+              <Label html-for="mute"
+                     class="flex items-center gap-2 text-xs font-normal">
+                <Switch id="mute" aria-label="Mute thread"/>
+                Mute this thread
+              </Label>
+              <Button type="button"
+                      size="sm"
+                      class="ml-auto">
+                Send
+              </Button>
+            </div>
+          </div>
+        </form>
+      </div>
+      -->
+    </div>
+    <div v-else class="p-8 text-center text-muted-foreground">
+      No message selected
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/composables/api_wrapper.ts b/composables/api_wrapper.ts
index f8cfc21e..889e1f67 100644
--- a/composables/api_wrapper.ts
+++ b/composables/api_wrapper.ts
@@ -78,6 +78,9 @@ export type Resource = components["schemas"]["Resource"]
 export type Token = components["schemas"]["Token"]
 export type User = components["schemas"]["User"]
 
+export type Endpoint = components["schemas"]["Endpoint"]
+export type Component = components["schemas"]["Component"]
+
 // ----- Custom
 export type ResourceElement = Resource & {
   children: ResourceElement[]
@@ -88,6 +91,59 @@ export type GroupInfo = {
   permission: GetGroupsFromUserResponseGroups
 }
 
+export type EventUser = {
+  user_id: string,
+  auth_method: {
+    Aruna: number
+  },
+  impersonated_by: any | null
+}
+
+export type EventUserUnregistered = {
+  oidc_realm: string,
+  oidc_subject: string
+}
+
+export type v3Notification = {
+  event_id: string,
+  id: string,
+  type: string,
+  req: any,
+  requester: EventUser | EventUserUnregistered
+}
+
+// ----- Combined convenience
+export async function fetchChildren(resource_id: string): Promise<ResourceElement[]> {
+  const children_ids = await $fetch<GetRelationsResponse>(`/api/v3/relations`, {
+    query: {
+      node: resource_id,
+      direction: 'Outgoing',
+      offset: 0,
+      page_size: Number.MAX_SAFE_INTEGER
+    }
+  }).then(response => {
+    return response.relations.filter(rel => rel.relation_type === 'HasPart').map(rel => rel.to_id)
+  })
+
+  if (children_ids.length <= 0) {
+    console.info('[fetchChildren] Resource ${resource_id} has no children')
+    return []
+  }
+
+  return await $fetch<GetResourcesResponse>('/api/v3/resources', {
+    query: {
+      ids: children_ids
+    }
+  }).then(response => {
+    let resources: ResourceElement[] = []
+    for (const resource of response.resources) {
+      let extended = resource as any // lol, cast to any to allow dynamic adding of properties
+      extended.children = []
+      resources.push(extended as ResourceElement)
+    }
+    return resources
+  })
+}
 
 /* ----- END V3 ----- */
 
diff --git a/server/api/v3/search.get.ts b/server/api/v3/search.get.ts
index 9e92480b..993ab2d6 100644
--- a/server/api/v3/search.get.ts
+++ b/server/api/v3/search.get.ts
@@ -1,4 +1,4 @@
-import {SearchResponse} from "~/composables/aruna_v3/SearchResponse";
+import {SearchResponse} from "~/composables/api_wrapper";
 
 export default defineEventHandler(async event => {
   const baseUrl = useRuntimeConfig().serverHostUrl

From 3428235db1c92027ad9a814b0e49f00cff4fa12f Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 10 Dec 2024 13:04:36 +0100
Subject: [PATCH 043/125] chore: Add shadcn-vue Tabs component

---
 components/ui/tabs/Tabs.vue        | 15 +++++++++++++++
 components/ui/tabs/TabsContent.vue | 22 ++++++++++++++++++++++
 components/ui/tabs/TabsList.vue    | 25 +++++++++++++++++++++++++
 components/ui/tabs/TabsTrigger.vue | 29 +++++++++++++++++++++++++++++
 components/ui/tabs/index.ts        |  4 ++++
 5 files changed, 95 insertions(+)
 create mode 100644 components/ui/tabs/Tabs.vue
 create mode 100644 components/ui/tabs/TabsContent.vue
 create mode 100644 components/ui/tabs/TabsList.vue
 create mode 100644 components/ui/tabs/TabsTrigger.vue
 create mode 100644 components/ui/tabs/index.ts

diff --git a/components/ui/tabs/Tabs.vue b/components/ui/tabs/Tabs.vue
new file mode 100644
index 00000000..2fa0971f
--- /dev/null
+++ b/components/ui/tabs/Tabs.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
+import type { TabsRootEmits, TabsRootProps } from 'radix-vue'
+
+const props = defineProps<TabsRootProps>()
+const emits = defineEmits<TabsRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TabsRoot v-bind="forwarded">
+    <slot />
+  </TabsRoot>
+</template>
diff --git a/components/ui/tabs/TabsContent.vue b/components/ui/tabs/TabsContent.vue
new file mode 100644
index 00000000..a6f15295
--- /dev/null
+++ b/components/ui/tabs/TabsContent.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsContent, type TabsContentProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsContent
+    :class="cn('mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>
diff --git a/components/ui/tabs/TabsList.vue b/components/ui/tabs/TabsList.vue
new file mode 100644
index 00000000..41f90da6
--- /dev/null
+++ b/components/ui/tabs/TabsList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsList, type TabsListProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <TabsList
+    v-bind="delegatedProps"
+    :class="cn(
+      'inline-flex items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>
diff --git a/components/ui/tabs/TabsTrigger.vue b/components/ui/tabs/TabsTrigger.vue
new file mode 100644
index 00000000..0c944359
--- /dev/null
+++ b/components/ui/tabs/TabsTrigger.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    v-bind="forwardedProps"
+    :class="cn(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      props.class,
+    )"
+  >
+    <span class="truncate">
+      <slot />
+    </span>
+  </TabsTrigger>
+</template>
diff --git a/components/ui/tabs/index.ts b/components/ui/tabs/index.ts
new file mode 100644
index 00000000..fbea0c68
--- /dev/null
+++ b/components/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsContent } from './TabsContent.vue'

From 65b9116e7fe63b4d3ac53269bb34cc7613b275ce Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 10 Dec 2024 13:04:43 +0100
Subject: [PATCH 044/125] chore: Add shadcn-vue Tooltip component

---
 components/ui/tooltip/Tooltip.vue         | 14 ++++++++++
 components/ui/tooltip/TooltipContent.vue  | 31 +++++++++++++++++++++++
 components/ui/tooltip/TooltipProvider.vue | 11 ++++++++
 components/ui/tooltip/TooltipTrigger.vue  | 11 ++++++++
 components/ui/tooltip/index.ts            |  4 +++
 5 files changed, 71 insertions(+)
 create mode 100644 components/ui/tooltip/Tooltip.vue
 create mode 100644 components/ui/tooltip/TooltipContent.vue
 create mode 100644 components/ui/tooltip/TooltipProvider.vue
 create mode 100644 components/ui/tooltip/TooltipTrigger.vue
 create mode 100644 components/ui/tooltip/index.ts

diff --git a/components/ui/tooltip/Tooltip.vue b/components/ui/tooltip/Tooltip.vue
new file mode 100644
index 00000000..b421f0fe
--- /dev/null
+++ b/components/ui/tooltip/Tooltip.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { TooltipRoot, type TooltipRootEmits, type TooltipRootProps, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<TooltipRootProps>()
+const emits = defineEmits<TooltipRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <TooltipRoot v-bind="forwarded">
+    <slot />
+  </TooltipRoot>
+</template>
diff --git a/components/ui/tooltip/TooltipContent.vue b/components/ui/tooltip/TooltipContent.vue
new file mode 100644
index 00000000..14003d4e
--- /dev/null
+++ b/components/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { type HTMLAttributes, computed } from 'vue'
+import { TooltipContent, type TooltipContentEmits, type TooltipContentProps, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/utils/shadcn'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipContentProps & { class?: HTMLAttributes['class'] }>(), {
+  sideOffset: 4,
+})
+
+const emits = defineEmits<TooltipContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TooltipPortal>
+    <TooltipContent v-bind="{ ...forwarded, ...$attrs }" :class="cn('z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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', props.class)">
+      <slot />
+    </TooltipContent>
+  </TooltipPortal>
+</template>
diff --git a/components/ui/tooltip/TooltipProvider.vue b/components/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 00000000..816505d6
--- /dev/null
+++ b/components/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from 'radix-vue'
+
+const props = defineProps<TooltipProviderProps>()
+</script>
+
+<template>
+  <TooltipProvider v-bind="props">
+    <slot />
+  </TooltipProvider>
+</template>
diff --git a/components/ui/tooltip/TooltipTrigger.vue b/components/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 00000000..f5b0e57f
--- /dev/null
+++ b/components/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from 'radix-vue'
+
+const props = defineProps<TooltipTriggerProps>()
+</script>
+
+<template>
+  <TooltipTrigger v-bind="props">
+    <slot />
+  </TooltipTrigger>
+</template>
diff --git a/components/ui/tooltip/index.ts b/components/ui/tooltip/index.ts
new file mode 100644
index 00000000..82049b48
--- /dev/null
+++ b/components/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'

From f063d95e596b9d578b3586441550af98c9f25c38 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 10 Dec 2024 14:56:53 +0100
Subject: [PATCH 045/125] add first search dropdown prototype

---
 components/custom-ui/SearchBar.vue           | 68 ++++++++++++++++++++
 components/custom-ui/dashboard/Dashboard.vue |  8 +--
 2 files changed, 70 insertions(+), 6 deletions(-)
 create mode 100644 components/custom-ui/SearchBar.vue

diff --git a/components/custom-ui/SearchBar.vue b/components/custom-ui/SearchBar.vue
new file mode 100644
index 00000000..aea7fa3f
--- /dev/null
+++ b/components/custom-ui/SearchBar.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+
+import {IconLoader2, IconSearch} from "@tabler/icons-vue";
+
+const queryInput = ref('')
+const fetching = ref(false)
+const response: Ref<SearchResponse | undefined | void> = ref(undefined) //ref([{label: 'test'}, {label: 'test2'}, {label: 'test3'}])
+
+// Debounce input to decrease number of requests
+watch(queryInput, () => {
+  // Empty input only clears results
+  if (!queryInput.value) {
+    response.value = undefined
+    return
+  }
+
+  fetching.value = true
+  response.value = undefined
+  debouncedInput()
+})
+
+const debouncedInput = debounce(async () => await searchResources(queryInput.value), 250)
+
+async function searchResources(query: string): Promise<void> {
+  // No need to search with empty input
+  if (!query) {
+    response.value = undefined
+    return
+  }
+
+  response.value = await $fetch<SearchResponse>('/api/v3/search', {
+    query: {
+      query: query
+    }
+  }).catch(error => {
+    console.log(error)
+    return
+  })
+  fetching.value = false
+}
+
+</script>
+
+<template>
+  <div class="relative flex">
+    <IconSearch class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"/>
+    <!-- COMMAND -->
+    <Command class="rounded-sm border">
+      <CommandInput placeholder="Search for resources"
+                    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 && response?.resources.length <= 0 && fetching"
+                      class="flex items-center justify-center gap-x-4">
+          Fetching results <IconLoader2 class="mr-2 animate-spin"/>
+        </CommandEmpty>
+        <CommandEmpty v-if="queryInput && response?.resources.length <= 0 && !fetching">
+          No results found.
+        </CommandEmpty>
+        <CommandItem v-for="resource in response?.resources"
+                     :value="resource">
+          {{ resource.id }}
+        </CommandItem>
+      </CommandList>
+    </Command>
+    <!-- END COMMAND -->
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index ba014f73..80affc90 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -38,6 +38,7 @@ import Notifications from "~/components/custom-ui/dashboard/Notifications.vue";
 import Profile from "~/components/custom-ui/user/Profile.vue";
 import Tokens from "~/components/custom-ui/user/Tokens.vue";
 import Proxies from "~/components/custom-ui/user/Proxies.vue";
+import SearchBar from "~/components/custom-ui/SearchBar.vue";
 
 import {notifis, v3_events} from './data-notifications'
 import type {User} from '~/composables/api_wrapper'
@@ -314,12 +315,7 @@ EventBus.on('spinStop', () => spinBaby.value = false)
               <Skeleton class="h-auto w-[300px]"/>
             </template>
           </ClientOnly>
-          <div class="relative flex">
-            <IconSearch class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"/>
-            <Input type="search"
-                   placeholder="Search Resources"
-                   class="w-[400px] appearance-none bg-background pl-8 shadow-none "/>
-          </div>
+          <SearchBar />
         </div>
         <DropdownMenu>
           <ClientOnly fallbackTag="span">

From 93763fb7a6c529cfc64809677fe40782e281d1bd Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 10 Dec 2024 15:31:57 +0100
Subject: [PATCH 046/125] fix: Event data fetching

---
 components/custom-ui/dashboard/Dashboard.vue | 15 ++++++------
 composables/Events.ts                        | 24 ++++++++++++--------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index ba014f73..6537cf35 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -39,7 +39,7 @@ import Profile from "~/components/custom-ui/user/Profile.vue";
 import Tokens from "~/components/custom-ui/user/Tokens.vue";
 import Proxies from "~/components/custom-ui/user/Proxies.vue";
 
-import {notifis, v3_events} from './data-notifications'
+import {v3_events} from './data-notifications'
 import type {User} from '~/composables/api_wrapper'
 import {toast} from "~/components/ui/toast";
 import {useStats} from "~/composables/Stats";
@@ -54,16 +54,17 @@ const props = defineProps<{
   user: User | undefined
 }>()
 const user = toRef(() => props.user)
-watchEffect(() => {
-  console.log('[Dashboard Component]', `User got updated: ${user.value ? user.value.id : 'Undefined'}`)
-})
+const user_id = toRef(() => user.value?.id)
+
+watch(user, () => console.log('[Dashboard Component]', `User got updated: ${user.value ? user.value.id : 'Undefined'}`))
+watch(user_id, () => console.log('[Dashboard Component]', `User Id updated: ${user_id.value}`))
 
 const route = useRoute()
 const tab = route.query.tab
 
 const endpoints = ref([]) //await fetchEndpoints() TODO
 
-const {events, refreshEvents} = await useEvents([user], user)
+const {events, refreshEvents} = await useEvents([user], user_id)
 const {realms, refreshRealms} = await useRealms()
 const {groups, refreshGroups} = await useGroups()
 const {tokens, refreshTokens} = await useTokens()
@@ -80,9 +81,7 @@ EventBus.on('updateRealms', async () => await refreshRealms())
 EventBus.on('updateGroups', async () => await refreshGroups())
 EventBus.on('updateProjects', async () => await refreshProjects())
 
-
-//const notifications = ref(3)
-const unreadEvents = computed(() => events.value ? events.value.filter((n: any) => !n.read).length : 0)
+const unreadEvents = computed(() => events.value ? events.value.length : 0)
 
 /* ----- DASHBOARD CONTENT ----- */
 const currentContent: Ref<string> = ref(tab as string || 'OverviewStats')
diff --git a/composables/Events.ts b/composables/Events.ts
index 1688f993..aaa51958 100644
--- a/composables/Events.ts
+++ b/composables/Events.ts
@@ -1,10 +1,7 @@
 import EventBus from "~/composables/EventBus";
 
 // by convention, composable function names start with "use"
-export async function useEvents(refs: Ref[], user: Ref<User | undefined>) {
-
-  watch(user, () => console.log('[GetEvents] User updated:', user.value ? user.value.id : 'Undefined'))
-
+export async function useEvents(refs: Ref[], user_id: Ref<string | undefined>) {
   // state encapsulated and managed by the composable
   const events: Ref<any[] | null> = ref(null)
   const {refresh: refreshEvents} = await useFetch<GetEventsResponse>('/api/v3/events', {
@@ -12,17 +9,24 @@ export async function useEvents(refs: Ref[], user: Ref<User | undefined>) {
     lazy: true,
     watch: refs,
     query: {
-      subscriber_id: user.value ? user.value.id : ''
+      subscriber_id: user_id
     },
     onResponse({response}) {
+      let v3Events: any[] = []
       if (response.ok) {
-        console.log('[GetEvents]', response)
-        events.value = response._data.events
-        return
+        for (const event of response._data.events) {
+          const event_id = Object.keys(event)[0]
+          if (event_id) {
+            let eventMeta = event[event_id]
+            eventMeta.event_id = event_id
+            v3Events.push(eventMeta)
+          }
+        }
+      } else {
+        console.warn('[GetEvents] Response was not ok', response)
       }
 
-      console.warn('[GetEvents] Response was not ok', response)
-      events.value = []
+      events.value = v3Events
     },
     onResponseError({response}) {
       console.error('[GetEvents] Error response:', response)

From 3cb557f1bf6e1403f23fe104844651c155b6ca8c Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 10 Dec 2024 16:13:40 +0100
Subject: [PATCH 047/125] feat: Adapt notifications display to v3 events

---
 components/custom-ui/dashboard/Dashboard.vue  | 15 ++--
 ...ificationsDisplay.vue => EventDisplay.vue} | 36 ++++----
 .../{NotificationList.vue => EventList.vue}   | 42 ++++-----
 .../{Notifications.vue => Events.vue}         | 53 +++++------
 composables/Events.ts                         |  2 +-
 composables/api_wrapper.ts                    | 89 +++++++++++++++----
 server/api/v3/events.get.ts                   |  5 +-
 7 files changed, 147 insertions(+), 95 deletions(-)
 rename components/custom-ui/dashboard/{NotificationsDisplay.vue => EventDisplay.vue} (88%)
 rename components/custom-ui/dashboard/{NotificationList.vue => EventList.vue} (70%)
 rename components/custom-ui/dashboard/{Notifications.vue => Events.vue} (64%)

diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index 6537cf35..59f6f5eb 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -34,7 +34,7 @@ import Realms from "~/components/custom-ui/dashboard/Realms.vue";
 import DummyAnalytics from "~/components/custom-ui/dashboard/DummyAnalytics.vue";
 import ResourceCreation from "~/components/custom-ui/ResourceCreation.vue";
 import RealmSwitcher from "~/components/custom-ui/dashboard/RealmSwitcher.vue";
-import Notifications from "~/components/custom-ui/dashboard/Notifications.vue";
+import Events from "~/components/custom-ui/dashboard/Events.vue";
 import Profile from "~/components/custom-ui/user/Profile.vue";
 import Tokens from "~/components/custom-ui/user/Tokens.vue";
 import Proxies from "~/components/custom-ui/user/Proxies.vue";
@@ -86,7 +86,7 @@ const unreadEvents = computed(() => events.value ? events.value.length : 0)
 /* ----- DASHBOARD CONTENT ----- */
 const currentContent: Ref<string> = ref(tab as string || 'OverviewStats')
 const contentComponents = {
-  'Notifications': {component: Notifications},
+  'Events': {component: Events},
   'OverviewStats': {component: OverviewStats},
   'FileExplorer': {component: FileExplorer},
   'ResourceCreation': {component: ResourceCreation},
@@ -102,7 +102,7 @@ const componentProps = computed(() => {
       return stats.value
     case 'Events':
       return {
-        events: v3_events,
+        events: events.value,
         navCollapsedSize: 4
       }
     case 'FileExplorer':
@@ -173,15 +173,14 @@ EventBus.on('spinStop', () => spinBaby.value = false)
           </div>
 
           <div class="flex relative">
-            <Button disabled
-                    key="Notifications"
-                    :class="[{'bg-muted': currentContent === 'Notifications', 'text-primary': currentContent === 'Notifications' }]"
+            <Button key="Events"
+                    :class="[{'bg-muted': currentContent === 'Events', 'text-primary': currentContent === 'Events' }]"
                     class="ml-auto h-8 w-8"
                     size="icon"
                     variant="outline"
-                    @click="currentContent = 'Notifications'">
+                    @click="currentContent = 'Events'">
               <IconBell class="h-4 w-4"/>
-              <span class="sr-only">Toggle notifications</span>
+              <span class="sr-only">Toggle events</span>
             </Button>
             <Badge v-if="unreadEvents > 0"
                    class="absolute animate-bounce -bottom-1 -right-1 -mb-1 -mr-1 bg-red-400 hover:bg-red-400 text-white text-xs font-bold w-4 h-4 flex items-center justify-center rounded-full">
diff --git a/components/custom-ui/dashboard/NotificationsDisplay.vue b/components/custom-ui/dashboard/EventDisplay.vue
similarity index 88%
rename from components/custom-ui/dashboard/NotificationsDisplay.vue
rename to components/custom-ui/dashboard/EventDisplay.vue
index 89d06d8f..5508842a 100644
--- a/components/custom-ui/dashboard/NotificationsDisplay.vue
+++ b/components/custom-ui/dashboard/EventDisplay.vue
@@ -10,7 +10,6 @@ import {
 } from "@tabler/icons-vue";
 
 import {format} from 'date-fns/format'
-import type { Mail, Notification } from './data-notifications'
 import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@/components/ui/dropdown-menu'
 import {Avatar, AvatarFallback} from '@/components/ui/avatar'
 import {Button} from '@/components/ui/button'
@@ -18,11 +17,11 @@ import {Separator} from '@/components/ui/separator'
 import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip'
 import {v2PersonalNotificationVariant} from "~/composables/aruna_api_json";
 
-interface MailDisplayProps {
-  mail: Notification | undefined //Mail | undefined
+interface EventDisplayProps {
+  eventData: BaseTx | undefined //Mail | undefined
 }
 
-const props = defineProps<MailDisplayProps>()
+const props = defineProps<EventDisplayProps>()
 
 const mailFallbackName = computed(() => {
   return 'A' //ToDo
@@ -48,7 +47,7 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
       <div class="flex items-center gap-2">
         <Tooltip>
           <TooltipTrigger as-child>
-            <Button variant="ghost" size="icon" :disabled="!mail">
+            <Button variant="ghost" size="icon" :disabled="!eventData">
               <IconArchive class="size-4"/>
               <span class="sr-only">Archive</span>
             </Button>
@@ -57,7 +56,7 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
         </Tooltip>
         <Tooltip>
           <TooltipTrigger as-child>
-            <Button variant="ghost" size="icon" :disabled="!mail">
+            <Button variant="ghost" size="icon" :disabled="!eventData">
               <IconArchiveOff class="size-4"/>
               <span class="sr-only">Move to junk</span>
             </Button>
@@ -66,7 +65,7 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
         </Tooltip>
         <Tooltip>
           <TooltipTrigger as-child>
-            <Button variant="ghost" size="icon" :disabled="!mail">
+            <Button variant="ghost" size="icon" :disabled="!eventData">
               <IconTrash class="size-4"/>
               <span class="sr-only">Move to trash</span>
             </Button>
@@ -141,7 +140,7 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
       <div class="ml-auto flex items-center gap-2">
         <Tooltip>
           <TooltipTrigger as-child>
-            <Button variant="ghost" size="icon" :disabled="!mail">
+            <Button variant="ghost" size="icon" :disabled="!eventData">
               <IconCornerUpLeft class="size-4"/>
               <span class="sr-only">Reply</span>
             </Button>
@@ -150,7 +149,7 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
         </Tooltip>
         <Tooltip>
           <TooltipTrigger as-child>
-            <Button variant="ghost" size="icon" :disabled="!mail">
+            <Button variant="ghost" size="icon" :disabled="!eventData">
               <IconCornerUpLeftDouble class="size-4"/>
               <span class="sr-only">Reply all</span>
             </Button>
@@ -159,7 +158,7 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
         </Tooltip>
         <Tooltip>
           <TooltipTrigger as-child>
-            <Button variant="ghost" size="icon" :disabled="!mail">
+            <Button variant="ghost" size="icon" :disabled="!eventData">
               <IconCornerUpRight class="size-4"/>
               <span class="sr-only">Forward</span>
             </Button>
@@ -170,7 +169,7 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
       <Separator orientation="vertical" class="mx-2 h-6"/>
       <DropdownMenu>
         <DropdownMenuTrigger as-child>
-          <Button variant="ghost" size="icon" :disabled="!mail">
+          <Button variant="ghost" size="icon" :disabled="!eventData">
             <IconDotsVertical class="size-4"/>
             <span class="sr-only">More</span>
           </Button>
@@ -184,7 +183,7 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
       </DropdownMenu>
     </div>
     <Separator/>
-    <div v-if="mail" class="flex flex-1 flex-col">
+    <div v-if="eventData" class="flex flex-1 flex-col">
       <div class="flex items-start p-4">
         <div class="flex items-start gap-4 text-sm">
           <Avatar>
@@ -194,11 +193,12 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
           </Avatar>
           <div class="grid gap-1">
             <div class="font-semibold">
-              {{ mail.from }}
+              {{ eventData.id }}
               <!--{{ mail.name || 'Aruna System' }}-->
             </div>
             <div class="line-clamp-1 text-xs">
-              {{ displayVariant(mail.variant) }}
+              {{ eventData.type }}
+              <!-- {{ displayVariant(eventData.variant) }} -->
               <!--{{ mail.subject }}-->
             </div>
             <div class="line-clamp-1 text-xs">
@@ -208,14 +208,16 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
             </div>
           </div>
         </div>
-        <div v-if="mail.date" class="ml-auto text-xs text-muted-foreground">
-          {{ format(new Date(mail.date), "PPpp") }}
+        <!--
+        <div v-if="eventData.date" class="ml-auto text-xs text-muted-foreground">
+          {{ format(new Date(eventData.date), "PPpp") }}
         </div>
+        -->
       </div>
 
       <Separator/>
       <div class="flex-1 whitespace-pre-wrap p-4 text-sm">
-        {{ mail.message }}
+        <pre>{{ JSON.stringify(eventData, null, 2).trim() }}</pre>
         <!--{{ mail.text }}-->
       </div>
       <!--
diff --git a/components/custom-ui/dashboard/NotificationList.vue b/components/custom-ui/dashboard/EventList.vue
similarity index 70%
rename from components/custom-ui/dashboard/NotificationList.vue
rename to components/custom-ui/dashboard/EventList.vue
index 77b9332d..6e015815 100644
--- a/components/custom-ui/dashboard/NotificationList.vue
+++ b/components/custom-ui/dashboard/EventList.vue
@@ -1,16 +1,15 @@
 <script lang="ts" setup>
 import {formatDistanceToNow} from 'date-fns'
-import type {Notification} from './data-notifications'
 import {ScrollArea} from '@/components/ui/scroll-area'
 import {cn} from '@/utils/shadcn'
 import {Badge} from '@/components/ui/badge'
 import {v2PersonalNotificationVariant} from "~/composables/aruna_api_json";
 
-interface MailListProps {
-  items: Notification[] //Mail[]
+interface EventListProps {
+  items: BaseTx[] //Mail[]
 }
 
-defineProps<MailListProps>()
+defineProps<EventListProps>()
 const selectedMail = defineModel<string>('selectedMail', {required: false})
 
 function getBadgeVariantFromLabel(label: string) {
@@ -33,49 +32,52 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
   <ScrollArea class="h-screen flex">
     <div class="flex-1 flex flex-col gap-2 p-4 pt-0">
       <TransitionGroup name="list" appear>
-        <button
-            v-for="item of items"
-            :key="item.id"
-            :class="cn(
-            'flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
-            selectedMail === item.id && 'bg-muted',
-          )"
-            @click="selectedMail = item.id"
-        >
+        <button v-for="item of items"
+                :key="item.id"
+                :class="cn('flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
+                selectedMail === item.id && 'bg-muted',)"
+                @click="selectedMail = item.id">
           <div class="flex w-full flex-col gap-1">
             <div class="flex items-center">
               <div class="flex items-center gap-2">
                 <div class="font-semibold">
-                  {{ item.from }}
+                  {{ item.id }}
                   <!--{{ item.name }}-->
                 </div>
+                <!--
                 <span v-if="!item.read" class="flex h-2 w-2 rounded-full bg-blue-600"/>
+                -->
               </div>
               <div
                   :class="cn(
                   'ml-auto text-xs',
                   selectedMail === item.id
                     ? 'text-foreground'
-                    : 'text-muted-foreground',
-                )"
-              >
-                {{ formatDistanceToNow(new Date(item.date), {addSuffix: true}) }}
+                    : 'text-muted-foreground',)">
+                <!-- {{ formatDistanceToNow(new Date(item.date), {addSuffix: true}) }} -->
               </div>
             </div>
 
             <div class="text-xs font-medium">
-              {{ displayVariant(item.variant) }}
+              {{ item.type }}
               <!--{{ item.subject }}-->
             </div>
           </div>
           <div class="line-clamp-2 text-xs text-muted-foreground">
-            {{ item.message.substring(0, 300) }}
+            Here can be a short summary for: {{ item.type }}
+            <!-- {{ item.message.substring(0, 300) }} -->
             <!--{{ item.text.substring(0, 300) }}-->
           </div>
           <div class="flex items-center gap-2">
+            <Badge variant="outline">Unregistered</Badge>
+            <Badge variant="default">Impersonated</Badge>
+            <Badge variant="secondary">User</Badge>
+
+            <!--
             <Badge v-for="label of item.labels" :key="label" :variant="getBadgeVariantFromLabel(label)">
               {{ label }}
             </Badge>
+            -->
           </div>
         </button>
       </TransitionGroup>
diff --git a/components/custom-ui/dashboard/Notifications.vue b/components/custom-ui/dashboard/Events.vue
similarity index 64%
rename from components/custom-ui/dashboard/Notifications.vue
rename to components/custom-ui/dashboard/Events.vue
index 2156bd87..f2088be7 100644
--- a/components/custom-ui/dashboard/Notifications.vue
+++ b/components/custom-ui/dashboard/Events.vue
@@ -1,9 +1,8 @@
 <script lang="ts" setup>
 import {IconSearch} from '@tabler/icons-vue'
 import {refDebounced} from '@vueuse/core'
-import {type Mail, type Notification} from './data-notifications'
-import NotificationList from './NotificationList.vue'
-import NotificationDisplay from './NotificationsDisplay.vue'
+import EventList from './EventList.vue'
+import EventDisplay from './EventDisplay.vue'
 import {Separator} from '@/components/ui/separator'
 import {Input} from '@/components/ui/input'
 import {
@@ -15,55 +14,45 @@ import {
 import {TooltipProvider} from '@/components/ui/tooltip'
 import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable'
 
-interface MailProps {
-  accounts: {
-    label: string
-    email: string
-    icon: string
-  }[]
-  mails: Notification[] //Mail[]
+interface EventsProps {
+  events: BaseTx[]
   defaultLayout?: number[]
   defaultCollapsed?: boolean
   navCollapsedSize: number
 }
 
-const props = withDefaults(defineProps<MailProps>(), {
+const props = withDefaults(defineProps<EventsProps>(), {
   defaultCollapsed: false,
   defaultLayout: () => [440, 655],
 })
 
+const events = toRef(() => props.events)
+
+watch(events, (newVal) => console.log('[EventsComponent]', newVal))
+
 const isCollapsed = ref(props.defaultCollapsed)
-const selectedMail = ref<string | undefined>(props.mails[0].id)
+const selectedEvent = ref<string | undefined>(events.value[0].id)
 const searchValue = ref('')
 const debouncedSearch = refDebounced(searchValue, 250)
 
 const filteredMailList = computed(() => {
-  let output: Notification[] //Mail[] = []
+  let output: BaseTx[]
   const searchValue = debouncedSearch.value?.trim()
   if (!searchValue) {
-    output = props.mails
+    output = events.value
   } else {
-    output = props.mails.filter((item) => {
-      return item.message.includes(debouncedSearch.value)
-          || item.variant.includes(debouncedSearch.value)
-          || item.from.includes(debouncedSearch.value)
-
-      /*
-      return item.name.includes(debouncedSearch.value)
-          || item.email.includes(debouncedSearch.value)
-          || item.name.includes(debouncedSearch.value)
-          || item.subject.includes(debouncedSearch.value)
-          || item.text.includes(debouncedSearch.value)
-      */
+    output = events.value.filter((item) => {
+      return item.event_id.includes(debouncedSearch.value)
+          || item.type.includes(debouncedSearch.value)
     })
   }
 
+  console.log('[EventsComponent] Search Value:', searchValue)
   return output
 })
 
-const unreadMailList = computed(() => filteredMailList.value.filter(item => !item.read))
-
-const selectedMailData = computed(() => props.mails.find(item => item.id === selectedMail.value))
+const unreadEventsList = computed(() => filteredMailList.value.filter(item => true))
+const selectedEventData = computed(() => props.events.find(item => item.id === selectedEvent.value))
 
 function onCollapse() {
   isCollapsed.value = true
@@ -105,16 +94,16 @@ function onExpand() {
             </form>
           </div>
           <TabsContent value="all" class="m-0">
-            <NotificationList v-model:selected-mail="selectedMail" :items="filteredMailList"/>
+            <EventList v-model:selected-mail="selectedEvent" :items="filteredMailList"/>
           </TabsContent>
           <TabsContent value="unread" class="m-0">
-            <NotificationList v-model:selected-mail="selectedMail" :items="unreadMailList"/>
+            <EventList v-model:selected-mail="selectedEvent" :items="unreadEventsList"/>
           </TabsContent>
         </Tabs>
       </ResizablePanel>
       <ResizableHandle id="resiz-handle-1" with-handle/>
       <ResizablePanel id="resize-panel-2" :default-size="defaultLayout[1]">
-        <NotificationDisplay :mail="selectedMailData"/>
+        <EventDisplay :eventData="selectedEventData"/>
       </ResizablePanel>
     </ResizablePanelGroup>
   </TooltipProvider>
diff --git a/composables/Events.ts b/composables/Events.ts
index aaa51958..abcc1d3d 100644
--- a/composables/Events.ts
+++ b/composables/Events.ts
@@ -3,7 +3,7 @@ import EventBus from "~/composables/EventBus";
 // by convention, composable function names start with "use"
 export async function useEvents(refs: Ref[], user_id: Ref<string | undefined>) {
   // state encapsulated and managed by the composable
-  const events: Ref<any[] | null> = ref(null)
+  const events: Ref<BaseTx[] | null> = ref(null)
   const {refresh: refreshEvents} = await useFetch<GetEventsResponse>('/api/v3/events', {
     server: false,
     lazy: true,
diff --git a/composables/api_wrapper.ts b/composables/api_wrapper.ts
index 889e1f67..d97f3ac4 100644
--- a/composables/api_wrapper.ts
+++ b/composables/api_wrapper.ts
@@ -78,9 +78,6 @@ export type Resource = components["schemas"]["Resource"]
 export type Token = components["schemas"]["Token"]
 export type User = components["schemas"]["User"]
 
-export type Endpoint = components["schemas"]["Endpoint"]
-export type Component = components["schemas"]["Component"]
-
 // ----- Custom
 export type ResourceElement = Resource & {
   children: ResourceElement[]
@@ -91,27 +88,87 @@ export type GroupInfo = {
   permission: GetGroupsFromUserResponseGroups
 }
 
-export type EventUser = {
-  user_id: string,
+// ----- Events
+export enum EventTypes {
+  RegisterUser = 'RegisterUserRequestTx',
+  CreateToken = 'CreateTokenRequestTx',
+  CreateRealm = 'CreateRealmRequestTx',
+  CreateGroup = 'CreateGroupRequestTx',
+  CreateComponent = 'CreateComponentRequestTx',
+  CreateResource = 'CreateResourceRequestTx',
+  TODO = 'Complete this enum'
+}
+
+export type Oidc = {
+  oidc_realm: string
+  oidc_subject: string
+}
+
+export type TxUser = {
+  user_id: string
   auth_method: {
+    oidc?: Oidc
+  } | {
     Aruna: number
-  },
-  impersonated_by: any | null
+  }
+  impersonated_by: TxUser | null
 }
 
-export type EventUserUnregistered = {
-  oidc_realm: string,
-  oidc_subject: string
+export type BaseTx = {
+  id: string
+  event_id: string
+  type: EventTypes,
+  requester: {
+    Unregistered?: Oidc
+    User?: TxUser
+  }
 }
 
-export type v3Notification = {
-  event_id: string,
-  id: string,
-  type: string,
-  req: any,
-  requester: EventUser | EventUserUnregistered
+export type RegisterUserTx = BaseTx & {
+  req: {
+    first_name: string,
+    last_name: string,
+    email: string,
+    identifier: string
+  }
 }
 
+export type CreateTokenTx = BaseTx & {
+  req: {
+    name: string,
+    scope: 'Personal' | 'Resource',
+    expires_at: Date,
+    group_id: string | null,
+    realm_id: string | null
+  }
+}
+
+export type CreateGroupTx = BaseTx & {
+  req: {
+    name: string,
+    description: string,
+  }
+  generated_group: {
+    id: string
+    name: string
+    description: string
+  }
+}
+
+export type CreateRealmTx = BaseTx & {
+  req: {
+    tag: string,
+    name: string,
+    description: string,
+  }
+  generated_group: {
+    id: string
+    name: string
+    description: string
+  }
+}
+
+
 // ----- Combined convenience
 export async function fetchChildren(resource_id: string): Promise<ResourceElement[]> {
   const children_ids = await $fetch<GetRelationsResponse>(`/api/v3/relations`, {
diff --git a/server/api/v3/events.get.ts b/server/api/v3/events.get.ts
index f92d54a7..0fb60f5c 100644
--- a/server/api/v3/events.get.ts
+++ b/server/api/v3/events.get.ts
@@ -6,6 +6,9 @@ export default defineEventHandler(async event => {
   const fetchUrl = `${baseUrl}/api/v3/info/events`
 
   console.log('[GetEventsRoute]', query)
+  if (!query.subscriber_id) {
+    return {events: []}
+  }
 
   return await $fetch<GetEventsResponse>(fetchUrl, {
     headers: {
@@ -14,7 +17,7 @@ export default defineEventHandler(async event => {
     query: query
   }).then(response => {
     if (response) {
-      console.log('[GetEventsRoute]', response)
+      //console.log('[GetEventsRoute]', response)
       return response
     }
   })

From d1069962ee434feebd0bd01fd64f552e11f9e635 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 11 Dec 2024 13:20:14 +0100
Subject: [PATCH 048/125] chore: Update aruna API definitions to latest version

---
 composables/api_wrapper.ts |    1 +
 types/aruna-v3-enums.ts    |   91 +-
 types/aruna-v3.d.ts        | 8498 ++++++++++++++++++------------------
 3 files changed, 4402 insertions(+), 4188 deletions(-)

diff --git a/composables/api_wrapper.ts b/composables/api_wrapper.ts
index d97f3ac4..06e54a87 100644
--- a/composables/api_wrapper.ts
+++ b/composables/api_wrapper.ts
@@ -59,6 +59,7 @@ export type GetS3CredentialsFromUserResponse = paths["/api/v3/users/s3credential
 
 export type GetRelationsResponse = paths["/api/v3/resources/{id}/relations"]["get"]["responses"][200]["content"]["application/json"];
 export type GetResourcesResponse = paths["/api/v3/resources"]["get"]["responses"][200]["content"]["application/json"];
+export type DeleteResourcesResponse = paths["/api/v3/resources/{id}"]["delete"]["responses"][200]["content"]["application/json"];
 
 export type GetRealmComponentsResponse = paths["/api/v3/realms/{id}/components"]["get"]["responses"][200]["content"]["application/json"];
 
diff --git a/types/aruna-v3-enums.ts b/types/aruna-v3-enums.ts
index ac2b0a79..f701bbbb 100644
--- a/types/aruna-v3-enums.ts
+++ b/types/aruna-v3-enums.ts
@@ -1,69 +1,84 @@
 export enum ComponentType {
-    Server = "Server",
-    Data = "Data",
-    Compute = "Compute"
+  Server = "Server",
+  Data = "Data",
+  Compute = "Compute"
 }
+
 export enum Direction {
-    Incoming = "Incoming",
-    Outgoing = "Outgoing",
-    All = "All"
+  Incoming = "Incoming",
+  Outgoing = "Outgoing",
+  All = "All"
 }
+
 export enum GenericNodeType {
-    Resource = "Resource"
+  Resource = "Resource"
 }
+
 export enum GenericNodeType {
-    User = "User"
+  User = "User"
 }
+
 export enum GenericNodeType {
-    ServiceAccount = "ServiceAccount"
+  ServiceAccount = "ServiceAccount"
 }
+
 export enum GenericNodeType {
-    Group = "Group"
+  Group = "Group"
 }
+
 export enum GenericNodeType {
-    Realm = "Realm"
+  Realm = "Realm"
 }
+
 export enum GenericNodeType {
-    Component = "Component"
+  Component = "Component"
 }
+
 export enum GetGroupsFromUserResponseGroups {
-    None = "None",
-    Read = "Read",
-    Append = "Append",
-    Write = "Write",
-    Admin = "Admin"
+  None = "None",
+  Read = "Read",
+  Append = "Append",
+  Write = "Write",
+  Admin = "Admin"
 }
+
 export enum HashAlgorithm {
-    Sha256 = "Sha256",
-    MD5 = "MD5"
+  Sha256 = "Sha256",
+  MD5 = "MD5"
 }
+
 export enum Permission {
-    None = "None",
-    Read = "Read",
-    Append = "Append",
-    Write = "Write",
-    Admin = "Admin"
+  None = "None",
+  Read = "Read",
+  Append = "Append",
+  Write = "Write",
+  Admin = "Admin"
 }
+
 export enum ResourceVariant {
-    Project = "Project",
-    Folder = "Folder",
-    Object = "Object"
+  Project = "Project",
+  Folder = "Folder",
+  Object = "Object"
 }
+
 export enum Scope {
-    Personal = "Personal"
+  Personal = "Personal"
 }
+
 export enum SyncingStatus {
-    Pending = "Pending",
-    Running = "Running",
-    Finished = "Finished",
-    Error = "Error"
+  Pending = "Pending",
+  Running = "Running",
+  Finished = "Finished",
+  Error = "Error"
 }
+
 export enum TokenType {
-    Aruna = "Aruna",
-    S3 = "S3"
+  Aruna = "Aruna",
+  S3 = "S3"
 }
+
 export enum VisibilityClass {
-    Public = "Public",
-    PublicMetadata = "PublicMetadata",
-    Private = "Private"
-}
\ No newline at end of file
+  Public = "Public",
+  PublicMetadata = "PublicMetadata",
+  Private = "Private"
+}
diff --git a/types/aruna-v3.d.ts b/types/aruna-v3.d.ts
index 56c0e838..50e68a89 100644
--- a/types/aruna-v3.d.ts
+++ b/types/aruna-v3.d.ts
@@ -4,4183 +4,4381 @@
  */
 
 export type paths = {
-    "/api/v3/global/components": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Create a new component */
-        post: operations["create_component"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/global/relation_variant": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Create a new relation variant */
-        post: operations["create_relation_variant"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/global/relations": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get relation info */
-        get: operations["get_relation_infos"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/groups": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Create a new group */
-        post: operations["create_group"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/groups/{group_id}/user/{user_id}": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        /** Add user to group */
-        patch: operations["add_user"];
-        trace?: never;
-    };
-    "/api/v3/groups/{id}": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get group by id */
-        get: operations["get_group"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/groups/{id}/join": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Request user join group */
-        post: operations["request_user_access_group"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/groups/{id}/users": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get users from group */
-        get: operations["get_group_users"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/info/events": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get events information */
-        get: operations["get_events"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/info/search": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Search for resources */
-        get: operations["search"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/info/stats": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get global server stats */
-        get: operations["get_stats"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/realms": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Create a new realm */
-        post: operations["create_realm"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/realms/{id}": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get realm */
-        get: operations["get_realm"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/realms/{id}/access": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Request group join realm */
-        post: operations["request_group_access_realm"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/realms/{id}/components": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get components of a realm (server, dataproxies, etc) */
-        get: operations["get_realm_components"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/realms/{id}/components/{component_id}": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        /** Add a component to a realm (dataproxies, etc) */
-        patch: operations["add_component_to_realm"];
-        trace?: never;
-    };
-    "/api/v3/realms/{id}/groups": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get groups from realm */
-        get: operations["get_realm_groups"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/realms/{id}/groups/{group_id}": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        /** Add group to realm */
-        patch: operations["add_group"];
-        trace?: never;
-    };
-    "/api/v3/resources": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get resources */
-        get: operations["get_resource"];
-        put?: never;
-        /** Create a new resource */
-        post: operations["create_resource"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/authors": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Update resource authors */
-        post: operations["update_resource_authors"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/batch": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Create a new resource */
-        post: operations["create_resource_batch"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/description": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Update resource description */
-        post: operations["update_resource_description"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/identifiers": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Update resource identifiers */
-        post: operations["update_resource_identifiers"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/labels": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Update resource labels */
-        post: operations["update_resource_labels"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/license": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Update resource license */
-        post: operations["update_resource_license"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/name": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Update resource name */
-        post: operations["update_resource_name"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/projects": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Create a new resource */
-        post: operations["create_project"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/relations": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Create a new relation */
-        post: operations["create_relation"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/title": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Update resource title */
-        post: operations["update_resource_title"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/visibility": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Update resource visiblity */
-        post: operations["update_resource_visibility"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/{id}/data": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        get?: never;
-        put?: never;
-        /** Register data for an object */
-        post: operations["register_data"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/resources/{id}/relations": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get relations of a resource */
-        get: operations["get_relations"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/users": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get current user */
-        get: operations["get_user"];
-        put?: never;
-        /** Register a new user */
-        post: operations["register_user"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/users/groups": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get all groups from the current user */
-        get: operations["get_user_groups"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/users/realms": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** Get all realms from the current user */
-        get: operations["get_user_realms"];
-        put?: never;
-        post?: never;
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/users/s3credentials": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** List all tokens from the current user */
-        get: operations["get_s3_credentials"];
-        put?: never;
-        /** Create a s3credential */
-        post: operations["create_s3_credential"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
-    };
-    "/api/v3/users/tokens": {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        /** List all tokens from the current user */
-        get: operations["get_tokens"];
-        put?: never;
-        /** Create a token */
-        post: operations["create_token"];
-        delete?: never;
-        options?: never;
-        head?: never;
-        patch?: never;
-        trace?: never;
+  "/api/v3/global/components": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
     };
+    get?: never;
+    put?: never;
+    /** Create a new component */
+    post: operations["create_component"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/global/relation_variant": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new relation variant */
+    post: operations["create_relation_variant"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/global/relations": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get relation info */
+    get: operations["get_relation_infos"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/groups": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new group */
+    post: operations["create_group"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/groups/{group_id}/user/{user_id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    /** Add user to group */
+    patch: operations["add_user"];
+    trace?: never;
+  };
+  "/api/v3/groups/{id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get group by id */
+    get: operations["get_group"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/groups/{id}/join": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Request user join group */
+    post: operations["request_user_access_group"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/groups/{id}/users": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get users from group */
+    get: operations["get_group_users"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/info/events": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get events information */
+    get: operations["get_events"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/info/search": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Search for resources */
+    get: operations["search"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/info/stats": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get global server stats */
+    get: operations["get_stats"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new realm */
+    post: operations["create_realm"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms/{id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get realm */
+    get: operations["get_realm"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms/{id}/access": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Request group join realm */
+    post: operations["request_group_access_realm"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms/{id}/components": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get components of a realm (server, dataproxies, etc) */
+    get: operations["get_realm_components"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms/{id}/components/{component_id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    /** Add a component to a realm (dataproxies, etc) */
+    patch: operations["add_component_to_realm"];
+    trace?: never;
+  };
+  "/api/v3/realms/{id}/groups": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get groups from realm */
+    get: operations["get_realm_groups"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/realms/{id}/groups/{group_id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    /** Add group to realm */
+    patch: operations["add_group"];
+    trace?: never;
+  };
+  "/api/v3/resources": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get resources */
+    get: operations["get_resource"];
+    put?: never;
+    /** Create a new resource */
+    post: operations["create_resource"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/authors": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource authors */
+    post: operations["update_resource_authors"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/batch": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new resource */
+    post: operations["create_resource_batch"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/description": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource description */
+    post: operations["update_resource_description"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/identifiers": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource identifiers */
+    post: operations["update_resource_identifiers"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/labels": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource labels */
+    post: operations["update_resource_labels"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/license": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource license */
+    post: operations["update_resource_license"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/name": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource name */
+    post: operations["update_resource_name"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/projects": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new resource */
+    post: operations["create_project"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/relations": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Create a new relation */
+    post: operations["create_relation"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/title": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource title */
+    post: operations["update_resource_title"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/visibility": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Update resource visiblity */
+    post: operations["update_resource_visibility"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/{id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    post?: never;
+    /** Register data for an object */
+    delete: operations["delete_resource"];
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/{id}/authorize": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Register data for an object */
+    get: operations["authorize_resource"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/{id}/data": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    get?: never;
+    put?: never;
+    /** Register data for an object */
+    post: operations["register_data"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/resources/{id}/relations": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get relations of a resource */
+    get: operations["get_relations"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/users": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get current user */
+    get: operations["get_user"];
+    put?: never;
+    /** Register a new user */
+    post: operations["register_user"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/users/groups": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get all groups from the current user */
+    get: operations["get_user_groups"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/users/realms": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get all realms from the current user */
+    get: operations["get_user_realms"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/users/s3credentials": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** List all tokens from the current user */
+    get: operations["get_s3_credentials"];
+    put?: never;
+    /** Create a s3credential */
+    post: operations["create_s3_credential"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/users/tokens": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** List all tokens from the current user */
+    get: operations["get_tokens"];
+    put?: never;
+    /** Create a token */
+    post: operations["create_token"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
 };
 export type webhooks = Record<string, never>;
 export type components = {
-    schemas: {
-        AddComponentToRealmResponse: Record<string, never>;
-        AddGroupRequest: {
-            /** Format: ulid */
-            group_id: string;
-            /** Format: ulid */
-            realm_id: string;
-        };
-        AddGroupResponse: Record<string, never>;
-        AddUserResponse: Record<string, never>;
-        Author: {
-            email: string;
-            first_name: string;
-            /** Format: ulid */
-            id: string;
-            identifier: string;
-            last_name: string;
-        };
-        BatchResource: {
-            authors?: components["schemas"]["Author"][];
-            description?: string;
-            identifiers?: string[];
-            labels?: components["schemas"]["KeyValue"][];
-            license_tag?: string;
+  schemas: {
+    AddComponentToRealmResponse: Record<string, never>;
+    AddGroupRequest: {
+      /** Format: ulid */
+      group_id: string;
+      /** Format: ulid */
+      realm_id: string;
+    };
+    AddGroupResponse: Record<string, never>;
+    AddUserResponse: Record<string, never>;
+    Author: {
+      email: string;
+      first_name: string;
+      /** Format: ulid */
+      id: string;
+      identifier: string;
+      last_name: string;
+    };
+    BatchResource: {
+      authors?: components["schemas"]["Author"][];
+      description?: string;
+      identifiers?: string[];
+      labels?: components["schemas"]["KeyValue"][];
+      license_tag?: string;
+      name: string;
+      parent: components["schemas"]["Parent"];
+      title?: string;
+      variant: components["schemas"]["ResourceVariant"];
+      visibility?: components["schemas"]["VisibilityClass"];
+    };
+    Component: {
+      component_type: components["schemas"]["ComponentType"];
+      deleted: boolean;
+      description: string;
+      endpoints: components["schemas"]["Endpoint"][];
+      /** Format: ulid */
+      id: string;
+      name: string;
+      public: boolean;
+    };
+    /** @enum {string} */
+    ComponentType: ComponentType;
+    Constraints: Record<string, never>;
+    CreateComponentRequest: {
+      component_type: components["schemas"]["ComponentType"];
+      description: string;
+      endpoints: components["schemas"]["Endpoint"][];
+      name: string;
+      pubkey: string;
+      public: boolean;
+    };
+    CreateComponentResponse: {
+      component: components["schemas"]["Component"];
+    };
+    CreateGroupRequest: {
+      description: string;
+      name: string;
+    };
+    CreateGroupResponse: {
+      group: components["schemas"]["Group"];
+    };
+    CreateProjectRequest: {
+      authors?: components["schemas"]["Author"][];
+      /** Format: ulid */
+      data_endpoint?: string | null;
+      description?: string;
+      /** Format: ulid */
+      group_id?: string;
+      identifiers?: string[];
+      labels?: components["schemas"]["KeyValue"][];
+      license_tag?: string;
+      name: string;
+      /** Format: ulid */
+      realm_id?: string;
+      title?: string;
+      visibility?: components["schemas"]["VisibilityClass"];
+    };
+    CreateProjectResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    CreateRealmRequest: {
+      description: string;
+      name: string;
+      tag: string;
+    };
+    CreateRealmResponse: {
+      /** Format: ulid */
+      admin_group_id: string;
+      realm: components["schemas"]["Realm"];
+    };
+    CreateRelationRequest: {
+      /** Format: ulid */
+      source: string;
+      /** Format: ulid */
+      target: string;
+      /** Format: int32 */
+      variant: number;
+    };
+    CreateRelationResponse: Record<string, never>;
+    CreateRelationVariantRequest: {
+      backward_type: string;
+      forward_type: string;
+    };
+    CreateRelationVariantResponse: {
+      /** Format: int32 */
+      idx: number;
+    };
+    CreateResourceBatchRequest: {
+      resources: components["schemas"]["BatchResource"][];
+    };
+    CreateResourceRequest: {
+      authors?: components["schemas"]["Author"][];
+      description?: string;
+      identifiers?: string[];
+      labels?: components["schemas"]["KeyValue"][];
+      license_tag?: string;
+      name: string;
+      /** Format: ulid */
+      parent_id: string;
+      title?: string;
+      variant: components["schemas"]["ResourceVariant"];
+      visibility?: components["schemas"]["VisibilityClass"];
+    };
+    CreateResourceResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    CreateS3CredentialsRequest: {
+      /** Format: ulid */
+      component_id: string;
+      /** Format: date-time */
+      expires_at?: string | null;
+      /** Format: ulid */
+      group_id: string;
+      name: string;
+      /** Format: ulid */
+      realm_id: string;
+      scope?: components["schemas"]["Scope"];
+    };
+    CreateS3CredentialsResponse: {
+      access_key: string;
+      /** Format: ulid */
+      component_id: string;
+      secret_key: string;
+      token: components["schemas"]["Token"];
+    };
+    CreateTokenRequest: {
+      /** Format: date-time */
+      expires_at?: string | null;
+      /** Format: ulid */
+      group_id?: string | null;
+      name: string;
+      /** Format: ulid */
+      realm_id?: string | null;
+      scope?: components["schemas"]["Scope"];
+    };
+    CreateTokenResponse: {
+      secret: string;
+      token: components["schemas"]["Token"];
+    };
+    DataLocation: {
+      /** Format: ulid */
+      endpoint_id: string;
+      status: components["schemas"]["SyncingStatus"];
+    };
+    /** @enum {string} */
+    Direction: Direction;
+    Endpoint: {
+      /** Format: uri */
+      S3: string;
+    } | {
+      /** Format: uri */
+      Json: string;
+    } | {
+      /** Format: uri */
+      Grpc: string;
+    } | {
+      /** Format: uri */
+      Consensus: string;
+    };
+    GenericNode: (components["schemas"]["Resource"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    }) | (components["schemas"]["User"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    }) | (components["schemas"]["ServiceAccount"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    }) | (components["schemas"]["Group"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    }) | (components["schemas"]["Realm"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    }) | (components["schemas"]["Component"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
+    });
+    GetEventsResponse: {
+      events: {
+        [key: string]: unknown;
+      }[];
+    };
+    GetGroupResponse: {
+      group: components["schemas"]["Group"];
+    };
+    GetGroupsFromRealmResponse: {
+      groups: components["schemas"]["Group"][];
+    };
+    GetGroupsFromUserResponse: {
+      groups: [
+        {
+          deleted: boolean;
+          description: string;
+          /** Format: ulid */
+          id: string;
+          name: string;
+        },
+        GetGroupsFromUserResponseGroups
+      ][];
+    };
+    GetRealmComponentsResponse: {
+      components: components["schemas"]["Component"][];
+    };
+    GetRealmResponse: {
+      realm: components["schemas"]["Realm"];
+    };
+    GetRealmsFromUserResponse: {
+      realms: components["schemas"]["Realm"][];
+    };
+    GetRelationInfosResponse: {
+      relation_infos: components["schemas"]["RelationInfo"][];
+    };
+    GetRelationsResponse: {
+      offset?: number | null;
+      relations: components["schemas"]["Relation"][];
+    };
+    GetResourcesResponse: {
+      resources: components["schemas"]["Resource"][];
+    };
+    GetS3CredentialsResponse: {
+      tokens: components["schemas"]["S3Credential"][];
+    };
+    GetStatsResponse: {
+      projects: number;
+      realms: number;
+      resources: number;
+      storage: number;
+      users: number;
+    };
+    GetTokensResponse: {
+      tokens: components["schemas"]["Token"][];
+    };
+    GetUserResponse: {
+      user: components["schemas"]["User"];
+    };
+    GetUsersFromGroupResponse: {
+      users: components["schemas"]["User"][];
+    };
+    Group: {
+      deleted: boolean;
+      description: string;
+      /** Format: ulid */
+      id: string;
+      name: string;
+    };
+    GroupAccessRealmResponse: Record<string, never>;
+    Hash: {
+      algorithm: components["schemas"]["HashAlgorithm"];
+      value: string;
+    };
+    /** @enum {string} */
+    HashAlgorithm: HashAlgorithm;
+    KeyValue: {
+      key: string;
+      locked: boolean;
+      value: string;
+    };
+    Parent: {
+      /** Format: ulid */
+      ID: string;
+    } | {
+      /** Format: int32 */
+      Idx: number;
+    };
+    /** @enum {string} */
+    Permission: Permission;
+    Realm: {
+      deleted: boolean;
+      description: string;
+      /** Format: ulid */
+      id: string;
+      name: string;
+      tag: string;
+    };
+    RegisterDataRequest: {
+      /** Format: ulid */
+      component_id: string;
+      hashes: components["schemas"]["Hash"][];
+      /** Format: ulid */
+      object_id?: string;
+    };
+    RegisterDataResponse: Record<string, never>;
+    RegisterUserRequest: {
+      email: string;
+      first_name: string;
+      identifier: string;
+      last_name: string;
+    };
+    RegisterUserResponse: {
+      user: components["schemas"]["User"];
+    };
+    Relation: {
+      /** Format: ulid */
+      from_id: string;
+      relation_type: string;
+      /** Format: ulid */
+      to_id: string;
+    };
+    RelationInfo: {
+      backward_type: string;
+      forward_type: string;
+      idx: components["schemas"]["u32"];
+      internal: boolean;
+    };
+    Resource: {
+      authors: components["schemas"]["Author"][];
+      /** Format: int64 */
+      content_len: number;
+      /** Format: int64 */
+      count: number;
+      /** Format: date-time */
+      created_at: string;
+      deleted: boolean;
+      description: string;
+      hashes: components["schemas"]["Hash"][];
+      /** Format: ulid */
+      id: string;
+      identifiers: string[];
+      labels: components["schemas"]["KeyValue"][];
+      /** Format: date-time */
+      last_modified: string;
+      license_tag: string;
+      location: components["schemas"]["DataLocation"][];
+      locked: boolean;
+      name: string;
+      /** Format: int64 */
+      revision: number;
+      title: string;
+      variant: components["schemas"]["ResourceVariant"];
+      visibility: components["schemas"]["VisibilityClass"];
+    };
+    /** @enum {string} */
+    ResourceVariant: ResourceVariant;
+    S3Credential: {
+      access_key: string;
+      token_info: components["schemas"]["Token"];
+    };
+    Scope: Scope | {
+      Ressource: {
+        permission: components["schemas"]["Permission"];
+        /** Format: ulid */
+        resource_id: string;
+      };
+    };
+    SearchResponse: {
+      expected_hits: number;
+      resources: components["schemas"]["GenericNode"][];
+    };
+    ServiceAccount: {
+      deleted: boolean;
+      /** Format: ulid */
+      id: string;
+      name: string;
+    };
+    /** @enum {string} */
+    SyncingStatus: SyncingStatus;
+    Token: {
+      /** Format: ulid */
+      component_id?: string | null;
+      constraints?: null | components["schemas"]["Constraints"];
+      /** Format: ulid */
+      default_group?: string | null;
+      /** Format: ulid */
+      default_realm?: string | null;
+      /** Format: date-time */
+      expires_at: string;
+      /** Format: int32 */
+      id: number;
+      name: string;
+      scope: components["schemas"]["Scope"];
+      token_type: components["schemas"]["TokenType"];
+      /** Format: ulid */
+      user_id: string;
+    };
+    /** @enum {string} */
+    TokenType: TokenType;
+    UpdateResourceAuthorsRequest: {
+      authors_to_add: components["schemas"]["Author"][];
+      authors_to_remove: components["schemas"]["Author"][];
+      /** Format: ulid */
+      id: string;
+    };
+    UpdateResourceAuthorsResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceDescriptionRequest: {
+      description: string;
+      /** Format: ulid */
+      id: string;
+    };
+    UpdateResourceDescriptionResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceIdentifiersRequest: {
+      /** Format: ulid */
+      id: string;
+      ids_to_add: string[];
+      ids_to_remove: string[];
+    };
+    UpdateResourceIdentifiersResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceLabelsRequest: {
+      /** Format: ulid */
+      id: string;
+      labels_to_add: components["schemas"]["KeyValue"][];
+      labels_to_remove: components["schemas"]["KeyValue"][];
+    };
+    UpdateResourceLabelsResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceLicenseRequest: {
+      /** Format: ulid */
+      id: string;
+      license_tag: string;
+    };
+    UpdateResourceLicenseResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceNameRequest: {
+      /** Format: ulid */
+      id: string;
+      name: string;
+    };
+    UpdateResourceNameResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceTitleRequest: {
+      /** Format: ulid */
+      id: string;
+      title: string;
+    };
+    UpdateResourceTitleResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    UpdateResourceVisibilityRequest: {
+      /** Format: ulid */
+      id: string;
+      visibility: components["schemas"]["VisibilityClass"];
+    };
+    UpdateResourceVisibilityResponse: {
+      resource: components["schemas"]["Resource"];
+    };
+    User: {
+      deleted: boolean;
+      email: string;
+      first_name: string;
+      global_admin: boolean;
+      /** Format: ulid */
+      id: string;
+      identifiers: string;
+      last_name: string;
+    };
+    UserAccessGroupResponse: Record<string, never>;
+    /** @enum {string} */
+    VisibilityClass: VisibilityClass;
+    /** Format: int32 */
+    u32: number;
+  };
+  responses: never;
+  parameters: never;
+  requestBodies: never;
+  headers: never;
+  pathItems: never;
+};
+export type $defs = Record<string, never>;
+
+export interface operations {
+  create_component: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateComponentRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateComponentResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_relation_variant: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateRelationVariantRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateRelationVariantResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_relation_infos: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetRelationInfosResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_group: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateGroupRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateGroupResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  add_user: {
+    parameters: {
+      query: {
+        /** @description Permission */
+        permission: components["schemas"]["Permission"];
+      };
+      header?: never;
+      path: {
+        /** @description Group ID */
+        group_id: string;
+        /** @description User ID */
+        user_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["AddUserResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_group: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetGroupResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  request_user_access_group: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Group ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UserAccessGroupResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
-            parent: components["schemas"]["Parent"];
-            title?: string;
-            variant: components["schemas"]["ResourceVariant"];
-            visibility?: components["schemas"]["VisibilityClass"];
-        };
-        Component: {
-            component_type: components["schemas"]["ComponentType"];
-            description: string;
-            endpoints: components["schemas"]["Endpoint"][];
-            /** Format: ulid */
-            id: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
-            public: boolean;
-        };
-        /** @enum {string} */
-        ComponentType: ComponentType;
-        Constraints: Record<string, never>;
-        CreateComponentRequest: {
-            component_type: components["schemas"]["ComponentType"];
-            description: string;
-            endpoints: components["schemas"]["Endpoint"][];
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_group_users: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Group ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetUsersFromGroupResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
-            pubkey: string;
-            public: boolean;
+          };
         };
-        CreateComponentResponse: {
-            component: components["schemas"]["Component"];
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
         };
-        CreateGroupRequest: {
-            description: string;
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_events: {
+    parameters: {
+      query: {
+        subscriber_id: string;
+        acknowledge_from?: string | null;
+      };
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetEventsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
         };
-        CreateGroupResponse: {
-            group: components["schemas"]["Group"];
-        };
-        CreateProjectRequest: {
-            authors?: components["schemas"]["Author"][];
-            /** Format: ulid */
-            data_endpoint?: string | null;
-            description?: string;
-            /** Format: ulid */
-            group_id: string;
-            identifiers?: string[];
-            labels?: components["schemas"]["KeyValue"][];
-            license_tag?: string;
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  search: {
+    parameters: {
+      query?: {
+        query?: string;
+        filter?: string | null;
+        limit?: number | null;
+        offset?: number | null;
+      };
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["SearchResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
-            /** Format: ulid */
-            realm_id: string;
-            title?: string;
-            visibility?: components["schemas"]["VisibilityClass"];
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
         };
-        CreateProjectResponse: {
-            resource: components["schemas"]["Resource"];
+        content: {
+          "text/plain": string;
         };
-        CreateRealmRequest: {
-            description: string;
+      };
+    };
+  };
+  get_stats: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetStatsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
-            tag: string;
-        };
-        CreateRealmResponse: {
-            /** Format: ulid */
-            admin_group_id: string;
-            realm: components["schemas"]["Realm"];
-        };
-        CreateRelationRequest: {
-            /** Format: ulid */
-            source: string;
-            /** Format: ulid */
-            target: string;
-            /** Format: int32 */
-            variant: number;
-        };
-        CreateRelationResponse: Record<string, never>;
-        CreateRelationVariantRequest: {
-            backward_type: string;
-            forward_type: string;
-        };
-        CreateRelationVariantResponse: {
-            /** Format: int32 */
-            idx: number;
-        };
-        CreateResourceBatchRequest: {
-            resources: components["schemas"]["BatchResource"][];
-        };
-        CreateResourceRequest: {
-            authors?: components["schemas"]["Author"][];
-            description?: string;
-            identifiers?: string[];
-            labels?: components["schemas"]["KeyValue"][];
-            license_tag?: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_realm: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateRealmRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateRealmResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
-            /** Format: ulid */
-            parent_id: string;
-            title?: string;
-            variant: components["schemas"]["ResourceVariant"];
-            visibility?: components["schemas"]["VisibilityClass"];
-        };
-        CreateResourceResponse: {
-            resource: components["schemas"]["Resource"];
-        };
-        CreateS3CredentialsRequest: {
-            /** Format: ulid */
-            component_id: string;
-            /** Format: date-time */
-            expires_at?: string | null;
-            /** Format: ulid */
-            group_id: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
-            /** Format: ulid */
-            realm_id: string;
-            scope?: components["schemas"]["Scope"];
-        };
-        CreateS3CredentialsResponse: {
-            access_key: string;
-            /** Format: ulid */
-            component_id: string;
-            secret_key: string;
-            token: components["schemas"]["Token"];
-        };
-        CreateTokenRequest: {
-            /** Format: date-time */
-            expires_at?: string | null;
-            /** Format: ulid */
-            group_id?: string | null;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_realm: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetRealmResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
-            /** Format: ulid */
-            realm_id?: string | null;
-            scope?: components["schemas"]["Scope"];
-        };
-        CreateTokenResponse: {
-            secret: string;
-            token: components["schemas"]["Token"];
-        };
-        DataLocation: {
-            /** Format: ulid */
-            endpoint_id: string;
-            status: components["schemas"]["SyncingStatus"];
-        };
-        /** @enum {string} */
-        Direction: Direction;
-        Endpoint: {
-            /** Format: uri */
-            S3: string;
-        } | {
-            /** Format: uri */
-            Json: string;
-        } | {
-            /** Format: uri */
-            Grpc: string;
-        } | {
-            /** Format: uri */
-            Consensus: string;
-        };
-        GenericNode: (components["schemas"]["Resource"] & {
-            /** @enum {string} */
-            type: GenericNodeType;
-        }) | (components["schemas"]["User"] & {
-            /** @enum {string} */
-            type: GenericNodeType;
-        }) | (components["schemas"]["ServiceAccount"] & {
-            /** @enum {string} */
-            type: GenericNodeType;
-        }) | (components["schemas"]["Group"] & {
-            /** @enum {string} */
-            type: GenericNodeType;
-        }) | (components["schemas"]["Realm"] & {
-            /** @enum {string} */
-            type: GenericNodeType;
-        }) | (components["schemas"]["Component"] & {
-            /** @enum {string} */
-            type: GenericNodeType;
-        });
-        GetEventsResponse: {
-            events: {
-                [key: string]: unknown;
-            }[];
-        };
-        GetGroupResponse: {
-            group: components["schemas"]["Group"];
-        };
-        GetGroupsFromRealmResponse: {
-            groups: components["schemas"]["Group"][];
-        };
-        GetGroupsFromUserResponse: {
-            groups: [
-                {
-                    description: string;
-                    /** Format: ulid */
-                    id: string;
-                    name: string;
-                },
-                GetGroupsFromUserResponseGroups
-            ][];
-        };
-        GetRealmComponentsResponse: {
-            components: components["schemas"]["Component"][];
-        };
-        GetRealmResponse: {
-            realm: components["schemas"]["Realm"];
-        };
-        GetRealmsFromUserResponse: {
-            realms: components["schemas"]["Realm"][];
-        };
-        GetRelationInfosResponse: {
-            relation_infos: components["schemas"]["RelationInfo"][];
-        };
-        GetRelationsResponse: {
-            offset?: number | null;
-            relations: components["schemas"]["Relation"][];
-        };
-        GetResourcesResponse: {
-            resources: components["schemas"]["Resource"][];
-        };
-        GetS3CredentialsResponse: {
-            tokens: components["schemas"]["S3Credential"][];
-        };
-        GetStatsResponse: {
-            projects: number;
-            realms: number;
-            resources: number;
-            storage: number;
-            users: number;
-        };
-        GetTokensResponse: {
-            tokens: components["schemas"]["Token"][];
-        };
-        GetUserResponse: {
-            user: components["schemas"]["User"];
-        };
-        GetUsersFromGroupResponse: {
-            users: components["schemas"]["User"][];
-        };
-        Group: {
-            description: string;
-            /** Format: ulid */
-            id: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
         };
-        GroupAccessRealmResponse: Record<string, never>;
-        Hash: {
-            algorithm: components["schemas"]["HashAlgorithm"];
-            value: string;
-        };
-        /** @enum {string} */
-        HashAlgorithm: HashAlgorithm;
-        KeyValue: {
-            key: string;
-            locked: boolean;
-            value: string;
-        };
-        Parent: {
-            /** Format: ulid */
-            ID: string;
-        } | {
-            /** Format: int32 */
-            Idx: number;
-        };
-        /** @enum {string} */
-        Permission: Permission;
-        Realm: {
-            description: string;
-            /** Format: ulid */
-            id: string;
+      };
+    };
+  };
+  request_group_access_realm: {
+    parameters: {
+      query: {
+        /** @description Group ID */
+        group_id: string;
+      };
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GroupAccessRealmResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
-            tag: string;
-        };
-        RegisterDataRequest: {
-            /** Format: ulid */
-            component_id: string;
-            hashes: components["schemas"]["Hash"][];
-            /** Format: ulid */
-            object_id?: string;
-        };
-        RegisterDataResponse: Record<string, never>;
-        RegisterUserRequest: {
-            email: string;
-            first_name: string;
-            identifier: string;
-            last_name: string;
-        };
-        RegisterUserResponse: {
-            user: components["schemas"]["User"];
-        };
-        Relation: {
-            /** Format: ulid */
-            from_id: string;
-            relation_type: string;
-            /** Format: ulid */
-            to_id: string;
-        };
-        RelationInfo: {
-            backward_type: string;
-            forward_type: string;
-            idx: components["schemas"]["u32"];
-            internal: boolean;
-        };
-        Resource: {
-            authors: components["schemas"]["Author"][];
-            /** Format: int64 */
-            content_len: number;
-            /** Format: int64 */
-            count: number;
-            /** Format: date-time */
-            created_at: string;
-            description: string;
-            hashes: components["schemas"]["Hash"][];
-            /** Format: ulid */
-            id: string;
-            identifiers: string[];
-            labels: components["schemas"]["KeyValue"][];
-            /** Format: date-time */
-            last_modified: string;
-            license_tag: string;
-            location: components["schemas"]["DataLocation"][];
-            locked: boolean;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_realm_components: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetRealmComponentsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
-            /** Format: int64 */
-            revision: number;
-            title: string;
-            variant: components["schemas"]["ResourceVariant"];
-            visibility: components["schemas"]["VisibilityClass"];
-        };
-        /** @enum {string} */
-        ResourceVariant: ResourceVariant;
-        S3Credential: {
-            access_key: string;
-            token_info: components["schemas"]["Token"];
-        };
-        Scope: Scope | {
-            Ressource: {
-                permission: components["schemas"]["Permission"];
-                /** Format: ulid */
-                resource_id: string;
-            };
-        };
-        SearchResponse: {
-            expected_hits: number;
-            resources: components["schemas"]["GenericNode"][];
-        };
-        ServiceAccount: {
-            /** Format: ulid */
-            id: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
         };
-        /** @enum {string} */
-        SyncingStatus: SyncingStatus;
-        Token: {
-            /** Format: ulid */
-            component_id?: string | null;
-            constraints?: null | components["schemas"]["Constraints"];
-            /** Format: ulid */
-            default_group?: string | null;
-            /** Format: ulid */
-            default_realm?: string | null;
-            /** Format: date-time */
-            expires_at: string;
-            /** Format: int32 */
-            id: number;
+      };
+    };
+  };
+  add_component_to_realm: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+        /** @description Component ID */
+        component_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["AddComponentToRealmResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
-            scope: components["schemas"]["Scope"];
-            token_type: components["schemas"]["TokenType"];
-            /** Format: ulid */
-            user_id: string;
-        };
-        /** @enum {string} */
-        TokenType: TokenType;
-        UpdateResourceAuthorsRequest: {
-            authors_to_add: components["schemas"]["Author"][];
-            authors_to_remove: components["schemas"]["Author"][];
-            /** Format: ulid */
-            id: string;
-        };
-        UpdateResourceAuthorsResponse: {
-            resource: components["schemas"]["Resource"];
-        };
-        UpdateResourceDescriptionRequest: {
-            description: string;
-            /** Format: ulid */
-            id: string;
-        };
-        UpdateResourceDescriptionResponse: {
-            resource: components["schemas"]["Resource"];
-        };
-        UpdateResourceIdentifiersRequest: {
-            /** Format: ulid */
-            id: string;
-            ids_to_add: string[];
-            ids_to_remove: string[];
-        };
-        UpdateResourceIdentifiersResponse: {
-            resource: components["schemas"]["Resource"];
-        };
-        UpdateResourceLabelsRequest: {
-            /** Format: ulid */
-            id: string;
-            labels_to_add: components["schemas"]["KeyValue"][];
-            labels_to_remove: components["schemas"]["KeyValue"][];
-        };
-        UpdateResourceLabelsResponse: {
-            resource: components["schemas"]["Resource"];
-        };
-        UpdateResourceLicenseRequest: {
-            /** Format: ulid */
-            id: string;
-            license_tag: string;
-        };
-        UpdateResourceLicenseResponse: {
-            resource: components["schemas"]["Resource"];
-        };
-        UpdateResourceNameRequest: {
-            /** Format: ulid */
-            id: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
             name: string;
+          };
         };
-        UpdateResourceNameResponse: {
-            resource: components["schemas"]["Resource"];
-        };
-        UpdateResourceTitleRequest: {
-            /** Format: ulid */
-            id: string;
-            title: string;
-        };
-        UpdateResourceTitleResponse: {
-            resource: components["schemas"]["Resource"];
-        };
-        UpdateResourceVisibilityRequest: {
-            /** Format: ulid */
-            id: string;
-            visibility: components["schemas"]["VisibilityClass"];
-        };
-        UpdateResourceVisibilityResponse: {
-            resource: components["schemas"]["Resource"];
-        };
-        User: {
-            email: string;
-            first_name: string;
-            global_admin: boolean;
-            /** Format: ulid */
-            id: string;
-            identifiers: string;
-            last_name: string;
-        };
-        UserAccessGroupResponse: Record<string, never>;
-        /** @enum {string} */
-        VisibilityClass: VisibilityClass;
-        /** Format: int32 */
-        u32: number;
-    };
-    responses: never;
-    parameters: never;
-    requestBodies: never;
-    headers: never;
-    pathItems: never;
-};
-export type $defs = Record<string, never>;
-export interface operations {
-    create_component: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["CreateComponentRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["CreateComponentResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    create_relation_variant: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["CreateRelationVariantRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["CreateRelationVariantResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_relation_infos: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetRelationInfosResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    create_group: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["CreateGroupRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["CreateGroupResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    add_user: {
-        parameters: {
-            query: {
-                /** @description Permission */
-                permission: components["schemas"]["Permission"];
-            };
-            header?: never;
-            path: {
-                /** @description Group ID */
-                group_id: string;
-                /** @description User ID */
-                user_id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["AddUserResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_group: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                /** @description Realm ID */
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetGroupResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    request_user_access_group: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                /** @description Group ID */
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["UserAccessGroupResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_group_users: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                /** @description Group ID */
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetUsersFromGroupResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_events: {
-        parameters: {
-            query: {
-                subscriber_id: string;
-                acknowledge_from?: string | null;
-            };
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetEventsResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    search: {
-        parameters: {
-            query?: {
-                query?: string;
-                filter?: string | null;
-                limit?: number | null;
-                offset?: number | null;
-            };
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["SearchResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_stats: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetStatsResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    create_realm: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["CreateRealmRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["CreateRealmResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_realm: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                /** @description Realm ID */
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetRealmResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    request_group_access_realm: {
-        parameters: {
-            query: {
-                /** @description Group ID */
-                group_id: string;
-            };
-            header?: never;
-            path: {
-                /** @description Realm ID */
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GroupAccessRealmResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_realm_components: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                /** @description Realm ID */
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetRealmComponentsResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    add_component_to_realm: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                /** @description Realm ID */
-                id: string;
-                /** @description Component ID */
-                component_id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["AddComponentToRealmResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_realm_groups: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                /** @description Realm ID */
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetGroupsFromRealmResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    add_group: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                /** @description Realm ID */
-                id: string;
-                /** @description Group ID */
-                group_id: string;
-            };
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["AddGroupRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["AddGroupResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_resource: {
-        parameters: {
-            query: {
-                ids: string[];
-            };
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetResourcesResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    create_resource: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["CreateResourceRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["CreateResourceResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    update_resource_authors: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["UpdateResourceAuthorsRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["UpdateResourceAuthorsResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    create_resource_batch: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["CreateResourceBatchRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["CreateResourceResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    update_resource_description: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["UpdateResourceDescriptionRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["UpdateResourceDescriptionResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    update_resource_identifiers: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["UpdateResourceIdentifiersRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["UpdateResourceIdentifiersResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    update_resource_labels: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["UpdateResourceLabelsRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["UpdateResourceLabelsResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    update_resource_license: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["UpdateResourceLicenseRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["UpdateResourceLicenseResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    update_resource_name: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["UpdateResourceNameRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["UpdateResourceNameResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    create_project: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["CreateProjectRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["CreateProjectResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    create_relation: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["CreateRelationRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["CreateRelationResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    update_resource_title: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["UpdateResourceTitleRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["UpdateResourceTitleResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    update_resource_visibility: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["UpdateResourceVisibilityRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["UpdateResourceVisibilityResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    register_data: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path: {
-                /** @description Resource ID (Must be object) */
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["RegisterDataRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["RegisterDataResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_relations: {
-        parameters: {
-            query?: {
-                /** @description Direction of relation */
-                direction?: null | components["schemas"]["Direction"];
-                /** @description Filter relations by index */
-                filter?: number[] | null;
-                /** @description Offset for pagination */
-                offset?: number | null;
-                /** @description Page size for pagination */
-                page_size?: number | null;
-            };
-            header?: never;
-            path: {
-                /** @description Resource ID */
-                id: string;
-            };
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetRelationsResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_user: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetUserResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    register_user: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["RegisterUserRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["RegisterUserResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_user_groups: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetGroupsFromUserResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_user_realms: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetRealmsFromUserResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_s3_credentials: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetS3CredentialsResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    create_s3_credential: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["CreateS3CredentialsRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["CreateS3CredentialsResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    get_tokens: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody?: never;
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["GetTokensResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-        };
-    };
-    create_token: {
-        parameters: {
-            query?: never;
-            header?: never;
-            path?: never;
-            cookie?: never;
-        };
-        requestBody: {
-            content: {
-                "application/json": components["schemas"]["CreateTokenRequest"];
-            };
-        };
-        responses: {
-            200: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": components["schemas"]["CreateTokenResponse"];
-                };
-            };
-            400: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            401: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content?: never;
-            };
-            403: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            404: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
-            409: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "application/json": {
-                        error: string;
-                        name: string;
-                    };
-                };
-            };
-            500: {
-                headers: {
-                    [name: string]: unknown;
-                };
-                content: {
-                    "text/plain": string;
-                };
-            };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_realm_groups: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetGroupsFromRealmResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  add_group: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Realm ID */
+        id: string;
+        /** @description Group ID */
+        group_id: string;
+      };
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["AddGroupRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["AddGroupResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_resource: {
+    parameters: {
+      query: {
+        ids: string[];
+      };
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetResourcesResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_resource: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateResourceRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateResourceResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_authors: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceAuthorsRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceAuthorsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_resource_batch: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateResourceBatchRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateResourceResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_description: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceDescriptionRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceDescriptionResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_identifiers: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceIdentifiersRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceIdentifiersResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_labels: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceLabelsRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceLabelsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_license: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceLicenseRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceLicenseResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_name: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceNameRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceNameResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_project: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateProjectRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateProjectResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_relation: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateRelationRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateRelationResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_title: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceTitleRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceTitleResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  update_resource_visibility: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["UpdateResourceVisibilityRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["UpdateResourceVisibilityResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  delete_resource: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Resource ID (Must be object) */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": unknown;
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": unknown;
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  authorize_resource: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Resource ID (Must be object) */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": unknown;
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": unknown;
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  register_data: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description Resource ID (Must be object) */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["RegisterDataRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["RegisterDataResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_relations: {
+    parameters: {
+      query?: {
+        /** @description Direction of relation */
+        direction?: null | components["schemas"]["Direction"];
+        /** @description Filter relations by index */
+        filter?: number[] | null;
+        /** @description Offset for pagination */
+        offset?: number | null;
+        /** @description Page size for pagination */
+        page_size?: number | null;
+      };
+      header?: never;
+      path: {
+        /** @description Resource ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetRelationsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_user: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetUserResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  register_user: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["RegisterUserRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["RegisterUserResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_user_groups: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetGroupsFromUserResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_user_realms: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetRealmsFromUserResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_s3_credentials: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetS3CredentialsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_s3_credential: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateS3CredentialsRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateS3CredentialsResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_tokens: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetTokensResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_token: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateTokenRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateTokenResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
         };
+      };
     };
+  };
 }

From 3503e109d6f8899b5d07f0abb4cd71d16296bb13 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 11 Dec 2024 13:22:01 +0100
Subject: [PATCH 049/125] feat: Add resource deletion in FileExplorer

---
 components/custom-ui/dashboard/Dashboard.vue    |  1 -
 components/custom-ui/dashboard/FileExplorer.vue | 17 +++++++++++++++++
 server/api/v3/resource.delete.ts                | 16 ++++++++++++++++
 3 files changed, 33 insertions(+), 1 deletion(-)
 create mode 100644 server/api/v3/resource.delete.ts

diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index 59f6f5eb..f1e2445f 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -39,7 +39,6 @@ import Profile from "~/components/custom-ui/user/Profile.vue";
 import Tokens from "~/components/custom-ui/user/Tokens.vue";
 import Proxies from "~/components/custom-ui/user/Proxies.vue";
 
-import {v3_events} from './data-notifications'
 import type {User} from '~/composables/api_wrapper'
 import {toast} from "~/components/ui/toast";
 import {useStats} from "~/composables/Stats";
diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index 9e3586a1..52d3656b 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -114,6 +114,16 @@ function closeInfo() {
   infoOpen.value = false
 }
 
+async function deleteResource(id: string) {
+  console.log('[FileExplorer] Try to delete resource:', id)
+  await $fetch<DeleteResourcesResponse>('/api/v3/resource', {
+    method: 'DELETE',
+    query: {
+      id: id
+    }
+  }).then(response => console.log(response))
+}
+
 function navigateBack(resourceId: string) {
   // Clear met info field:
   infoOpen.value = false
@@ -508,6 +518,13 @@ function checkDirection(): 'horizontal' | 'vertical' {
                     class="inline-flex w-fit bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
               Close
             </Button>
+
+            <Button v-if="infoSelection"
+                    variant="outline"
+                    @click="deleteResource(infoSelection.id)"
+                    class="inline-flex w-fit bg-transparent text-aruna-highlight border border-destructive hover:bg-aruna-highlight hover:text-aruna-text-accent">
+              Delete
+            </Button>
           </div>
 
         </div>
diff --git a/server/api/v3/resource.delete.ts b/server/api/v3/resource.delete.ts
new file mode 100644
index 00000000..76554be7
--- /dev/null
+++ b/server/api/v3/resource.delete.ts
@@ -0,0 +1,16 @@
+import {DeleteResourcesResponse} from '~/composables/api_wrapper'
+
+export default defineEventHandler(async event => {
+  const id = getQuery(event)['id']
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<DeleteResourcesResponse>(`${baseUrl}/api/v3/resources/${id}`, {
+    method: 'DELETE',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    }
+  }).then(response => {
+    console.log('[DeleteResource Server]', response)
+    return response
+  })
+})
\ No newline at end of file

From 485add5a46800b7f59f920d572d1e796d8648a86 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 11 Dec 2024 13:27:36 +0100
Subject: [PATCH 050/125] chore: Display resource deleted status in info
 sidebar

---
 components/custom-ui/dashboard/FileExplorer.vue | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index 52d3656b..6008acaf 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -484,16 +484,20 @@ function checkDirection(): 'horizontal' | 'vertical' {
               </div>
               <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                 <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Locked:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">{{
-                    infoSelection?.locked || 'N/A'
-                  }}
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  {{ infoSelection?.locked || 'N/A' }}
                 </dd>
               </div>
               <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                 <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Visibility:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">{{
-                    infoSelection?.visibility || ''
-                  }}
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  {{ infoSelection?.visibility || '' }}
+                </dd>
+              </div>
+              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Deleted:</dt>
+                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  {{ infoSelection?.deleted }}
                 </dd>
               </div>
 

From 1120b933feb4a8d16e2d74be67fbbcb90d9e5b03 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 11 Dec 2024 14:17:22 +0100
Subject: [PATCH 051/125] refactor: Simplify realm management in RealmSwitcher

---
 components/custom-ui/dashboard/Dashboard.vue  | 12 ++++-
 .../custom-ui/dashboard/RealmSwitcher.vue     | 51 ++++++++-----------
 2 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index f1e2445f..7ffa4163 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -74,7 +74,6 @@ watch(realms, () => console.log('[Dashboard] Realms updated to value:', realms.v
 watch(groups, () => console.log('[Dashboard] Groups updated to value:', groups.value))
 watch(events, () => console.log('[Dashboard] Events updated to value:', events.value))
 
-
 EventBus.on('updateStats', async () => await refreshStats())
 EventBus.on('updateRealms', async () => await refreshRealms())
 EventBus.on('updateGroups', async () => await refreshGroups())
@@ -141,6 +140,13 @@ EventBus.on('setTab', (tabId: string) => setTab(tabId))
 /* ----- END EXTERNAL TAB SWITCH ----- */
 
 /* ----- REALM SWITCH ----- */
+function addRealm(realm: Realm) {
+  if (realms.value)
+    realms.value.push(realm)
+  else
+    realms.value = [realm]
+}
+
 function setRealm(realmId: string) {
   //ToDo: Re-fetch things
   console.log('[Dashboard Component]', `Switched realm to: ${realmId}`)
@@ -306,7 +312,9 @@ EventBus.on('spinStop', () => spinBaby.value = false)
 
         <div class="flex flex-col sm:flex-row w-full space-x-4">
           <ClientOnly fallbackTag="span">
-            <RealmSwitcher :realms="realms" class="flex"/>
+            <RealmSwitcher class="flex"
+                           :realms="realms"
+                           @add-realm="addRealm" />
             <template #fallback>
               <Skeleton class="h-auto w-[300px]"/>
             </template>
diff --git a/components/custom-ui/dashboard/RealmSwitcher.vue b/components/custom-ui/dashboard/RealmSwitcher.vue
index 1313e52c..64dddeb3 100644
--- a/components/custom-ui/dashboard/RealmSwitcher.vue
+++ b/components/custom-ui/dashboard/RealmSwitcher.vue
@@ -44,31 +44,33 @@ const {toast} = useToast()
 
 /* ----- PROPERTIES ----- */
 interface RealmSwitcherProps {
-  realms: Realm[] | null
+  realms: Realm[] | undefined
 }
+
 const props = defineProps<RealmSwitcherProps>()
-console.log('[RealmSwitcher] Realms props type:', typeof props.realms)
-/* ----- END PROPERTIES ----- */
 const realms = toRef(() => props.realms)
 watch(realms, () => {
   console.log('[RealmSwitcher] Updated realms:', realms.value)
   if (realms.value && realms.value.length > 0 && selectedRealm.value.tag === 'placeholder')
     selectedRealm.value = realms.value[0]
 })
+/* ----- END PROPERTIES ----- */
 
-const realmsData = reactive({
-  label: 'Your Realms',
-  realms: realms
-})
-watch(realmsData, () => console.log('[RealmSwitcher] Updated realms data:', realmsData.realms ? realmsData.realms.length : 'null'))
+
+/* ----- EVENT EMITS ----- */
+const emit = defineEmits<{
+  'add-realm': [realm: Realm]
+}>()
+/* ----- END EVENT EMITS ----- */
 
 const open = ref(false)
 const showNewRealmDialog = ref(false)
-const selectedRealm = ref<Realm>(realms.value && realms.value.length > 0 ? realmsData.realms[0] : {
+const selectedRealm = ref<Realm>(realms.value && realms.value.length > 0 ? realms.value[0] : {
   id: '',
   name: 'Not a member of any realm',
   tag: 'placeholder',
-  description: ''
+  description: '',
+  deleted: false
 })
 
 function emitRealmSwitch() {
@@ -78,10 +80,7 @@ function emitRealmSwitch() {
 
 function addRealm(realm: Realm) {
   console.log('[RealmSwitcher]', `Emitted realm add: ${realm.name}`)
-  realmsData.realms ? realmsData.realms.push(realm) : realmsData.realms = [realm]
-
-  if (selectedRealm.value.tag === 'placeholder')
-    selectedRealm.value = realm
+  emit('add-realm', realm)
 }
 
 /* ----- FORM SCHEMA ----- */
@@ -164,8 +163,8 @@ const onSubmit = form.handleSubmit(async values => {
           <CommandList>
             <CommandInput placeholder="Search realm..." class="my-1 focus:ring-aruna-800 focus:border-0"/>
             <CommandEmpty>No realm found.</CommandEmpty>
-            <CommandGroup :key="realmsData.label" :heading="realmsData.label">
-              <CommandItem v-for="realm in realmsData.realms"
+            <CommandGroup heading="Your Realms">
+              <CommandItem v-for="realm in realms"
                            :key="realm.tag"
                            :value="realm"
                            class="text-sm"
@@ -174,14 +173,6 @@ const onSubmit = form.handleSubmit(async values => {
                              open = false
                              emitRealmSwitch()
                            }">
-                <!--
-                <Avatar class="mr-2 h-5 w-5">
-                  <AvatarImage
-                      :src="realm.logo || '/imgs/aruna_icon.webp'"
-                      :alt="realm.label"/>
-                  <AvatarFallback>SC</AvatarFallback>
-                </Avatar>
-                -->
                 <Avatar class="mr-2 h-5 w-5">
                   <AvatarImage
                       src="/imgs/aruna_icon.webp"
@@ -233,9 +224,9 @@ const onSubmit = form.handleSubmit(async values => {
               <Input type="text"
                      placeholder="A name for your realm"
                      v-bind="componentField"
-                     class="mt-0" />
+                     class="mt-0"/>
             </FormControl>
-            <FormMessage />
+            <FormMessage/>
           </FormItem>
         </FormField>
 
@@ -246,9 +237,9 @@ const onSubmit = form.handleSubmit(async values => {
               <Input type="text"
                      placeholder="A short tag for your realm"
                      v-bind="componentField"
-                     class="mt-0" />
+                     class="mt-0"/>
             </FormControl>
-            <FormMessage />
+            <FormMessage/>
           </FormItem>
         </FormField>
 
@@ -258,9 +249,9 @@ const onSubmit = form.handleSubmit(async values => {
             <FormControl>
               <Textarea v-bind="componentField"
                         :rows="5"
-                        placeholder="A concise description of your realm." />
+                        placeholder="A concise description of your realm."/>
             </FormControl>
-            <FormMessage />
+            <FormMessage/>
           </FormItem>
         </FormField>
       </form>

From 42ef99b66793d6f086235414aac752f4a728bfe4 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 11 Dec 2024 14:24:40 +0100
Subject: [PATCH 052/125] chore: Remove unnecessary dark mode classes

---
 components/custom-ui/dashboard/FileExplorer.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index 6008acaf..21cc25ec 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -227,7 +227,7 @@ function checkDirection(): 'horizontal' | 'vertical' {
 <template>
   <div class="flex flex-col h-full w-full py-6 ps-6">
     <!-- Header -->
-    <div class="flex h-14 items-center justify-between border-b bg-gray-100 px-6 dark:border-gray-800 dark:bg-gray-900">
+    <div class="flex h-14 items-center justify-between border-b px-6 border-gray-800 bg-gray-900">
       <nav aria-label="breadcrumb">
         <Breadcrumb>
           <BreadcrumbList>

From c89d86331f90b421f10dffab58aa4f3dfd9833a3 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 11 Dec 2024 14:43:09 +0100
Subject: [PATCH 053/125] feat: Improved registration flow

---
 components/custom-ui/dialog/RegistrationDialog.vue | 10 ++++++----
 server/routes/callback.get.ts                      |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/components/custom-ui/dialog/RegistrationDialog.vue b/components/custom-ui/dialog/RegistrationDialog.vue
index 7fd91a76..d20cae25 100644
--- a/components/custom-ui/dialog/RegistrationDialog.vue
+++ b/components/custom-ui/dialog/RegistrationDialog.vue
@@ -72,24 +72,26 @@ const onSubmit = form.handleSubmit(async (values) => {
     if (response.user) {
       toast({
         description: h('div',
-            {class: 'flex space-x-2 items-center justify-center text-gray-200'},
+            {class: 'flex space-x-2 items-center justify-center text-aruna-text-accent'},
             [
-              h(IconTrophy, {class: 'flex-shrink-0 size-5 text-yellow-200'}),
+              h(IconTrophy, {class: 'flex-shrink-0 size-6 text-aruna-highlight'}),
               h('span',
                   {class: 'text-fuchsia-50'},
                   [
-                    'Your registration was successful. Have fun exploring the Aruna universe. Also check out the ',
+                    'Your registration was successful.', h('br'), 'Have fun exploring the Aruna universe. Also check out the ',
                     h('a', {
                       href: 'https://docs.aruna-engine.org/latest',
                       target: '_blank',
-                      class: 'text-aruna-highlight hover:text-aruna-highlight/80'
+                      class: 'font-bold text-aruna-highlight hover:text-aruna-highlight/80'
                     }, ['documentation']),
                     '.'
                   ])
             ]),
         duration: 60000 // One Minute
       })
+      EventBus.emit('updateUser')
       emit('closeRegisterDialog')
+      useRouter().push('/user/dashboard')
     }
   }).catch(error => {
     toast({
diff --git a/server/routes/callback.get.ts b/server/routes/callback.get.ts
index 16b384c5..177639b4 100644
--- a/server/routes/callback.get.ts
+++ b/server/routes/callback.get.ts
@@ -104,5 +104,5 @@ export default defineEventHandler(async event => {
       }
   )
 
-  return sendRedirect(event, "/user/dashboard")
+  return sendRedirect(event, "/")
 })
\ No newline at end of file

From 221f2cd28afe8f36e95bd26ba784af4e6c80fd57 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 11 Dec 2024 14:43:34 +0100
Subject: [PATCH 054/125] chore: Remove deprecated dummy data file

---
 .../custom-ui/dashboard/data-notifications.ts | 45 -------------------
 1 file changed, 45 deletions(-)
 delete mode 100644 components/custom-ui/dashboard/data-notifications.ts

diff --git a/components/custom-ui/dashboard/data-notifications.ts b/components/custom-ui/dashboard/data-notifications.ts
deleted file mode 100644
index dc0d3471..00000000
--- a/components/custom-ui/dashboard/data-notifications.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-export const v3_events = [
-  {
-    "type": "RegisterUserRequestTx",
-    "id": "01JDPGX26PDFD4Y3771K28MPN5",
-    event_id: "01JDPGX26PA5C40MV8T7NNBFK9",
-    "req": {
-      "email": "admin@test.com",
-      "first_name": "aruna",
-      "last_name": "admin",
-      "identifier": ""
-    },
-    "requester": {
-      "Unregistered": {
-        "oidc_realm": "http://localhost:1998/realms/test",
-        "oidc_subject": "14f0e7bf-0947-4aa1-a8cd-337ddeff4573"
-      }
-    }
-  },
-  {
-    "type": "CreateComponentRequestTx",
-    "id": "01JDQ7PRHD2FWKF6Y34CWPHKSQ",
-    event_id: "01JDQ7PRHDWYH99R8PGCQ96CN6",
-    "req": {
-      "name": "proxy",
-      "description": "A proxy",
-      "component_type": "Data",
-      "endpoints": [
-        {
-          "S3": "https://example.com/"
-        }
-      ],
-      "pubkey": "string",
-      "public": true
-    },
-    "requester": {
-      "User": {
-        "user_id": "01JDPGX26PDFD4Y3771K28MPN5",
-        "auth_method": {
-          "Aruna": 0
-        },
-        "impersonated_by": null
-      }
-    }
-  }
-]

From 9225fb03eb3c27999973de2bed7f85a3d2a92427 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 11 Dec 2024 16:18:06 +0100
Subject: [PATCH 055/125] feat: Improve display of deleted resources

---
 .../custom-ui/dashboard/FileExplorer.vue      | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index 21cc25ec..8311348c 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -114,14 +114,13 @@ function closeInfo() {
   infoOpen.value = false
 }
 
-async function deleteResource(id: string) {
-  console.log('[FileExplorer] Try to delete resource:', id)
+async function deleteResource(resource: ResourceElement) {
   await $fetch<DeleteResourcesResponse>('/api/v3/resource', {
     method: 'DELETE',
     query: {
-      id: id
+      id: resource.id
     }
-  }).then(response => console.log(response))
+  }).then(response => resource.deleted = true)
 }
 
 function navigateBack(resourceId: string) {
@@ -230,7 +229,7 @@ function checkDirection(): 'horizontal' | 'vertical' {
     <div class="flex h-14 items-center justify-between border-b px-6 border-gray-800 bg-gray-900">
       <nav aria-label="breadcrumb">
         <Breadcrumb>
-          <BreadcrumbList>
+          <BreadcrumbList class="text-aruna-text-accent">
             <BreadcrumbItem @click="navigateBack('root')"
                             class="hover:cursor-pointer">Your Projects
             </BreadcrumbItem>
@@ -239,9 +238,12 @@ function checkDirection(): 'horizontal' | 'vertical' {
               <BreadcrumbSeparator/>
               <BreadcrumbItem v-if="ele.variant !== ResourceVariant.Object"
                               @click="navigateBack(ele.id)"
-                              class="hover:cursor-pointer">{{ ele.name }}
+                              class="hover:cursor-pointer">
+                {{ !ele.deleted ? ele.name : 'DELETED' }}
+              </BreadcrumbItem>
+              <BreadcrumbItem v-else>
+                {{ !ele.deleted ? ele.name : 'DELETED' }}
               </BreadcrumbItem>
-              <BreadcrumbItem v-else>{{ ele.name }}</BreadcrumbItem>
             </div>
           </BreadcrumbList>
         </Breadcrumb>
@@ -525,8 +527,8 @@ function checkDirection(): 'horizontal' | 'vertical' {
 
             <Button v-if="infoSelection"
                     variant="outline"
-                    @click="deleteResource(infoSelection.id)"
-                    class="inline-flex w-fit bg-transparent text-aruna-highlight border border-destructive hover:bg-aruna-highlight hover:text-aruna-text-accent">
+                    @click="deleteResource(infoSelection)"
+                    class="inline-flex w-fit bg-transparent text-destructive border border-destructive hover:bg-destructive/25">
               Delete
             </Button>
           </div>

From e07ffae039c8e9e812b4ed9549b80d641f5fc8f3 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 11 Dec 2024 16:18:34 +0100
Subject: [PATCH 056/125] feat: Improve display of resource actions

---
 .../custom-ui/dashboard/FileExplorer.vue      | 55 ++++++++++++-------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index 8311348c..d99ff89e 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -2,6 +2,8 @@
 import {
   IconFile,
   IconFolder,
+  IconFolderPlus,
+  IconFolderSymlink,
   IconInfoCircle,
   IconLock,
   IconPlus,
@@ -281,27 +283,42 @@ function checkDirection(): 'horizontal' | 'vertical' {
         <!-- Flexbox Resource Display -->
         <div class="flex flex-row flex-wrap content-start items-start justify-start gap-x-6 gap-y-6 my-4">
           <Card v-for="resource in displayedResources"
-                class="rounded-sm flex flex-col items-center justify-center min-w-[300px] h-fit"
+                class="rounded-sm border-aruna-text/50 flex flex-col items-center justify-center min-w-[200px] max-w-[300px] h-fit truncate overflow-ellipsis"
                 @dblclick="navigateForward(resource)">
-            <CardContent class="group flex flex-col items-center">
-              <div class="flex h-20 w-full items-center justify-center">
-                <IconWorld v-if="resource.variant === ResourceVariant.Project"
-                           class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
-                <IconFolder v-else-if="resource.variant === ResourceVariant.Folder"
-                            class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
-                <IconFile v-else-if="resource.variant === ResourceVariant.Object"
-                          class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
+            <CardContent class="p-0 flex flex-col items-center w-full">
+              <div class="w-full flex gap-x-2">
+                <div class="group flex flex-col grow py-4 ps-4 items-center justify-center">
+                  <div class="flex h-fit w-full items-center justify-center">
+                    <IconWorld v-if="resource.variant === ResourceVariant.Project"
+                               :class="{'text-destructive group-hover:text-destructive': resource.deleted}"
+                               class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
+                    <IconFolder v-else-if="resource.variant === ResourceVariant.Folder"
+                                :class="{'text-destructive group-hover:text-destructive': resource.deleted}"
+                                class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
+                    <IconFile v-else-if="resource.variant === ResourceVariant.Object"
+                              :class="{'text-destructive group-hover:text-destructive': resource.deleted}"
+                              class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
+                  </div>
+                  <div v-if="!resource.deleted" class="flex gap-x-2">
+                    {{ resource.title ? resource.title : resource.name }}
+                  </div>
+                  <div v-else class="text-destructive">DELETED</div>
+                  <span v-if="resource.variant === ResourceVariant.Object" class="text-aruna-text">
+                    {{ `Size: ${formatBytes(resource.content_len)}` }}
+                  </span>
+                  <span v-else class="text-aruna-text">
+                    {{ `Children: ${resource.children.length}` }}
+                  </span>
+                </div>
+                <div class="flex flex-col justify-between border-l text-aruna-text">
+                  <IconInfoCircle @click="openInfo(resource)"
+                                  class="m-2 hover:cursor-pointer hover:text-aruna-highlight"/>
+                  <IconFolderPlus class="m-2 hover:cursor-pointer hover:text-aruna-highlight"/>
+                  <IconFolderSymlink @click="navigateForward(resource)"
+                                     class="m-2 hover:cursor-pointer hover:text-aruna-highlight"/>
+
+                </div>
               </div>
-              <div class="flex gap-x-2">
-                {{ resource.title ? resource.title : resource.name }}
-                <IconInfoCircle @click="openInfo(resource)"/>
-              </div>
-              <span v-if="resource.variant === ResourceVariant.Object" class="text-aruna-text">
-              {{ `Size: ${formatBytes(resource.content_len)}` }}
-            </span>
-              <span v-else class="text-aruna-text">
-              {{ `Children: ${resource.children.length}` }}
-            </span>
             </CardContent>
           </Card>
 

From 6d1b831c7e4d8ea03886bb9804a827abcaacf68d Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 11 Dec 2024 16:19:00 +0100
Subject: [PATCH 057/125] chore: Replace static string with GenericNodeType
 enum

---
 composables/Projects.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/composables/Projects.ts b/composables/Projects.ts
index a35ec820..b45ec757 100644
--- a/composables/Projects.ts
+++ b/composables/Projects.ts
@@ -1,5 +1,6 @@
 import EventBus from "~/composables/EventBus";
 import type {ResourceElement, SearchResponse} from "~/composables/api_wrapper";
+import {GenericNodeType} from "~/types/aruna-v3-enums";
 
 // by convention, composable function names start with "use"
 export async function useProjects() {
@@ -15,7 +16,7 @@ export async function useProjects() {
       if (response) {
         let resources: ResourceElement[] = []
         for (const resource of response._data.resources) {
-          if (resource.type === 'Resource') {
+          if (resource.type === GenericNodeType.Resource) {
             let extended = resource as any // lol, cast to any to allow dynamic adding of properties
             extended.children = []
             resources.push(extended as ResourceElement)

From d1a856464c167511d07eecf03f46be334887ba07 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Thu, 12 Dec 2024 09:20:23 +0100
Subject: [PATCH 058/125] chore: Truncate long names in FileExplorer

---
 components/custom-ui/dashboard/FileExplorer.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index d99ff89e..8fbba3a3 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -283,7 +283,7 @@ function checkDirection(): 'horizontal' | 'vertical' {
         <!-- Flexbox Resource Display -->
         <div class="flex flex-row flex-wrap content-start items-start justify-start gap-x-6 gap-y-6 my-4">
           <Card v-for="resource in displayedResources"
-                class="rounded-sm border-aruna-text/50 flex flex-col items-center justify-center min-w-[200px] max-w-[300px] h-fit truncate overflow-ellipsis"
+                class="rounded-sm border-aruna-text/50 flex flex-col items-center justify-center min-w-[200px] max-w-[300px] h-fit"
                 @dblclick="navigateForward(resource)">
             <CardContent class="p-0 flex flex-col items-center w-full">
               <div class="w-full flex gap-x-2">
@@ -299,7 +299,7 @@ function checkDirection(): 'horizontal' | 'vertical' {
                               :class="{'text-destructive group-hover:text-destructive': resource.deleted}"
                               class="h-12 w-12 text-aruna-text-accent group-hover:text-aruna-highlight"/>
                   </div>
-                  <div v-if="!resource.deleted" class="flex gap-x-2">
+                  <div v-if="!resource.deleted" class="max-w-52 truncate overflow-ellipsis">
                     {{ resource.title ? resource.title : resource.name }}
                   </div>
                   <div v-else class="text-destructive">DELETED</div>

From 8719cddf1bdf347c85afd7508deed59fb37d1472 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Thu, 12 Dec 2024 09:51:02 +0100
Subject: [PATCH 059/125] chore: Truncate license select in upload sidebar

---
 components/custom-ui/dashboard/FileExplorer.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index 8fbba3a3..e9afcf30 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -425,14 +425,14 @@ function checkDirection(): 'horizontal' | 'vertical' {
 
             <Label for="license">License</Label>
             <Select>
-              <SelectTrigger class="w-fit bg-aruna-muted">
+              <SelectTrigger class="bg-aruna-muted w-full max-w-[450px]">
                 <SelectValue placeholder="Select a license for your resource"/>
               </SelectTrigger>
-              <SelectContent class="bg-aruna-bg/90">
+              <SelectContent class="bg-aruna-bg/90 truncate overflow-ellipsis">
                 <SelectGroup>
                   <SelectItem v-for="license in licenses" :value="license.tag"
                               class="hover:bg-aruna-fg">
-                    {{ license.tag }}
+                    {{ license.label }}
                   </SelectItem>
                 </SelectGroup>
               </SelectContent>

From 3b09091acbf06dd25c29b9f6a51e3a77a306bfc6 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 16 Dec 2024 10:01:40 +0100
Subject: [PATCH 060/125] fix: Token refresh parse error

---
 server/routes/auth/refresh.get.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/server/routes/auth/refresh.get.ts b/server/routes/auth/refresh.get.ts
index 1d9787bd..c72f8a8c 100644
--- a/server/routes/auth/refresh.get.ts
+++ b/server/routes/auth/refresh.get.ts
@@ -32,11 +32,11 @@ export default defineEventHandler(async (event) => {
       throw new Error(`Unknown or unsupported issuer: ${issuer}`)
     }
 
-    const parsed_access_token = parseJwt(access_token) // Should also exist if refresh token is present
-    const access_expiry: number = parsed_access_token.exp || 0
+    const parsed_access_token = access_token ? parseJwt(access_token) : undefined
+    const access_expiry: number = parsed_access_token ? parsed_access_token.exp : 0
     if (refresh_expiry > current_timestamp && access_expiry - current_timestamp <= 60) {
       // Fetch refreshed tokens from issuer
-      const tokens: any = await $fetch(config.tokenUrl, {
+      await $fetch(config.tokenUrl, {
         method: 'POST',
         headers: {
           'Content-Type': 'application/x-www-form-urlencoded',

From 543c1a19759bcb59418e2a82f4ecf944b5b685a4 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 16 Dec 2024 10:05:02 +0100
Subject: [PATCH 061/125] chore: Update dependency package versions

---
 package.json | 44 ++++++++++++++++++++++----------------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/package.json b/package.json
index 903cdf10..a39a7243 100644
--- a/package.json
+++ b/package.json
@@ -10,39 +10,39 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.685.0",
-    "@aws-sdk/lib-storage": "^3.685.0",
-    "@aws-sdk/s3-request-presigner": "^3.685.0",
+    "@aws-sdk/client-s3": "^3.712.0",
+    "@aws-sdk/lib-storage": "^3.712.0",
+    "@aws-sdk/s3-request-presigner": "^3.712.0",
     "@bynect/markdown-it-class": "^1.0.2",
-    "@nuxtjs/tailwindcss": "^6.12.1",
+    "@nuxtjs/tailwindcss": "^6.12.2",
     "@radix-icons/vue": "^1.0.0",
-    "@shikijs/markdown-it": "^1.10.0",
-    "@tabler/icons-vue": "^2.47.0",
-    "@tailwindcss/forms": "^0.5.7",
-    "@unovis/ts": "^1.4.4",
-    "@unovis/vue": "^1.4.4",
-    "@vee-validate/zod": "^4.13.2",
+    "@shikijs/markdown-it": "^1.24.2",
+    "@tabler/icons-vue": "^3.26.0",
+    "@tailwindcss/forms": "^0.5.9",
+    "@unovis/ts": "^1.5.0",
+    "@unovis/vue": "^1.5.0",
+    "@vee-validate/zod": "^4.14.7",
     "@vueuse/core": "^12.0.0",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dom-parser": "^1.1.5",
     "markdown-it": "^14.1.0",
     "markdown-it-deflist": "^3.0.0",
-    "nuxt": "^3.14.0",
-    "preline": "^2.5.1",
-    "radix-vue": "^1.9.8",
-    "vee-validate": "^4.14.6",
-    "vue-router": "^4.4.4"
+    "nuxt": "^3.14.1592",
+    "preline": "^2.6.0",
+    "radix-vue": "^1.9.11",
+    "vee-validate": "^4.14.7",
+    "vue-router": "^4.5.0"
   },
   "devDependencies": {
-    "@types/markdown-it": "^14.1.1",
-    "bun-types": "^1.1.18",
+    "@types/markdown-it": "^14.1.2",
+    "bun-types": "^1.1.38",
     "shadcn-nuxt": "^0.10.4",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.5.4",
-    "vue": "^3.5.4",
-    "zod": "^3.23.8"
+    "typescript": "^5.7.2",
+    "vue": "^3.5.13",
+    "zod": "^3.24.1"
   }
 }

From aedd7fcee0de86aafaa7cf8ed71145f1f94b2344 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 16 Dec 2024 10:10:29 +0100
Subject: [PATCH 062/125] feat: Finally remove Preline dependency

---
 README.md                                 |  4 ++--
 components/custom-ui/ResourceCreation.vue |  7 -------
 composables/utils.ts                      | 15 ---------------
 nuxt.config.ts                            |  3 ---
 package.json                              |  1 -
 plugins/preline.client.ts                 | 13 -------------
 tailwind.config.ts                        |  3 +--
 7 files changed, 3 insertions(+), 43 deletions(-)
 delete mode 100644 plugins/preline.client.ts

diff --git a/README.md b/README.md
index 776b072b..f5d2c7eb 100644
--- a/README.md
+++ b/README.md
@@ -1,8 +1,8 @@
 # ArunaWeb 5.0
 
-This is another total revised version for the Aruna website. Powered by [Vue 3](https://vuejs.org/), [Nuxt 3](https://nuxt.com/), [Tailwind CSS](https://tailwindcss.com/) and [Preline](https://preline.co/). 
+This is another total revised version for the Aruna website. Powered by [Vue 3](https://vuejs.org/), [Nuxt 3](https://nuxt.com/), [Tailwind CSS](https://tailwindcss.com/) and [shadcn-vue](https://www.shadcn-vue.com/). 
 
-This version is intended to be used with version **2.x.x** of Aruna, so to start a local test instance, you need a running Aruna instance and a running API Gateway to translate the RESTful http calls into native gRPC for the Aruna server.
+This version is intended to be used with version **3.x.x** of Aruna, so to start a local test instance, you need a running Aruna instance and a running API Gateway to translate the RESTful http calls into native gRPC for the Aruna server.
 
 1. How to start a local Aruna instance is described in the [Getting started instructions of the Aruna main repository](https://github.com/arunaengine/aruna?tab=readme-ov-file#getting-started) which guides you through the individual steps.
 
diff --git a/components/custom-ui/ResourceCreation.vue b/components/custom-ui/ResourceCreation.vue
index a45b65e2..e1287cea 100644
--- a/components/custom-ui/ResourceCreation.vue
+++ b/components/custom-ui/ResourceCreation.vue
@@ -268,13 +268,6 @@ function textAreaAutoHeight(domElement: HTMLTextAreaElement | null, offset = 0)
     domElement.style.height = `${domElement.scrollHeight + offset}px`
   }
 }
-
-function openModal(modalId: string) {
-  let element = document.querySelector(`#${modalId}`) as HTMLElement
-  import('preline').then(({HSOverlay}) => {
-    HSOverlay.open(element)
-  })
-}
 */
 
 /*
diff --git a/composables/utils.ts b/composables/utils.ts
index 7c312e03..4b889295 100644
--- a/composables/utils.ts
+++ b/composables/utils.ts
@@ -72,21 +72,6 @@ export function displayDate(createdAt: string | undefined, modifiedAt: string |
   }
 }
 
-// Modal magic
-export function openModal(modalId: string) {
-  let element = document.querySelector(`#${modalId}`) as HTMLElement
-  import('preline').then(({HSOverlay}) => {
-    HSOverlay.open(element)
-  })
-}
-
-export function closeModal(modalId: string) {
-  let element = document.querySelector(`#${modalId}`) as HTMLElement
-  import('preline').then(({HSOverlay}) => {
-    HSOverlay.close(element)
-  })
-}
-
 /* ---------- USER ---------- */
 export function isUserAdmin(user: v2User | undefined): boolean {
     if (user?.attributes?.globalAdmin) {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 925d027a..ee40f0de 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,9 +9,6 @@ export default defineNuxtConfig({
   experimental: {
     clientNodeCompat: true
   },
-  plugins: [
-    "~/plugins/preline.client.ts",
-  ],
   modules: ['@nuxtjs/tailwindcss', "shadcn-nuxt"],
   css: [
     '~/assets/styles/main.css',
diff --git a/package.json b/package.json
index a39a7243..dec105fb 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
     "markdown-it": "^14.1.0",
     "markdown-it-deflist": "^3.0.0",
     "nuxt": "^3.14.1592",
-    "preline": "^2.6.0",
     "radix-vue": "^1.9.11",
     "vee-validate": "^4.14.7",
     "vue-router": "^4.5.0"
diff --git a/plugins/preline.client.ts b/plugins/preline.client.ts
deleted file mode 100644
index 7cfa3d82..00000000
--- a/plugins/preline.client.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import "preline/preline";
-import { type IStaticMethods } from "preline/preline";
-declare global {
-  interface Window {
-    HSStaticMethods: IStaticMethods;
-  }
-}
-
-export default defineNuxtPlugin((nuxtApp) => {
-  nuxtApp.hook("page:finish", () => {
-    window.HSStaticMethods.autoInit();
-  });
-});
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index dd168f8c..c4eb178d 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -97,7 +97,6 @@ module.exports = {
   },
   plugins: [
     require("tailwindcss-animate"),
-    require("@tailwindcss/forms"),
-    require("preline/plugin"),
+    require("@tailwindcss/forms")
   ],
 }
\ No newline at end of file

From 3a66d01f05192585214028985826bab42fa16d3e Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 16 Dec 2024 15:14:39 +0100
Subject: [PATCH 063/125] chore: Update v3 API definition

---
 types/aruna-v3-enums.ts |  18 +--
 types/aruna-v3.d.ts     | 299 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 295 insertions(+), 22 deletions(-)

diff --git a/types/aruna-v3-enums.ts b/types/aruna-v3-enums.ts
index f701bbbb..9703faa9 100644
--- a/types/aruna-v3-enums.ts
+++ b/types/aruna-v3-enums.ts
@@ -3,37 +3,32 @@ export enum ComponentType {
   Data = "Data",
   Compute = "Compute"
 }
-
 export enum Direction {
   Incoming = "Incoming",
   Outgoing = "Outgoing",
   All = "All"
 }
-
 export enum GenericNodeType {
   Resource = "Resource"
 }
-
 export enum GenericNodeType {
   User = "User"
 }
-
 export enum GenericNodeType {
   ServiceAccount = "ServiceAccount"
 }
-
 export enum GenericNodeType {
   Group = "Group"
 }
-
 export enum GenericNodeType {
   Realm = "Realm"
 }
-
 export enum GenericNodeType {
   Component = "Component"
 }
-
+export enum GenericNodeType {
+  License = "License"
+}
 export enum GetGroupsFromUserResponseGroups {
   None = "None",
   Read = "Read",
@@ -41,12 +36,10 @@ export enum GetGroupsFromUserResponseGroups {
   Write = "Write",
   Admin = "Admin"
 }
-
 export enum HashAlgorithm {
   Sha256 = "Sha256",
   MD5 = "MD5"
 }
-
 export enum Permission {
   None = "None",
   Read = "Read",
@@ -54,29 +47,24 @@ export enum Permission {
   Write = "Write",
   Admin = "Admin"
 }
-
 export enum ResourceVariant {
   Project = "Project",
   Folder = "Folder",
   Object = "Object"
 }
-
 export enum Scope {
   Personal = "Personal"
 }
-
 export enum SyncingStatus {
   Pending = "Pending",
   Running = "Running",
   Finished = "Finished",
   Error = "Error"
 }
-
 export enum TokenType {
   Aruna = "Aruna",
   S3 = "S3"
 }
-
 export enum VisibilityClass {
   Public = "Public",
   PublicMetadata = "PublicMetadata",
diff --git a/types/aruna-v3.d.ts b/types/aruna-v3.d.ts
index 50e68a89..2c2d7c97 100644
--- a/types/aruna-v3.d.ts
+++ b/types/aruna-v3.d.ts
@@ -191,6 +191,41 @@ export type paths = {
     patch?: never;
     trace?: never;
   };
+  "/api/v3/license": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get licenses */
+    get: operations["get_licenses"];
+    put?: never;
+    /** Register a license */
+    post: operations["create_license"];
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
+  "/api/v3/license/{id}": {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    /** Get license */
+    get: operations["get_license"];
+    put?: never;
+    post?: never;
+    delete?: never;
+    options?: never;
+    head?: never;
+    patch?: never;
+    trace?: never;
+  };
   "/api/v3/realms": {
     parameters: {
       query?: never;
@@ -697,7 +732,8 @@ export type components = {
       description?: string;
       identifiers?: string[];
       labels?: components["schemas"]["KeyValue"][];
-      license_tag?: string;
+      /** Format: ulid */
+      license_id?: string | null;
       name: string;
       parent: components["schemas"]["Parent"];
       title?: string;
@@ -735,6 +771,15 @@ export type components = {
     CreateGroupResponse: {
       group: components["schemas"]["Group"];
     };
+    CreateLicenseRequest: {
+      description: string;
+      license_terms: string;
+      name: string;
+    };
+    CreateLicenseResponse: {
+      /** Format: ulid */
+      license_id: string;
+    };
     CreateProjectRequest: {
       authors?: components["schemas"]["Author"][];
       /** Format: ulid */
@@ -744,7 +789,8 @@ export type components = {
       group_id?: string;
       identifiers?: string[];
       labels?: components["schemas"]["KeyValue"][];
-      license_tag?: string;
+      /** Format: ulid */
+      license_id?: string | null;
       name: string;
       /** Format: ulid */
       realm_id?: string;
@@ -789,7 +835,8 @@ export type components = {
       description?: string;
       identifiers?: string[];
       labels?: components["schemas"]["KeyValue"][];
-      license_tag?: string;
+      /** Format: ulid */
+      license_id?: string | null;
       name: string;
       /** Format: ulid */
       parent_id: string;
@@ -871,6 +918,9 @@ export type components = {
     }) | (components["schemas"]["Component"] & {
       /** @enum {string} */
       type: GenericNodeType;
+    }) | (components["schemas"]["License"] & {
+      /** @enum {string} */
+      type: GenericNodeType;
     });
     GetEventsResponse: {
       events: {
@@ -895,6 +945,12 @@ export type components = {
         GetGroupsFromUserResponseGroups
       ][];
     };
+    GetLicenseResponse: {
+      license: components["schemas"]["License"];
+    };
+    GetLicensesResponse: {
+      licenses: components["schemas"]["License"][];
+    };
     GetRealmComponentsResponse: {
       components: components["schemas"]["Component"][];
     };
@@ -952,6 +1008,14 @@ export type components = {
       locked: boolean;
       value: string;
     };
+    License: {
+      deleted: boolean;
+      description: string;
+      /** Format: ulid */
+      id: string;
+      name: string;
+      terms: string;
+    };
     Parent: {
       /** Format: ulid */
       ID: string;
@@ -1016,7 +1080,8 @@ export type components = {
       labels: components["schemas"]["KeyValue"][];
       /** Format: date-time */
       last_modified: string;
-      license_tag: string;
+      /** Format: ulid */
+      license_id: string;
       location: components["schemas"]["DataLocation"][];
       locked: boolean;
       name: string;
@@ -1109,7 +1174,8 @@ export type components = {
     UpdateResourceLicenseRequest: {
       /** Format: ulid */
       id: string;
-      license_tag: string;
+      /** Format: ulid */
+      license_id: string;
     };
     UpdateResourceLicenseResponse: {
       resource: components["schemas"]["Resource"];
@@ -1161,7 +1227,6 @@ export type components = {
   pathItems: never;
 };
 export type $defs = Record<string, never>;
-
 export interface operations {
   create_component: {
     parameters: {
@@ -1981,6 +2046,226 @@ export interface operations {
       };
     };
   };
+  get_licenses: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetLicensesResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  create_license: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path?: never;
+      cookie?: never;
+    };
+    requestBody: {
+      content: {
+        "application/json": components["schemas"]["CreateLicenseRequest"];
+      };
+    };
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["CreateLicenseResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
+  get_license: {
+    parameters: {
+      query?: never;
+      header?: never;
+      path: {
+        /** @description License ID */
+        id: string;
+      };
+      cookie?: never;
+    };
+    requestBody?: never;
+    responses: {
+      200: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": components["schemas"]["GetLicenseResponse"];
+        };
+      };
+      400: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      401: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content?: never;
+      };
+      403: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      404: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+      409: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "application/json": {
+            error: string;
+            name: string;
+          };
+        };
+      };
+      500: {
+        headers: {
+          [name: string]: unknown;
+        };
+        content: {
+          "text/plain": string;
+        };
+      };
+    };
+  };
   create_realm: {
     parameters: {
       query?: never;
@@ -3489,7 +3774,7 @@ export interface operations {
       query?: never;
       header?: never;
       path: {
-        /** @description Resource ID (Must be object) */
+        /** @description Resource ID */
         id: string;
       };
       cookie?: never;

From 46e0ee3d38e5d8acda146bcb0cb787f9d27c10a2 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 16 Dec 2024 15:16:57 +0100
Subject: [PATCH 064/125] fix: Incorrect height for events list scroll area

---
 components/custom-ui/dashboard/EventList.vue | 26 +++-----------------
 components/custom-ui/dashboard/Events.vue    |  6 ++---
 2 files changed, 7 insertions(+), 25 deletions(-)

diff --git a/components/custom-ui/dashboard/EventList.vue b/components/custom-ui/dashboard/EventList.vue
index 6e015815..73c28d5c 100644
--- a/components/custom-ui/dashboard/EventList.vue
+++ b/components/custom-ui/dashboard/EventList.vue
@@ -1,9 +1,7 @@
 <script lang="ts" setup>
-import {formatDistanceToNow} from 'date-fns'
 import {ScrollArea} from '@/components/ui/scroll-area'
 import {cn} from '@/utils/shadcn'
 import {Badge} from '@/components/ui/badge'
-import {v2PersonalNotificationVariant} from "~/composables/aruna_api_json";
 
 interface EventListProps {
   items: BaseTx[] //Mail[]
@@ -11,25 +9,10 @@ interface EventListProps {
 
 defineProps<EventListProps>()
 const selectedMail = defineModel<string>('selectedMail', {required: false})
-
-function getBadgeVariantFromLabel(label: string) {
-  if (['work'].includes(label.toLowerCase()))
-    return 'default'
-
-  if (['personal', 'permission'].includes(label.toLowerCase()))
-    return 'outline'
-
-  return 'secondary'
-}
-
-function displayVariant(variant: v2PersonalNotificationVariant) {
-  const label = variant.replace('PERSONAL_NOTIFICATION_VARIANT_', '').replace('_', ' ').toLowerCase()
-  return label.charAt(0).toUpperCase() + label.slice(1)
-}
 </script>
 
 <template>
-  <ScrollArea class="h-screen flex">
+  <ScrollArea class="h-full flex">
     <div class="flex-1 flex flex-col gap-2 p-4 pt-0">
       <TransitionGroup name="list" appear>
         <button v-for="item of items"
@@ -69,10 +52,9 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
             <!--{{ item.text.substring(0, 300) }}-->
           </div>
           <div class="flex items-center gap-2">
-            <Badge variant="outline">Unregistered</Badge>
-            <Badge variant="default">Impersonated</Badge>
-            <Badge variant="secondary">User</Badge>
-
+            <Badge v-if="item.requester.Unregistered" variant="outline">Unregistered</Badge>
+            <Badge v-if="item.requester.User" variant="secondary">User</Badge>
+            <Badge v-if="item.requester.User?.impersonated_by" variant="default">Impersonated</Badge>
             <!--
             <Badge v-for="label of item.labels" :key="label" :variant="getBadgeVariantFromLabel(label)">
               {{ label }}
diff --git a/components/custom-ui/dashboard/Events.vue b/components/custom-ui/dashboard/Events.vue
index f2088be7..8222848e 100644
--- a/components/custom-ui/dashboard/Events.vue
+++ b/components/custom-ui/dashboard/Events.vue
@@ -68,9 +68,9 @@ function onExpand() {
     <ResizablePanelGroup
         id="resize-panel-group-1"
         direction="horizontal"
-        class="h-full max-h-[calc(100vh-225px)] items-stretch">
+        class="h-full max-h-[calc(100vh-200px)] items-stretch">
       <ResizablePanel id="resize-panel-1" :default-size="defaultLayout[0]" :min-size="30">
-        <Tabs default-value="all">
+        <Tabs default-value="all" class="h-full">
           <div class="flex items-center px-4 py-2">
             <h1 class="text-xl font-bold">
               Inbox
@@ -93,7 +93,7 @@ function onExpand() {
               </div>
             </form>
           </div>
-          <TabsContent value="all" class="m-0">
+          <TabsContent value="all" class="m-0 h-full">
             <EventList v-model:selected-mail="selectedEvent" :items="filteredMailList"/>
           </TabsContent>
           <TabsContent value="unread" class="m-0">

From b08585885873b62fb3e4371aa5286f6cbd758abc Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 16 Dec 2024 15:17:17 +0100
Subject: [PATCH 065/125] chore: Remove deprecated Preline-based modals

---
 components/modal/Ontology.vue | 216 ----------------------
 components/modal/author.vue   | 320 --------------------------------
 components/modal/relation.vue | 338 ----------------------------------
 3 files changed, 874 deletions(-)
 delete mode 100644 components/modal/Ontology.vue
 delete mode 100644 components/modal/author.vue
 delete mode 100644 components/modal/relation.vue

diff --git a/components/modal/Ontology.vue b/components/modal/Ontology.vue
deleted file mode 100644
index 8f206fed..00000000
--- 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 "~/types/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/components/modal/author.vue b/components/modal/author.vue
deleted file mode 100644
index 534da92a..00000000
--- 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 "~/utils/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/relation.vue b/components/modal/relation.vue
deleted file mode 100644
index 8bcb1926..00000000
--- a/components/modal/relation.vue
+++ /dev/null
@@ -1,338 +0,0 @@
-<script lang="ts" setup>
-import {IconExclamationCircle, IconX} from "@tabler/icons-vue";
-import {
-  type v2InternalRelation,
-  v2InternalRelationVariant,
-  type v2Relation,
-  v2RelationDirection,
-  v2ResourceVariant
-} from "~/composables/aruna_api_json";
-import {ULID_REGEX} from "~/utils/constants";
-
-const props = defineProps<{
-  modalId: string,
-}>()
-
-const emit = defineEmits<{
-  'add-relation': [relation: v2Relation]
-}>()
-
-enum ResourceVariant {
-  Project = 'Project',
-  Collection = 'Collection',
-  Dataset = 'Dataset',
-  Object = 'Object'
-}
-
-enum InternalRelationVariant {
-  BelongsTo = 'Belongs To',
-  Origin = 'Origin',
-  Version = 'Version',
-  Metadata = 'Metadata',
-  Policy = 'Policy',
-  Deleted = 'Deleted',
-  Custom = 'Custom',
-}
-
-enum RelationDirection {
-  Inbound = 'Inbound',
-  Outbound = 'Outbound',
-}
-
-const resourceId = ref('')
-const resourceIdErr: Ref<string | undefined> = ref('Please enter a resource id.')
-const resourceVariant = ref(ResourceVariant.Project)
-const relationVariant = ref(InternalRelationVariant.BelongsTo)
-const customVariant = ref('')
-const customVariantErr: Ref<string | undefined> = ref(undefined)
-const relationDirection = ref(RelationDirection.Inbound)
-
-const validState = ref(false)
-const validationStates = ref(new Map<string, boolean>())
-validationStates.value.set('resource_id', false)
-validationStates.value.set('custom_variant', true)
-
-
-// Validation
-watch(resourceId, () => validateResourceId())
-function validateResourceId() {
-  if (resourceId.value.length > 0) {
-    const valid = ULID_REGEX.test(resourceId.value)
-    validationStates.value.set('resource_id', valid)
-    resourceIdErr.value = valid ? undefined : 'Please enter a valid ULID'
-  } else {
-    validationStates.value.set('resource_id', false)
-    resourceIdErr.value = 'Please enter a resource id'
-  }
-  validate()
-}
-
-watch(resourceVariant, () => validate())
-watch(relationVariant, () => validateCustomVariant())
-watch(customVariant, () => validateCustomVariant())
-function validateCustomVariant() {
-  if (relationVariant.value === InternalRelationVariant.Custom && customVariant.value.length <= 0) {
-    validationStates.value.set('custom_variant', false)
-    customVariantErr.value = 'Please enter a custom relation name'
-  } else {
-    validationStates.value.set('custom_variant', true)
-    customVariantErr.value = undefined
-  }
-  validate()
-}
-
-function validate() {
-  for (const state of validationStates.value.values()) {
-    if (!state) {
-      validState.value = false
-      return
-    }
-  }
-  validState.value = true
-}
-
-function convertResourceVariant(variant: ResourceVariant): v2ResourceVariant {
-  switch (variant) {
-    case ResourceVariant.Project:
-      return v2ResourceVariant.RESOURCE_VARIANT_PROJECT
-    case ResourceVariant.Collection:
-      return v2ResourceVariant.RESOURCE_VARIANT_COLLECTION
-    case ResourceVariant.Dataset:
-      return v2ResourceVariant.RESOURCE_VARIANT_DATASET
-    case ResourceVariant.Object:
-      return v2ResourceVariant.RESOURCE_VARIANT_OBJECT
-
-  }
-}
-
-function convertInternalRelationVariant(variant: InternalRelationVariant): v2InternalRelationVariant {
-  switch (variant) {
-    case InternalRelationVariant.BelongsTo:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_BELONGS_TO
-    case InternalRelationVariant.Origin:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_ORIGIN
-    case InternalRelationVariant.Version:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_VERSION
-    case InternalRelationVariant.Metadata:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_METADATA
-    case InternalRelationVariant.Policy:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_POLICY
-    case InternalRelationVariant.Deleted:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_DELETED
-    case InternalRelationVariant.Custom:
-      return v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_CUSTOM
-  }
-}
-
-function convertRelationDirection(direction: RelationDirection): v2RelationDirection {
-  switch (direction) {
-    case RelationDirection.Inbound:
-      return v2RelationDirection.RELATION_DIRECTION_INBOUND
-    case RelationDirection.Outbound:
-      return v2RelationDirection.RELATION_DIRECTION_OUTBOUND
-  }
-}
-
-function reset() {
-  resourceId.value = ''
-  resourceVariant.value = ResourceVariant.Project
-  relationVariant.value = InternalRelationVariant.BelongsTo
-  customVariant.value = ''
-  relationDirection.value = RelationDirection.Inbound
-}
-
-function submit() {
-  let internal_relation = {
-    resourceId: resourceId.value,
-    resourceVariant: convertResourceVariant(resourceVariant.value),
-    definedVariant: convertInternalRelationVariant(relationVariant.value),
-    customVariant: relationVariant.value === InternalRelationVariant.Custom ? customVariant.value : undefined,
-    direction: convertRelationDirection(relationDirection.value)
-  } as v2InternalRelation
-
-  emit('add-relation', {internal: internal_relation} as v2Relation)
-  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 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 Internal Relation
-          </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 overflow-y-auto">
-          <!-- Resource id -->
-          <div class="space-y-0">
-            <div class="relative">
-              <input v-model="resourceId"
-                     autofocus
-                     id="hs-floating-input-resource"
-                     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="A resource id"
-                     type="text">
-              <label for="hs-floating-input-resource"
-                     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">Resource ID</label>
-              <div :class="{ 'hidden': typeof resourceIdErr === 'undefined'}"
-                   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': typeof resourceIdErr === 'undefined'}" class="text-sm text-red-600 mt-1"
-               id="hs-validation-name-error-helper">{{ resourceIdErr }}
-            </p>
-          </div>
-          <!-- End Resource id -->
-
-          <!-- Resource variant -->
-          <div class="relative">
-            <select v-model="resourceVariant"
-                    class="my-2 peer p-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
-                    focus:pt-6
-                    focus:pb-2
-                    [&:not(:placeholder-shown)]:pt-6
-                    [&:not(:placeholder-shown)]:pb-2
-                    autofill:pt-6
-                    autofill:pb-2">
-              <option v-for="variant in ResourceVariant" :value="variant"
-                      v-bind:selected="variant === ResourceVariant.Project">
-                {{ variant }}
-              </option>
-            </select>
-            <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">Resource Variant</label>
-          </div>
-          <!-- End Resource variant -->
-
-          <!-- Relation direction -->
-          <div class="relative">
-            <select v-model="relationDirection"
-                    class="my-2 peer p-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
-                    focus:pt-6
-                    focus:pb-2
-                    [&:not(:placeholder-shown)]:pt-6
-                    [&:not(:placeholder-shown)]:pb-2
-                    autofill:pt-6
-                    autofill:pb-2">
-              <option v-for="direction in RelationDirection" :value="direction"
-                      v-bind:selected="direction === RelationDirection.Outbound">
-                {{ direction }}
-              </option>
-            </select>
-            <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">Relation Direction</label>
-          </div>
-          <!-- End Relation direction -->
-
-          <!-- Relation variant -->
-          <div class="relative">
-            <select v-model="relationVariant"
-                    class="my-2 peer p-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
-                    focus:pt-6
-                    focus:pb-2
-                    [&:not(:placeholder-shown)]:pt-6
-                    [&:not(:placeholder-shown)]:pb-2
-                    autofill:pt-6
-                    autofill:pb-2">
-              <option v-for="variant in InternalRelationVariant" :value="variant"
-                      v-bind:selected="variant === InternalRelationVariant.BelongsTo">
-                {{ variant }}
-              </option>
-            </select>
-            <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">Relation Variant</label>
-          </div>
-          <!-- End Relation variant -->
-
-          <!-- Custom variant input -->
-          <div v-if="relationVariant === InternalRelationVariant.Custom" class="space-y-0">
-            <div class="relative">
-              <input v-model="customVariant"
-                     id="hs-floating-input-resource"
-                     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="A resource id" type="text">
-              <label for="hs-floating-input-resource"
-                     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">Custom Variant</label>
-              <div :class="{ 'hidden': typeof customVariantErr === 'undefined'}"
-                   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': typeof customVariantErr === 'undefined'}" class="text-sm text-red-600 mt-1"
-               id="hs-validation-name-error-helper">{{ customVariantErr }}
-            </p>
-          </div>
-          <!-- End Custom variant input -->
-        </div>
-        <!-- End Relation variant -->
-
-        <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="!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-700 text-white hover:bg-aruna-800 disabled:opacity-50 disabled:pointer-events-none"
-                  :data-hs-overlay="`#${props.modalId}`">
-            Add Relation
-          </button>
-        </div>
-
-      </div>
-    </div>
-  </div>
-</template>
\ No newline at end of file

From 6d9b2e91945739fa0bd54fded8f0aa9951894c3e Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 17 Dec 2024 09:25:31 +0100
Subject: [PATCH 066/125] fix: Event display components

---
 .../custom-ui/dashboard/EventDisplay.vue      | 37 +++++++------------
 components/custom-ui/dashboard/EventList.vue  | 36 +++++++++++-------
 components/custom-ui/dashboard/Events.vue     | 12 +++---
 3 files changed, 42 insertions(+), 43 deletions(-)

diff --git a/components/custom-ui/dashboard/EventDisplay.vue b/components/custom-ui/dashboard/EventDisplay.vue
index 5508842a..dcbddcb3 100644
--- a/components/custom-ui/dashboard/EventDisplay.vue
+++ b/components/custom-ui/dashboard/EventDisplay.vue
@@ -8,37 +8,27 @@ import {
     IconDotsVertical,
     IconTrash
 } from "@tabler/icons-vue";
-
 import {format} from 'date-fns/format'
 import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from '@/components/ui/dropdown-menu'
 import {Avatar, AvatarFallback} from '@/components/ui/avatar'
 import {Button} from '@/components/ui/button'
 import {Separator} from '@/components/ui/separator'
 import {Tooltip, TooltipContent, TooltipTrigger} from '@/components/ui/tooltip'
-import {v2PersonalNotificationVariant} from "~/composables/aruna_api_json";
 
+/* ----- PROPERTIES ----- */
 interface EventDisplayProps {
   eventData: BaseTx | undefined //Mail | undefined
 }
 
 const props = defineProps<EventDisplayProps>()
+/* ----- END PROPERTIES ----- */
 
-const mailFallbackName = computed(() => {
-  return 'A' //ToDo
-  /*
-  return props.mail?.name
-      .split(' ')
-      .map(chunk => chunk[0])
-      .join('')
-  */
+const eventAbbreviation = computed(() => {
+  const parts = props.eventData?.type.match(/[A-Z][a-z]+/g)
+  return parts?.map(chunk => chunk[0]).join('')
 })
 
 const today = new Date()
-
-function displayVariant(variant: v2PersonalNotificationVariant) {
-  const label = variant.replace('PERSONAL_NOTIFICATION_VARIANT_', '').replace('_', ' ').toLowerCase()
-  return label.charAt(0).toUpperCase() + label.slice(1)
-}
 </script>
 
 <template>
@@ -92,8 +82,7 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
                 <div class="grid min-w-[250px] gap-1">
                   <Button
                       variant="ghost"
-                      class="justify-start font-normal"
-                  >
+                      class="justify-start font-normal">
                     Later today
                     <span class="ml-auto text-muted-foreground">
                       {{ format(addHours(today, 4), "E, h:m b") }}
@@ -188,12 +177,12 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
         <div class="flex items-start gap-4 text-sm">
           <Avatar>
             <AvatarFallback>
-              {{ mailFallbackName }}
+              {{ eventAbbreviation }}
             </AvatarFallback>
           </Avatar>
           <div class="grid gap-1">
             <div class="font-semibold">
-              {{ eventData.id }}
+              {{ eventData.event_id }}
               <!--{{ mail.name || 'Aruna System' }}-->
             </div>
             <div class="line-clamp-1 text-xs">
@@ -217,16 +206,16 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
 
       <Separator/>
       <div class="flex-1 whitespace-pre-wrap p-4 text-sm">
-        <pre>{{ JSON.stringify(eventData, null, 2).trim() }}</pre>
-        <!--{{ mail.text }}-->
+        <pre class="break-words text-wrap">{{ JSON.stringify(eventData, null, 2).trim() }}</pre>
+        <!-- TODO: Human readable event summary -->
       </div>
-      <!--
+
       <Separator class="mt-auto"/>
       <div class="p-4">
         <form>
           <div class="grid gap-4">
             <Textarea class="p-4"
-                      :placeholder="`Reply ${mail.name}...`"/>
+                      :placeholder="`Reply ${eventData.type}...`"/>
             <div class="flex items-center">
               <Label html-for="mute"
                      class="flex items-center gap-2 text-xs font-normal">
@@ -242,7 +231,7 @@ function displayVariant(variant: v2PersonalNotificationVariant) {
           </div>
         </form>
       </div>
-      -->
+
     </div>
     <div v-else class="p-8 text-center text-muted-foreground">
       No message selected
diff --git a/components/custom-ui/dashboard/EventList.vue b/components/custom-ui/dashboard/EventList.vue
index 73c28d5c..9c466898 100644
--- a/components/custom-ui/dashboard/EventList.vue
+++ b/components/custom-ui/dashboard/EventList.vue
@@ -2,13 +2,18 @@
 import {ScrollArea} from '@/components/ui/scroll-area'
 import {cn} from '@/utils/shadcn'
 import {Badge} from '@/components/ui/badge'
+import {decodeTime} from 'ulid'
+import {formatDate} from '~/composables/utils'
+import {formatDistanceToNow} from "date-fns";
 
+/* ----- Component Properties ----- */
 interface EventListProps {
   items: BaseTx[] //Mail[]
 }
 
 defineProps<EventListProps>()
-const selectedMail = defineModel<string>('selectedMail', {required: false})
+const selectedEvent = defineModel<string>('selectedEvent', {required: false})
+/* ----- End Component Properties ----- */
 </script>
 
 <template>
@@ -16,34 +21,37 @@ const selectedMail = defineModel<string>('selectedMail', {required: false})
     <div class="flex-1 flex flex-col gap-2 p-4 pt-0">
       <TransitionGroup name="list" appear>
         <button v-for="item of items"
-                :key="item.id"
+                :key="item.event_id"
                 :class="cn('flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
-                selectedMail === item.id && 'bg-muted',)"
-                @click="selectedMail = item.id">
+                selectedEvent === item.event_id && 'bg-muted',)"
+                @click="selectedEvent = item.event_id">
           <div class="flex w-full flex-col gap-1">
             <div class="flex items-center">
               <div class="flex items-center gap-2">
                 <div class="font-semibold">
-                  {{ item.id }}
+                  {{ item.type }}
                   <!--{{ item.name }}-->
                 </div>
                 <!--
                 <span v-if="!item.read" class="flex h-2 w-2 rounded-full bg-blue-600"/>
                 -->
               </div>
-              <div
-                  :class="cn(
-                  'ml-auto text-xs',
-                  selectedMail === item.id
-                    ? 'text-foreground'
-                    : 'text-muted-foreground',)">
-                <!-- {{ formatDistanceToNow(new Date(item.date), {addSuffix: true}) }} -->
+              <div :class="cn('ml-auto text-xs', selectedEvent === item.event_id ? 'text-foreground' : 'text-muted-foreground',)">
+                <TooltipProvider :delay-duration="100">
+                  <Tooltip>
+                    <TooltipTrigger>
+                      {{ formatDistanceToNow(new Date(decodeTime(item.event_id))) + ' ago' }}
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p>{{ formatDate(new Date(decodeTime(item.event_id)).toString()) }}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
               </div>
             </div>
 
             <div class="text-xs font-medium">
-              {{ item.type }}
-              <!--{{ item.subject }}-->
+              {{ item.event_id }}
             </div>
           </div>
           <div class="line-clamp-2 text-xs text-muted-foreground">
diff --git a/components/custom-ui/dashboard/Events.vue b/components/custom-ui/dashboard/Events.vue
index 8222848e..9be9ee46 100644
--- a/components/custom-ui/dashboard/Events.vue
+++ b/components/custom-ui/dashboard/Events.vue
@@ -14,6 +14,7 @@ import {
 import {TooltipProvider} from '@/components/ui/tooltip'
 import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from '@/components/ui/resizable'
 
+/* ----- PROPERTIES ----- */
 interface EventsProps {
   events: BaseTx[]
   defaultLayout?: number[]
@@ -27,11 +28,12 @@ const props = withDefaults(defineProps<EventsProps>(), {
 })
 
 const events = toRef(() => props.events)
-
 watch(events, (newVal) => console.log('[EventsComponent]', newVal))
+/* ----- END PROPERTIES ----- */
 
 const isCollapsed = ref(props.defaultCollapsed)
-const selectedEvent = ref<string | undefined>(events.value[0].id)
+const selectedEvent = ref<string | undefined>(events.value[0].event_id)
+
 const searchValue = ref('')
 const debouncedSearch = refDebounced(searchValue, 250)
 
@@ -52,7 +54,7 @@ const filteredMailList = computed(() => {
 })
 
 const unreadEventsList = computed(() => filteredMailList.value.filter(item => true))
-const selectedEventData = computed(() => props.events.find(item => item.id === selectedEvent.value))
+const selectedEventData = computed(() => props.events.find(item => item.event_id === selectedEvent.value))
 
 function onCollapse() {
   isCollapsed.value = true
@@ -94,10 +96,10 @@ function onExpand() {
             </form>
           </div>
           <TabsContent value="all" class="m-0 h-full">
-            <EventList v-model:selected-mail="selectedEvent" :items="filteredMailList"/>
+            <EventList v-model:selected-event="selectedEvent" :items="filteredMailList"/>
           </TabsContent>
           <TabsContent value="unread" class="m-0">
-            <EventList v-model:selected-mail="selectedEvent" :items="unreadEventsList"/>
+            <EventList v-model:selected-event="selectedEvent" :items="unreadEventsList"/>
           </TabsContent>
         </Tabs>
       </ResizablePanel>

From f6cdde46814340069079346d22dbf4c0c23294db Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 18 Dec 2024 09:45:40 +0100
Subject: [PATCH 067/125] chore: Remove unused textarea in EventDisplay

---
 .../custom-ui/dashboard/EventDisplay.vue      | 23 +------------------
 1 file changed, 1 insertion(+), 22 deletions(-)

diff --git a/components/custom-ui/dashboard/EventDisplay.vue b/components/custom-ui/dashboard/EventDisplay.vue
index dcbddcb3..efdfb569 100644
--- a/components/custom-ui/dashboard/EventDisplay.vue
+++ b/components/custom-ui/dashboard/EventDisplay.vue
@@ -205,33 +205,12 @@ const today = new Date()
       </div>
 
       <Separator/>
+
       <div class="flex-1 whitespace-pre-wrap p-4 text-sm">
         <pre class="break-words text-wrap">{{ JSON.stringify(eventData, null, 2).trim() }}</pre>
         <!-- TODO: Human readable event summary -->
       </div>
 
-      <Separator class="mt-auto"/>
-      <div class="p-4">
-        <form>
-          <div class="grid gap-4">
-            <Textarea class="p-4"
-                      :placeholder="`Reply ${eventData.type}...`"/>
-            <div class="flex items-center">
-              <Label html-for="mute"
-                     class="flex items-center gap-2 text-xs font-normal">
-                <Switch id="mute" aria-label="Mute thread"/>
-                Mute this thread
-              </Label>
-              <Button type="button"
-                      size="sm"
-                      class="ml-auto">
-                Send
-              </Button>
-            </div>
-          </div>
-        </form>
-      </div>
-
     </div>
     <div v-else class="p-8 text-center text-muted-foreground">
       No message selected

From 33e20f13d6e0c1d4d9a1e79caf9f2d088a6d498b Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 18 Dec 2024 11:21:15 +0100
Subject: [PATCH 068/125] feat: Adapt KeyValueDialog to v3

---
 .../custom-ui/dialog/KeyValueDialog.vue       | 92 +++++++++----------
 1 file changed, 44 insertions(+), 48 deletions(-)

diff --git a/components/custom-ui/dialog/KeyValueDialog.vue b/components/custom-ui/dialog/KeyValueDialog.vue
index 12768209..42271a87 100644
--- a/components/custom-ui/dialog/KeyValueDialog.vue
+++ b/components/custom-ui/dialog/KeyValueDialog.vue
@@ -15,11 +15,13 @@ 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'
+import {Checkbox} from "~/components/ui/checkbox";
 
 /* ----- PROPERTIES ----- */
 const props = defineProps<{
   initialOpen: boolean
   withButton: boolean
+  buttonLabel?: string
   buttonCss?: string
 }>()
 const externalTrigger = toRef(props, 'initialOpen')
@@ -29,39 +31,35 @@ watch(externalTrigger, () => (open.value = externalTrigger.value))
 
 /* ----- EVENT EMITS ----- */
 const emit = defineEmits<{
-  'add-key-value': [keyValue: v2KeyValue]
+  'add-key-value': [keyValue: KeyValue]
 }>()
 /* ----- 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),
-  })
+    z.object({
+      key: z.string({required_error: 'Key cannot be empty.'}).min(1, 'Key cannot be empty.').max(256),
+      value: z.string().optional(),
+      locked: z.boolean().optional(),
+    })
 )
 
-const form = useForm({
+const {handleSubmit, values} = useForm({
   validationSchema: formSchema,
+  initialValues: {
+    locked: false
+  }
 })
 
-const onSubmit = form.handleSubmit(async values => {
+const onSubmit = handleSubmit(async values => {
   emit('add-key-value', {
     key: values.key,
-    value: values.value,
-    variant: values.variant,
+    value: values.value || '',
+    locked: values.locked || false
   })
+  open.value = false
 })
 /* ----- 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>
@@ -69,44 +67,25 @@ function formatKeyValueLabel(variant: string): string {
     <DialogTrigger v-if="withButton" as-child>
       <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 Key-Value
+        {{ buttonLabel || '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>
+        <DialogTitle class="mb-2 text-center text-aruna-highlight font-bold">Add Key-Value</DialogTitle>
+        <DialogDescription class="text-aruna-text 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>
-
+      <form id="keyValueForm" @submit="onSubmit" class="space-y-4">
         <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" />
+              <Input type="text" placeholder="Here you can enter the key" v-bind="componentField" class="mt-0"/>
             </FormControl>
-            <FormMessage />
+            <FormMessage/>
           </FormItem>
         </FormField>
 
@@ -114,14 +93,31 @@ function formatKeyValueLabel(variant: string): string {
           <FormItem>
             <FormLabel>Value</FormLabel>
             <FormControl>
-              <Textarea v-bind="componentField" :rows="5" placeholder="Here you can enter the value" />
+              <Textarea v-bind="componentField" :rows="5" placeholder="Here you can enter the value"/>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+
+        <FormField type="checkbox" v-slot="{ value, handleChange }" name="locked">
+          <FormItem class="flex flex-row items-start gap-x-3 space-y-0">
+            <FormControl>
+              <Checkbox :checked="value" @update:checked="handleChange"/>
             </FormControl>
-            <FormMessage />
+            <div class="space-y-1 leading-none">
+              <FormLabel>
+                This label is locked/immutable
+              </FormLabel>
+              <FormMessage/>
+            </div>
           </FormItem>
         </FormField>
       </form>
       <DialogFooter>
-        <Button type="submit" form="dialogForm" class="bg-aruna-800 hover:bg-aruna-700"> Add key-value </Button>
+        <Button type="submit" form="keyValueForm"
+                class="w-fit bg-transparent border border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+          Add key-value
+        </Button>
       </DialogFooter>
     </DialogContent>
   </Dialog>

From cdd7cab7d4c21910a9ae59188e928678d92d6837 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 18 Dec 2024 11:22:04 +0100
Subject: [PATCH 069/125] feat: Implement first iteration of
 RealmComponentDialog

---
 .../custom-ui/dialog/RealmComponentDialog.vue | 334 ++++++++++++++++++
 1 file changed, 334 insertions(+)
 create mode 100644 components/custom-ui/dialog/RealmComponentDialog.vue

diff --git a/components/custom-ui/dialog/RealmComponentDialog.vue b/components/custom-ui/dialog/RealmComponentDialog.vue
new file mode 100644
index 00000000..0f1f80b2
--- /dev/null
+++ b/components/custom-ui/dialog/RealmComponentDialog.vue
@@ -0,0 +1,334 @@
+<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 {CreateComponentRequest, Endpoint, v3Component} from "~/composables/api_wrapper";
+import {useForm} from 'vee-validate'
+import {toTypedSchema} from '@vee-validate/zod'
+import * as z from 'zod'
+
+/* ----- PROPERTIES ----- */
+const props = defineProps<{
+  initialOpen: boolean
+  withButton: boolean
+  buttonCss?: string,
+  realmId?: string
+}>()
+const realmId = toRef(() => props.realmId)
+const externalTrigger = toRef(() => props.initialOpen)
+const open = ref(props.initialOpen)
+watch(realmId, () => {
+  console.info('[RealmComponentDialog] Updated realmId: ', realmId.value)
+  setFieldValue('realm_id', realmId.value)
+})
+watch(externalTrigger, () => (open.value = externalTrigger.value))
+/* ----- END PROPERTIES ----- */
+
+/* ----- EVENT EMITS ----- */
+const emit = defineEmits<{
+  'add-component': [component: v3Component]
+}>()
+/* ----- END EVENT EMITS ----- */
+
+/* ----- FORM SCHEMA ----- */
+const formSchema = toTypedSchema(z.object({
+    realm_id: z.string().optional(),
+    name: z.string({required_error: 'Name is required.'}).min(2).max(256),
+    pubkey: z.string({required_error: 'Public key is required.'}).min(2).max(256),
+    description: z.string().optional(),
+    public: z.boolean(),
+    component_type: z.nativeEnum(ComponentType),
+    s3_endpoint: z.custom<{S3: string}>().optional(),
+    grpc_endpoint: z.custom<{Grpc: string}>().optional(),
+    json_endpoint: z.custom<{Json: string}>().optional(),
+    consensus_endpoint: z.custom<{Consensus: string}>().optional()
+  })
+)
+
+const {handleSubmit, values, setFieldValue} = useForm({
+  validationSchema: formSchema,
+  initialValues: {
+    //component_type: ComponentType.Server,
+    public: true,
+  }
+})
+
+import {useToast} from '~/components/ui/toast/use-toast'
+import {Checkbox} from "~/components/ui/checkbox";
+import {ComponentType, ResourceVariant} from "~/types/aruna-v3-enums";
+const {toast} = useToast()
+const onSubmit = handleSubmit(async (values) => {
+  console.info('[RealmComponentDialog] Submitted values: ', values)
+
+  // Collect endpoints
+  let endpoints: Endpoint[] = []
+  if (values.s3_endpoint)
+    endpoints.push(values.s3_endpoint)
+  if (values.json_endpoint)
+    endpoints.push(values.json_endpoint)
+  if (values.grpc_endpoint)
+    endpoints.push(values.grpc_endpoint)
+  if (values.consensus_endpoint)
+    endpoints.push(values.consensus_endpoint)
+
+  const request = {
+    public: values.public,
+    name: values.name,
+    pubkey: values.pubkey,
+    description: values.description,
+    component_type: values.component_type,
+    endpoints: endpoints
+  } as CreateComponentRequest
+
+  /*
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(request, null, 2))),
+  })
+  */
+
+  //Create component
+  await $fetch<CreateComponentResponse>('/api/v3/components', {
+    method: 'POST',
+    body: request
+  }).then(response => {
+    toast({
+      title: 'Success',
+      description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(response, null, 2))),
+    })
+
+    // Add created component to realm
+    return $fetch<AddComponentToRealmResponse>('/api/v3/components', {
+      method: 'PATCH',
+      body: {
+        realm_id: values.realm_id,
+        component_id: response.component.id
+      }
+    })
+
+  }).then(response => {
+    toast({
+      title: 'Success',
+      description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(response, null, 2))),
+    })
+    emit('add-component', response.component)
+    open.value = false
+
+  }).catch(error => {
+    toast({
+      variant: "destructive",
+      title: 'Error',
+      description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(error.data, null, 2))),
+    })
+  })
+
+  //TODO: Emit event
+})
+
+/* ----- END FORM SCHEMA ----- */
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger v-if="withButton" as-child>
+      <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 Realm Component
+      </Button>
+    </DialogTrigger>
+    <DialogContent class="sm:max-w-[500px] sm:rounded-md" @pointer-down-outside="event => event.preventDefault()">
+      <DialogHeader>
+        <DialogTitle class="mb-2 text-center text-aruna-700 font-bold">
+          Add Realm Component
+        </DialogTitle>
+        <DialogDescription class="flex flex-col gap-y-4 justify-start">
+          Add a new component to your realm.
+          <pre>{{ JSON.stringify(values, null, 2) }}</pre>
+        </DialogDescription>
+      </DialogHeader>
+
+      <form id="createComponentForm" @submit="onSubmit" class="space-y-4">
+        <FormField v-slot="{componentField}" name="realm_id">
+          <FormItem class="invisible h-0">
+            <FormControl>
+              <Input type="text"
+                     v-bind="componentField"
+                     placeholder="Id of the realm the component will be created for"
+                     class="mt-0"/>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="component_type">
+          <FormItem>
+            <FormLabel>Type</FormLabel>
+            <Select v-bind="componentField">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select a type for your component" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem v-for="type in ComponentType" class="" :value="type">
+                    {{ type }}
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="name">
+          <FormItem>
+            <FormLabel>Name</FormLabel>
+            <FormControl>
+              <Input type="text"
+                     v-bind="componentField"
+                     placeholder="Name of the component"
+                     class="mt-0" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{componentField}" name="pubkey">
+          <FormItem>
+            <FormLabel>Public Key</FormLabel>
+            <FormControl>
+              <Input type="text"
+                     v-bind="componentField"
+                     placeholder="Public key of the component"
+                     class="mt-0 w-full truncate overflow-ellipsis" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <!-- Endpoints Input -->
+        <div class="flex flex-col gap-y-0">
+          <FormField v-slot="{componentField}"
+                     name="s3_endpoint">
+            <FormItem>
+              <FormLabel>Endpoints</FormLabel>
+              <FormControl>
+                <div class="flex rounded-sm">
+                    <span class="min-w-[75px] px-4 inline-flex items-center rounded-s-sm border border-e-0 bg-transparent text-sm text-aruna-highlight">
+                      S3
+                    </span>
+                  <Input type="text"
+                         placeholder="S3 endpoint URL of the component"
+                         @update:model-value="(v) => {setFieldValue('s3_endpoint', v ? {S3: v.toString()} : undefined)}"
+                         class="mt-0 rounded-s-none focus:outline-0 focus:ring-1
+                                focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                disabled:opacity-50 disabled:pointer-events-none"/>
+
+                </div>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+
+          <FormField v-slot="{componentField}"
+                     name="grpc_endpoint">
+            <FormItem>
+              <FormControl>
+                <div class="flex rounded-sm">
+                    <span class="min-w-[75px] px-4 inline-flex items-center rounded-s-sm border border-e-0 bg-transparent text-sm text-aruna-highlight">
+                      gRPC
+                    </span>
+                  <Input type="text"
+                         placeholder="gRPC endpoint URL of the component"
+                         @update:model-value="(v) => {setFieldValue('grpc_endpoint', v ? {Grpc: v.toString()} : undefined)}"
+                         class="mt-0 rounded-s-none"/>
+                </div>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <FormField v-slot="{componentField}"
+                     name="json_endpoint">
+            <FormItem>
+              <FormControl>
+                <div class="flex rounded-sm">
+                    <span class="min-w-[75px] px-4 inline-flex items-center rounded-s-sm border border-e-0 bg-transparent text-sm text-aruna-highlight">
+                      JSON
+                    </span>
+                  <Input type="text"
+                         placeholder="JSON endpoint URL of the component"
+                         @update:model-value="(v) => {setFieldValue('json_endpoint', v ? {Json: v.toString()} : undefined)}"
+                         class="mt-0 rounded-s-none"/>
+                </div>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <FormField v-slot="{componentField}"
+                     name="consensus_endpoint">
+            <FormItem>
+              <FormControl>
+                <div class="flex rounded-sm">
+                    <span class="min-w-[75px] px-4 inline-flex items-center rounded-s-sm border border-e-0 bg-transparent text-sm text-aruna-highlight">
+                      Cons.
+                    </span>
+                  <Input type="text"
+                         placeholder="Consensus endpoint URL of the component"
+                         @update:model-value="(v) => {setFieldValue('consensus_endpoint', v ? {Consensus: v.toString()} : undefined)}"
+                         class="mt-0 rounded-s-none"/>
+                </div>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+        </div>
+        <!-- End Endpoints Input -->
+
+        <FormField v-slot="{componentField}" name="description">
+          <FormItem>
+            <FormLabel>Description</FormLabel>
+            <FormControl>
+              <Textarea v-bind="componentField"
+                        :rows="5"
+                        placeholder="A concise description of the component" />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField type="checkbox" v-slot="{ value, handleChange }" name="public">
+          <FormItem class="flex flex-row items-start gap-x-3 space-y-0">
+            <FormControl>
+              <Checkbox :checked="value" @update:checked="handleChange" class="data-[state=checked]:bg-aruna-highlight data-[state=checked]:text-aruna-text-accent"/>
+            </FormControl>
+            <div class="space-y-1 leading-none">
+              <FormLabel>
+                This component is publicly available
+              </FormLabel>
+              <FormMessage/>
+            </div>
+          </FormItem>
+        </FormField>
+
+      </form>
+      <DialogFooter>
+        <Button type="submit"
+                form="createComponentForm"
+                class="w-fit bg-transparent border border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+          Create Component
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

From efa7efd650f00dbd3dd2cf772847e60ffec61c01 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 18 Dec 2024 11:23:02 +0100
Subject: [PATCH 070/125] feat: Partially adapt Realms subcomponent to v3

---
 components/custom-ui/dashboard/Realms.vue | 152 ++++++++++++++++------
 1 file changed, 113 insertions(+), 39 deletions(-)

diff --git a/components/custom-ui/dashboard/Realms.vue b/components/custom-ui/dashboard/Realms.vue
index d6225dea..8b0898ec 100644
--- a/components/custom-ui/dashboard/Realms.vue
+++ b/components/custom-ui/dashboard/Realms.vue
@@ -1,46 +1,73 @@
 <script setup lang="ts">
+import {IconCaretUpDown, IconCubePlus} from "@tabler/icons-vue";
 import {VisSingleContainer, VisGraph, VisTooltip} from '@unovis/vue'
 import {Graph, GraphLayoutType, Position, Tooltip} from '@unovis/ts'
 import {ref, computed} from "vue"
+import DataproxyDialog from "~/components/custom-ui/dialog/DataproxyDialog.vue";
+import RealmComponentDialog from "~/components/custom-ui/dialog/RealmComponentDialog.vue";
+
+/* ----- Deprecated imports ----- */
+import {useToast} from '~/components/ui/toast/use-toast'
+
+const {toast} = useToast()
+import {nodes, links, sites, StatusMap, type NodeDatum, type LinkDatum} from './data-circular'
+import type {v2Endpoint} from "~/composables/aruna_api_json";
+/* ----- End Deprecated imports ----- */
+
+
+/* ----- PROPERTIES ----- */
+interface RealmsProps {
+  realms: Realm[]
+}
+
+const props = defineProps<RealmsProps>()
+const realms = toRef(() => props.realms)
+const currentRealm = ref<string | undefined>(undefined)
+/* ----- END PROPERTIES ----- */
+
+const realmComponents = ref<v3Component[]>([])
+const realmContext = ref<string | undefined>(undefined)
+watch(realmContext, async () => {
+  await $fetch<GetRealmComponentsResponse>('/api/v3/components', {
+    query: {
+      id: realmContext.value
+    }
+  }).then(response => {
+    console.info('[Realms Component]', response)
+    realmComponents.value = response.components
+  })
+})
+EventBus.on('switchRealm', (realmId: string) => realmContext.value = realmId)
 
-const realms = [
-  {
-    name: 'FAIR DS',
-    status: 'Active',
-    description: 'FAIR DS aims to create a comprehensive infrastructure that promotes the Findability, Accessibility, Interoperability, and Reusability (FAIR) of research data across various disciplines. By establishing data spaces that bridge different scientific fields, FAIR DS facilitates data sharing and collaboration on a national and international scale.',
-    quota: '2.3 / 5.0 TiB',
-  },
-  {
-    name: 'NFDI4Biodiversity',
-    status: 'Active',
-    description: 'NFDI4Biodiversity develops a digital infrastructure for biodiversity research, enabling the integration, sharing, and analysis of diverse biodiversity datasets. By providing resources and tools, it supports researchers and policymakers in understanding and addressing biodiversity-related challenges at local and global levels.',
-    quota: '1.4 / 5.0 TiB',
-  },
-  {
-    name: 'NFDI4Microbiota',
-    status: 'Active',
-    description: 'NFDI4Microbiota focuses on building a research data infrastructure specifically for microbiome and microbiota research. It provides standardized tools, protocols, and data management services to support data sharing, analysis, and long-term storage, fostering collaboration among microbiologists and related disciplines.',
-    quota: '2.9 / 5.0 TiB',
-  },
-  {
-    name: 'NFDI4Health',
-    status: 'Inactive',
-    description: 'NFDI4Health aims to establish a research data infrastructure tailored to public health and epidemiology. It provides tools, standards, and services to facilitate the secure collection, management, and sharing of health-related data. By promoting interoperability and supporting data-driven research, NFDI4Health enables researchers and policymakers to gain insights into population health trends and improve public health outcomes.',
-    quota: '4.6 / 5.0 TiB',
-  },
-]
 
 function displayDescription(description: string, maxLength: number = 50): string {
   return description.length > maxLength ? description.slice(0, maxLength) + " ..." : description
 }
 
+function splitDescription(description: string) {
+  const splitIndex = description.indexOf('.')
+  console.info('[Realms Component]', [description.slice(0, splitIndex), description.slice(splitIndex + 1)])
+  return [description.slice(0, splitIndex), description.slice(splitIndex + 1)]
+}
+
 const disableTooltips = ref<boolean>(false)
 const container = document.body
 watch(disableTooltips, () => console.log('[Disabled Tooltips]', disableTooltips.value))
 
-import {nodes, links, sites, StatusMap, type NodeDatum, type LinkDatum} from './data-circular'
-import type {v2Endpoint} from "~/composables/aruna_api_json";
-import DataproxyDialog from "~/components/custom-ui/dialog/DataproxyDialog.vue";
+
+const componentDialogOpen = ref<boolean>(false)
+
+function openComponentCreation(realmId: string) {
+  currentRealm.value = realmId
+  componentDialogOpen.value = true
+}
+
+function addComponent(component: v3Component) {
+  toast({
+    title: 'Event Received',
+    description: `Received "AddComponent" event: ${component.id}`
+  })
+}
 
 // Reactive statements
 const expanded = ref<string[]>(['instance-gi', 'instance-bi', 'instance-be', 'instance-tu'])
@@ -91,7 +118,7 @@ const triggers = computed(() => {
   }
 })
 
-const clickedEndpoint: Ref<v2Endpoint  | undefined> = ref(undefined)
+const clickedEndpoint: Ref<v2Endpoint | undefined> = ref(undefined)
 const detailDialogOpen = ref<boolean>(false)
 
 // Graph config
@@ -135,33 +162,79 @@ const graphConfig = computed(() => ({
                    :endpoint="clickedEndpoint"
                    @update:open="detailDialogOpen = false"/>
 
-  <div class="flex flex-col">
+  <RealmComponentDialog :initial-open="componentDialogOpen"
+                        :with-button="false"
+                        :realm-id="currentRealm"
+                        @add-component=""
+                        @update:open="componentDialogOpen = false"/>
+
+  <div class="mx-4 mt-4 flex flex-col">
     <div class="flex flex-row items-center justify-center max-w-screen-2xl lg:max-w-[80vw]">
       <Table>
         <TableCaption>A list of your active realms</TableCaption>
         <TableHeader>
           <TableRow>
             <TableHead class="text-lg">Realm</TableHead>
-            <TableHead class="text-lg">Status</TableHead>
             <TableHead class="text-lg">Description</TableHead>
-            <TableHead class="text-lg text-center">Quota</TableHead>
+            <TableHead class="text-lg">Id</TableHead>
+            <TableHead class="text-lg">Tag</TableHead>
+            <TableHead class="text-lg text-center">Deleted</TableHead>
+            <TableHead class="text-lg text-center">Actions</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           <TableRow v-for="realm in realms" :key="realm.name">
-            <TableCell class="font-medium">
-              {{ realm.name }}
+            <TableCell class="font-bold">{{ realm.name }}</TableCell>
+            <!--<TableCell>{{ displayDescription(realm.description, 128) }}</TableCell>-->
+            <TableCell>
+
+              <Collapsible>
+                <div class="flex justify-between">
+                  {{ splitDescription(realm.description)[0] }}.
+                  <CollapsibleTrigger class="text-left">
+                    <Button variant="ghost" class="p-0 text-aruna-highlight size-4">
+                      <IconCaretUpDown/>
+                    </Button>
+                  </CollapsibleTrigger>
+                </div>
+                <CollapsibleContent class="mt-2">
+                  {{ splitDescription(realm.description)[1] }}
+                </CollapsibleContent>
+              </Collapsible>
+
             </TableCell>
-            <TableCell>{{ realm.status }}</TableCell>
-            <TableCell>{{ displayDescription(realm.description, 128) }}</TableCell>
-            <TableCell class="text-right">
-              {{ realm.quota }}
+            <TableCell class="font-medium">{{ realm.id }}</TableCell>
+            <TableCell>{{ realm.tag }}</TableCell>
+            <TableCell class="text-center">{{ realm.deleted }}</TableCell>
+            <TableCell class="h-full flex justify-center items-center text-center">
+              <IconCubePlus title="Create a new realm component"
+                            class="text-aruna-text-accent hover:text-aruna-highlight hover:cursor-pointer"
+                            @click="openComponentCreation(realm.id)"/>
             </TableCell>
           </TableRow>
         </TableBody>
       </Table>
     </div>
+
     <Separator class="my-6"/>
+
+    <h2 class="mb-6 text-2xl font-bold md:text-3xl md:leading-tight text-aruna-text-accent">
+      Components of currently selected realm:
+    </h2>
+    <Card v-for="component in realmComponents" class="w-fit">
+      <CardHeader>
+        <CardTitle>{{ component.name }}</CardTitle>
+        <CardDescription>{{ component.id }}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <pre>{{ JSON.stringify(component, null, 2) }}</pre>
+      </CardContent>
+      <CardFooter>
+        This component is public: {{ component.public }}
+      </CardFooter>
+    </Card>
+
+    <!--
     <div class="flex flex-col chart">
       <VisSingleContainer :data="data" height="60vh">
         <VisGraph v-bind="graphConfig"
@@ -184,6 +257,7 @@ const graphConfig = computed(() => ({
 
       </VisSingleContainer>
     </div>
+    -->
   </div>
 </template>
 

From 9cb9cd873d707b7ab214540f9b96667b7fa77825 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 6 Jan 2025 14:20:55 +0100
Subject: [PATCH 071/125] fix: Event display panel height

---
 components/custom-ui/dashboard/Events.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/custom-ui/dashboard/Events.vue b/components/custom-ui/dashboard/Events.vue
index 9be9ee46..06ab1ce2 100644
--- a/components/custom-ui/dashboard/Events.vue
+++ b/components/custom-ui/dashboard/Events.vue
@@ -70,7 +70,7 @@ function onExpand() {
     <ResizablePanelGroup
         id="resize-panel-group-1"
         direction="horizontal"
-        class="h-full max-h-[calc(100vh-200px)] items-stretch">
+        class="h-full max-h-[calc(100vh-130px)] items-stretch">
       <ResizablePanel id="resize-panel-1" :default-size="defaultLayout[0]" :min-size="30">
         <Tabs default-value="all" class="h-full">
           <div class="flex items-center px-4 py-2">

From 568c27a7355785643df0606faa9eeefede6e24f0 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 6 Jan 2025 14:21:33 +0100
Subject: [PATCH 072/125] refactor: Event badges

---
 components/custom-ui/dashboard/EventList.vue | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/components/custom-ui/dashboard/EventList.vue b/components/custom-ui/dashboard/EventList.vue
index 9c466898..ba7a939d 100644
--- a/components/custom-ui/dashboard/EventList.vue
+++ b/components/custom-ui/dashboard/EventList.vue
@@ -63,11 +63,8 @@ const selectedEvent = defineModel<string>('selectedEvent', {required: false})
             <Badge v-if="item.requester.Unregistered" variant="outline">Unregistered</Badge>
             <Badge v-if="item.requester.User" variant="secondary">User</Badge>
             <Badge v-if="item.requester.User?.impersonated_by" variant="default">Impersonated</Badge>
-            <!--
-            <Badge v-for="label of item.labels" :key="label" :variant="getBadgeVariantFromLabel(label)">
-              {{ label }}
-            </Badge>
-            -->
+            <Badge v-if="item.requester.User?.auth_method.Oidc" variant="default">OIDC</Badge>
+            <Badge v-if="item.requester.User?.auth_method.Aruna" variant="default">Aruna</Badge>
           </div>
         </button>
       </TransitionGroup>

From dc74db6cac33c5102a93c7ffa7ad9ddbe914ab86 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 6 Jan 2025 14:24:00 +0100
Subject: [PATCH 073/125] chore: Rename DataproxyDialog and adapt layout to v3
 Component

---
 components/custom-ui/dashboard/Realms.vue     |  7 ++--
 ...ataproxyDialog.vue => ComponentDialog.vue} | 33 +++++++++----------
 2 files changed, 18 insertions(+), 22 deletions(-)
 rename components/custom-ui/dialog/{DataproxyDialog.vue => ComponentDialog.vue} (72%)

diff --git a/components/custom-ui/dashboard/Realms.vue b/components/custom-ui/dashboard/Realms.vue
index 8b0898ec..ac28b905 100644
--- a/components/custom-ui/dashboard/Realms.vue
+++ b/components/custom-ui/dashboard/Realms.vue
@@ -117,8 +117,7 @@ const triggers = computed(() => {
     },
   }
 })
-
-const clickedEndpoint: Ref<v2Endpoint | undefined> = ref(undefined)
+const clickedComponent: Ref<v3Component | undefined> = ref(undefined)
 const detailDialogOpen = ref<boolean>(false)
 
 // Graph config
@@ -157,9 +156,9 @@ const graphConfig = computed(() => ({
 </script>
 
 <template>
-  <DataproxyDialog :initial-open="detailDialogOpen"
+  <ComponentDialog :initial-open="detailDialogOpen"
                    :with-button="false"
-                   :endpoint="clickedEndpoint"
+                   :component="clickedComponent"
                    @update:open="detailDialogOpen = false"/>
 
   <RealmComponentDialog :initial-open="componentDialogOpen"
diff --git a/components/custom-ui/dialog/DataproxyDialog.vue b/components/custom-ui/dialog/ComponentDialog.vue
similarity index 72%
rename from components/custom-ui/dialog/DataproxyDialog.vue
rename to components/custom-ui/dialog/ComponentDialog.vue
index dfebdb4a..adbd326a 100644
--- a/components/custom-ui/dialog/DataproxyDialog.vue
+++ b/components/custom-ui/dialog/ComponentDialog.vue
@@ -14,7 +14,7 @@ import type {v2Endpoint} from "~/composables/aruna_api_json";
 const props = defineProps<{
   initialOpen: boolean,
   withButton: boolean,
-  endpoint: v2Endpoint
+  component: v3Component
 }>()
 const externalTrigger = toRef(props, 'initialOpen')
 const open = ref(props.initialOpen)
@@ -30,15 +30,15 @@ const emit = defineEmits(['closeCredentialsDialog'])
   <Dialog v-model:open="open">
     <DialogTrigger v-if="withButton" as-child>
       <Button variant="outline">
-        Show DataProxy
+        Component Details
       </Button>
     </DialogTrigger>
     <DialogContent @close="emit('closeCredentialsDialog')"
                    class="sm:max-w-screen-md sm:rounded-md">
       <DialogHeader>
-        <DialogTitle class="mb-2 text-center text-aruna-700 font-bold">{{ endpoint.name }}</DialogTitle>
-        <DialogDescription v-if="endpoint.name" class="text-center">
-          <p class="mb-2 text-md"><span class="font-bold italic">{{ endpoint.id }}</span></p>
+        <DialogTitle class="mb-2 text-center text-aruna-700 font-bold">{{ component.name }}</DialogTitle>
+        <DialogDescription v-if="component.name" class="text-center">
+          <p class="mb-2 text-md"><span class="font-bold italic">{{ component.id }}</span></p>
           <!--<p class="text-sm">{{ endpoint.id }}</p>-->
         </DialogDescription>
       </DialogHeader>
@@ -46,24 +46,21 @@ const emit = defineEmits(['closeCredentialsDialog'])
         <div class="border-y border-gray-100">
           <dl class="divide-y divide-gray-100">
             <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-              <dt class="text-sm font-medium leading-6 text-gray-400">Status</dt>
-              <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">{{ endpoint.status }}</dd>
-            </div>
-            <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-              <dt class="text-sm font-medium leading-6 text-gray-400">Public Endpoint</dt>
-              <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">{{ endpoint.isPublic }}</dd>
+              <dt class="text-sm font-medium leading-6 text-gray-400">Type</dt>
+              <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
+                {{ component.component_type }}
+              </dd>
             </div>
-            <!--
             <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-              <dt class="text-sm font-medium leading-6 text-gray-400">Has Modules</dt>
+              <dt class="text-sm font-medium leading-6 text-gray-400">Is publicly accessible</dt>
               <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
-                {{ endpoint.hostConfigs && endpoint.hostConfigs.length > 0 }}
+                {{ component.public}}
               </dd>
-            </div>-->
-            <div v-if="endpoint.hostConfigs && endpoint.isPublic" class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-              <dt class="text-sm font-medium leading-6 text-gray-400">Modules</dt>
+            </div>
+            <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+              <dt class="text-sm font-medium leading-6 text-gray-400">Endpoints</dt>
               <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">
-                <pre>{{ JSON.stringify(endpoint.hostConfigs, null, 2) }}</pre>
+                <pre class="flex gap-x-2" v-for="endpoint in component.endpoints"><span class="font-bold">{{ Object.keys(endpoint)[0] }}:</span>{{ Object.entries(endpoint)[0][1] }}</pre>
               </dd>
             </div>
           </dl>

From 7f79caafba2156788c3270b3e8cbead1d4643702 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 6 Jan 2025 14:24:44 +0100
Subject: [PATCH 074/125] chore: Remove deprecated utils

---
 composables/utils.ts | 54 --------------------------------------------
 1 file changed, 54 deletions(-)

diff --git a/composables/utils.ts b/composables/utils.ts
index 4b889295..c1230712 100644
--- a/composables/utils.ts
+++ b/composables/utils.ts
@@ -1,10 +1,3 @@
-import type {
-    v2CustomAttribute,
-    v2Permission,
-    v2Token,
-    v2User
-} from "~/composables/aruna_api_json"
-
 import { Buffer } from 'node:buffer'
 
 export function parseJwt(token: any) {
@@ -72,53 +65,6 @@ export function displayDate(createdAt: string | undefined, modifiedAt: string |
   }
 }
 
-/* ---------- USER ---------- */
-export function isUserAdmin(user: v2User | undefined): boolean {
-    if (user?.attributes?.globalAdmin) {
-        return user.attributes.globalAdmin
-    }
-    return false
-}
-
-export function isUserServiceAccount(user: v2User | undefined): boolean {
-    if (user?.attributes?.serviceAccount) {
-        return user.attributes.serviceAccount
-    }
-    return false
-}
-
-export function getUserCustomAttributes(user: v2User | undefined): v2CustomAttribute[] {
-    if (user?.attributes?.customAttributes) {
-        return user.attributes.customAttributes
-    }
-    return []
-}
-
-export function getUserEndpoints(user: v2User | undefined): string[] {
-    if (user?.attributes?.trustedEndpoints) {
-        return user.attributes.trustedEndpoints
-    }
-    return []
-}
-
-export function getUserToken(user: v2User | undefined): v2Token[] {
-    if (user?.attributes?.tokens) {
-        return user.attributes.tokens
-    }
-    return []
-}
-
-export function getUserPermissions(user: v2User | undefined): v2Permission[] {
-    if (user?.attributes?.personalPermissions) {
-        return user.attributes.personalPermissions
-    }
-    return []
-}
-
-export function getUserResources() {}
-/* -------------------- */
-
-
 /* ---------- RESOURCE ---------- */
 export function createS3Key(collection: string | undefined, dataset: string | undefined, object: string): string {
     let key = collection ? `${collection}/` : ''

From c9cae822d0cbcad9d5e56861db1c4dba4784899e Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 6 Jan 2025 16:23:39 +0100
Subject: [PATCH 075/125] feat: Improve RealmSwitcher

---
 .../custom-ui/dashboard/RealmSwitcher.vue     | 104 ++++++------------
 1 file changed, 36 insertions(+), 68 deletions(-)

diff --git a/components/custom-ui/dashboard/RealmSwitcher.vue b/components/custom-ui/dashboard/RealmSwitcher.vue
index 64dddeb3..b7c660dd 100644
--- a/components/custom-ui/dashboard/RealmSwitcher.vue
+++ b/components/custom-ui/dashboard/RealmSwitcher.vue
@@ -49,6 +49,15 @@ interface RealmSwitcherProps {
 
 const props = defineProps<RealmSwitcherProps>()
 const realms = toRef(() => props.realms)
+const selected = defineModel<Realm>('realmSelection', {
+  default: {
+    id: '',
+    name: 'Not a member of any realm',
+    tag: 'placeholder',
+    description: '',
+    deleted: false
+  }
+})
 watch(realms, () => {
   console.log('[RealmSwitcher] Updated realms:', realms.value)
   if (realms.value && realms.value.length > 0 && selectedRealm.value.tag === 'placeholder')
@@ -61,6 +70,17 @@ watch(realms, () => {
 const emit = defineEmits<{
   'add-realm': [realm: Realm]
 }>()
+
+function addRealm(realm: Realm) {
+  //console.info('[RealmSwitcher]', `Emitted realm add: ${realm.name}`)
+  emit('add-realm', realm)
+}
+
+function emitRealmSwitch() {
+  //console.info('[RealmSwitcher]', `Emitted realm switch to: ${selectedRealm.value.name}`)
+  EventBus.emit('switchRealm', selectedRealm.value.id)
+}
+
 /* ----- END EVENT EMITS ----- */
 
 const open = ref(false)
@@ -73,16 +93,6 @@ const selectedRealm = ref<Realm>(realms.value && realms.value.length > 0 ? realm
   deleted: false
 })
 
-function emitRealmSwitch() {
-  console.log('[RealmSwitcher]', `Emitted realm switch to: ${selectedRealm.value.name}`)
-  EventBus.emit('switchRealm', selectedRealm.value.name)
-}
-
-function addRealm(realm: Realm) {
-  console.log('[RealmSwitcher]', `Emitted realm add: ${realm.name}`)
-  emit('add-realm', realm)
-}
-
 /* ----- FORM SCHEMA ----- */
 const formSchema = toTypedSchema(
     z.object({
@@ -107,8 +117,11 @@ const onSubmit = form.handleSubmit(async values => {
       addRealm(response.realm)
       toast({
         title: 'Info',
-        description: `Realm creation succeeded. Switched realm to: ${response.realm.name}`
+        description: realms.value && realms.value.length > 0 ?
+            'Realm creation succeeded.' :
+            `Realm creation succeeded. Switched realm to: ${response.realm.name}`
       })
+      showNewRealmDialog.value = false
     } else {
       toast({
         title: 'Error',
@@ -134,24 +147,14 @@ const onSubmit = form.handleSubmit(async values => {
   <Dialog v-model:open="showNewRealmDialog">
     <Popover v-model:open="open">
       <PopoverTrigger as-child>
-        <Button
-            variant="outline"
-            role="combobox"
-            aria-expanded="open"
-            aria-label="Select a team"
-            :class="cn('w-[300px] justify-between hover:bg-[#1F375E]', $attrs.class ?? '')">
-          <!--
-          <Avatar class="mr-2 h-5 w-5">
-            <AvatarImage
-                :src="selectedRealm.logo || '/imgs/aruna_icon.webp'"
-                :alt="selectedRealm.name"/>
-            <AvatarFallback>SC</AvatarFallback>
-          </Avatar>
-          -->
+        <Button variant="outline"
+                role="combobox"
+                aria-expanded="open"
+                aria-label="Select a team"
+                :class="cn('w-[300px] justify-between hover:bg-[#1F375E]', $attrs.class ?? '')">
           <Avatar class="mr-2 h-5 w-5">
-            <AvatarImage
-                src="/imgs/aruna_icon.webp"
-                :alt="selectedRealm.name"/>
+            <AvatarImage src="/imgs/aruna_icon.webp"
+                         :alt="selectedRealm.name"/>
             <AvatarFallback>SC</AvatarFallback>
           </Avatar>
           {{ selectedRealm.name }}
@@ -159,7 +162,7 @@ const onSubmit = form.handleSubmit(async values => {
         </Button>
       </PopoverTrigger>
       <PopoverContent class="w-[300px] p-1">
-        <Command :filter-function="(list, term) => list.filter(i => i.name?.toLowerCase()?.includes(term)) ">
+        <Command :filter-function="(list: Realm[], term: string) => list.filter(i => i.name?.toLowerCase()?.includes(term)) ">
           <CommandList>
             <CommandInput placeholder="Search realm..." class="my-1 focus:ring-aruna-800 focus:border-0"/>
             <CommandEmpty>No realm found.</CommandEmpty>
@@ -170,18 +173,17 @@ const onSubmit = form.handleSubmit(async values => {
                            class="text-sm"
                            @select="() => {
                              selectedRealm = realm
+                             selected = realm
                              open = false
                              emitRealmSwitch()
                            }">
                 <Avatar class="mr-2 h-5 w-5">
-                  <AvatarImage
-                      src="/imgs/aruna_icon.webp"
-                      :alt="selectedRealm.name"/>
+                  <AvatarImage src="/imgs/aruna_icon.webp"
+                               :alt="selectedRealm.name"/>
                   <AvatarFallback>SC</AvatarFallback>
                 </Avatar>
                 {{ realm.name }}
-                <IconCheck
-                    :class="cn('ml-auto h-4 w-4',
+                <IconCheck :class="cn('ml-auto h-4 w-4',
                              selectedRealm.tag === realm.tag
                                ? 'opacity-100'
                                : 'opacity-0',
@@ -255,40 +257,6 @@ const onSubmit = form.handleSubmit(async values => {
           </FormItem>
         </FormField>
       </form>
-
-      <!--
-      <div>
-        <div class="space-y-4 pb-4">
-          <div class="space-y-2">
-            <Label for="name">Realm name</Label>
-            <Input id="name" placeholder="A name for your realm"/>
-          </div>
-          <div class="space-y-2">
-            <Label for="plan">Subscription plan</Label>
-            <Select>
-              <SelectTrigger>
-                <SelectValue placeholder="Select a plan"/>
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="free">
-                  <span class="font-medium">Free</span> -
-                  <span class="text-muted-foreground">
-                    Trial for two weeks
-                  </span>
-                </SelectItem>
-                <SelectItem value="pro">
-                  <span class="font-medium">Pro</span> -
-                  <span class="text-muted-foreground">
-                    $90/month per user
-                  </span>
-                </SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
-        </div>
-      </div>
-      -->
-
       <DialogFooter>
         <Button variant="outline"
                 class="text-aruna-text border border-aruna-text"

From 9b767a459d0a3dee5d4dddcb3613462d4e68a9b5 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 7 Jan 2025 13:56:43 +0100
Subject: [PATCH 076/125] chore: Change import to api_wrapper

---
 server/api/v3/resource.post.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/api/v3/resource.post.ts b/server/api/v3/resource.post.ts
index 87be67fd..999b1b1c 100644
--- a/server/api/v3/resource.post.ts
+++ b/server/api/v3/resource.post.ts
@@ -1,4 +1,4 @@
-import {CreateResourceResponse} from "~/composables/aruna_v3/CreateResourceResponse";
+import {CreateResourceResponse} from "~/composables/api_wrapper";
 
 export default defineEventHandler(async event => {
   const body = await readBody(event)

From 6c1ef041e6635320516f2363dda895a6c73430e4 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 7 Jan 2025 13:57:46 +0100
Subject: [PATCH 077/125] feat: Implement v3 realm components endpoints

---
 server/api/v3/components.get.ts   | 16 ++++++++++++++++
 server/api/v3/components.patch.ts | 17 +++++++++++++++++
 server/api/v3/components.post.ts  | 17 +++++++++++++++++
 3 files changed, 50 insertions(+)
 create mode 100644 server/api/v3/components.get.ts
 create mode 100644 server/api/v3/components.patch.ts
 create mode 100644 server/api/v3/components.post.ts

diff --git a/server/api/v3/components.get.ts b/server/api/v3/components.get.ts
new file mode 100644
index 00000000..a531d6e3
--- /dev/null
+++ b/server/api/v3/components.get.ts
@@ -0,0 +1,16 @@
+import {GetRealmComponentsResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const id = getQuery(event)['id']
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/realms/${id}/components`
+
+  return await $fetch<GetRealmComponentsResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+  }).then(response => {
+    console.log('[GetRealmComponents Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/components.patch.ts b/server/api/v3/components.patch.ts
new file mode 100644
index 00000000..35a71b8e
--- /dev/null
+++ b/server/api/v3/components.patch.ts
@@ -0,0 +1,17 @@
+import {AddComponentToRealmResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const patchUrl = `${baseUrl}/api/v3/realms/${body.realm_id}/components/${body.component_id}`
+
+  return await $fetch<AddComponentToRealmResponse>(patchUrl, {
+    method: 'PATCH',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+  }).then(response => {
+    console.log('[AddComponentToRealm Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/components.post.ts b/server/api/v3/components.post.ts
new file mode 100644
index 00000000..66af58a6
--- /dev/null
+++ b/server/api/v3/components.post.ts
@@ -0,0 +1,17 @@
+import {CreateComponentResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<CreateComponentResponse>(`${baseUrl}/api/v3/global/components`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  }).then(response => {
+    console.log('[CreateComponent Server]', response)
+    return response
+  })
+})
\ No newline at end of file

From fd6f51d893afbad043efc1ade3b51ceb62c0d9c8 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 7 Jan 2025 13:58:08 +0100
Subject: [PATCH 078/125] feat: Implement v3 s3 credentials endpoints

---
 server/api/v3/credentials.get.ts  | 15 +++++++++++++++
 server/api/v3/credentials.post.ts | 17 +++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 server/api/v3/credentials.get.ts
 create mode 100644 server/api/v3/credentials.post.ts

diff --git a/server/api/v3/credentials.get.ts b/server/api/v3/credentials.get.ts
new file mode 100644
index 00000000..623f3087
--- /dev/null
+++ b/server/api/v3/credentials.get.ts
@@ -0,0 +1,15 @@
+import {GetS3CredentialsFromUserResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/users/s3credentials`
+
+  return await $fetch<GetS3CredentialsFromUserResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+  }).then(response => {
+    console.log('[GetS3CredentialsFromUser Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/credentials.post.ts b/server/api/v3/credentials.post.ts
new file mode 100644
index 00000000..e2ef1708
--- /dev/null
+++ b/server/api/v3/credentials.post.ts
@@ -0,0 +1,17 @@
+import {CreateS3CredentialsResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<CreateS3CredentialsResponse>(`${baseUrl}/api/v3/users/s3credentials`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  }).then(response => {
+    console.log('[CreateS3Credentials Server]', response)
+    return response
+  })
+})
\ No newline at end of file

From b2af00d5c2a98bbbc0457d77f27f294cbbaf65a2 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 7 Jan 2025 13:59:53 +0100
Subject: [PATCH 079/125] chore: Extend v3 imports

---
 composables/api_wrapper.ts | 66 ++++++++++++++++++++++++++------------
 1 file changed, 45 insertions(+), 21 deletions(-)

diff --git a/composables/api_wrapper.ts b/composables/api_wrapper.ts
index 06e54a87..22e6bd1c 100644
--- a/composables/api_wrapper.ts
+++ b/composables/api_wrapper.ts
@@ -38,39 +38,56 @@ import type {ArunaError} from "~/composables/ArunaError";
 
 /* ----- V3 ----- */
 import type {paths, components} from "~/types/aruna-v3"
-import type {GetGroupsFromUserResponseGroups} from "~/types/aruna-v3-enums";
+import {type GetGroupsFromUserResponseGroups} from "~/types/aruna-v3-enums";
 
-// ----- Requests
+// ----- Requests -----
+export type RegisterUserRequest = paths["/api/v3/users"]["post"]["requestBody"]["content"]["application/json"];
+export type CreateComponentRequest = paths["/api/v3/global/components"]["post"]["requestBody"]["content"]["application/json"];
 export type CreateGroupRequest = paths["/api/v3/groups"]["post"]["requestBody"]["content"]["application/json"];
+export type CreateRealmRequest = paths["/api/v3/realms"]["post"]["requestBody"]["content"]["application/json"];
 export type CreateTokenRequest = paths["/api/v3/users/tokens"]["post"]["requestBody"]["content"]["application/json"];
+export type CreateResourceRequest = paths["/api/v3/resources"]["post"]["requestBody"]["content"]["application/json"];
+export type CreateS3CredentialsRequest = paths["/api/v3/users/s3credentials"]["post"]["requestBody"]["content"]["application/json"];
 
-// ----- Responses
-export type GetEventsResponse = paths["/api/v3/info/events"]["get"]["responses"][200]["content"]["application/json"];
-export type GetStatsResponse = paths["/api/v3/info/stats"]["get"]["responses"][200]["content"]["application/json"];
-export type SearchResponse = paths["/api/v3/info/search"]["get"]["responses"][200]["content"]["application/json"];
 
-export type GetUserResponse = paths["/api/v3/users"]["get"]["responses"][200]["content"]["application/json"];
-export type RegisterUserResponse = paths["/api/v3/users"]["post"]["responses"][200]["content"]["application/json"];
+// ----- Responses -----
+// Global
+export type CreateComponentResponse = paths["/api/v3/global/components"]["post"]["responses"][200]["content"]["application/json"];
 
-export type GetRealmsFromUserResponse = paths["/api/v3/users/realms"]["get"]["responses"][200]["content"]["application/json"];
-export type GetGroupsFromUserResponse = paths["/api/v3/users/groups"]["get"]["responses"][200]["content"]["application/json"];
-export type GetTokensFromUserResponse = paths["/api/v3/users/tokens"]["get"]["responses"][200]["content"]["application/json"];
-export type GetS3CredentialsFromUserResponse = paths["/api/v3/users/s3credentials"]["get"]["responses"][200]["content"]["application/json"];
+// Groups
+export type CreateGroupResponse = paths["/api/v3/groups"]["post"]["responses"][200]["content"]["application/json"];
 
-export type GetRelationsResponse = paths["/api/v3/resources/{id}/relations"]["get"]["responses"][200]["content"]["application/json"];
-export type GetResourcesResponse = paths["/api/v3/resources"]["get"]["responses"][200]["content"]["application/json"];
-export type DeleteResourcesResponse = paths["/api/v3/resources/{id}"]["delete"]["responses"][200]["content"]["application/json"];
+// Info
+export type GetEventsResponse = paths["/api/v3/info/events"]["get"]["responses"][200]["content"]["application/json"];
+export type GetStatsResponse = paths["/api/v3/info/stats"]["get"]["responses"][200]["content"]["application/json"];
+export type SearchResponse = paths["/api/v3/info/search"]["get"]["responses"][200]["content"]["application/json"];
 
+// Realms
+export type CreateRealmResponse = paths["/api/v3/realms"]["post"]["responses"][200]["content"]["application/json"];
 export type GetRealmComponentsResponse = paths["/api/v3/realms/{id}/components"]["get"]["responses"][200]["content"]["application/json"];
+export type AddComponentToRealmResponse = paths["/api/v3/realms/{id}/components/{component_id}"]["patch"]["responses"][200]["content"]["application/json"];
 
+// Resources
 export type CreateProjectResponse = paths["/api/v3/resources/projects"]["post"]["responses"][200]["content"]["application/json"];
 export type CreateResourceResponse = paths["/api/v3/resources"]["post"]["responses"][200]["content"]["application/json"];
-export type CreateTokenResponse = paths["/api/v3/users/tokens"]["post"]["responses"][200]["content"]["application/json"];
-export type CreateRealmResponse = paths["/api/v3/realms"]["post"]["responses"][200]["content"]["application/json"];
-export type CreateGroupResponse = paths["/api/v3/groups"]["post"]["responses"][200]["content"]["application/json"];
+export type GetResourcesResponse = paths["/api/v3/resources"]["get"]["responses"][200]["content"]["application/json"];
+export type GetRelationsResponse = paths["/api/v3/resources/{id}/relations"]["get"]["responses"][200]["content"]["application/json"];
+export type DeleteResourcesResponse = paths["/api/v3/resources/{id}"]["delete"]["responses"][200]["content"]["application/json"];
 
+// Users
+export type RegisterUserResponse = paths["/api/v3/users"]["post"]["responses"][200]["content"]["application/json"];
+export type GetUserResponse = paths["/api/v3/users"]["get"]["responses"][200]["content"]["application/json"];
+export type CreateTokenResponse = paths["/api/v3/users/tokens"]["post"]["responses"][200]["content"]["application/json"];
+export type GetRealmsFromUserResponse = paths["/api/v3/users/realms"]["get"]["responses"][200]["content"]["application/json"];
+export type GetGroupsFromUserResponse = paths["/api/v3/users/groups"]["get"]["responses"][200]["content"]["application/json"];
+export type GetTokensFromUserResponse = paths["/api/v3/users/tokens"]["get"]["responses"][200]["content"]["application/json"];
+export type CreateS3CredentialsResponse = paths["/api/v3/users/s3credentials"]["post"]["responses"][200]["content"]["application/json"];
+export type GetS3CredentialsFromUserResponse = paths["/api/v3/users/s3credentials"]["get"]["responses"][200]["content"]["application/json"];
 
-// ----- Structs
+// ----- Models -----
+// v3
+export type v3Component = components["schemas"]["Component"]
+export type Endpoint = components["schemas"]["Endpoint"]
 export type Author = components["schemas"]["Author"]
 export type Group = components["schemas"]["Group"]
 export type KeyValue = components["schemas"]["KeyValue"]
@@ -78,8 +95,10 @@ export type Realm = components["schemas"]["Realm"]
 export type Resource = components["schemas"]["Resource"]
 export type Token = components["schemas"]["Token"]
 export type User = components["schemas"]["User"]
+export type License = components["schemas"]["License"]
+export type S3Credential = components["schemas"]["S3Credential"]
 
-// ----- Custom
+// Custom
 export type ResourceElement = Resource & {
   children: ResourceElement[]
 }
@@ -89,7 +108,12 @@ export type GroupInfo = {
   permission: GetGroupsFromUserResponseGroups
 }
 
-// ----- Events
+export type SimpleCredentials = {
+  access_key: string
+  secret_key: string
+}
+
+// ----- Events -----
 export enum EventTypes {
   RegisterUser = 'RegisterUserRequestTx',
   CreateToken = 'CreateTokenRequestTx',

From 31da3ba3395d01b82774894814c3d01c2abb2adf Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 7 Jan 2025 14:04:05 +0100
Subject: [PATCH 080/125] feat: Make realm switch bidirectional

---
 components/custom-ui/dashboard/Dashboard.vue | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index 7ffa4163..f9cda5fa 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -140,6 +140,8 @@ EventBus.on('setTab', (tabId: string) => setTab(tabId))
 /* ----- END EXTERNAL TAB SWITCH ----- */
 
 /* ----- REALM SWITCH ----- */
+const selectedRealm = ref<Realm | undefined>(realms.value ? realms.value[0] : undefined)
+watch(selectedRealm, () => console.info('[Dashboard Component] Bidirectional Realm Switch:', selectedRealm.value))
 function addRealm(realm: Realm) {
   if (realms.value)
     realms.value.push(realm)
@@ -314,6 +316,7 @@ EventBus.on('spinStop', () => spinBaby.value = false)
           <ClientOnly fallbackTag="span">
             <RealmSwitcher class="flex"
                            :realms="realms"
+                           v-model:realm-selection="selectedRealm"
                            @add-realm="addRealm" />
             <template #fallback>
               <Skeleton class="h-auto w-[300px]"/>

From 704358a0bce06b57c1a96aabeaff24babbb6a0d0 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 7 Jan 2025 14:04:50 +0100
Subject: [PATCH 081/125] feat: Adapt realm component display to v3

---
 components/custom-ui/dashboard/Dashboard.vue |  17 +-
 components/custom-ui/dashboard/Realms.vue    | 492 +++++++++++++++----
 2 files changed, 397 insertions(+), 112 deletions(-)

diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index f9cda5fa..44fae44e 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -2,7 +2,6 @@
 import {
   IconAffiliate,
   IconBell,
-  IconDeviceDesktopAnalytics,
   IconHome,
   IconChartLine,
   IconFingerprint,
@@ -48,7 +47,12 @@ import {useProjects} from "~/composables/Projects";
 import {useTokens} from "~/composables/Tokens";
 import {useEvents} from "~/composables/Events";
 
+// ----- Route Magic ----------
+const route = useRoute()
+const tab = route.query.tab
+// ----- End Route Magic ----------
 
+// ----- PROPERTIES ----------
 const props = defineProps<{
   user: User | undefined
 }>()
@@ -57,11 +61,7 @@ const user_id = toRef(() => user.value?.id)
 
 watch(user, () => console.log('[Dashboard Component]', `User got updated: ${user.value ? user.value.id : 'Undefined'}`))
 watch(user_id, () => console.log('[Dashboard Component]', `User Id updated: ${user_id.value}`))
-
-const route = useRoute()
-const tab = route.query.tab
-
-const endpoints = ref([]) //await fetchEndpoints() TODO
+// ----- END PROPERTIES ----------
 
 const {events, refreshEvents} = await useEvents([user], user_id)
 const {realms, refreshRealms} = await useRealms()
@@ -107,6 +107,11 @@ const componentProps = computed(() => {
       return {
         resources: projects.value
       }
+    case 'Realms':
+      return {
+        realms: realms.value,
+        selectedRealm: selectedRealm.value
+      }
     case 'ResourceCreation':
       return {
         realms: realms.value,
diff --git a/components/custom-ui/dashboard/Realms.vue b/components/custom-ui/dashboard/Realms.vue
index ac28b905..367c00de 100644
--- a/components/custom-ui/dashboard/Realms.vue
+++ b/components/custom-ui/dashboard/Realms.vue
@@ -1,62 +1,258 @@
 <script setup lang="ts">
-import {IconCaretUpDown, IconCubePlus} from "@tabler/icons-vue";
-import {VisSingleContainer, VisGraph, VisTooltip} from '@unovis/vue'
-import {Graph, GraphLayoutType, Position, Tooltip} from '@unovis/ts'
-import {ref, computed} from "vue"
-import DataproxyDialog from "~/components/custom-ui/dialog/DataproxyDialog.vue";
+import {IconBucket, IconCaretUpDown, IconCubePlus, IconProgressCheck, IconServer} from "@tabler/icons-vue";
+import {VisGraph, VisSingleContainer, VisTooltip} from '@unovis/vue'
+import {Graph, GraphLayoutType, GraphNodeShape, type GraphPanelConfig, Position, TrimMode} from '@unovis/ts'
+import {computed, ref} from "vue"
+import ComponentDialog from "~/components/custom-ui/dialog/ComponentDialog.vue";
 import RealmComponentDialog from "~/components/custom-ui/dialog/RealmComponentDialog.vue";
 
 /* ----- Deprecated imports ----- */
 import {useToast} from '~/components/ui/toast/use-toast'
+import type {
+  CreateS3CredentialsRequest,
+  CreateS3CredentialsResponse,
+  GetS3CredentialsFromUserResponse
+} from "~/composables/api_wrapper";
+import {ComponentType, Scope} from "~/types/aruna-v3-enums";
 
 const {toast} = useToast()
-import {nodes, links, sites, StatusMap, type NodeDatum, type LinkDatum} from './data-circular'
-import type {v2Endpoint} from "~/composables/aruna_api_json";
 /* ----- End Deprecated imports ----- */
 
 
 /* ----- PROPERTIES ----- */
 interface RealmsProps {
   realms: Realm[]
+  selectedRealm: Realm
 }
 
 const props = defineProps<RealmsProps>()
 const realms = toRef(() => props.realms)
+const selectedRealm = toRef(() => props.selectedRealm)
 const currentRealm = ref<string | undefined>(undefined)
 /* ----- END PROPERTIES ----- */
 
-const realmComponents = ref<v3Component[]>([])
-const realmContext = ref<string | undefined>(undefined)
-watch(realmContext, async () => {
+onActivated(async () => {
+  console.info('[Realms Component] Selected realm: ', selectedRealm.value)
   await $fetch<GetRealmComponentsResponse>('/api/v3/components', {
     query: {
-      id: realmContext.value
+      id: selectedRealm.value.id
     }
   }).then(response => {
-    console.info('[Realms Component]', response)
+    console.info('[Realms Component] Fetch components response:', response)
     realmComponents.value = response.components
+    realmComponents.value.map(c => expandedRealms.value.add(JSON.parse(c.description).location))
   })
 })
-EventBus.on('switchRealm', (realmId: string) => realmContext.value = realmId)
 
+const displayAllRealms = ref<boolean>(false)
+watch(displayAllRealms, (v) => console.info('[Realms Component] Display all realms:', v))
+
+const displayAsCards = ref<boolean>(false)
+watch(displayAsCards, (v) => console.info('[Realms Component] Display as cards:', v))
+
+
+const realmContext = ref<string | undefined>(undefined)
+const realmComponents = ref<v3Component[]>([]) //TODO: Integrate into realms
+const componentCredentials = ref<Map<string, SimpleCredentials>>(new Map())
+
+enum Status {
+  Aruna = 'aruna',
+  Healthy = 'healthy',
+  Warning = 'warning',
+  Inactive = 'inactive',
+  Alert = 'alert'
+}
+
+const StatusMap = {
+  //[Status.Aruna]: {color: '#005299', text: '&#xf00c;'},
+  [Status.Aruna]: {color: '#00a0cc', text: '&#xf00c;'},
+  [Status.Healthy]: {color: '#47e845', text: '&#xf00c;'},
+  [Status.Warning]: {color: '#ffc226', text: '&#xf071;'},
+  [Status.Inactive]: {color: '#dddddd', text: '&#xf00d;'},
+  [Status.Alert]: {color: '#f88080', text: '&#x21;'},
+}
 
-function displayDescription(description: string, maxLength: number = 50): string {
-  return description.length > maxLength ? description.slice(0, maxLength) + " ..." : description
+export type NodeDatum = {
+  id: string;
+  label: string;
+  site: string;
+  group: string;
+  subgroup: string;
+  shape: GraphNodeShape;
+  fill?: string,
+  icon?: string;
+  score?: number;
+  status?: string;
+  groupLabel?: string;
+  clickable?: boolean, //TODO: Rename to expandable
+  metaInfo?: v3Component;
+  children?: NodeDatum[];
 }
 
-function splitDescription(description: string) {
-  const splitIndex = description.indexOf('.')
-  console.info('[Realms Component]', [description.slice(0, splitIndex), description.slice(splitIndex + 1)])
-  return [description.slice(0, splitIndex), description.slice(splitIndex + 1)]
+export type LinkDatum = {
+  source: string;
+  target: string;
+  sourceGroup: string;
+  targetGroup: string;
+  status: Status;
+  showTraffic: boolean;
+}
+
+type LocationHack = {
+  location: string
+}
+
+type Site = {
+  root: NodeDatum
+  server: NodeDatum[]
+  data: NodeDatum[]
+  compute: NodeDatum[]
+}
+
+const expandedRealms = ref<Set<string>>(new Set())
+//const expandedRealms = ref<string[]>([]) //TODO: Rename to expandedSites
+watch(expandedRealms, () => console.info('[Realms Component] Expanded realms: ', expandedRealms), {deep: true})
+
+const graphData = computed(() => {
+  console.info('[Realms Component] Re-compute data for graph visualization with realm v3:', selectedRealm.value.name, realmComponents.value.length)
+  const sites: Map<string, Site> = new Map()
+  const serverIds: Set<string> = new Set()
+  for (const component of realmComponents.value) {
+    // Parse and store location of component
+    const siteLocation: string = JSON.parse(component.description).location //TODO: Error handling
+    let site: Site | undefined = undefined
+    if (sites.has(siteLocation)) {
+      site = sites.get(siteLocation)
+    } else {
+      site = {
+        root: {
+          id: `${siteLocation}-root`,
+          site: siteLocation ? siteLocation : selectedRealm.value.tag,
+          shape: GraphNodeShape.Circle,
+          icon: '&#xf043;',
+          label: siteLocation,
+          group: siteLocation,
+          subgroup: siteLocation,
+          clickable: true,
+        } as NodeDatum,
+        server: [],
+        data: [],
+        compute: []
+      }
+      sites.set(siteLocation, site)
+    }
+
+    // Create child node from component and add to site
+    let node = {
+      id: component.id,
+      site: siteLocation,
+      group: siteLocation,
+      subgroup: `${siteLocation}-${component.component_type}`, //rc.component_type === ComponentType.Server ? `${group}-${rc.component_type}` : `${group}-sub`,
+      label: component.name,
+      shape: GraphNodeShape.Circle, //shape,
+      icon: '&#xf043;', //icon,
+      status: Status.Aruna,
+      score: 100,
+      //fill: '#007BC2', //TODO: Depends on type (?)
+      clickable: false, //c.component_type === ComponentType.Server,
+      metaInfo: component,
+    } as NodeDatum
+    switch (component.component_type) {
+      case ComponentType.Server:
+        node.shape = GraphNodeShape.Square
+        node.icon = '&#xf542;'
+        site?.server.push(node)
+        serverIds.add(component.id)
+        break
+      case ComponentType.Data:
+        node.shape = GraphNodeShape.Hexagon
+        node.icon = '&#xe4cf;'
+        site?.data.push(node)
+        break
+      case ComponentType.Compute:
+        node.shape = GraphNodeShape.Triangle
+        node.icon = '&#xe4e2;'
+        site?.compute.push(node)
+        break
+    }
+  }
+
+  // Collect nodes/links/panels depending on expanded sites
+  let nodes: NodeDatum[] = []
+  let links: LinkDatum[] = [] //TODO: Connect set of unique server ids
+  let panels: GraphPanelConfig[] = []
+
+  for (const [siteLocation, site] of sites) {
+    if (expandedRealms.value.has(siteLocation)) {
+      // Collect nodes in correct order
+      site.server.concat(site.data).concat(site.compute).forEach(n => nodes.push(n))
+      // Create links to server in locations
+      site.data.concat(site.compute).forEach(n => {
+        for (const s of site.server) {
+          links.push({
+            source: s.id,
+            target: n.id,
+            status: Status.Inactive,
+            showTraffic: false
+          } as LinkDatum)
+        }
+      })
+
+      // Create panel for site
+      panels.push({
+        nodes: site.server.concat(site.data).concat(site.compute).map(n => n.id) || [],
+        label: siteLocation,
+        borderWidth: 3,
+        padding: 25,
+        dashedOutline: true, //curr === nodes[0],
+        borderColor: '#00a0cc',
+        //fillColor: '#b4b5bb',
+        sideIconFontSize: '20px',
+        sideIconShape: GraphNodeShape.Square,
+        sideIconSymbol: '&#xf146;', //'&#xf043;',
+        sideIconShapeSize: 30,
+        sideIconSymbolColor: '#00a0cc',
+        sideIconShapeStroke: '#00a0cc'
+      })
+    } else {
+      nodes.push(site.root)
+    }
+  }
+
+  // Return realm visualization data
+  return {
+    data: {
+      nodes: nodes,
+      links: links
+    },
+    panels: panels,
+    panelOrder: [] //TODO: From largest to smallest?
+  }
+})
+
+watch(selectedRealm, async () => {
+  console.info('[Realms Component] Selected realm changed')
+  await $fetch<GetRealmComponentsResponse>('/api/v3/components', {
+    query: {
+      id: selectedRealm.value.id
+    }
+  }).then(response => {
+    console.info('[Realms Component] Fetch components response:', response)
+    realmComponents.value = response.components
+  })
+})
+
+function splitDescriptionAfter(description: string, words: number = 20) {
+  const parts = description.split(' ')
+  const teaser = parts.slice(0, words).join(' ')
+  const rest = parts.slice(words, parts.length - 1).join(' ')
+  return [teaser, rest]
 }
 
 const disableTooltips = ref<boolean>(false)
 const container = document.body
 watch(disableTooltips, () => console.log('[Disabled Tooltips]', disableTooltips.value))
 
-
-const componentDialogOpen = ref<boolean>(false)
-
 function openComponentCreation(realmId: string) {
   currentRealm.value = realmId
   componentDialogOpen.value = true
@@ -69,19 +265,35 @@ function addComponent(component: v3Component) {
   })
 }
 
-// Reactive statements
-const expanded = ref<string[]>(['instance-gi', 'instance-bi', 'instance-be', 'instance-tu'])
-const panels = computed(() => expanded.value.map(site => sites[site].panel))
-const data = computed(() => ({
-  nodes: nodes.flatMap<NodeDatum>(n => expanded.value.includes(n.site) ? n.children : n),
-  links: links.map(l => ({
-    ...l,
-    source: expanded.value.includes(l.sourceGroup) ? l.source : sites[l.sourceGroup].groupNodeId,
-    target: expanded.value.includes(l.targetGroup) ? l.target : sites[l.targetGroup].groupNodeId,
-  })),
-}))
+async function createS3Credentials(component_id: string) {
+  const request = {
+    component_id: component_id,
+    name: 'Some Credentials',
+    expires_at: new Date(1735040153000).toISOString(),
+    group_id: '01JFAP0EA748E60QQ55F452A2V', //TODO: ... ???
+    realm_id: '01JFAP0EA7KDWQKPYWA7DV3VQ7', //TODO: Currently selected?
+    scope: Scope.Personal
+  } as CreateS3CredentialsRequest
+
+  await $fetch<CreateS3CredentialsResponse>('/api/v3/credentials', {
+    method: 'POST',
+    body: request
+  }).then(response => {
+    console.info('[CreateS3Credentials Client] Response', response)
+  })
+}
+
+async function getS3Credentials(component_id: string) {
+  //TODO: Fetch all on activate and distribute?
+  await $fetch<GetS3CredentialsFromUserResponse>('/api/v3/credentials')
+      .then(response => {
+        console.info('[GetS3CredentialsFromUser Client] Response', response)
+      })
+}
 
+/* -------------------------------------------------------------------------------------------- */
 
+// Hover tooltips for nodes
 const triggers = computed(() => {
   return {
     [Graph.selectors.node]: (n: NodeDatum) => {
@@ -92,14 +304,6 @@ const triggers = computed(() => {
                     <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                       <dt class="text-sm font-medium leading-6 text-gray-400">Name</dt>
                       <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">${n.metaInfo.name}
-                        <!--
-                        <button onClick="showMe('${n.metaInfo.name}')" class="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 w-9">
-                          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
-                            <path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path>
-                            <path d="M9 3m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z"></path>
-                          </svg>
-                        </button>
-                        -->
                       </dd>
                     </div>
                     <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
@@ -108,7 +312,7 @@ const triggers = computed(() => {
                     </div>
                     <div class="p-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                       <dt class="text-sm font-medium leading-6 text-gray-400">Variant</dt>
-                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">${n.metaInfo.epVariant}</dd>
+                      <dd class="mt-1 text-sm leading-6 text-gray-300 sm:col-span-2 sm:mt-0">${n.metaInfo.component_type}</dd>
                     </div>
                   </dl>
                 </div>`
@@ -117,42 +321,61 @@ const triggers = computed(() => {
     },
   }
 })
-const clickedComponent: Ref<v3Component | undefined> = ref(undefined)
 const detailDialogOpen = ref<boolean>(false)
 
+const clickedComponent: Ref<v3Component | undefined> = ref(undefined)
+const componentDialogOpen = ref<boolean>(false)
 // Graph config
 const graphConfig = computed(() => ({
   events: {
     [Graph.selectors.node]: {
       click: (node: NodeDatum) => {
+        console.info('[Realms Component] Clicked node:', node.label)
         if (node.clickable) {
-          expanded.value.includes(node.site) ?
-              expanded.value.splice(expanded.value.indexOf(node.site), 1) :
-              expanded.value.push(node.site)
+          expandedRealms.value.add(node.site)
+          console.info('Realms Component] Expanded: ', expandedRealms.value)
         } else if (node.metaInfo) {
-          clickedEndpoint.value = node.metaInfo
+          clickedComponent.value = node.metaInfo
           detailDialogOpen.value = true
         }
       }
     },
+    [Graph.selectors.panelSideIcon]: {
+      click: (panel: GraphPanelConfig) => {
+        console.info('[Realms Component] Try to minimize panel:', panel.label)
+        expandedRealms.value.delete(panel.label)
+        console.info('[Realms Component] Expanded: ', expandedRealms.value)
+      }
+    }
   },
+  nodeLabelTrim: false,
+  nodeLabelTrimLength: 100,
+  nodeLabelTrimMode: TrimMode.End,
   nodeGaugeValue: (n: NodeDatum) => n.score,
   nodeGaugeFill: (n: NodeDatum) => StatusMap[n.status]?.color,
-  nodeIconSize: 20,
+  nodeIconSize: 25,
   nodeShape: (n: NodeDatum) => n.shape,
   nodeFill: (n: NodeDatum) => n.fill,
+  /*
   nodeSideLabels: (n: NodeDatum) => [{
-    radius: 12,
-    fontSize: 8,
+    radius: 8,
+    fontSize: 4,
     ...(n.children ? {text: n.children.length} : StatusMap[n.status]),
   }],
-  nodeSize: (n: NodeDatum) => n.children ? 75 : 50,
-  nodeSubLabel: (n: NodeDatum) => n.score && `${n.score}/100`,
+  */
+  nodeSize: (n: NodeDatum) => 75, //n.children ? 75 : 50,
+  nodeSubLabel: (n: NodeDatum) => n.score && `Health: ${n.score}/100`,
+  nodeSubLabelTrim: false,
+  nodeSubLabelTrimLength: 100,
+  nodeSubLabelTrimMode: TrimMode.End,
   nodeStrokeWidth: 3,
   linkFlow: (l: LinkDatum) => l.showTraffic,
   linkStroke: (l: LinkDatum) => StatusMap[l.status]?.color || null,
   linkBandWidth: (l: LinkDatum) => l.showTraffic ? 12 : 6,
 }))
+
+
+const expandedDescription = ref<Set<string>>(new Set())
 </script>
 
 <template>
@@ -184,23 +407,26 @@ const graphConfig = computed(() => ({
         <TableBody>
           <TableRow v-for="realm in realms" :key="realm.name">
             <TableCell class="font-bold">{{ realm.name }}</TableCell>
-            <!--<TableCell>{{ displayDescription(realm.description, 128) }}</TableCell>-->
             <TableCell>
-
-              <Collapsible>
-                <div class="flex justify-between">
-                  {{ splitDescription(realm.description)[0] }}.
-                  <CollapsibleTrigger class="text-left">
-                    <Button variant="ghost" class="p-0 text-aruna-highlight size-4">
-                      <IconCaretUpDown/>
-                    </Button>
-                  </CollapsibleTrigger>
+              <div v-if="realm.description && realm.description.length > 256">
+                <div class="flex justify-between items-center">
+                  <div>
+                    {{ splitDescriptionAfter(realm.description, 20)[0] }}
+                    <Transition name="fade" mode="out-in">
+                      <span key="closed" v-if="!expandedDescription.has(realm.id)">...</span>
+                      <span key="opened" v-else>{{ splitDescriptionAfter(realm.description, 20)[1] }}</span>
+                    </Transition>
+                  </div>
+                  <Button variant="ghost"
+                          class="p-0 text-aruna-highlight size-4"
+                          @click="expandedDescription.has(realm.id) ? expandedDescription.delete(realm.id) : expandedDescription.add(realm.id)">
+                    <IconCaretUpDown/>
+                  </Button>
                 </div>
-                <CollapsibleContent class="mt-2">
-                  {{ splitDescription(realm.description)[1] }}
-                </CollapsibleContent>
-              </Collapsible>
-
+              </div>
+              <div v-else>
+                {{ realm.description }}
+              </div>
             </TableCell>
             <TableCell class="font-medium">{{ realm.id }}</TableCell>
             <TableCell>{{ realm.tag }}</TableCell>
@@ -217,50 +443,104 @@ const graphConfig = computed(() => ({
 
     <Separator class="my-6"/>
 
-    <h2 class="mb-6 text-2xl font-bold md:text-3xl md:leading-tight text-aruna-text-accent">
-      Components of currently selected realm:
-    </h2>
-    <Card v-for="component in realmComponents" class="w-fit">
-      <CardHeader>
-        <CardTitle>{{ component.name }}</CardTitle>
-        <CardDescription>{{ component.id }}</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <pre>{{ JSON.stringify(component, null, 2) }}</pre>
-      </CardContent>
-      <CardFooter>
-        This component is public: {{ component.public }}
-      </CardFooter>
-    </Card>
-
-    <!--
-    <div class="flex flex-col chart">
-      <VisSingleContainer :data="data" height="60vh">
-        <VisGraph v-bind="graphConfig"
-                  :nodeLabelTrim="false"
-                  :layoutType="GraphLayoutType.Parallel"
-                  :layoutGroupOrder="['instance-bi', 'instance-gi', 'instance-be', 'instance-tu']"
-                  :layoutNodeGroup="(n: NodeDatum) => n.group"
-                  :layoutParallelNodeSubGroup="(n: NodeDatum) => n.subgroup"
-                  :layoutParallelNodesPerColumn="1"
-                  :layoutParallelGroupSpacing="100"
-                  :layoutParallelSubGroupsPerRow="1"
-                  :panels="panels"/>
-
-        <VisTooltip v-if="!disableTooltips"
-                    :container="container"
-                    :triggers="triggers"
-                    :follow-cursor="false"
-                    :allow-hover="true"
-                    :vertical-placement="Position.Auto"/>
-
-      </VisSingleContainer>
+    <div>
+      <div class="flex gap-x-12 items-center mb-8">
+        <h2 class="text-2xl font-bold md:text-3xl md:leading-tight text-aruna-text-accent">
+          Realm Components of <span class="text-aruna-highlight">{{ selectedRealm.name }}</span>
+        </h2>
+
+        <div class="flex items-center gap-x-2">
+          <Switch v-model:checked="displayAsCards"/>
+          Display as Cards
+        </div>
+      </div>
+
+      <div v-if="displayAsCards" class="h-full flex gap-6 flex-wrap">
+        <Card v-for="component in realmComponents.sort((a: v3Component, b: v3Component) => a.id.localeCompare(b.id))"
+              class="w-fit h-fit border-aruna-text/50">
+          <CardHeader>
+            <CardTitle class="relative flex justify-between">
+              <span>{{ component.name }}</span>
+              <TooltipProvider :delay-duration="50">
+                <Tooltip>
+                  <TooltipTrigger>
+                    <IconServer v-if="component.component_type === ComponentType.Server"
+                                class="absolute top-0 right-0 size-10 text-aruna-highlight"/>
+                    <IconBucket v-if="component.component_type === ComponentType.Data"
+                                class="absolute top-0 right-0 size-10 text-aruna-highlight"/>
+                    <IconProgressCheck v-if="component.component_type === ComponentType.Compute"
+                                       class="absolute top-0 right-0 size-10 text-aruna-highlight"/>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p v-if="component.component_type === ComponentType.Server">Aruna Server</p>
+                    <p v-if="component.component_type === ComponentType.Data">Aruna DataProxy</p>
+                    <p v-if="component.component_type === ComponentType.Compute">Compute Cluster</p>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </CardTitle>
+            <CardDescription class="flex flex-col gap-y-2">
+              <span>{{ component.id }}</span>
+              <span>{{ component.description }}</span>
+            </CardDescription>
+          </CardHeader>
+          <Separator/>
+          <CardContent class="p-6 flex flex-col gap-y-2">
+            <div v-for="endpoint in component.endpoints" class="flex gap-x-2">
+              <span class="font-bold">{{ Object.keys(endpoint)[0] }}:</span>
+              <span>{{ endpoint[Object.keys(endpoint)[0]] }}</span>
+            </div>
+          </CardContent>
+          <Separator/>
+          <CardContent class="p-6">
+            This component is publicly available: {{ component.public }}
+          </CardContent>
+          <Separator/>
+          <CardFooter v-if="component.component_type === ComponentType.Data"
+                      class="p-6 flex flex-col gap-y-4 items-start">
+            <div class="w-full flex gap-x-2 justify-between">
+              <Button variant="outline" @click="getS3Credentials(component.id)">Get Credentials</Button>
+              <Button variant="outline" @click="createS3Credentials(component.id)">Create Credentials</Button>
+            </div>
+          </CardFooter>
+        </Card>
+      </div>
+
+      <div v-else class="w-full h-full chart">
+        <VisSingleContainer :data="graphData.data" height="60vh">
+          <VisGraph v-bind="graphConfig"
+                    :layoutType="GraphLayoutType.Parallel"
+                    :layoutGroupOrder="[]"
+                    :layoutNodeGroup="(n: NodeDatum) => n.group"
+                    :layoutParallelNodeSubGroup="(n: NodeDatum) => n.subgroup"
+                    :layoutParallelNodesPerColumn="1"
+                    :layoutParallelGroupSpacing="100"
+                    :layoutParallelSubGroupsPerRow="1"
+                    :panels="graphData.panels"/>
+
+          <VisTooltip v-if="!disableTooltips"
+                      :container="container"
+                      :triggers="triggers"
+                      :follow-cursor="false"
+                      :allow-hover="true"
+                      :vertical-placement="Position.Auto"/>
+        </VisSingleContainer>
+      </div>
     </div>
-    -->
   </div>
 </template>
 
 <style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 300ms;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 .chart {
   --vis-graph-icon-font-family: 'Font Awesome 6 Free';
   --vis-graph-link-stroke-opacity: 0.8;

From 92391adb48ef73f0a6055e62d87129159888a8af Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 7 Jan 2025 14:05:30 +0100
Subject: [PATCH 082/125] chore: Remove visualization dummy data

---
 .../custom-ui/dashboard/data-circular.ts      | 404 ------------------
 1 file changed, 404 deletions(-)
 delete mode 100644 components/custom-ui/dashboard/data-circular.ts

diff --git a/components/custom-ui/dashboard/data-circular.ts b/components/custom-ui/dashboard/data-circular.ts
deleted file mode 100644
index 01a8645f..00000000
--- a/components/custom-ui/dashboard/data-circular.ts
+++ /dev/null
@@ -1,404 +0,0 @@
-import {GraphNodeShape, type GraphPanelConfig} from '@unovis/ts'
-import {
-  storagemodelsv2ComponentStatus,
-  type v2Endpoint,
-  type v2EndpointHostConfig,
-  v2EndpointHostVariant,
-  v2EndpointVariant
-} from "~/composables/aruna_api_json";
-
-enum Status {
-  Aruna = 'aruna',
-  Healthy = 'healthy',
-  Warning = 'warning',
-  Inactive = 'inactive',
-  Alert = 'alert'
-}
-
-export const StatusMap = {
-  [Status.Aruna]: { color: '#005299', text: '&#xf00c;' },
-  [Status.Healthy]: { color: '#47e845', text: '&#xf00c;' },
-  [Status.Warning]: { color: '#ffc226', text: '&#xf071;' },
-  [Status.Inactive]: { color: '#dddddd', text: '&#xf00d;' },
-  [Status.Alert]: { color: '#f88080', text: '&#x21;' },
-}
-
-export type NodeDatum = {
-  id: string;
-  group: string;
-  subgroup: string;
-  label: string;
-  site: string;
-  shape: GraphNodeShape;
-  fill?: string,
-  clickable?: boolean,
-  children?: NodeDatum[];
-  icon?: string;
-  score?: number;
-  status?: string;
-  groupLabel?: string;
-  metaInfo?: v2Endpoint;
-}
-
-export type LinkDatum = {
-  source: string;
-  target: string;
-  sourceGroup: string;
-  targetGroup: string;
-  status: Status;
-  showTraffic: boolean;
-}
-
-type SiteConfig = {
-  groupNodeId: string;
-  panel: GraphPanelConfig;
-}
-
-export const nodes: NodeDatum[] = [
-  {
-    id: 'giessen-node',
-    site: 'instance-gi',
-    shape: GraphNodeShape.Circle,
-    icon: '&#xf043;', //'&#xf0ac;',
-    label: 'Gießen',
-    group: 'instance-gi',
-    subgroup: 'instance-gi',
-    clickable: true,
-    children: [
-      {
-        id: 'N:giessen-server,instance-gi',
-        site: 'instance-gi',
-        status: Status.Aruna,
-        score: 87,
-        icon: '&#xf233;', // '&#xf542;',
-        shape: GraphNodeShape.Square,
-        fill: '#007BC2',
-        label: 'Aruna Server',
-        group: 'instance-gi',
-        subgroup: 'instance-gi-main',
-        groupLabel: 'Gießen',
-        clickable: true,
-      },
-      {
-        id: 'N:giessen-storage-s3,instance-gi',
-        site: 'instance-gi',
-        status: Status.Healthy,
-        score: 87,
-        icon: '&#xe4cf;',
-        shape: GraphNodeShape.Hexagon,
-        label: 'S3 Proxy',
-        group: 'instance-gi',
-        subgroup: 'instance-gi-storage',
-        groupLabel: 'Gießen',
-        metaInfo: {
-          id: '01JA5QVENNHZF9XZJ44QESBRS2',
-          name: 'Gießen S3 Proxy',
-          epVariant: v2EndpointVariant.ENDPOINT_VARIANT_PERSISTENT,
-          status: storagemodelsv2ComponentStatus.COMPONENT_STATUS_AVAILABLE,
-          isPublic: true,
-          hostConfigs: [
-            {
-              url: 'https://data.gi.dev.aruna-storage.org',
-              isPrimary: true,
-              ssl: true,
-              public: true,
-              hostVariant: v2EndpointHostVariant.ENDPOINT_HOST_VARIANT_S3
-            } as v2EndpointHostConfig
-          ]
-        } as v2Endpoint
-      },
-      {
-        id: 'N:giessen-storage-file,instance-gi',
-        site: 'instance-gi',
-        status: Status.Healthy,
-        score: 87,
-        icon: '&#xf802;',
-        shape: GraphNodeShape.Hexagon,
-        label: 'Ceph FS Proxy',
-        group: 'instance-gi',
-        subgroup: 'instance-gi-storage',
-        groupLabel: 'Gießen',
-        metaInfo: {
-          id: '01JA7ESTTVX4W7WEY8SYQ72JB3',
-          name: 'Gießen Ceph FS Proxy',
-          epVariant: v2EndpointVariant.ENDPOINT_VARIANT_PERSISTENT,
-          status: storagemodelsv2ComponentStatus.COMPONENT_STATUS_UNAVAILABLE,
-          isPublic: false
-        }
-      },
-      {
-        id: 'N:giessen-compute,instance-gi',
-        site: 'instance-gi',
-        status: Status.Healthy,
-        score: 92,
-        icon: '&#xe4e2;', //f233
-        shape: GraphNodeShape.Hexagon,
-        label: 'Slurm proxy',
-        group: 'instance-gi',
-        subgroup: 'instance-gi-compute',
-        groupLabel: 'Gießen',
-      },
-    ],
-  },
-  {
-    id: 'bielefeld-node',
-    site: 'instance-bi',
-    shape: GraphNodeShape.Circle,
-    icon: '&#xf0ac;',
-    label: 'Bielefeld',
-    group: 'instance-bi',
-    subgroup: 'instance-bi',
-    clickable: true,
-    children: [
-      {
-        id: 'N:bielefeld-server,instance-bi',
-        site: 'instance-bi',
-        status: Status.Warning,
-        score: 87,
-        icon: '&#xf542;',
-        shape: GraphNodeShape.Square,
-        fill: '#007BC2',
-        label: 'Bielefeld Server',
-        group: 'instance-bi',
-        subgroup: 'instance-bi-main',
-        groupLabel: 'Bielefeld',
-        clickable: true,
-      },
-      {
-        id: 'N:bielefeld-storage,instance-bi',
-        site: 'instance-bi',
-        status: Status.Healthy,
-        score: 87,
-        icon: '&#xf542;',
-        shape: GraphNodeShape.Hexagon,
-        label: 'Bielefeld Storage',
-        group: 'instance-bi',
-        subgroup: 'instance-bi-storage',
-        groupLabel: 'Bielefeld',
-      },
-      {
-        id: 'N:bielefeld-compute-clowm,instance-bi',
-        site: 'instance-bi',
-        status: Status.Healthy,
-        score: 87,
-        icon: '&#xf542;',
-        shape: GraphNodeShape.Hexagon,
-        label: 'Bielefeld CloWM',
-        group: 'instance-bi',
-        subgroup: 'instance-bi-compute',
-        groupLabel: 'Bielefeld',
-      },
-      {
-        id: 'N:bielefeld-compute-bibigrid,instance-bi',
-        site: 'instance-bi',
-        status: Status.Healthy,
-        score: 87,
-        icon: '&#xf542;',
-        shape: GraphNodeShape.Hexagon,
-        label: 'Bielefeld BiBi Grid',
-        group: 'instance-bi',
-        subgroup: 'instance-bi-compute',
-        groupLabel: 'Bielefeld',
-      },
-    ],
-  },
-  {
-    id: 'berlin-node',
-    site: 'instance-be',
-    shape: GraphNodeShape.Circle,
-    icon: '&#xf0ac;',
-    label: 'Berlin',
-    group: 'instance-be',
-    subgroup: 'instance-be',
-    clickable: true,
-    children: [
-      {
-        id: 'N:berlin-server,instance-be',
-        site: 'instance-be',
-        status: Status.Aruna,
-        score: 87,
-        icon: '&#xf542;',
-        shape: GraphNodeShape.Square,
-        fill: '#007BC2',
-        label: 'Berlin Server',
-        group: 'instance-be',
-        subgroup: 'instance-be-main',
-        groupLabel: 'Berlin',
-        clickable: true,
-      },
-      {
-        id: 'N:berlin-storage-s3,instance-be',
-        site: 'instance-be',
-        status: Status.Healthy,
-        score: 87,
-        icon: '&#xf542;',
-        shape: GraphNodeShape.Hexagon,
-        label: 'Berlin S3',
-        group: 'instance-be',
-        subgroup: 'instance-be-storage',
-        groupLabel: 'Berlin',
-      },
-      {
-        id: 'N:berlin-storage-file,instance-be',
-        site: 'instance-be',
-        status: Status.Healthy,
-        score: 87,
-        icon: '&#xf542;',
-        shape: GraphNodeShape.Hexagon,
-        label: 'Berlin File',
-        group: 'instance-be',
-        subgroup: 'instance-be-storage',
-        groupLabel: 'Berlin',
-      },
-      {
-        id: 'N:berlin-storage-mongodb,instance-be',
-        site: 'instance-be',
-        status: Status.Alert,
-        score: 87,
-        icon: '&#xf542;',
-        shape: GraphNodeShape.Hexagon,
-        label: 'Berlin Mongo DB',
-        group: 'instance-be',
-        subgroup: 'instance-be-storage',
-        groupLabel: 'Berlin',
-      },
-    ],
-  },
-  {
-    id: 'tuebingen-node',
-    site: 'instance-tu',
-    shape: GraphNodeShape.Circle,
-    icon: '&#xf0ac;',
-    label: 'Tübingen',
-    group: 'instance-tu',
-    subgroup: 'instance-tu',
-    clickable: true,
-    children: [
-      {
-        id: 'N:tuebingen-server,instance-tu',
-        site: 'instance-tu',
-        status: Status.Aruna,
-        score: 87,
-        icon: '&#xf542;',
-        shape: GraphNodeShape.Square,
-        fill: '#007BC2',
-        label: 'Tübingen Server',
-        group: 'instance-tu',
-        subgroup: 'instance-tu-main',
-        groupLabel: 'Tübingen',
-        clickable: true,
-      },
-      {
-        id: 'N:tuebingen-storage-s3,instance-tu',
-        site: 'instance-tu',
-        status: Status.Healthy,
-        score: 87,
-        icon: '&#xf542;',
-        shape: GraphNodeShape.Hexagon,
-        label: 'Tübingen S3',
-        group: 'instance-tu',
-        subgroup: 'instance-tu-storage',
-        groupLabel: 'Tübingen',
-      },
-    ]
-  }
-]
-
-export const links: LinkDatum[] = [
-  {
-    source: 'N:giessen-server,instance-gi',
-    target: 'N:giessen-compute,instance-gi',
-    status: Status.Inactive,
-  },
-  {
-    source: 'N:giessen-server,instance-gi',
-    target: 'N:giessen-storage-s3,instance-gi',
-    status: Status.Inactive,
-  },
-  {
-    source: 'N:giessen-server,instance-gi',
-    target: 'N:giessen-storage-file,instance-gi',
-    status: Status.Inactive,
-  },
-  {
-    source: 'N:giessen-server,instance-gi',
-    target: 'N:bielefeld-server,instance-bi',
-    status: Status.Warning,
-  },
-
-  {
-    source: 'N:bielefeld-server,instance-bi',
-    target: 'N:bielefeld-compute-clowm,instance-bi',
-    status: Status.Inactive,
-  },
-  {
-    source: 'N:bielefeld-server,instance-bi',
-    target: 'N:bielefeld-compute-bibigrid,instance-bi',
-    status: Status.Inactive,
-  },
-  {
-    source: 'N:bielefeld-server,instance-bi',
-    target: 'N:bielefeld-storage,instance-bi',
-    status: Status.Inactive,
-  },
-  {
-    source: 'N:bielefeld-server,instance-bi',
-    target: 'N:berlin-server,instance-be',
-    status: Status.Warning,
-  },
-
-  {
-    source: 'N:berlin-server,instance-be',
-    target: 'N:berlin-storage-file,instance-be',
-    status: Status.Inactive,
-  },
-  {
-    source: 'N:berlin-server,instance-be',
-    target: 'N:berlin-storage-s3,instance-be',
-    status: Status.Inactive,
-  },
-  {
-    source: 'N:berlin-server,instance-be',
-    target: 'N:berlin-storage-mongodb,instance-be',
-    status: Status.Alert,
-  },
-  {
-    source: 'N:berlin-server,instance-be',
-    target: 'N:tuebingen-server,instance-tu',
-    status: Status.Healthy,
-  },
-
-  {
-    source: 'N:tuebingen-server,instance-tu',
-    target: 'N:tuebingen-storage-s3,instance-tu',
-    status: Status.Inactive,
-  },
-  {
-    source: 'N:tuebingen-server,instance-tu',
-    target: 'N:giessen-server,instance-gi',
-    status: Status.Healthy,
-  },
-].map(l => ({
-  ...l,
-  showTraffic: (l.status !== Status.Alert) && (l.status !== Status.Inactive),
-  sourceGroup: nodes.find(n => n.children.map(c => c.id).includes(l.source))?.site,
-  targetGroup: nodes.find(n => n.children.map(c => c.id).includes(l.target))?.site,
-}))
-
-export const sites: Record<string, SiteConfig> = nodes.reduce((acc, curr) => ({
-  ...acc,
-  [curr.site]: {
-    groupNodeId: curr.id,
-    panel: {
-      nodes: curr.children.map(d => d.id),
-      label: curr.label,
-      borderWidth: 4,
-      padding: 25,
-      dashedOutline: true, //curr === nodes[0],
-      sideIconFontSize: '20px',
-      sideIconShape: GraphNodeShape.Circle,
-      sideIconSymbol: curr.icon,
-      sideIconShapeSize: 40,
-    } as GraphPanelConfig,
-  },
-}), {})
\ No newline at end of file

From f4ffb6938f965bfee33f5a4638f62ff2da3a62b0 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 7 Jan 2025 16:11:20 +0100
Subject: [PATCH 083/125] chore: Small improvements

---
 components/custom-ui/dashboard/OverviewStats.vue | 2 +-
 components/footer.vue                            | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/custom-ui/dashboard/OverviewStats.vue b/components/custom-ui/dashboard/OverviewStats.vue
index b25433b6..2f1e2058 100644
--- a/components/custom-ui/dashboard/OverviewStats.vue
+++ b/components/custom-ui/dashboard/OverviewStats.vue
@@ -113,7 +113,7 @@ function emitTabSwitch(tabId: string) {
 
     <div class="flex items-center justify-center gap-y-6 gap-x-1">
       Wanna create or join a group? Take a look at your
-      <span class="font-bold text-aruna-highlight hover:text-aruna-highlight/80"
+      <span class="font-bold text-aruna-highlight hover:text-aruna-highlight/80 hover:cursor-pointer"
             @click="emitTabSwitch('Profile')">
         profile
       </span>.
diff --git a/components/footer.vue b/components/footer.vue
index 1f5db7e0..0aabd1c6 100644
--- a/components/footer.vue
+++ b/components/footer.vue
@@ -3,7 +3,7 @@ import {IconBrandGithub} from "@tabler/icons-vue";
 </script>
 <template>
   <div class="w-[100vw] bg-aruna-bg/90">
-    <footer class="w-full max-w-[85rem] p-4 sm:px-6 lg:px-8 mx-auto">
+    <footer class="w-full p-4 sm:px-6 lg:px-8 mx-auto">
       <!-- Grid -->
       <div class="grid grid-cols-1 md:grid-cols-3 items-center gap-5 text-center">
         <div>

From 3a5267cae61fd7b36a01f5a6ca0549d27f4c95e7 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 7 Jan 2025 18:10:12 +0100
Subject: [PATCH 084/125] feat: Add links between server instances

---
 components/custom-ui/dashboard/Realms.vue | 53 ++++++++++++++++-------
 1 file changed, 38 insertions(+), 15 deletions(-)

diff --git a/components/custom-ui/dashboard/Realms.vue b/components/custom-ui/dashboard/Realms.vue
index 367c00de..8f58a94b 100644
--- a/components/custom-ui/dashboard/Realms.vue
+++ b/components/custom-ui/dashboard/Realms.vue
@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import {IconBucket, IconCaretUpDown, IconCubePlus, IconProgressCheck, IconServer} from "@tabler/icons-vue";
+import {IconBucket, IconCaretUpDown, IconCubePlus, IconProgressCheck, IconServer, IconTrophy} from "@tabler/icons-vue";
 import {VisGraph, VisSingleContainer, VisTooltip} from '@unovis/vue'
 import {Graph, GraphLayoutType, GraphNodeShape, type GraphPanelConfig, Position, TrimMode} from '@unovis/ts'
 import {computed, ref} from "vue"
+import {addYears} from "date-fns"
 import ComponentDialog from "~/components/custom-ui/dialog/ComponentDialog.vue";
 import RealmComponentDialog from "~/components/custom-ui/dialog/RealmComponentDialog.vue";
 
@@ -116,7 +117,7 @@ watch(expandedRealms, () => console.info('[Realms Component] Expanded realms: ',
 const graphData = computed(() => {
   console.info('[Realms Component] Re-compute data for graph visualization with realm v3:', selectedRealm.value.name, realmComponents.value.length)
   const sites: Map<string, Site> = new Map()
-  const serverIds: Set<string> = new Set()
+  let serverIds: string[] = []
   for (const component of realmComponents.value) {
     // Parse and store location of component
     const siteLocation: string = JSON.parse(component.description).location //TODO: Error handling
@@ -162,7 +163,9 @@ const graphData = computed(() => {
         node.shape = GraphNodeShape.Square
         node.icon = '&#xf542;'
         site?.server.push(node)
-        serverIds.add(component.id)
+        if (!serverIds.includes(component.id) && expandedRealms.value.has(siteLocation)) {
+          serverIds.push(component.id)
+        }
         break
       case ComponentType.Data:
         node.shape = GraphNodeShape.Hexagon
@@ -216,6 +219,23 @@ const graphData = computed(() => {
       })
     } else {
       nodes.push(site.root)
+      serverIds.push(site.root.id)
+    }
+  }
+
+  console.info('[Realms Component] Server Ids: ', serverIds)
+
+  // Connect server instances
+  if (serverIds.length > 1) {
+    for (const[i, id] of serverIds.entries()) {
+      if (i < serverIds.length - 1) {
+        links.push({
+          source: id,
+          target: serverIds[i+1],
+          status: Status.Healthy,
+          showTraffic: true
+        } as LinkDatum)
+      }
     }
   }
 
@@ -265,13 +285,13 @@ function addComponent(component: v3Component) {
   })
 }
 
-async function createS3Credentials(component_id: string) {
+async function createS3Credentials(component: v3Component) {
   const request = {
-    component_id: component_id,
-    name: 'Some Credentials',
-    expires_at: new Date(1735040153000).toISOString(),
-    group_id: '01JFAP0EA748E60QQ55F452A2V', //TODO: ... ???
-    realm_id: '01JFAP0EA7KDWQKPYWA7DV3VQ7', //TODO: Currently selected?
+    component_id: component.id,
+    name: `${component.name} S3 credentials`,
+    expires_at: addYears(new Date(), 1).toISOString(), // Current default lifetime: 1 year
+    realm_id: selectedRealm.value.id,
+    group_id: '01JGXXBK17Q7A83WBQ45Q5GGW1', //TODO: ... ???
     scope: Scope.Personal
   } as CreateS3CredentialsRequest
 
@@ -280,6 +300,10 @@ async function createS3Credentials(component_id: string) {
     body: request
   }).then(response => {
     console.info('[CreateS3Credentials Client] Response', response)
+    toast({
+      title: 'Successfully created credentials:',
+      description: `Access Key Id: ${response.access_key} | Secret Key: ${response.secret_key}`
+    })
   })
 }
 
@@ -390,7 +414,7 @@ const expandedDescription = ref<Set<string>>(new Set())
                         @add-component=""
                         @update:open="componentDialogOpen = false"/>
 
-  <div class="mx-4 mt-4 flex flex-col">
+  <div class="mx-4 mt-4 h-full flex flex-col">
     <div class="flex flex-row items-center justify-center max-w-screen-2xl lg:max-w-[80vw]">
       <Table>
         <TableCaption>A list of your active realms</TableCaption>
@@ -443,15 +467,14 @@ const expandedDescription = ref<Set<string>>(new Set())
 
     <Separator class="my-6"/>
 
-    <div>
+    <div class="flex flex-col flex-grow">
       <div class="flex gap-x-12 items-center mb-8">
         <h2 class="text-2xl font-bold md:text-3xl md:leading-tight text-aruna-text-accent">
           Realm Components of <span class="text-aruna-highlight">{{ selectedRealm.name }}</span>
         </h2>
 
         <div class="flex items-center gap-x-2">
-          <Switch v-model:checked="displayAsCards"/>
-          Display as Cards
+          <Switch v-model:checked="displayAsCards"/> Display as Cards
         </div>
       </div>
 
@@ -500,14 +523,14 @@ const expandedDescription = ref<Set<string>>(new Set())
                       class="p-6 flex flex-col gap-y-4 items-start">
             <div class="w-full flex gap-x-2 justify-between">
               <Button variant="outline" @click="getS3Credentials(component.id)">Get Credentials</Button>
-              <Button variant="outline" @click="createS3Credentials(component.id)">Create Credentials</Button>
+              <Button variant="outline" @click="createS3Credentials(component)">Create Credentials</Button>
             </div>
           </CardFooter>
         </Card>
       </div>
 
       <div v-else class="w-full h-full chart">
-        <VisSingleContainer :data="graphData.data" height="60vh">
+        <VisSingleContainer :data="graphData.data" class="h-full">
           <VisGraph v-bind="graphConfig"
                     :layoutType="GraphLayoutType.Parallel"
                     :layoutGroupOrder="[]"

From 5d1b1da5adfbeccb57504f4407bdfc6d70b4e3a9 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 8 Jan 2025 15:14:26 +0100
Subject: [PATCH 085/125] refactor: Adapt key-values in resource creation to v3

---
 components/custom-ui/ResourceCreation.vue     | 32 ++++++++++---------
 .../custom-ui/dialog/OntologyDialog.vue       |  5 ++-
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/components/custom-ui/ResourceCreation.vue b/components/custom-ui/ResourceCreation.vue
index e1287cea..a1addd47 100644
--- a/components/custom-ui/ResourceCreation.vue
+++ b/components/custom-ui/ResourceCreation.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {IconPlus, IconTrash} from '@tabler/icons-vue'
-import {type v2Author, type v2KeyValue, v2KeyValueVariant,} from '~/composables/aruna_api_json'
+import {type v2Author} from '~/composables/aruna_api_json'
 import {
   TagsInput,
   TagsInputInput,
@@ -162,11 +162,6 @@ const {handleSubmit, values, setFieldValue} = useForm({
 
 const {toast} = useToast()
 const onSubmit = handleSubmit(async (values) => {
-  toast({
-    title: 'You submitted the following values:',
-    description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(values, null, 2))),
-  })
-
   const request = {
     name: values.name,
     title: values.title,
@@ -179,9 +174,14 @@ const onSubmit = handleSubmit(async (values) => {
     identifiers: values.identifiers,
     license_tag: values.license_tag,
     authors: values.authors,
-    labels: values.labels,
+    labels: Array.from(keyValues.value.values()),
   }
 
+  toast({
+    title: 'You submitted the following values:',
+    description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(request, null, 2))),
+  })
+
   // Create resource in Aruna
   const api_endpoint = values.variant === ResourceVariant.Project ? '/api/v3/project' : '/api/v3/resource'
   const response = await $fetch<CreateProjectResponse | CreateResourceResponse>(api_endpoint, {
@@ -228,12 +228,12 @@ function removeAuthor(key: string) {
 /* ----- End Resource Authors ----- */
 
 /* ----- Resource key-values ----- */
-const keyValues = ref(new Map())
+const keyValues: Ref<Map<string, KeyValue>> = 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)
+function addKeyValue(key: string, val: string, locked: boolean) {
+  keyValues.value.set(key, {key: key, value: val, locked: locked} as KeyValue)
 }
 
 function removeKeyValue(key: string) {
@@ -871,7 +871,7 @@ async function waitForSync(s3client: S3Client, bucket: string, key: string): Pro
                         Value
                       </th>
                       <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                        Type
+                        Locked
                       </th>
                       <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
                         Actions
@@ -886,7 +886,7 @@ async function waitForSync(s3client: S3Client, bucket: string, key: string): Pro
                       <td v-html="prettyDisplayJson(value.value)"
                           class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text"></td>
                       <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                        {{ toKeyValueVariantStr(value.variant) }}
+                        {{ value.locked }}
                       </td>
                       <td class="px-6 py-2 whitespace-nowrap text-center text-sm font-medium">
                         <button type="button"
@@ -927,12 +927,14 @@ async function waitForSync(s3client: S3Client, bucket: string, key: string): Pro
   <KeyValueDialog :initial-open="keyValueDialogOpen"
                   :with-button="false"
                   @update:open="keyValueDialogOpen = false"
-                  @add-key-value="({ key, value, variant }) => {
-                    addKeyValue(key, value, variant);
+                  @add-key-value="({ key, value, locked }) => {
+                    addKeyValue(key, value, locked);
                     keyValueDialogOpen = false;
                   }"/>
 
   <!-- TODO -->
-  <ModalObjectDisplay modalId="object-display" :object="createdResource" :progress="uploadProgress"
+  <ModalObjectDisplay modalId="object-display"
+                      :object="createdResource"
+                      :progress="uploadProgress"
                       :errorMsg="creationError"/>
 </template>
\ No newline at end of file
diff --git a/components/custom-ui/dialog/OntologyDialog.vue b/components/custom-ui/dialog/OntologyDialog.vue
index fe65f79c..58c770fe 100644
--- a/components/custom-ui/dialog/OntologyDialog.vue
+++ b/components/custom-ui/dialog/OntologyDialog.vue
@@ -26,7 +26,7 @@ watch(externalTrigger, () => (open.value = externalTrigger.value))
 
 /* ----- EMITS ----- */
 const emit = defineEmits<{
-  'add-key-value': [key: string, value: string, kvType: v2KeyValueVariant]
+  'add-key-value': [key: string, value: string, locked: boolean]
 }>()
 /* ----- END EMITS ----- */
 
@@ -87,8 +87,7 @@ 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)
+        `{"@type": "CreativeWork", "@id": "${currentSelection.value.iri}", "url": "${createMetadataLink(currentSelection.value.id)}"}`, true)
     clear()
     open.value = false
   }

From 3181d9c1c90908cde5bebc4ef39d936ec2ae0104 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Thu, 9 Jan 2025 09:16:50 +0100
Subject: [PATCH 086/125] refactor: Resource meta info display in sidebar

---
 .../custom-ui/dashboard/FileExplorer.vue      | 215 +++++++++++-------
 1 file changed, 129 insertions(+), 86 deletions(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index e9afcf30..cbe1d77b 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -1,12 +1,16 @@
 <script lang="ts" setup>
 import {
+  IconCheck,
+  IconExclamationCircle,
   IconFile,
   IconFolder,
   IconFolderPlus,
   IconFolderSymlink,
   IconInfoCircle,
+  IconLoader3,
   IconLock,
   IconPlus,
+  IconTreadmill,
   IconUpload,
   IconWorld,
 } from '@tabler/icons-vue'
@@ -14,15 +18,34 @@ import {Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator,} from '
 
 import type {GetRelationsResponse, ResourceElement} from "~/composables/api_wrapper"
 import {fetchChildren} from "~/composables/api_wrapper";
-import {ResourceVariant} from "~/types/aruna-v3-enums"
+import {ResourceVariant, SyncingStatus, VisibilityClass} from "~/types/aruna-v3-enums"
 import {toast} from "~/components/ui/toast";
 import {h} from "vue";
 
+const StatusMap = {
+  [SyncingStatus.Pending]: IconLoader3,
+  [SyncingStatus.Running]: IconTreadmill,
+  [SyncingStatus.Finished]: IconCheck,
+  [SyncingStatus.Error]: IconExclamationCircle,
+}
+
 const licenses = [
-  {tag: 'CC0', label: 'Creative Commons Zero (CC0 1.0)'},
-  {tag: 'CC-BY-SA 4.0', label: 'Attribution-ShareAlike 4.0 International (CC-BY-SA 4.0)'},
-  {tag: 'CC-BY-NC 4.0', label: 'Attribution-NonCommercial 4.0 International (CC-BY-NC)'},
-  {tag: 'CC-BY-NC-SA 4.0', label: 'Attribution-NonCommercial-ShareAlike 4.0 International (CC-BY-NC-SA)'}
+  {id: '01JFD6QDYWXTF2SXBQEW1VKM95', tag: 'CC0', label: 'Creative Commons Zero (CC0 1.0)'},
+  {
+    id: '01JFD6R28H3XMX2DRQZ7CEC200',
+    tag: 'CC-BY-SA 4.0',
+    label: 'Attribution-ShareAlike 4.0 International (CC-BY-SA 4.0)'
+  },
+  {
+    id: '01JFD6R7BBJQ7C1BDYQE2NADR6',
+    tag: 'CC-BY-NC 4.0',
+    label: 'Attribution-NonCommercial 4.0 International (CC-BY-NC)'
+  },
+  {
+    id: '01JFD6RC1JQHYWX4F4ZB1EBN0T',
+    tag: 'CC-BY-NC-SA 4.0',
+    label: 'Attribution-NonCommercial-ShareAlike 4.0 International (CC-BY-NC-SA)'
+  }
 ] //await fetchLicenses()
 
 /* ----- Dropzone ----- */
@@ -439,95 +462,115 @@ function checkDirection(): 'horizontal' | 'vertical' {
             </Select>
           </div>
 
-          <div v-else class="gap-y-4">
+          <div v-else-if="infoSelection" class="gap-y-4">
             <h2 class="text-2xl">{{ infoSelection?.title || 'Title not available' }}</h2>
-            <Separator class="bg-aruna-text/50 my-6"/>
-            <dl class="flex flex-col gap-y-4">
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium 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">{{
-                    infoSelection?.id || ''
-                  }}
-                </dd>
-              </div>
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Name:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">{{
-                    infoSelection?.name || ''
-                  }}
-                </dd>
-              </div>
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium 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">{{
-                    infoSelection?.description || ''
-                  }}
-                </dd>
+            <Separator class="bg-aruna-text/50 mt-6"/>
+            <!--<span class="text-sm font-medium leading-6 text-aruna-text-accent">Labels:</span>-->
+            <ScrollArea>
+              <div class="flex p-4 ps-0 space-x-4 w-max whitespace-nowrap truncate">
+                <div v-for="label in infoSelection?.labels"
+                     class="flex flex-row my-1 last:me-0">
+                  <span :class="{'rounded-md': label.value === '' || label.value === undefined,
+                                 'rounded-l-md': label.value && label.value.length > 0}"
+                        class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1 px-2 rounded-l-md text-aruna-highlight border border-aruna-highlight">
+                    {{ label.key }}
+                  </span>
+                  <span v-if="label.value"
+                        class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1 px-2 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">
+                    {{ label.value }}
+                  </span>
+                </div>
               </div>
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Size:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+
+            <Table class="table-auto">
+              <TableBody class="">
+              <TableRow>
+                <TableCell class="w-fit text-sm font-medium leading-6 text-aruna-text-accent">Id:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  {{ infoSelection?.id || '' }}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Name:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  {{ infoSelection?.name || '' }}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell class="align-text-top text-sm font-medium leading-6 text-aruna-text-accent">Description:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  {{ infoSelection?.description || '' }}
+                </TableCell>
+              </TableRow>
+              <TableRow v-if="infoSelection?.variant === ResourceVariant.Object">
+                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Size:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
                   {{ formatBytes(infoSelection?.content_len || 0) }}
-                </dd>
-              </div>
-              <div v-if="infoSelection?.variant !== ResourceVariant.Object"
-                   class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Children:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">{{
-                    infoSelection?.count || 0
-                  }}
-                </dd>
-              </div>
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Created At:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                </TableCell>
+              </TableRow>
+              <TableRow v-else>
+                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Children:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  {{ infoSelection?.count || 0 }}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Created At:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
                   {{ formatDate(infoSelection?.created_at || '') }}
-                </dd>
-              </div>
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Last Modified:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Last Modified:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
                   {{ formatDate(infoSelection?.last_modified || '') }}
-                </dd>
-              </div>
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">License:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">{{
-                    infoSelection?.license_tag || ''
-                  }}
-                </dd>
-              </div>
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Locations:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">[...]</dd>
-              </div>
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Locked:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">License:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  {{ infoSelection?.license_id || '' }}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell class="text-sm align-text-top font-medium leading-6 text-aruna-text-accent">Locations:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                  <ul class="list-disc">
+                    <li class="flex gap-x-2" v-for="loc in infoSelection?.location">
+                      <component :is="StatusMap[loc.status as keyof typeof StatusMap]"
+                                 :class="{'text-aruna-text-accent animate-spin': loc.status === SyncingStatus.Pending,
+                                          'text-aruna-text-accent': loc.status === SyncingStatus.Running,
+                                          'text-green-600': loc.status === SyncingStatus.Finished,
+                                          'text-destructive': loc.status === SyncingStatus.Error}"/>
+                      {{ loc.endpoint_id }}
+                    </li>
+                  </ul>
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Locked:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
                   {{ infoSelection?.locked || 'N/A' }}
-                </dd>
-              </div>
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Visibility:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Visibility:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
                   {{ infoSelection?.visibility || '' }}
-                </dd>
-              </div>
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Deleted:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Deleted:</TableCell>
+                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
                   {{ infoSelection?.deleted }}
-                </dd>
-              </div>
-
-              <div class="px-3 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
-                <dt class="text-sm font-medium leading-6 text-aruna-text-accent">Labels:</dt>
-                <dd class="mt-1 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">[...]</dd>
-              </div>
-            </dl>
+                </TableCell>
+              </TableRow>
+              </TableBody>
+            </Table>
           </div>
 
-
           <div class="flex gap-x-4">
             <Button v-if="fileUpload"
                     variant="outline"
@@ -538,14 +581,14 @@ function checkDirection(): 'horizontal' | 'vertical' {
             </Button>
             <Button variant="outline"
                     @click="closeInfo"
-                    class="inline-flex w-fit bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+                    class="inline-flex w-fit bg-transparent text-aruna-text border border-aruna-text hover:bg-aruna-h hover:text-aruna-text-accent hover:border-aruna-text-accent">
               Close
             </Button>
 
             <Button v-if="infoSelection"
                     variant="outline"
                     @click="deleteResource(infoSelection)"
-                    class="inline-flex w-fit bg-transparent text-destructive border border-destructive hover:bg-destructive/25">
+                    class="inline-flex w-fit bg-transparent text-destructive border border-destructive hover:bg-destructive/25 hover:text-destructive">
               Delete
             </Button>
           </div>

From 04d1da492df98ff8371838dedc641691545d0ce2 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 14 Jan 2025 10:38:24 +0100
Subject: [PATCH 087/125] fix: Add missing ulid package for events list

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index dec105fb..786de3e8 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "markdown-it-deflist": "^3.0.0",
     "nuxt": "^3.14.1592",
     "radix-vue": "^1.9.11",
+    "ulid": "^2.3.0",
     "vee-validate": "^4.14.7",
     "vue-router": "^4.5.0"
   },

From 6597e26938e88705858eeace5021bb89120a29b2 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Fri, 24 Jan 2025 14:36:15 +0100
Subject: [PATCH 088/125] chore: Add v3 license service API logic

---
 composables/Licenses.ts        | 20 ++++++++++++++++++++
 server/api/v3/licenses.get.ts  | 23 +++++++++++++++++++++++
 server/api/v3/licenses.post.ts | 13 +++++++++++++
 3 files changed, 56 insertions(+)
 create mode 100644 composables/Licenses.ts
 create mode 100644 server/api/v3/licenses.get.ts
 create mode 100644 server/api/v3/licenses.post.ts

diff --git a/composables/Licenses.ts b/composables/Licenses.ts
new file mode 100644
index 00000000..82648db5
--- /dev/null
+++ b/composables/Licenses.ts
@@ -0,0 +1,20 @@
+import EventBus from "~/composables/EventBus";
+
+// by convention, composable function names start with "use"
+export async function useLicenses(refs: Ref[] | undefined) {
+  // state encapsulated and managed by the composable
+  const {data: licenses, refresh: refreshLicenses} = await useFetch<GetLicensesResponse>('/api/v3/licenses', {
+    server: false,
+    lazy: true,
+    watch: refs
+  })
+
+  // a composable can update its managed state over time.
+  EventBus.on('updateLicenses', async () => {
+    console.log('Triggered licenses update')
+    await refreshLicenses()
+  })
+
+  // expose managed state (and refresh alternative) as return value
+  return {licenses, refreshLicenses}
+}
\ No newline at end of file
diff --git a/server/api/v3/licenses.get.ts b/server/api/v3/licenses.get.ts
new file mode 100644
index 00000000..468b6c55
--- /dev/null
+++ b/server/api/v3/licenses.get.ts
@@ -0,0 +1,23 @@
+import {GetLicensesResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  const fetchUrl = `${baseUrl}/api/v3/license`
+
+  return await $fetch<GetLicensesResponse>(fetchUrl, {
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+  }).then(response => {
+    if (response) {
+      /*
+      for (const event of response.events) {
+        console.log('[GetEvents Server]', event[Object.keys(event)[0]])
+      }
+      */
+      //console.dir('[GetEvents Server]', response)
+
+      return response.licenses
+    }
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/licenses.post.ts b/server/api/v3/licenses.post.ts
new file mode 100644
index 00000000..3dca43a9
--- /dev/null
+++ b/server/api/v3/licenses.post.ts
@@ -0,0 +1,13 @@
+import {CreateLicensesResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+  return await $fetch<CreateLicensesResponse>(`${baseUrl}/api/v3/license`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  })
+})
\ No newline at end of file

From 4d7925829572442faefea1ae6765e773faeedf09 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Fri, 24 Jan 2025 15:51:07 +0100
Subject: [PATCH 089/125] feat: Add License service functionality to dashboard

---
 components/custom-ui/dashboard/Dashboard.vue  |  21 +++
 .../dashboard/licenses/LicenseDisplay.vue     |  23 ++++
 .../dashboard/licenses/LicenseEditor.vue      | 123 ++++++++++++++++++
 .../custom-ui/dashboard/licenses/Licenses.vue |  71 ++++++++++
 .../dashboard/licenses/LicensesList.vue       |  60 +++++++++
 5 files changed, 298 insertions(+)
 create mode 100644 components/custom-ui/dashboard/licenses/LicenseDisplay.vue
 create mode 100644 components/custom-ui/dashboard/licenses/LicenseEditor.vue
 create mode 100644 components/custom-ui/dashboard/licenses/Licenses.vue
 create mode 100644 components/custom-ui/dashboard/licenses/LicensesList.vue

diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index 44fae44e..6267e8ae 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -2,6 +2,7 @@
 import {
   IconAffiliate,
   IconBell,
+  IconCreativeCommons,
   IconHome,
   IconChartLine,
   IconFingerprint,
@@ -37,6 +38,7 @@ import Events from "~/components/custom-ui/dashboard/Events.vue";
 import Profile from "~/components/custom-ui/user/Profile.vue";
 import Tokens from "~/components/custom-ui/user/Tokens.vue";
 import Proxies from "~/components/custom-ui/user/Proxies.vue";
+import Licences from "~/components/custom-ui/dashboard/licenses/Licenses.vue";
 
 import type {User} from '~/composables/api_wrapper'
 import {toast} from "~/components/ui/toast";
@@ -46,6 +48,7 @@ import {useGroups} from "~/composables/Groups";
 import {useProjects} from "~/composables/Projects";
 import {useTokens} from "~/composables/Tokens";
 import {useEvents} from "~/composables/Events";
+import {useLicenses} from "~/composables/Licenses";
 
 // ----- Route Magic ----------
 const route = useRoute()
@@ -69,10 +72,13 @@ const {groups, refreshGroups} = await useGroups()
 const {tokens, refreshTokens} = await useTokens()
 const {projects, refreshProjects} = await useProjects()
 const {stats, refreshStats} = await useStats([]) //await useStats([realms, groups, projects])
+const {licenses, refreshLicenses} = await useLicenses([])
 
 watch(realms, () => console.log('[Dashboard] Realms updated to value:', realms.value))
 watch(groups, () => console.log('[Dashboard] Groups updated to value:', groups.value))
 watch(events, () => console.log('[Dashboard] Events updated to value:', events.value))
+watch(licenses, () => console.log('[Dashboard] Licenses updated to value:', licenses.value))
+
 
 EventBus.on('updateStats', async () => await refreshStats())
 EventBus.on('updateRealms', async () => await refreshRealms())
@@ -93,6 +99,7 @@ const contentComponents = {
   'Profile': {component: Profile},
   'Tokens': {component: Tokens,},
   'Proxies': {component: Proxies},
+  'Licenses': {component: Licences},
 }
 const componentProps = computed(() => {
   switch (currentContent.value) {
@@ -107,6 +114,10 @@ const componentProps = computed(() => {
       return {
         resources: projects.value
       }
+    case 'Licenses':
+      return {
+        licenses: licenses.value
+      }
     case 'Realms':
       return {
         realms: realms.value,
@@ -220,6 +231,7 @@ EventBus.on('spinStop', () => spinBaby.value = false)
               Realms
             </button>
 
+            <!--
             <button key="DummyStats"
                     :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'DummyStats'}"
                     class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
@@ -235,6 +247,7 @@ EventBus.on('spinStop', () => spinBaby.value = false)
               <IconChartLine class="h-4 w-4"/>
               Analytics
             </button>
+            -->
 
             <button key="FileExplorer"
                     :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'FileExplorer'}"
@@ -269,6 +282,14 @@ EventBus.on('spinStop', () => spinBaby.value = false)
               <IconPolygon class="h-4 w-4"/>
               Data Proxies
             </button>
+
+            <button key="Licenses"
+                    :class="{'bg-aruna-fg text-aruna-text-accent': currentContent === 'Licenses'}"
+                    class="flex items-center gap-3 rounded-lg px-3 py-2 transition-all text-aruna-text hover:text-aruna-text-accent"
+                    @click="currentContent = 'Licenses'">
+              <IconCreativeCommons class="h-4 w-4"/>
+              Licenses
+            </button>
           </nav>
         </div>
         <!-- End Side Navigation -->
diff --git a/components/custom-ui/dashboard/licenses/LicenseDisplay.vue b/components/custom-ui/dashboard/licenses/LicenseDisplay.vue
new file mode 100644
index 00000000..209e6b44
--- /dev/null
+++ b/components/custom-ui/dashboard/licenses/LicenseDisplay.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import {ScrollArea} from "~/components/ui/scroll-area";
+
+// ----- Properties ---------- //
+const selectedLicense = defineModel<License>('selectedLicense', {required: false})
+// ----- End Properties ---------- //
+</script>
+<template>
+  <div v-if="selectedLicense"
+       class="p-4 flex flex-col gap-y-4 h-full">
+    <h2 class="mt-6 mb-2 text-2xl font-bold text-aruna-text-accent">
+      {{ selectedLicense.name }}
+    </h2>
+    <Separator/>
+    <div class="font-bold text-aruna-text">
+      {{ selectedLicense.description }}
+    </div>
+    <Separator/>
+    <ScrollArea class="p-4 h-full overflow-hidden">
+        <pre>{{ selectedLicense.terms }}</pre>
+    </ScrollArea>
+  </div>
+</template>
diff --git a/components/custom-ui/dashboard/licenses/LicenseEditor.vue b/components/custom-ui/dashboard/licenses/LicenseEditor.vue
new file mode 100644
index 00000000..fc2a4479
--- /dev/null
+++ b/components/custom-ui/dashboard/licenses/LicenseEditor.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import {IconHelp} from '@tabler/icons-vue'
+import {useForm} from "vee-validate";
+import {toTypedSchema} from '@vee-validate/zod'
+import * as z from 'zod'
+import {useToast} from "~/components/ui/toast";
+import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "~/components/ui/form";
+import {Button} from "~/components/ui/button";
+
+/* ----- EMITS ----- */
+const emit = defineEmits(['closeEditor'])
+/* ----- END EMITS ----- */
+
+// ----- FORM SCHEMA ---------- //
+const formSchema = toTypedSchema(z.object({
+  name: z.string({required_error: "Name is required."}).min(2).max(128),
+  description: z.string().max(1024, "Description can only be 1024 characters long."),
+  license_terms: z.string({required_error: "License terms are required."}).min(2)
+}))
+
+const form = useForm({
+  validationSchema: formSchema,
+})
+
+const {toast} = useToast()
+const onSubmit = form.handleSubmit(async (values) => {
+  // Create License
+  await $fetch<CreateLicensesResponse>('/api/v3/licenses', {
+    method: 'POST',
+    body: values
+  }).then(response => {
+    toast({
+      title: 'Success',
+      description: `License successfully created: ${response.license_id}`,
+    })
+
+    EventBus.emit('updateLicenses');
+  })
+})
+// ----- END FORM SCHEMA ---------- //
+</script>
+<template>
+  <div class="p-4 flex flex-col gap-y-4">
+    <form id="licenseForm"
+          @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="name">
+            <FormItem>
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input type="text" placeholder="Name of the License" v-bind="componentField" class="mt-0 max-w-[50%]"/>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+        </div>
+      </div>
+
+      <FormField v-slot="{ componentField }" name="description">
+        <FormItem>
+          <div class="flex items-center gap-x-4">
+            <FormLabel>Description</FormLabel>
+            <Popover>
+              <PopoverTrigger>
+                <IconHelp class="size-4 text-aruna-highlight font-bold"/>
+              </PopoverTrigger>
+              <PopoverContent class="text-sm rounded-sm">
+                A concise description that, at best, explains the core of the licence in one sentence.
+              </PopoverContent>
+            </Popover>
+          </div>
+          <FormControl>
+            <Input type="text"
+                   placeholder="A concise description of your license."
+                   v-bind="componentField"
+                   class="mt-0"/>
+          </FormControl>
+          <FormMessage/>
+        </FormItem>
+      </FormField>
+
+      <FormField v-slot="{componentField}" name="license_terms">
+        <FormItem>
+          <div class="flex items-center gap-x-4">
+            <FormLabel>License Terms</FormLabel>
+            <Popover>
+              <PopoverTrigger>
+                <IconHelp class="size-4 text-aruna-highlight font-bold"/>
+              </PopoverTrigger>
+              <PopoverContent class="text-sm rounded-sm">
+                Here you can enter the full text of your license.
+                <a href="https://creativecommons.org/publicdomain/zero/1.0/legalcode.txt"
+                   target="_blank"
+                   class="text-aruna-highlight hover:cursor-pointer hover:text-aruna-highlight/80">Example</a>
+              </PopoverContent>
+            </Popover>
+          </div>
+          <FormControl>
+            <Textarea v-bind="componentField"
+                      :rows="25"
+                      placeholder="Here you can enter the full text of your license." class="h-full"/>
+          </FormControl>
+          <FormMessage/>
+        </FormItem>
+      </FormField>
+    </form>
+
+    <div class="flex gap-x-4">
+      <Button type="submit"
+              form="licenseForm"
+              class="w-fit bg-transparent border border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+        Create License
+      </Button>
+      <Button variant="outline"
+              class="w-fit bg-transparent border border-aruna-text text-aruna-text hover:border-aruna-text-accent hover:text-aruna-text-accent"
+              @click="emit('closeEditor')">
+        Cancel
+      </Button>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/licenses/Licenses.vue b/components/custom-ui/dashboard/licenses/Licenses.vue
new file mode 100644
index 00000000..00cf25d3
--- /dev/null
+++ b/components/custom-ui/dashboard/licenses/Licenses.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import {IconPlus, IconSearch} from "@tabler/icons-vue";
+import {ResizableHandle, ResizablePanel, ResizablePanelGroup} from "~/components/ui/resizable";
+import {Separator} from "~/components/ui/separator";
+import {Input} from "~/components/ui/input";
+import {TooltipProvider, Tooltip, TooltipContent, TooltipTrigger} from "~/components/ui/tooltip";
+
+import LicensesList from "~/components/custom-ui/dashboard/licenses/LicensesList.vue";
+import LicenseDisplay from "~/components/custom-ui/dashboard/licenses/LicenseDisplay.vue";
+import LicenseEditor from "~/components/custom-ui/dashboard/licenses/LicenseEditor.vue";
+
+// ----- Properties ---------- //
+interface LicensesProps {
+  licenses: License[]
+}
+const props = defineProps<LicensesProps>()
+const licenses = toRef(() => props.licenses)
+const searchValue = ref('')
+const selectedLicense = ref<License | undefined>(undefined)
+const editMode = ref<boolean>(false)
+// ----- End Properties ---------- //
+
+watch(licenses, () => console.info('[Licenses] Updated available licenses:', licenses.value))
+onActivated(() => console.info('[Licenses] Available licenses:', licenses.value))
+
+
+</script>
+<template>
+  <ResizablePanelGroup
+      id="resize-panel-group-1"
+      direction="horizontal"
+      class="h-full max-h-[calc(100vh-130px)] items-stretch">
+    <ResizablePanel id="resize-panel-1" :default-size="35" :min-size="30" :max-size="50">
+      <div class="flex items-center justify-between px-4 py-2">
+        <h1 class="text-xl font-bold">
+          Available Licenses
+        </h1>
+        <TooltipProvider :delay-duration="250">
+          <Tooltip>
+            <TooltipTrigger as-child>
+              <IconPlus class="rounded-full border border-aruna-text-accent hover:border-aruna-highlight hover:text-aruna-highlight hover:cursor-pointer"
+                        @click="editMode = true"/>
+            </TooltipTrigger>
+            <TooltipContent class="rounded-none text-aruna-highlight bg-aruna-muted border border-aruna-text/50">
+              Create a new license
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <Separator/>
+      <div class="p-4">
+        <form>
+          <div class="relative">
+            <IconSearch class="absolute left-2 top-2.5 size-4 text-muted-foreground"/>
+            <Input v-model="searchValue" placeholder="Search" class="pl-8 bg-muted"/>
+          </div>
+        </form>
+      </div>
+      <LicensesList :licenses="licenses" v-model:selected-license="selectedLicense"/>
+    </ResizablePanel>
+    <ResizableHandle id="resize-handle-1" with-handle/>
+    <ResizablePanel id="resize-panel-2" :default-size="65">
+      <KeepAlive>
+        <component :is="editMode ? LicenseEditor : LicenseDisplay"
+                   v-model:selected-license="selectedLicense"
+                   @closeEditor="editMode = false"/>
+      </KeepAlive>
+      <!-- <LicenseDisplay v-model:selected-license="selectedLicense"/> -->
+    </ResizablePanel>
+  </ResizablePanelGroup>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/licenses/LicensesList.vue b/components/custom-ui/dashboard/licenses/LicensesList.vue
new file mode 100644
index 00000000..a33fc697
--- /dev/null
+++ b/components/custom-ui/dashboard/licenses/LicensesList.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import {ScrollArea} from "~/components/ui/scroll-area";
+import {Badge} from "~/components/ui/badge";
+
+// ----- Properties ---------- //
+interface LicensesListProps {
+  licenses: License[]
+}
+
+const props = defineProps<LicensesListProps>()
+const licenses = toRef(() => props.licenses)
+const selectedLicense = defineModel<License>('selectedLicense', {required: false})
+// ----- End Properties ---------- //
+
+watch(licenses, () => console.info('[LicensesList] Updated available licenses:', licenses.value))
+onActivated(() => console.info('[LicensesList] Available licenses:', licenses.value))
+
+const emit = defineEmits<{ (e: 'selectLicense', license: License): void }>();
+</script>
+<template>
+  <ScrollArea class="h-full flex">
+    <div class="flex-1 flex flex-col gap-2 p-4 pt-0">
+      <TransitionGroup name="list" appear>
+        <button v-for="license in licenses"
+                :key="license.id"
+                :class="cn('flex flex-col items-start gap-2 rounded-lg border p-3 text-left text-sm transition-all hover:bg-accent',
+                             selectedLicense?.id === license.id && 'bg-muted',)"
+                @click="selectedLicense = license">
+          <div class="flex w-full flex-col gap-1">
+            <div class="flex items-center">
+              <div class="flex items-center gap-2">
+                <div class="font-semibold">
+                  {{ license.name }}
+                </div>
+              </div>
+            </div>
+
+            <div class="text-xs font-medium">
+              {{ license.id }}
+            </div>
+          </div>
+          <div class="line-clamp-2 text-xs text-muted-foreground">
+            {{ license.description }}
+            <!-- {{ item.message.substring(0, 300) }} -->
+            <!--{{ item.text.substring(0, 300) }}-->
+          </div>
+          <div class="flex items-center gap-2">
+            <Badge v-if="license.terms.includes('Creative Commons')" variant="outline">CC</Badge>
+            <!-- TODO: Badges (?)
+            <Badge v-if="item.requester.User" variant="secondary">User</Badge>
+            <Badge v-if="item.requester.User?.impersonated_by" variant="default">Impersonated</Badge>
+            <Badge v-if="item.requester.User?.auth_method.Oidc" variant="default">OIDC</Badge>
+            <Badge v-if="item.requester.User?.auth_method.Aruna" variant="default">Aruna</Badge>
+            -->
+          </div>
+        </button>
+      </TransitionGroup>
+    </div>
+  </ScrollArea>
+</template>
\ No newline at end of file

From 25aae0d5d046f013f5b5cd7188cd108f402252e9 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Fri, 24 Jan 2025 16:21:29 +0100
Subject: [PATCH 090/125] chore: Adjusted headline of events module

---
 components/custom-ui/dashboard/Events.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/custom-ui/dashboard/Events.vue b/components/custom-ui/dashboard/Events.vue
index 06ab1ce2..8eaa7921 100644
--- a/components/custom-ui/dashboard/Events.vue
+++ b/components/custom-ui/dashboard/Events.vue
@@ -75,7 +75,7 @@ function onExpand() {
         <Tabs default-value="all" class="h-full">
           <div class="flex items-center px-4 py-2">
             <h1 class="text-xl font-bold">
-              Inbox
+              Personal Events
             </h1>
             <TabsList class="ml-auto">
               <TabsTrigger value="all" class="text-zinc-600 dark:text-zinc-200">

From b7ac9c14d47fce843ef30cebe875001742d27bea Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 27 Jan 2025 15:32:02 +0100
Subject: [PATCH 091/125] chore: Update v3 API definition

---
 types/aruna-v3.d.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/types/aruna-v3.d.ts b/types/aruna-v3.d.ts
index 2c2d7c97..ce2584d2 100644
--- a/types/aruna-v3.d.ts
+++ b/types/aruna-v3.d.ts
@@ -966,6 +966,8 @@ export type components = {
     GetRelationsResponse: {
       offset?: number | null;
       relations: components["schemas"]["Relation"][];
+      /** Format: int32 */
+      total_hits: number;
     };
     GetResourcesResponse: {
       resources: components["schemas"]["Resource"][];

From 053397a79af51aec6dddaca986a11aedc0e66a3f Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 27 Jan 2025 15:33:29 +0100
Subject: [PATCH 092/125] feat: Add rudimentary pagination to FileExplorer

---
 .../custom-ui/dashboard/FileExplorer.vue      | 361 ++++++++++++++----
 1 file changed, 285 insertions(+), 76 deletions(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index cbe1d77b..0a6914ea 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import {
   IconCheck,
+  IconEdit,
   IconExclamationCircle,
   IconFile,
   IconFolder,
@@ -9,14 +10,21 @@ import {
   IconInfoCircle,
   IconLoader3,
   IconLock,
+  IconLockOpen2,
   IconPlus,
   IconTreadmill,
   IconUpload,
   IconWorld,
+  IconX
 } from '@tabler/icons-vue'
 import {Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator,} from '@/components/ui/breadcrumb'
 
-import type {GetRelationsResponse, ResourceElement} from "~/composables/api_wrapper"
+import type {
+  CreateResourceRequest,
+  GetRelationsResponse,
+  ResourceElement,
+  SimpleCredentials
+} from "~/composables/api_wrapper"
 import {fetchChildren} from "~/composables/api_wrapper";
 import {ResourceVariant, SyncingStatus, VisibilityClass} from "~/types/aruna-v3-enums"
 import {toast} from "~/components/ui/toast";
@@ -52,23 +60,34 @@ const licenses = [
 import {useDropZone} from "@vueuse/core"
 import KeyValueDialog from "~/components/custom-ui/dialog/KeyValueDialog.vue";
 import AuthorDialog from "~/components/custom-ui/dialog/AuthorDialog.vue";
+import {Upload} from "@aws-sdk/lib-storage";
+import {S3Client} from "@aws-sdk/client-s3";
+import type {S3ClientConfig} from "@aws-sdk/client-s3/dist-types/S3Client";
+import {PaginationFirst, PaginationPrev} from "~/components/ui/pagination";
 
 const dropZoneRef = ref<HTMLDivElement>()
 
-// Object meta
+// File upload meta
 const fileUpload = ref<File | null>(null)
 const fileName = ref<string | null>(null)
 const fileTitle = ref<string | null>(null)
+const fileDescription = ref<string | null>(null)
+const fileLicense = ref<string | null>(null)
+const fileAuthors = ref<Map<string, Author>>(new Map())
+const fileLabels = ref<Map<string, KeyValue>>(new Map())
 const parent = ref<ResourceElement | null>(null)
+const fileUploadProgress = ref<number>(0)
+watch(fileUploadProgress, (v) => console.info('[FileExplorer] Upload progress:', v))
 
 function onDrop(files: File[] | null) {
-  // called when files are dropped on zone
-  console.log('[FileExplorer] Dropped files:', files)
-
   if (files && files.length > 0) {
+    //Clear meta info context
+    infoSelection.value = undefined
+
+    // Set file upload context and open sidebar
     fileUpload.value = files[0]
     fileName.value = fileUpload.value.name
-    parent.value = currentHierarchy.value[currentHierarchy.value.length - 1]
+    parent.value = currentHierarchy.value[currentHierarchy.value.length - 1]  // Last element of current hierarchy
 
     infoOpen.value = true
   }
@@ -76,11 +95,19 @@ function onDrop(files: File[] | null) {
 
 const {isOverDropZone} = useDropZone(dropZoneRef, {
   onDrop,
-  // control multi-file drop
+  // Control multi-file drop
   multiple: false,
-  // whether to prevent default behavior for unhandled events
+  // Whether to prevent default behavior for unhandled events
   preventDefaultForUnhandled: false,
 })
+
+function updateProgress(current: number, total: number | undefined) {
+  if (!total)
+    return 0
+  const floatProgress = current / total * 100
+  fileUploadProgress.value = +floatProgress.toFixed(2)
+}
+
 /* ----- End Dropzone ----- */
 
 
@@ -117,7 +144,7 @@ watchEffect(async () => {
     //}
 
     // Fetch children
-    const children: ResourceElement[] = await fetchChildren(currentResource.id)
+    const children: ResourceElement[] = await fetchChildren(currentResource.id, offset.value, pageSize.value)
 
     // Add to loaded resources
     addChildren(loadedResources.value, currentResource.id, children)
@@ -135,8 +162,22 @@ function openInfo(resource: ResourceElement) {
 }
 
 function closeInfo() {
-  fileUpload.value = null
+  // Clear meta info context
   infoOpen.value = false
+  infoSelection.value = undefined
+
+  // Clear file upload context
+  clearFileMeta()
+}
+
+function clearFileMeta() {
+  fileUpload.value = null
+  fileName.value = null
+  fileTitle.value = null
+  fileDescription.value = null
+  fileLicense.value = null
+  fileLabels.value.clear()
+  fileAuthors.value.clear()
 }
 
 async function deleteResource(resource: ResourceElement) {
@@ -149,10 +190,13 @@ async function deleteResource(resource: ResourceElement) {
 }
 
 function navigateBack(resourceId: string) {
-  // Clear met info field:
+  // Clear meta info context
   infoOpen.value = false
   infoSelection.value = undefined
 
+  // Clear file upload context
+  clearFileMeta()
+
   // Navigate
   if (resourceId === 'root') {
     currentHierarchy.value = []
@@ -163,7 +207,6 @@ function navigateBack(resourceId: string) {
 }
 
 async function navigateForward(element: ResourceElement) {
-
   // Check if is locked
   if (element.variant === ResourceVariant.Object || element.locked)
     return
@@ -174,15 +217,18 @@ async function navigateForward(element: ResourceElement) {
     query: {
       node: element.id,
       direction: 'Outgoing',
-      offset: 0,
-      page_size: Number.MAX_SAFE_INTEGER
+      offset: offset.value, //0,
+      page_size: pageSize.value //Number.MAX_SAFE_INTEGER
     }
   }).then(response => {
     console.info('[Navigate Forward] Fetched relations:', response.relations)
-    //return response.relations.filter(rel => rel.relation_type === 'HasPart').map(rel => rel.to_id)
+
+    element.count = response.total_hits
+    totalHits.value = response.total_hits
     currentHierarchy.value.push(element)
     infoOpen.value = false
     infoSelection.value = undefined
+    clearFileMeta()
   }).catch(error => {
     console.dir(error.data)
     if (error.data.statusCode === 403) {
@@ -204,15 +250,6 @@ async function navigateForward(element: ResourceElement) {
       })
     }
   })
-
-
-  /*
-  if (element.variant != ResourceVariant.Object) {
-    currentHierarchy.value.push(element)
-    infoOpen.value = false
-    infoSelection.value = undefined
-  }
-  */
 }
 
 function addChildren(array: ResourceElement[], id: string, children: ResourceElement[]): ResourceElement | undefined {
@@ -229,12 +266,6 @@ function addChildren(array: ResourceElement[], id: string, children: ResourceEle
   }
 }
 
-const actions = [
-  //{name: 'Upload', icon: IconUpload},
-  {name: 'Create', icon: IconPlus},
-  //{name: 'Download', icon: IconDownload},
-]
-
 function emitTabSwitch(tabId: string) {
   EventBus.emit('setTab', tabId);
 }
@@ -247,6 +278,118 @@ function checkDirection(): 'horizontal' | 'vertical' {
     return 'vertical'
   }
 }
+
+async function submitUpload() {
+  await $fetch<GetS3CredentialsFromUserResponse>('/api/v3/credentials')
+      .then(async response => {
+
+        //TODO: Finish GetS3Credentials when it also returns secret
+        return {
+          access_key: '01JGXX8S57F7MDKGKBNM5MJSVK.3',
+          secret_key: '9f829eef9778c246d8f1b549dd9ee8525df6cc65f9bc0763559eaccb15ada1521af0be7f6c0d6d70b58efc24eb8340541bf98b630bbee818b9b56334bee48859',
+        }
+
+        // Check if S3 credentials for data proxy exist
+        for (const token of response.tokens) {
+          if (token.token_info.component_id === '<Component-Id>')
+            return {
+              access_key: token.access_key,
+              secret_key: '<Secret-Key>'
+            }
+        }
+        // No credentials found
+        throw new Error(`No S3 credentials available for component: <Component-Id>`)
+
+      }).then(async credentials => {
+        console.info('[FileUpload] Credentials:', credentials)
+        const request = {
+          variant: ResourceVariant.Object,
+          parent_id: parent.value?.id,
+          name: fileName.value,
+          title: fileTitle.value,
+          description: fileDescription.value,
+          license_id: fileLicense.value,
+          labels: [], //TODO: Map to Array
+          authors: [], //TODO: Map to Array
+          visibility: VisibilityClass.Public,
+          identifiers: []
+        } as CreateResourceRequest
+
+        //TODO: Finish create Object resource when the Aruna Data service is able to process events
+        /*
+        await $fetch<CreateResourceResponse>('/api/v3/resource', {
+          method: 'POST',
+          body: request
+        })
+        */
+
+        return [credentials, 'http://localhost:1337']
+
+      }).then(async ([credentials, endpoint_url]) => {
+        //TODO: Upload data via S3
+        // Create S3 client for staging object
+        const s3client = new S3Client({
+          endpoint: endpoint_url,
+          region: 'region-one',
+          credentials: {
+            accessKeyId: (credentials as SimpleCredentials).access_key,
+            secretAccessKey: (credentials as SimpleCredentials).secret_key,
+          }
+        } as S3ClientConfig)
+
+        const bucket = currentHierarchy.value[0].name
+        const pathParts = currentHierarchy.value.slice(1)
+        const key = pathParts.length > 0 ? `${pathParts.join('/')}/${fileUpload.value?.name}` : fileUpload.value?.name
+
+        console.info('[FileExplorer] Bucket and key:', bucket, currentHierarchy.value.slice(1), key, `${endpoint_url}/${bucket}/${key}`)
+
+        if (fileUpload.value) {
+          const upload = new Upload({
+            client: s3client as S3Client,
+            queueSize: 4, // 4 uploads concurrently
+            partSize: fileUpload.value.size > 5 * 1024 * 1024 * 1024 ? 50 * 1024 * 1024 : 5 * 1024 * 1024, // 5MiB parts up to 5GiB; then 50MiB parts
+            leavePartsOnError: false, // Remove uploaded parts on error
+            params: {
+              Bucket: bucket,
+              Key: key as string,
+              Body: fileUpload.value
+            },
+          })
+
+          // Update progress bar value
+          upload.on("httpUploadProgress", progress =>
+              updateProgress(progress.loaded ? progress.loaded : 0, progress.total))
+
+          // Do something after upload succeeded
+          return await upload.done() //.then(() => console.log('Upload succeeded'))
+        }
+
+        throw new Error('No file selected... that is very late...')
+
+      }).then(response => {
+        console.log(`Upload completed with status code: ${response.$metadata.httpStatusCode}`)
+      }).catch(error => {
+        console.error('[FileExplorer Client] Upload error:', error.data)
+        toast({
+          title: 'Error',
+          description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'},
+              h('code', {class: 'text-white'}, JSON.stringify(error.message, null, 2))),
+          duration: -1
+        })
+      })
+}
+
+
+// ----- Pagination ---------- //
+const currentPage = ref<number>(1)
+const pageSize = ref<number>(3)
+const totalHits = ref<number>(6)
+const offset = computed(() => (currentPage.value-1) * pageSize.value)// currentPage.value * pageSize.value) //
+watch(offset, () => {
+  console.info(`[FileExplorer] Current page: ${currentPage.value}, Current page size: ${pageSize.value}, Current offset: ${offset.value}`)
+  console.info('[FileExplorer] Current resource children:', currentHierarchy.value[currentHierarchy.value.length - 1].children.length)
+})
+// ----- End Pagination ---------- //
 </script>
 <template>
   <div class="flex flex-col h-full w-full py-6 ps-6">
@@ -256,18 +399,19 @@ function checkDirection(): 'horizontal' | 'vertical' {
         <Breadcrumb>
           <BreadcrumbList class="text-aruna-text-accent">
             <BreadcrumbItem @click="navigateBack('root')"
-                            class="hover:cursor-pointer">Your Projects
+                            class="hover:cursor-pointer">
+              Your Projects
             </BreadcrumbItem>
-            <div v-for="ele in currentHierarchy"
+            <div v-for="resource in currentHierarchy"
                  class="flex items-center justify-center gap-2.5">
               <BreadcrumbSeparator/>
-              <BreadcrumbItem v-if="ele.variant !== ResourceVariant.Object"
-                              @click="navigateBack(ele.id)"
+              <BreadcrumbItem v-if="resource.variant !== ResourceVariant.Object"
+                              @click="navigateBack(resource.id)"
                               class="hover:cursor-pointer">
-                {{ !ele.deleted ? ele.name : 'DELETED' }}
+                {{ !resource.deleted ? resource.name : 'DELETED' }}
               </BreadcrumbItem>
               <BreadcrumbItem v-else>
-                {{ !ele.deleted ? ele.name : 'DELETED' }}
+                {{ !resource.deleted ? resource.name : 'DELETED' }}
               </BreadcrumbItem>
             </div>
           </BreadcrumbList>
@@ -276,19 +420,65 @@ function checkDirection(): 'horizontal' | 'vertical' {
 
       <!-- Action Buttons -->
       <div class="flex items-center gap-4">
-        <button v-for="action in actions"
-                :key="action.name"
+        <!--<Select v-model:model-value="pageSize">-->
+        <Select @update:modelValue="(v) => pageSize = parseInt(v)" :default-value="3">
+          <SelectTrigger class="w-[180px]">
+            <SelectValue>Page size: {{ pageSize }}</SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectLabel>Page Size</SelectLabel>
+              <SelectItem v-for="size in ['3','5','10','15','25','50','100']" :value="size">{{ size }}</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+
+        <Button key="create"
                 @click="emitTabSwitch('ResourceCreation')"
-                class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-9 rounded-md px-3">
-          <component :is="action.icon"
-                     class="h-4 w-4 mr-2"/>
-          {{ action.name }}
-        </button>
+                class="inline-flex w-fit bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+          <IconPlus class="h-4 w-4 mr-2"/>
+          Create
+        </Button>
       </div>
       <!-- End Action Buttons -->
     </div>
     <!-- End Header -->
 
+    <!-- Pagination -->
+    <div class="my-2 flex">
+      <Pagination v-if="currentHierarchy.length > 1 && totalHits > pageSize"
+                  v-slot="{ page }"
+                  :total="totalHits"
+                  :items-per-page="pageSize"
+                  :sibling-count="1"
+                  :default-page="1"
+                  show-edges>
+        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
+          <PaginationFirst class="w-8 h-8 p-0 rounded-sm border-aruna-text bg-aruna-bg"/>
+          <PaginationPrev class="w-8 h-8 p-0 rounded-sm border-aruna-text bg-aruna-bg"/>
+
+          <template v-for="(item, index) in items">
+            <PaginationListItem v-if="item.type === 'page'"
+                                :key="index"
+                                :value="item.value"
+                                class="rounded-sm"
+                                as-child>
+              <Button class="w-9 h-9 p-0"
+                      :variant="item.value === page ? 'default' : 'outline'"
+                      @click="currentPage = item.value">
+                {{ item.value }}
+              </Button>
+            </PaginationListItem>
+            <PaginationEllipsis v-else :key="item.type" :index="index" />
+          </template>
+
+          <PaginationNext />
+          <PaginationLast />
+        </PaginationList>
+      </Pagination>
+    </div>
+    <!-- End Pagination -->
+
     <ResizablePanelGroup id="file-explorer-list"
                          :direction="checkDirection()"
                          class="h-full">
@@ -306,11 +496,11 @@ function checkDirection(): 'horizontal' | 'vertical' {
         <!-- Flexbox Resource Display -->
         <div class="flex flex-row flex-wrap content-start items-start justify-start gap-x-6 gap-y-6 my-4">
           <Card v-for="resource in displayedResources"
-                class="rounded-sm border-aruna-text/50 flex flex-col items-center justify-center min-w-[200px] max-w-[300px] h-fit"
-                @dblclick="navigateForward(resource)">
+                class="rounded-sm border-aruna-text/50 flex flex-col items-center justify-center min-w-[200px] max-w-[300px] h-fit">
             <CardContent class="p-0 flex flex-col items-center w-full">
               <div class="w-full flex gap-x-2">
-                <div class="group flex flex-col grow py-4 ps-4 items-center justify-center">
+                <div class="group flex flex-col grow py-4 ps-4 items-center justify-center"
+                     @dblclick="navigateForward(resource)">
                   <div class="flex h-fit w-full items-center justify-center">
                     <IconWorld v-if="resource.variant === ResourceVariant.Project"
                                :class="{'text-destructive group-hover:text-destructive': resource.deleted}"
@@ -350,7 +540,7 @@ function checkDirection(): 'horizontal' | 'vertical' {
                 class="min-w-[200px] py-4 px-2 h-fit flex items-center justify-center rounded-sm border border-dashed border-aruna-highlight transition-all ease-in-out delay-50 duration-250"
                 :class="{'bg-aruna-highlight/25': isOverDropZone}"
                 ref="dropZoneRef">
-            <CardContent>
+            <CardContent class="py-0">
               <div class="flex flex-col gap-y-6 items-center justify-center text-aruna-highlight">
                 <IconUpload class="h-12 w-12"/>
                 Drop your file here
@@ -381,7 +571,10 @@ function checkDirection(): 'horizontal' | 'vertical' {
         <!-- End no resources display -->
       </ResizablePanel>
       <ResizableHandle v-if="infoOpen" id="file-explorer-handle" class="mt-2" with-handle/>
-      <ResizablePanel v-if="infoOpen" id="file-explorer-info" :default-size="25" :min-size="25" :max-size="50">
+      <ResizablePanel v-if="infoOpen" id="file-explorer-sidebar"
+                      :default-size="25"
+                      :min-size="25"
+                      :max-size="50">
         <!-- Flexbox file meta display -->
         <div style="transition-behavior: allow-discrete;"
              :class="{'visible flex translate-x-0 ' : infoOpen, 'invisible hidden translate-x-full' : !infoOpen}"
@@ -408,23 +601,6 @@ function checkDirection(): 'horizontal' | 'vertical' {
               </TableBody>
             </Table>
 
-            <!--
-            <dl class="flex flex-col">
-              <div class="flex gap-x-4">
-                <dt class="text-aruna-text-accent">Name:</dt>
-                <dd class="text-aruna-text truncate overflow-ellipsis">{{ fileUpload.name }}</dd>
-              </div>
-              <div class="flex gap-x-4">
-                <dt class="text-aruna-text-accent">Size:</dt>
-                <dd class="text-aruna-text">{{ formatBytes(fileUpload.size) }}</dd>
-              </div>
-              <div class="flex gap-x-4">
-                <dt class="text-aruna-text-accent">Type:</dt>
-                <dd class="text-aruna-text truncate overflow-ellipsis">{{ fileUpload.type || 'N/A' }}</dd>
-              </div>
-            </dl>
-            -->
-
             <Separator class="bg-aruna-text/50 my-4"/>
 
             <Label for="description">Description</Label>
@@ -436,24 +612,60 @@ function checkDirection(): 'horizontal' | 'vertical' {
                                    focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
                                    disabled:opacity-50 disabled:pointer-events-none"/>
 
-            <div class="flex sm:flex-col w-fit gap-y-4">
-              <Label for="labels">Labels</Label>
-              <KeyValueDialog :initial-open="false" :with-button="true"/>
+            <div class="flex sm:flex-col w-full gap-y-1">
+              <KeyValueDialog :initial-open="false"
+                              :with-button="true"
+                              button-css="w-fit"
+                              button-label="Add Label"
+                              @add-key-value="(v: KeyValue) => fileLabels.set(v.key, v)"/>
+
+              <div class="p-1 gap-2 flex flex-wrap items-center">
+                <div v-for="[key, label] in fileLabels" class="h-fit flex justify-center">
+                  <span class="flex justify-center items-center rounded-s-sm border border-aruna-highlight">
+                    <IconLock v-if="label.locked" class="m-0.5 flex-shrink-0 size-5"/>
+                    <IconLockOpen2 v-else class="m-0.5 flex-shrink-0 size-5"/>
+                  </span>
+                  <span class="flex justify-center px-1 items-center border border-aruna-highlight text-sm text-aruna-highlight">
+                        {{ key }}
+                      </span>
+                  <span v-if="label.value"
+                        class="flex justify-center px-1 items-center max-w-48 text-sm truncate overflow-ellipsis border border-aruna-highlight bg-aruna-highlight text-aruna-text-accent">
+                    {{ label.value }}
+                  </span>
+                  <span class="group flex justify-center items-center rounded-e-sm border border-aruna-highlight hover:cursor-pointer">
+                    <Button variant="ghost"
+                            class="h-fit px-2 py-0 hover:bg-transparent"
+                            @click="fileLabels.delete(label.key)">
+                  <IconX class="flex-shrink-0 size-4 text-aruna-text group-hover:text-destructive"/>
+                </Button>
+                  </span>
+                </div>
+              </div>
             </div>
 
             <div class="flex sm:flex-col w-fit gap-y-4">
               <Label for="authors">Authors</Label>
-              <AuthorDialog :initial-open="false" :with-button="true"/>
+              <AuthorDialog :initial-open="false"
+                            :with-button="true"
+                            button-css="w-fit"
+                            @add-author="(v: Author) => fileAuthors.set(`${v.email}`, v)"/>
+
+              <ul v-if="fileAuthors.size > 0" class="ps-6 list-disc">
+                <li v-for="[key, author] in fileAuthors" class="text-aruna-text">
+                  {{ author.first_name }} {{ author.last_name }} | {{ author.email }}
+                </li>
+              </ul>
             </div>
 
             <Label for="license">License</Label>
-            <Select>
+            <Select :default-value="licenses[0].id"
+                    @update:model-value="(v) => fileLicense = v">
               <SelectTrigger class="bg-aruna-muted w-full max-w-[450px]">
                 <SelectValue placeholder="Select a license for your resource"/>
               </SelectTrigger>
               <SelectContent class="bg-aruna-bg/90 truncate overflow-ellipsis">
                 <SelectGroup>
-                  <SelectItem v-for="license in licenses" :value="license.tag"
+                  <SelectItem v-for="license in licenses" :value="license.id"
                               class="hover:bg-aruna-fg">
                     {{ license.label }}
                   </SelectItem>
@@ -552,7 +764,7 @@ function checkDirection(): 'horizontal' | 'vertical' {
               <TableRow>
                 <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Locked:</TableCell>
                 <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ infoSelection?.locked || 'N/A' }}
+                  {{ infoSelection?.locked }}
                 </TableCell>
               </TableRow>
               <TableRow>
@@ -574,8 +786,7 @@ function checkDirection(): 'horizontal' | 'vertical' {
           <div class="flex gap-x-4">
             <Button v-if="fileUpload"
                     variant="outline"
-                    @click="console.log('Create resource and upload file')"
-                    disabled
+                    @click="submitUpload"
                     class="inline-flex w-fit bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
               Upload
             </Button>
@@ -597,7 +808,5 @@ function checkDirection(): 'horizontal' | 'vertical' {
         <!-- End Flexbox file meta display -->
       </ResizablePanel>
     </ResizablePanelGroup>
-
-
   </div>
 </template>

From 6192a158873e324a9cb582340e6ee889d29c09ea Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 27 Jan 2025 16:40:20 +0100
Subject: [PATCH 093/125] refactor: Adapt AuthorDialog to v3

---
 components/custom-ui/dialog/AuthorDialog.vue | 45 +++++++++++---------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/components/custom-ui/dialog/AuthorDialog.vue b/components/custom-ui/dialog/AuthorDialog.vue
index 7875240c..ba13aeea 100644
--- a/components/custom-ui/dialog/AuthorDialog.vue
+++ b/components/custom-ui/dialog/AuthorDialog.vue
@@ -19,7 +19,6 @@ import {
 } 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'
@@ -28,6 +27,7 @@ import * as z from 'zod'
 const props = defineProps<{
   initialOpen: boolean,
   withButton: boolean,
+  buttonLabel?: string
   buttonCss?: string
 }>()
 const externalTrigger = toRef(props, 'initialOpen')
@@ -37,7 +37,7 @@ watch(externalTrigger, () => open.value = externalTrigger.value)
 
 /* ----- EVENT EMITS ----- */
 const emit = defineEmits<{
-  'add-author': [relation: v2Author]
+  'add-author': [relation: Author]
 }>()
 /* ----- END EVENT EMITS ----- */
 
@@ -46,7 +46,7 @@ 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(),
+  identifier: z.string().optional(), //z.string().regex(ORCID_REGEX, 'Not a valid ORCID').optional(),
   userId: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
 }))
 
@@ -55,13 +55,16 @@ const form = useForm({
 })
 
 const onSubmit = form.handleSubmit(async (values) => {
+  console.info('[AuthorDialog] Submit values:', values)
   emit('add-author', {
-    firstName: values.firstName,
-    lastName: values.lastName,
+    id: values.userId || '',
+    first_name: values.firstName,
+    last_name: values.lastName,
     email: values.email || '',
-    orcid: values.orcid || '',
-    id: values.userId || ''
-  })})
+    identifier: values.identifier || ''
+  })
+  open.value = false
+})
 /* ----- END FORM SCHEMA ----- */
 </script>
 
@@ -70,19 +73,19 @@ const onSubmit = form.handleSubmit(async (values) => {
     <DialogTrigger v-if="withButton" as-child>
       <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 Author
+        {{ buttonLabel || '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">
+        <DialogTitle class="mb-2 text-center text-aruna-highlight font-bold">Add Author</DialogTitle>
+        <DialogDescription class="text-aruna-text text-center">
           Add an additional author to the resource.
         </DialogDescription>
       </DialogHeader>
 
-      <form id="dialogForm" @submit="onSubmit" class="space-y-4">
+      <form id="authorForm" @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">
@@ -114,7 +117,7 @@ const onSubmit = form.handleSubmit(async (values) => {
               <FormLabel>Email</FormLabel>
               <Popover>
                 <PopoverTrigger>
-                  <IconHelp class="size-4 text-aruna-800 font-bold"/>
+                  <IconHelp class="size-4 text-aruna-highlight font-bold"/>
                 </PopoverTrigger>
                 <PopoverContent class="text-sm rounded-sm">
                   A valid email address that can be used to contact the author.
@@ -131,18 +134,18 @@ const onSubmit = form.handleSubmit(async (values) => {
         <FormField v-slot="{ componentField }" name="orcid">
           <FormItem>
             <FormLabel class="flex items-center justify-between">
-              <span>ORCID</span>
+              <span>Identifier</span>
               <Popover>
                 <PopoverTrigger>
-                  <IconHelp class="size-4 text-aruna-800 font-bold"/>
+                  <IconHelp class="size-4 text-aruna-highlight font-bold"/>
                 </PopoverTrigger>
                 <PopoverContent class="text-sm rounded-sm">
-                  If available, you can enter the ORCID of the author here.
+                  If available, you can enter an external identifier of the author here.
                 </PopoverContent>
               </Popover>
             </FormLabel>
             <FormControl>
-              <Input type="text" placeholder="Author's ORCID" v-bind="componentField"/>
+              <Input type="text" placeholder="Other identifiers of the Author, e.g. ORCID" v-bind="componentField"/>
             </FormControl>
             <FormMessage/>
           </FormItem>
@@ -154,10 +157,10 @@ const onSubmit = form.handleSubmit(async (values) => {
               <span>User Id</span>
               <Popover>
                 <PopoverTrigger>
-                  <IconHelp class="size-4 text-aruna-800 font-bold"/>
+                  <IconHelp class="size-4 text-aruna-highlight font-bold"/>
                 </PopoverTrigger>
                 <PopoverContent class="text-sm rounded-sm">
-                  If available, you can enter the Aruna user id of the author here.
+                  If available, you can enter the author's Aruna user id here to automagically fill the fields.
                 </PopoverContent>
               </Popover>
             </FormLabel>
@@ -170,7 +173,9 @@ const onSubmit = form.handleSubmit(async (values) => {
       </form>
 
       <DialogFooter>
-        <Button type="submit" form="dialogForm" class="bg-aruna-800 hover:bg-aruna-700">
+        <Button type="submit"
+                form="authorForm"
+                class="w-fit bg-transparent border border-aruna-highlight text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
           Add Author
         </Button>
       </DialogFooter>

From 0c3a545b1bd7ef3887f67bfce1998b188a853793 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 28 Jan 2025 08:33:58 +0100
Subject: [PATCH 094/125] chore: Remove unused user_id field from AuthorDialog

---
 components/custom-ui/dialog/AuthorDialog.vue | 27 +++-----------------
 1 file changed, 4 insertions(+), 23 deletions(-)

diff --git a/components/custom-ui/dialog/AuthorDialog.vue b/components/custom-ui/dialog/AuthorDialog.vue
index ba13aeea..68743ac9 100644
--- a/components/custom-ui/dialog/AuthorDialog.vue
+++ b/components/custom-ui/dialog/AuthorDialog.vue
@@ -47,7 +47,6 @@ const formSchema = toTypedSchema(z.object({
   lastName: z.string({required_error: "Last name is required."}).min(2).max(128),
   email: z.string().email('Invalid email format.').optional(),
   identifier: z.string().optional(), //z.string().regex(ORCID_REGEX, 'Not a valid ORCID').optional(),
-  userId: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
 }))
 
 const form = useForm({
@@ -57,7 +56,7 @@ const form = useForm({
 const onSubmit = form.handleSubmit(async (values) => {
   console.info('[AuthorDialog] Submit values:', values)
   emit('add-author', {
-    id: values.userId || '',
+    id: '', //TODO: Will be added with search
     first_name: values.firstName,
     last_name: values.lastName,
     email: values.email || '',
@@ -85,6 +84,8 @@ const onSubmit = form.handleSubmit(async (values) => {
         </DialogDescription>
       </DialogHeader>
 
+      <!-- TODO: Search field for users to auto-fill fields -->
+
       <form id="authorForm" @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">
@@ -131,7 +132,7 @@ const onSubmit = form.handleSubmit(async (values) => {
           </FormItem>
         </FormField>
 
-        <FormField v-slot="{ componentField }" name="orcid">
+        <FormField v-slot="{ componentField }" name="identifier">
           <FormItem>
             <FormLabel class="flex items-center justify-between">
               <span>Identifier</span>
@@ -150,26 +151,6 @@ const onSubmit = form.handleSubmit(async (values) => {
             <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-highlight font-bold"/>
-                </PopoverTrigger>
-                <PopoverContent class="text-sm rounded-sm">
-                  If available, you can enter the author's Aruna user id here to automagically fill the fields.
-                </PopoverContent>
-              </Popover>
-            </FormLabel>
-            <FormControl>
-              <Input type="text" placeholder="Author's user id in Aruna" v-bind="componentField"/>
-            </FormControl>
-            <FormMessage/>
-          </FormItem>
-        </FormField>
       </form>
 
       <DialogFooter>

From 329e5ae2d75cb47cffbea048aee35b3dd8e9e77c Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 28 Jan 2025 08:34:45 +0100
Subject: [PATCH 095/125] refactor: Emit KeyValue instead of single values from
 OntologyDialog

---
 components/custom-ui/dialog/OntologyDialog.vue | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/custom-ui/dialog/OntologyDialog.vue b/components/custom-ui/dialog/OntologyDialog.vue
index 58c770fe..be2d15ff 100644
--- a/components/custom-ui/dialog/OntologyDialog.vue
+++ b/components/custom-ui/dialog/OntologyDialog.vue
@@ -26,7 +26,7 @@ watch(externalTrigger, () => (open.value = externalTrigger.value))
 
 /* ----- EMITS ----- */
 const emit = defineEmits<{
-  'add-key-value': [key: string, value: string, locked: boolean]
+  'add-key-value': [keyValue: KeyValue]
 }>()
 /* ----- END EMITS ----- */
 
@@ -85,9 +85,11 @@ function createMetadataLink(id: string) {
 
 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)}"}`, true)
+    emit('add-key-value', {
+      key: 'http://purl.org/dc/terms/conformsTo',
+      value: `{"@type": "CreativeWork", "@id": "${currentSelection.value.iri}", "url": "${createMetadataLink(currentSelection.value.id)}"}`,
+      locked: true
+    })
     clear()
     open.value = false
   }

From 5f0b94449e47ce4dd1f13418bfb65e464d85bddc Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 28 Jan 2025 08:39:56 +0100
Subject: [PATCH 096/125] feat: Integrate updated dialogs into resource
 creation form

---
 components/custom-ui/ResourceCreation.vue | 80 ++++++++---------------
 1 file changed, 29 insertions(+), 51 deletions(-)

diff --git a/components/custom-ui/ResourceCreation.vue b/components/custom-ui/ResourceCreation.vue
index a1addd47..085777df 100644
--- a/components/custom-ui/ResourceCreation.vue
+++ b/components/custom-ui/ResourceCreation.vue
@@ -173,7 +173,7 @@ const onSubmit = handleSubmit(async (values) => {
     visibility: values.visibility,
     identifiers: values.identifiers,
     license_tag: values.license_tag,
-    authors: values.authors,
+    authors: Array.from(authors.value.values()),
     labels: Array.from(keyValues.value.values()),
   }
 
@@ -214,10 +214,8 @@ const onSubmit = handleSubmit(async (values) => {
 /* ----- End Form Schema ----- */
 
 /* ----- Resource Authors ----- */
-const authors: Ref<Map<string, v2Author>> = ref(new Map())
-const authorDialogOpen = ref(false);
-
-function addAuthor(author: v2Author) {
+const authors: Ref<Map<string, Author>> = ref(new Map())
+function addAuthor(author: Author) {
   authors.value.set(getUniqueId(), author)
 }
 
@@ -229,11 +227,8 @@ function removeAuthor(key: string) {
 
 /* ----- Resource key-values ----- */
 const keyValues: Ref<Map<string, KeyValue>> = ref(new Map())
-const keyValueDialogOpen = ref(false);
-//const ontologyDialogOpen = ref(false);
-
-function addKeyValue(key: string, val: string, locked: boolean) {
-  keyValues.value.set(key, {key: key, value: val, locked: locked} as KeyValue)
+function addKeyValue(keyValue: KeyValue) {
+  keyValues.value.set(keyValue.key, keyValue)
 }
 
 function removeKeyValue(key: string) {
@@ -256,10 +251,10 @@ function updateProgress(current: number, total: number | undefined) {
 
 // ----- Helper functions -----
 let id = 0
-
 function getUniqueId(): string {
   return id++ + '';
 }
+// ----- End Helper functions -----
 
 /*
 function textAreaAutoHeight(domElement: HTMLTextAreaElement | null, offset = 0) {
@@ -788,15 +783,13 @@ async function waitForSync(s3client: S3Client, bucket: string, key: string): Pro
                       :collapsible="true">
         <div class="flex flex-col basis-1/2 h-full p-4">
           <div class="flex px-4 grow flex-row md:flex-col overflow-x-auto">
-            <div class="flex flex-row mb-2 justify-start items-center">
-              <label for="key-values-input"
-                     class="block text-lg font-medium text-aruna-text-accent">Authors</label>
-              <button
-                  type="button"
-                  @click="authorDialogOpen = true"
-                  class="ms-4 inline-flex items-center gap-x-2 m-0.5 p-0.5 border border-aruna-text-accent rounded-md text-aruna-text-accent 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>
+            <div class="flex flex-row mb-2 justify-start items-center gap-x-4">
+              <span class="block text-lg font-medium text-aruna-text-accent">Authors</span>
+              <AuthorDialog :initial-open="false"
+                            :with-button="true"
+                            button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
+                            button-label="Add"
+                            @add-author="(author: Author) => addAuthor(author)"/>
             </div>
 
             <div class="-m-1.5 overflow-x-auto">
@@ -812,7 +805,7 @@ async function waitForSync(s3client: S3Client, bucket: string, key: string): Pro
                         Email
                       </th>
                       <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                        Orcid
+                        External Identifier
                       </th>
                       <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
                         Actions
@@ -820,15 +813,15 @@ async function waitForSync(s3client: S3Client, bucket: string, key: string): Pro
                     </tr>
                     </thead>
                     <tbody class="divide-y divide-aruna-text/50">
-                    <tr v-for="[key, value] in authors">
+                    <tr v-for="[key, author] in authors">
                       <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                        {{ value.firstName }} {{ value.lastName }}
+                        {{ author.first_name }} {{ author.last_name }}
                       </td>
                       <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                        {{ value.email }}
+                        {{ author.email }}
                       </td>
                       <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                        {{ value.orcid }}
+                        {{ author.identifier }}
                       </td>
                       <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-center">
                         <button type="button"
@@ -845,17 +838,18 @@ async function waitForSync(s3client: S3Client, bucket: string, key: string): Pro
             </div>
 
             <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="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>
+              <span class="block text-lg font-medium text-aruna-text-accent">Key-Values</span>
+
+              <KeyValueDialog :initial-open="false"
+                              :with-button="true"
+                              button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
+                              button-label="Add"
+                              @add-key-value="(keyValue: KeyValue) => addKeyValue(keyValue)"/>
+
               <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"/>
+                              button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
+                              @add-key-value="(keyValue: KeyValue) => addKeyValue(keyValue)"/>
             </div>
 
             <div class="-m-1.5 overflow-x-auto">
@@ -916,23 +910,7 @@ async function waitForSync(s3client: S3Client, bucket: string, key: string): Pro
   </div>
   <!-- End Resource Creation Form -->
 
-  <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, locked }) => {
-                    addKeyValue(key, value, locked);
-                    keyValueDialogOpen = false;
-                  }"/>
-
-  <!-- TODO -->
+  <!-- TODO: Refactor (?) -->
   <ModalObjectDisplay modalId="object-display"
                       :object="createdResource"
                       :progress="uploadProgress"

From 7332e01b2a97ab5aba6f38c4c5b75b2d2f6efafe Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 28 Jan 2025 12:32:35 +0100
Subject: [PATCH 097/125] refactor: Refactor top nav dropdown to shadcn

---
 components/navigation/top.vue | 57 ++++++++++++++++++-----------------
 1 file changed, 30 insertions(+), 27 deletions(-)

diff --git a/components/navigation/top.vue b/components/navigation/top.vue
index ef804187..366750b6 100644
--- a/components/navigation/top.vue
+++ b/components/navigation/top.vue
@@ -44,8 +44,8 @@ onMounted(() => forceRefresh.value += 1);
           </NuxtLink>
 
           <NuxtLink v-if="user_state"
-              class="font-medium text-aruna-text-accent focus:outline-none focus:ring-1 focus:ring-aruna-highlight"
-              to="/user/dashboard">
+                    class="font-medium text-aruna-text-accent focus:outline-none focus:ring-1 focus:ring-aruna-highlight"
+                    to="/user/dashboard">
             Dashboard
           </NuxtLink>
 
@@ -56,32 +56,35 @@ onMounted(() => forceRefresh.value += 1);
           </NuxtLink>
 
           <!-- Dropdown Start -->
-          <div class="hs-dropdown [--strategy:static] sm:[--strategy:fixed] [--adaptive:none]">
-            <button id="hs-mega-menu-basic-dr" type="button"
-                    class="flex items-center w-full text-aruna-text-accent font-medium">
+          <DropdownMenu>
+            <DropdownMenuTrigger class="flex items-center gap-x-2 font-medium text-aruna-text-accent focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
               Docs
-              <IconChevronDown class="ms-1 flex-shrink-0 w-5 h-auto"/>
-            </button>
-
-            <div
-                class="hs-dropdown-menu transition-[opacity,margin] duration-[0.1ms] sm:duration-[150ms] hs-dropdown-open:opacity-100 opacity-0 sm:w-48 z-10 sm:shadow-md rounded-md p-2 bg-aruna-bg/90 border-aruna-text/50 divide-aruna-text/50 before:absolute top-full sm:border before:-top-5 before:start-0 before:w-full before:h-5 hidden">
-              <NuxtLink href="https://github.com/arunaengine/api"
-                        class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-aruna-text hover:bg-aruna-fg focus:ring-1 focus:ring-aruna-highlight"
-                        target="_blank">
-                API
-              </NuxtLink>
-              <NuxtLink href="https://docs.aruna-engine.org/latest/get_started/basic_usage/00_index/"
-                        class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-aruna-text hover:bg-aruna-fg focus:ring-1 focus:ring-aruna-highlight"
-                        target="_blank">
-                Getting Started
-              </NuxtLink>
-              <NuxtLink href="https://docs.aruna-engine.org/latest/internal_data_structure/internal_data_structure/"
-                        class="flex items-center gap-x-3.5 py-2 px-3 rounded-md text-sm text-aruna-text hover:bg-aruna-fg focus:ring-1 focus:ring-aruna-highlight"
-                        target="_blank">
-                Data Structure
-              </NuxtLink>
-            </div>
-          </div>
+              <IconChevronDown class="size-4"/>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
+                <NuxtLink href="https://github.com/arunaengine/api"
+                          target="_blank"
+                          class="w-full">
+                  API
+                </NuxtLink>
+              </DropdownMenuItem>
+              <DropdownMenuItem class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
+                <NuxtLink href="https://docs.aruna-engine.org/latest/get_started/basic_usage/00_index/"
+                          target="_blank"
+                          class="w-full">
+                  Getting Started
+                </NuxtLink>
+              </DropdownMenuItem>
+              <DropdownMenuItem class="flex hover:bg-aruna-fg focus:bg-aruna-fg">
+                <NuxtLink href="https://docs.aruna-engine.org/latest/internal_data_structure/internal_data_structure/"
+                          target="_blank"
+                          class="w-full">
+                  Data Structure
+                </NuxtLink>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
           <!-- Dropdown End -->
 
           <NuxtLink href="https://github.com/arunaengine"

From f1bb63f72f6d713f482e78603246aae50a43b6ab Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 28 Jan 2025 12:38:24 +0100
Subject: [PATCH 098/125] chore: Update dependencies to latest versions

---
 package.json | 31 +++++++++++++++++--------------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/package.json b/package.json
index 786de3e8..6fb6d464 100644
--- a/package.json
+++ b/package.json
@@ -10,38 +10,41 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.712.0",
-    "@aws-sdk/lib-storage": "^3.712.0",
-    "@aws-sdk/s3-request-presigner": "^3.712.0",
+    "@aws-sdk/client-s3": "^3.735.0",
+    "@aws-sdk/lib-storage": "^3.735.0",
+    "@aws-sdk/s3-request-presigner": "^3.735.0",
     "@bynect/markdown-it-class": "^1.0.2",
     "@nuxtjs/tailwindcss": "^6.12.2",
+    "@nuxtjs/tailwindcss": "^6.13.1",
     "@radix-icons/vue": "^1.0.0",
-    "@shikijs/markdown-it": "^1.24.2",
+    "@shikijs/markdown-it": "^2.1.0",
     "@tabler/icons-vue": "^3.26.0",
-    "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/forms": "^0.5.10",
     "@unovis/ts": "^1.5.0",
     "@unovis/vue": "^1.5.0",
-    "@vee-validate/zod": "^4.14.7",
-    "@vueuse/core": "^12.0.0",
+    "@vee-validate/zod": "^4.15.0",
+    "@vueuse/core": "^12.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "dom-parser": "^1.1.5",
     "markdown-it": "^14.1.0",
     "markdown-it-deflist": "^3.0.0",
-    "nuxt": "^3.14.1592",
-    "radix-vue": "^1.9.11",
+    "monaco-editor": "0.52.2",
+    "nuxt": "^3.15.3",
+    "nuxt-monaco-editor": "1.3.1",
+    "radix-vue": "^1.9.13",
     "ulid": "^2.3.0",
-    "vee-validate": "^4.14.7",
+    "vee-validate": "^4.15.0",
     "vue-router": "^4.5.0"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",
-    "bun-types": "^1.1.38",
-    "shadcn-nuxt": "^0.10.4",
-    "tailwind-merge": "^2.5.5",
+    "bun-types": "^1.2.1",
+    "shadcn-nuxt": "^0.11.3",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.7.2",
+    "typescript": "^5.7.3",
     "vue": "^3.5.13",
     "zod": "^3.24.1"
   }

From c1579d3f55ecfeecf003d9c69310f64d3df0289f Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 28 Jan 2025 12:40:00 +0100
Subject: [PATCH 099/125] chore: Re-add @nuxtjs/color-mode to satisfy
 shadcn-nuxt

---
 nuxt.config.ts | 5 ++++-
 package.json   | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index ee40f0de..0e250973 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -9,7 +9,10 @@ export default defineNuxtConfig({
   experimental: {
     clientNodeCompat: true
   },
-  modules: ['@nuxtjs/tailwindcss', "shadcn-nuxt"],
+  modules: ['@nuxtjs/tailwindcss', "shadcn-nuxt", 'nuxt-monaco-editor', "@nuxtjs/color-mode"],
+  colorMode: {
+    classSuffix: "",
+  },
   css: [
     '~/assets/styles/main.css',
   ],
diff --git a/package.json b/package.json
index 6fb6d464..e2205224 100644
--- a/package.json
+++ b/package.json
@@ -14,8 +14,8 @@
     "@aws-sdk/lib-storage": "^3.735.0",
     "@aws-sdk/s3-request-presigner": "^3.735.0",
     "@bynect/markdown-it-class": "^1.0.2",
-    "@nuxtjs/tailwindcss": "^6.12.2",
     "@nuxtjs/tailwindcss": "^6.13.1",
+    "@nuxtjs/color-mode": "^3.5.2",
     "@radix-icons/vue": "^1.0.0",
     "@shikijs/markdown-it": "^2.1.0",
     "@tabler/icons-vue": "^3.26.0",

From f8954323062727b5cf588fb46406cb0d0a3bd828 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 3 Feb 2025 16:43:47 +0100
Subject: [PATCH 100/125] chore: Replace Preline based tabs with shadcn on ToS
 page

---
 pages/tos.vue | 45 +++++++++++++++++++--------------------------
 1 file changed, 19 insertions(+), 26 deletions(-)

diff --git a/pages/tos.vue b/pages/tos.vue
index 5c58f36f..c3658d25 100644
--- a/pages/tos.vue
+++ b/pages/tos.vue
@@ -1,30 +1,24 @@
 <template>
   <NavigationTop />
 
-  <div class="container mx-auto mt-4 p-4 border-2 border-aruna-text/50 rounded-md bg-[#080d1f]">
-    <div class="border-b border-gray-700 px-4">
-      <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
-        <button type="button"
-                class="hs-tab-active:font-semibold hs-tab-active:border-aruna-highlight hs-tab-active:text-aruna-highlight py-4 px-1 inline-flex items-center gap-x-2 border-b border-transparent text-sm whitespace-nowrap text-aruna-text disabled:opacity-50 disabled:pointer-events-none :focus:outline-none focus:ring-1 focus:rounded-sm focus:ring-aruna-highlight active"
-                id="basic-tabs-item-1"
-                data-hs-tab="#basic-tabs-1"
-                aria-controls="basic-tabs-1"
-                role="tab">
+  <div class="container mx-auto mt-4 p-4 border-2 border-aruna-text/50 rounded-md bg-aruna-bg/90">
+
+    <Tabs default-value="agb"
+          class="w-full">
+      <TabsList class="rounded-sm border border-aruna-text/50">
+        <TabsTrigger value="agb"
+                     class="rounded-sm text-aruna-text data-[state=active]:bg-aruna-bg/90 data-[state=active]:text-aruna-text-accent">
           Nutzungsbedingungen
-        </button>
-        <button type="button"
-                class="hs-tab-active:font-semibold hs-tab-active:border-aruna-highlight hs-tab-active:text-aruna-highlight py-4 px-1 inline-flex items-center gap-x-2 border-b border-transparent text-sm whitespace-nowrap text-aruna-text disabled:opacity-50 disabled:pointer-events-none :focus:outline-none focus:ring-1 focus:rounded-sm focus:ring-aruna-highlight"
-                id="basic-tabs-item-2"
-                data-hs-tab="#basic-tabs-2"
-                aria-controls="basic-tabs-2"
-                role="tab">
+        </TabsTrigger>
+        <TabsTrigger value="tos"
+                     class="rounded-sm text-aruna-text data-[state=active]:bg-aruna-bg/90 data-[state=active]:text-aruna-text-accent">
           Terms of Service
-        </button>
-      </nav>
-    </div>
+        </TabsTrigger>
+      </TabsList>
+
+      <Separator class="bg-aruna-text/50 my-4"/>
 
-    <div class="mt-3 p-4">
-      <div id="basic-tabs-1" role="tabpanel" aria-labelledby="basic-tabs-item-1">
+      <TabsContent value="agb">
         <h1 class="text-3xl font-bold text-aruna-text-accent uppercase">
           Nutzungsbedingungen
         </h1>
@@ -124,9 +118,8 @@
           informieren, indem wir die überarbeiteten Bedingungen auf unserer Website veröffentlichen. Die fortgesetzte
           Nutzung des Webservices nach solchen Änderungen gilt als Zustimmung zu den aktualisierten Nutzungsbedingungen.
         </p>
-      </div>
-
-      <div id="basic-tabs-2" class="hidden" role="tabpanel" aria-labelledby="basic-tabs-item-2">
+      </TabsContent>
+      <TabsContent value="tos">
         <h1 class="text-3xl font-bold text-aruna-text-accent">
           Terms of service
         </h1>
@@ -234,8 +227,8 @@
           posting the revised terms on our website. Your continued use of the Web Service following such changes will
           constitute your acceptance of the updated Terms of Service.
         </p>
-      </div>
-    </div>
+      </TabsContent>
+    </Tabs>
   </div>
 
   <Footer />

From 71d9390b5608b341de614b873091f0466a0943c8 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Mon, 3 Feb 2025 16:53:23 +0100
Subject: [PATCH 101/125] chore: Replace Preline based tabs with shadcn on
 imprint page

---
 pages/imprint.vue | 311 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 310 insertions(+), 1 deletion(-)

diff --git a/pages/imprint.vue b/pages/imprint.vue
index dd0c1075..6dad3103 100644
--- a/pages/imprint.vue
+++ b/pages/imprint.vue
@@ -3,6 +3,312 @@ import {IconMail} from '@tabler/icons-vue';
 
 </script>
 
+<template>
+  <NavigationTop/>
+
+  <div class="container mx-auto mt-4 p-4 border-2 border-aruna-text/50 rounded-md bg-aruna-bg/90">
+    <Tabs default-value="impressum"
+          class="w-full">
+      <TabsList class="rounded-sm border border-aruna-text/50">
+        <TabsTrigger value="impressum"
+                     class="rounded-sm text-aruna-text data-[state=active]:bg-aruna-bg/90 data-[state=active]:text-aruna-text-accent">
+          Impressum
+        </TabsTrigger>
+        <TabsTrigger value="imprint"
+                     class="rounded-sm text-aruna-text data-[state=active]:bg-aruna-bg/90 data-[state=active]:text-aruna-text-accent">
+          Imprint
+        </TabsTrigger>
+      </TabsList>
+
+      <Separator class="bg-aruna-text/50 my-4"/>
+
+      <TabsContent value="impressum">
+        <h1 class="text-3xl font-bold text-aruna-text-accent uppercase">
+          Impressum
+        </h1>
+        <h2 class="text-2xl font-bold text-aruna-text">
+          Datenschutzerklärung
+        </h2>
+
+        <p class="mt-2 text-aruna-text">
+          Wir, die Universität Gießen vertreten durch ihren Präsidenten, nehmen den Schutz Ihrer persönlichen Daten sehr
+          ernst und halten uns strikt an die Regeln der Datenschutzgesetze. Die nachfolgende Erklärung gibt Ihnen einen
+          Überblick darüber, welche Art von personenbezogenen Daten erhoben werden, zu welchem Zweck und wie lange diese
+          gespeichert werden.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          1. Verantwortlicher
+        </h3>
+        <hr class="border-aruna-text">
+        <div class="mt-2 ps-4 font-bold text-aruna-text">Verantwortlicher für die Datenverarbeitung ist:</div>
+        <div class="ps-8 pb-4 text-aruna-text-accent">
+          <div>Präsidentin die</div>
+          <div>Justus-Liebig-Universität Gießen</div>
+          <div>Ludwigstraße 23</div>
+          <div>35390 Giessen</div>
+          <div>Germany</div>
+          <div>
+            <NuxtLink to="mailto:support@aruna-storage.org"
+                      target="_blank"
+                      class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+              <IconMail class="flex-shrink-0 size-4"/>
+              support@aruna-storage.org
+            </NuxtLink>
+          </div>
+        </div>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          2. Erhebung von personenbezogenen Daten
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Wir erheben personenbezogene Daten von Ihnen, wenn Sie sich für einen Account auf unserer Website oder im
+          Email-verteiler registrieren. <br/>Folgende personenbezogene Daten werden erhoben:
+        </p>
+        <ul class="list-disc list-inside ps-6 pb-4 text-aruna-text">
+          <li>Einen selbst zu vergebenen Namen</li>
+          <li>Eine E-Mail-Adresse zur Kontaktaufnahme</li>
+        </ul>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          3. Zweck der Datenverarbeitung
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Die von Ihnen angegebenen personenbezogenen Daten werden ausschließlich zur Erstellung Ihres Accounts oder der
+          Verarbeitung des Email verteilers verwendet. Falls eine Emailadresse hinterlegt wurde, informieren wir Sie
+          über Account relevante Ereignisse und allgemeine Ereignisse des Systems (Updates, Status etc.).
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          4. Rechtsgrundlage für die Datenverarbeitung
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Die Rechtsgrundlage für die Verarbeitung Ihrer personenbezogenen Daten zur Erstellung Ihres Accounts ist Art.
+          6 Abs. 1 lit. b DSGVO.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          5. Speicherdauer der Daten
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Ihre personenbezogenen Daten werden für die Dauer Ihres Accounts bei uns gespeichert. Wenn Sie Ihren Account
+          löschen, werden Ihre Daten umgehend gelöscht.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          6. Ihre Rechte als betroffene Person
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Sie haben das Recht, Auskunft über die bei uns gespeicherten personenbezogenen Daten zu erhalten sowie das
+          Recht auf Berichtigung, Löschung und Einschränkung der Verarbeitung Ihrer personenbezogenen Daten (Art. 15, 16
+          und 18 der Europäischen Datenschutzgrundverordnung). Falls Sie die Datenverarbeitung für rechtswidrig halten,
+          können Sie Beschwerde beim Hessischen Datenschutzbeauftragten erheben (Art. 77 der Europäischen
+          Datenschutzgrundverordnung, §55 des Hessischen Datenschutz- und Informationsfreiheitsgesetzes). Darüber hinaus
+          sind Sie berechtigt, Ihre Einwilligung in die Datenverarbeitung zu widerrufen und die Löschung Ihrer Daten zu
+          verlangen, wobei die bis dahin erfolgte Datenverarbeitung rechtmäßig bleibt (Art. 7 Abs. 3 und Art. 17.
+          EU-DSGVO). Ferner können Sie verlangen, Ihre Daten in portabler Form übermittelt zu bekommen oder an einen
+          anderen Verantwortlichen übermitteln zu lassen (Art. 20 EU-DSGVO).
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          7. Kontakt
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Wenn Sie Fragen zur Erhebung, Verarbeitung oder Nutzung Ihrer personenbezogenen Daten haben, kontaktieren Sie
+          uns bitte per E-Mail unter:
+          <NuxtLink to="mailto:datenschutz@aruna-storage.org"
+                    target="_blank"
+                    class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+            <IconMail class="flex-shrink-0 size-4"/>
+            datenschutz@aruna-storage.org
+          </NuxtLink>
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          8. Datenschutzbeauftragte
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          <strong>
+            Die Kontaktdaten des behördlichen Datenschutzbeauftragten der Justus-Liebig-Universität sind:
+          </strong>
+        </p>
+        <div class="pb-4 ps-8 text-aruna-text-accent">
+          <div>Justus-Liebig-Universität Gießen</div>
+          <div>Der behördliche Datenschutzbeauftragte</div>
+          <div>Ludwigstraße 23</div>
+          <div>35390 Gießen</div>
+          <div>Tel: 0641-99 122 30 / 0641-99 122 70</div>
+          <NuxtLink to="mailto:datenschutz@aruna-storage.org"
+                    target="_blank"
+                    class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+            <IconMail class="flex-shrink-0 size-4"/>
+            datenschutz@aruna-storage.org
+          </NuxtLink>
+          <div>Last updated: 20. April 2023</div>
+        </div>
+        <hr class="border-2 text-aruna-text my-5">
+        <p class="mt-2 text-center font-bold text-aruna-text-accent">
+          Bitte beachten Sie, dass diese Datenschutzerklärung jederzeit geändert werden kann. Eine jeweils aktuelle
+          Version finden Sie auf dieser Website.
+        </p>
+      </TabsContent>
+      <TabsContent value="imprint">
+        <h1 class="text-3xl font-bold text-aruna-text-accent">
+          Terms of service
+        </h1>
+        <h2 class="text-2xl font-bold text-aruna-text">
+          Privacy Policy
+        </h2>
+
+        <p class="mt-2 text-aruna-text">
+          We, the University of Giessen represented by its President, take the protection of your personal data very
+          seriously and strictly adhere to the rules of data protection laws. The following statement gives you an
+          overview
+          of what kind of personal data is collected, for what purpose and how long it is stored.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          1. Responsible
+        </h3>
+        <hr class="border-aruna-text">
+        <div class="mt-2 ps-4 font-bold text-aruna-text">Responsible for data processing is:</div>
+        <div class="ps-8 pb-4 text-aruna-text-accent">
+          <div>President of the</div>
+          <div>Justus-Liebig-University Giessen</div>
+          <div>Ludwigstraße 23</div>
+          <div>35390 Giessen</div>
+          <div>Germany</div>
+          <div>
+            <NuxtLink to="mailto:support@aruna-storage.org"
+                      target="_blank"
+                      class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+              <IconMail class="flex-shrink-0 size-4"/>
+              support@aruna-storage.org
+            </NuxtLink>
+          </div>
+        </div>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          2. Collection of personal data
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          We collect personal data from you when you register for an account or join the mailing-list on our
+          website. <br/>The following personal data is collected:
+        </p>
+        <ul class="list-disc list-inside ps-6 pb-4 text-aruna-text">
+          <li>A self-selected name</li>
+          <li>Email address for contact</li>
+        </ul>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          3. Purpose of data processing
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          The personal data provided by you is exclusively used for the creation of your account. If an email address is
+          provided, we will inform you about account-related events. If you join the mailing-list, we will send you
+          information about the project in irregular intervals.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          4. Legal basis for data processing
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          The legal basis for the processing of your personal data for the creation of your account is Art. 6 para. 1
+          lit. b
+          GDPR.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          5. Storage period of the data
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          Your personal data will be stored for the duration of your account with us. If you delete your account,
+          your data will be deleted immediately.
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          6. Your rights as a data subject
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          You have the right to request information about the personal data stored by us as well as the right to
+          correction,
+          deletion and restriction of the processing of your personal data (Art. 15, 16 and 18 of the European General
+          Data
+          Protection Regulation). If you believe that the processing of data is unlawful, you can lodge a complaint with
+          the
+          Hessian Data Protection Officer (Art. 77 of the European General Data Protection Regulation, §55 of the
+          Hessian
+          Data Protection and Freedom of Information Act). Furthermore, you are entitled to revoke your consent to the
+          processing of data and to request the deletion of your data, while the processing of data until then remains
+          lawful (Art. 7 para. 3 and Art. 17. EU-GDPR). You can also request the transmission of your data in portable
+          form
+          or have it transferred to another controller (Art. 20 EU-GDPR).
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          7. Contact
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          If you have any questions about the collection, processing or use of your personal data, please contact us by
+          email at
+          <NuxtLink to="mailto:datenschutz@aruna-storage.org"
+                    target="_blank"
+                    class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+            <IconMail class="flex-shrink-0 size-4"/>
+            datenschutz@aruna-storage.org
+          </NuxtLink>
+          .
+        </p>
+
+        <h3 class="mt-6 mb-2 text-xl font-bold uppercase text-aruna-text-accent">
+          8. Data Protection Officer
+        </h3>
+        <hr class="border-aruna-text">
+        <p class="mt-2 p-4 text-aruna-text">
+          <strong>
+            The contact details of the official data protection officers at Justus Liebig University are:
+          </strong>
+        </p>
+        <div class="pb-4 ps-8 text-aruna-text-accent">
+          <div>Justus-Liebig-Universität Gießen</div>
+          <div>Der behördliche Datenschutzbeauftragte</div>
+          <div>Ludwigstraße 23</div>
+          <div>35390 Gießen</div>
+          <div>Tel: 0641-99 122 30 / 0641-99 122 70</div>
+          <NuxtLink to="mailto:datenschutz@aruna-storage.org"
+                    target="_blank"
+                    class="inline-flex items-center gap-x-1 text-sm font-semibold border border-transparent text-aruna-highlight hover:text-aruna-highlight/80 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-700">
+            <IconMail class="flex-shrink-0 size-4"/>
+            datenschutz@aruna-storage.org
+          </NuxtLink>
+          <div>Last updated: 20. April 2023</div>
+        </div>
+        <hr class="border-2 text-aruna-text my-5">
+        <p class="mt-2 text-center font-bold text-aruna-text-accent">
+          Please note that this privacy policy may be changed at any time. You can find the current version on
+          this website.
+        </p>
+      </TabsContent>
+    </Tabs>
+  </div>
+
+  <Footer/>
+</template>
+
+<!--
 <template>
   <NavigationTop/>
 
@@ -12,6 +318,8 @@ import {IconMail} from '@tabler/icons-vue';
     </h1>
     <hr class="border-aruna-text my-6">
 
+
+
     <div class="px-4 border-b border-aruna-text/50">
       <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
         <button type="button"
@@ -312,4 +620,5 @@ import {IconMail} from '@tabler/icons-vue';
     </div>
   </div>
   <Footer/>
-</template>
\ No newline at end of file
+</template>
+-->
\ No newline at end of file

From ee245cbd595d787409fc79da35a0c5f996b4d7ff Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 4 Feb 2025 15:10:02 +0100
Subject: [PATCH 102/125] added a first Searchpage

---
 components/custom-ui/SearchBar.vue           |  68 ---------
 components/custom-ui/SearchDialog.vue        | 152 +++++++++++++++++++
 components/custom-ui/dashboard/Dashboard.vue |   4 +-
 components/custom-ui/dashboard/EventList.vue |   1 -
 composables/api_wrapper.ts                   |   2 +-
 5 files changed, 155 insertions(+), 72 deletions(-)
 delete mode 100644 components/custom-ui/SearchBar.vue
 create mode 100644 components/custom-ui/SearchDialog.vue

diff --git a/components/custom-ui/SearchBar.vue b/components/custom-ui/SearchBar.vue
deleted file mode 100644
index aea7fa3f..00000000
--- a/components/custom-ui/SearchBar.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<script setup lang="ts">
-
-import {IconLoader2, IconSearch} from "@tabler/icons-vue";
-
-const queryInput = ref('')
-const fetching = ref(false)
-const response: Ref<SearchResponse | undefined | void> = ref(undefined) //ref([{label: 'test'}, {label: 'test2'}, {label: 'test3'}])
-
-// Debounce input to decrease number of requests
-watch(queryInput, () => {
-  // Empty input only clears results
-  if (!queryInput.value) {
-    response.value = undefined
-    return
-  }
-
-  fetching.value = true
-  response.value = undefined
-  debouncedInput()
-})
-
-const debouncedInput = debounce(async () => await searchResources(queryInput.value), 250)
-
-async function searchResources(query: string): Promise<void> {
-  // No need to search with empty input
-  if (!query) {
-    response.value = undefined
-    return
-  }
-
-  response.value = await $fetch<SearchResponse>('/api/v3/search', {
-    query: {
-      query: query
-    }
-  }).catch(error => {
-    console.log(error)
-    return
-  })
-  fetching.value = false
-}
-
-</script>
-
-<template>
-  <div class="relative flex">
-    <IconSearch class="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground"/>
-    <!-- COMMAND -->
-    <Command class="rounded-sm border">
-      <CommandInput placeholder="Search for resources"
-                    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 && response?.resources.length <= 0 && fetching"
-                      class="flex items-center justify-center gap-x-4">
-          Fetching results <IconLoader2 class="mr-2 animate-spin"/>
-        </CommandEmpty>
-        <CommandEmpty v-if="queryInput && response?.resources.length <= 0 && !fetching">
-          No results found.
-        </CommandEmpty>
-        <CommandItem v-for="resource in response?.resources"
-                     :value="resource">
-          {{ resource.id }}
-        </CommandItem>
-      </CommandList>
-    </Command>
-    <!-- END COMMAND -->
-  </div>
-</template>
\ No newline at end of file
diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
new file mode 100644
index 00000000..a6137c41
--- /dev/null
+++ b/components/custom-ui/SearchDialog.vue
@@ -0,0 +1,152 @@
+<script setup lang="ts">
+
+import {IconLoader2, IconSearch} from "@tabler/icons-vue";
+import {GenericNodeType, ResourceVariant} from "~/types/aruna-v3-enums";
+
+const DEFAULT_LIMIT = 4;
+
+const router = useRouter()
+
+const queryInput = ref('')
+const fetching = ref(false)
+const response: Ref<SearchResponse | undefined | void> = ref(undefined)
+const dialogOpen = ref(false)
+const resources: Ref<SplitResources | undefined> = ref(undefined)
+
+function handleDialogOpenChange() {
+  dialogOpen.value = !dialogOpen.value
+}
+
+// Debounce input to decrease number of requests
+watch(queryInput, () => {
+  // Empty input only clears results
+  if (!queryInput.value) {
+    response.value = undefined
+    return
+  }
+
+  fetching.value = true
+  response.value = undefined
+  debouncedInput()
+})
+
+const debouncedInput = debounce(async () => await searchResources(queryInput.value), 250)
+
+async function searchResources(query: string): Promise<void> {
+  // No need to search with empty input
+  if (!query) {
+    response.value = undefined
+    return
+  }
+
+  response.value = await $fetch<SearchResponse>('/api/v3/search', {
+    query: {
+      query: query,
+      limit: DEFAULT_LIMIT
+    }
+  }).catch(error => {
+    console.log(error)
+    return
+  })
+  fetching.value = false
+  dialogOpen.value = true
+}
+
+watch(response, () => {
+  resources.value = splitResources(response.value?.resources)
+})
+
+type SplitResources = {
+  projects: Resource[],
+  folders: Resource[],
+  objects: Resource[],
+  other: any[],
+}
+
+function splitResources(resources: (Resource & { [type: string]: GenericNodeType })[]): SplitResources {
+  var result: SplitResources = {
+    projects: [],
+    folders: [],
+    objects: [],
+    other: []
+  }
+  console.log(resources);
+  console.log(response.value?.expected_hits);
+  for (const resource of resources) {
+    if (resource.type === GenericNodeType.Resource) {
+      switch (resource.variant) {
+        case ResourceVariant.Project:
+          result.projects.push(resource)
+          break;
+        case ResourceVariant.Folder:
+          result.folders.push(resource)
+          break;
+        case ResourceVariant.Object:
+          result.objects.push(resource)
+          break;
+      }
+    } else {
+      result.other.push(resource)
+    }
+  }
+  return result
+}
+
+</script>
+
+<template>
+  <div class="relative flex">
+    <Button @click="dialogOpen=true">
+      <IconSearch class="mr-1 h-4 w-4 text-muted-foreground"/>
+      Search
+    </Button>
+
+    <!-- COMMAND DIALOG -->
+    <CommandDialog class="rounded-sm border" :open="dialogOpen" @update:open="handleDialogOpenChange">
+      <CommandInput placeholder="Search for resources"
+                    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 && fetching"
+                      class="flex items-center justify-center gap-x-4">
+          Fetching results
+          <IconLoader2 class="mr-2 animate-spin"/>
+        </CommandEmpty>
+        <CommandEmpty v-if="queryInput && !fetching">
+          No results found.
+        </CommandEmpty>
+        <CommandGroup heading="Projects">
+          <CommandItem v-for="resource in resources?.projects"
+                       :value="resource"
+                       @select="router.push('/projects/' + resource.id)"> <!-- Dummy, replace with proper path later -->
+            {{ resource.name }}
+          </CommandItem>
+        </CommandGroup>
+        <CommandGroup heading="Folders">
+          <CommandItem v-for="resource in resources?.folders"
+                       :value="resource">
+            {{ resource.name }}
+          </CommandItem>
+        </CommandGroup>
+        <CommandGroup heading="Objects">
+          <CommandItem v-for="resource in resources?.objects"
+                       :value="resource">
+            {{ resource.name }}
+          </CommandItem>
+        </CommandGroup>
+        <CommandGroup heading="Others">
+          <CommandItem v-for="resource in resources?.other"
+                       :value="resource">
+            {{ resource.type + ": " + resource.name }}
+          </CommandItem>
+        </CommandGroup>
+        <!-- <CommandItem disabled v-if="response?.expected_hits > DEFAULT_LIMIT" :value="'load more'">...</CommandItem>
+        < !-- <Button v-if="response?.expected_hits > DEFAULT_LIMIT">
+          Show all results
+        </Button> -- >
+        </CommandItem> -->
+      </CommandList>
+    </CommandDialog>
+    <!-- END COMMAND DIALOG-->
+  </div>
+</template>
\ No newline at end of file
diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index 970cc42b..9ec7503c 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -38,7 +38,7 @@ import Events from "~/components/custom-ui/dashboard/Events.vue";
 import Profile from "~/components/custom-ui/user/Profile.vue";
 import Tokens from "~/components/custom-ui/user/Tokens.vue";
 import Proxies from "~/components/custom-ui/user/Proxies.vue";
-import SearchBar from "~/components/custom-ui/SearchBar.vue";
+import SearchDialog from "~/components/custom-ui/SearchDialog.vue";
 import Licences from "~/components/custom-ui/dashboard/licenses/Licenses.vue";
 
 import type {User} from '~/composables/api_wrapper'
@@ -349,7 +349,7 @@ EventBus.on('spinStop', () => spinBaby.value = false)
               <Skeleton class="h-auto w-[300px]"/>
             </template>
           </ClientOnly>
-          <SearchBar />
+          <SearchDialog />
         </div>
         <DropdownMenu>
           <ClientOnly fallbackTag="span">
diff --git a/components/custom-ui/dashboard/EventList.vue b/components/custom-ui/dashboard/EventList.vue
index ba7a939d..8f69a68f 100644
--- a/components/custom-ui/dashboard/EventList.vue
+++ b/components/custom-ui/dashboard/EventList.vue
@@ -2,7 +2,6 @@
 import {ScrollArea} from '@/components/ui/scroll-area'
 import {cn} from '@/utils/shadcn'
 import {Badge} from '@/components/ui/badge'
-import {decodeTime} from 'ulid'
 import {formatDate} from '~/composables/utils'
 import {formatDistanceToNow} from "date-fns";
 
diff --git a/composables/api_wrapper.ts b/composables/api_wrapper.ts
index 22e6bd1c..dd782fb9 100644
--- a/composables/api_wrapper.ts
+++ b/composables/api_wrapper.ts
@@ -60,7 +60,7 @@ export type CreateGroupResponse = paths["/api/v3/groups"]["post"]["responses"][2
 // Info
 export type GetEventsResponse = paths["/api/v3/info/events"]["get"]["responses"][200]["content"]["application/json"];
 export type GetStatsResponse = paths["/api/v3/info/stats"]["get"]["responses"][200]["content"]["application/json"];
-export type SearchResponse = paths["/api/v3/info/search"]["get"]["responses"][200]["content"]["application/json"];
+export type SearchResponse = paths["/api/v3/info/search"]["get"]["responses"][200]["content"]["applicatiown/json"];
 
 // Realms
 export type CreateRealmResponse = paths["/api/v3/realms"]["post"]["responses"][200]["content"]["application/json"];

From 3001deae421674ea6dd9300d0e9924c5a71c5d7b Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 4 Feb 2025 15:13:24 +0100
Subject: [PATCH 103/125] feat: add show more results button

---
 components/custom-ui/SearchDialog.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
index a6137c41..1bdf379a 100644
--- a/components/custom-ui/SearchDialog.vue
+++ b/components/custom-ui/SearchDialog.vue
@@ -141,11 +141,12 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
           </CommandItem>
         </CommandGroup>
         <!-- <CommandItem disabled v-if="response?.expected_hits > DEFAULT_LIMIT" :value="'load more'">...</CommandItem>
-        < !-- <Button v-if="response?.expected_hits > DEFAULT_LIMIT">
-          Show all results
-        </Button> -- >
+
         </CommandItem> -->
       </CommandList>
+      <Button v-if="response?.expected_hits > DEFAULT_LIMIT">
+        Show all results
+      </Button>
     </CommandDialog>
     <!-- END COMMAND DIALOG-->
   </div>

From 17a3ecd591f5560aeb0043741ec97a17d329f76a Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 4 Feb 2025 15:33:53 +0100
Subject: [PATCH 104/125] fix: catch undefined results

---
 components/custom-ui/SearchDialog.vue | 44 ++++++++++++++-------------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
index 1bdf379a..c4849a40 100644
--- a/components/custom-ui/SearchDialog.vue
+++ b/components/custom-ui/SearchDialog.vue
@@ -11,6 +11,7 @@ const queryInput = ref('')
 const fetching = ref(false)
 const response: Ref<SearchResponse | undefined | void> = ref(undefined)
 const dialogOpen = ref(false)
+// mit computed berechnen
 const resources: Ref<SplitResources | undefined> = ref(undefined)
 
 function handleDialogOpenChange() {
@@ -32,6 +33,11 @@ watch(queryInput, () => {
 
 const debouncedInput = debounce(async () => await searchResources(queryInput.value), 250)
 
+function openDialog(): void {
+  queryInput.value = '';
+  dialogOpen.value = true;
+}
+
 async function searchResources(query: string): Promise<void> {
   // No need to search with empty input
   if (!query) {
@@ -70,33 +76,32 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
     objects: [],
     other: []
   }
-  console.log(resources);
-  console.log(response.value?.expected_hits);
-  for (const resource of resources) {
-    if (resource.type === GenericNodeType.Resource) {
-      switch (resource.variant) {
-        case ResourceVariant.Project:
-          result.projects.push(resource)
-          break;
-        case ResourceVariant.Folder:
-          result.folders.push(resource)
-          break;
-        case ResourceVariant.Object:
-          result.objects.push(resource)
-          break;
+  if (resources) {
+    for (const resource of resources) {
+      if (resource.type === GenericNodeType.Resource) {
+        switch (resource.variant) {
+          case ResourceVariant.Project:
+            result.projects.push(resource)
+            break;
+          case ResourceVariant.Folder:
+            result.folders.push(resource)
+            break;
+          case ResourceVariant.Object:
+            result.objects.push(resource)
+            break;
+        }
+      } else {
+        result.other.push(resource)
       }
-    } else {
-      result.other.push(resource)
     }
   }
   return result
 }
-
 </script>
 
 <template>
   <div class="relative flex">
-    <Button @click="dialogOpen=true">
+    <Button @click="openDialog()">
       <IconSearch class="mr-1 h-4 w-4 text-muted-foreground"/>
       Search
     </Button>
@@ -140,9 +145,6 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
             {{ resource.type + ": " + resource.name }}
           </CommandItem>
         </CommandGroup>
-        <!-- <CommandItem disabled v-if="response?.expected_hits > DEFAULT_LIMIT" :value="'load more'">...</CommandItem>
-
-        </CommandItem> -->
       </CommandList>
       <Button v-if="response?.expected_hits > DEFAULT_LIMIT">
         Show all results

From 1ba1ecd70889b975078d0e6354cb6708ea9a544d Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 4 Feb 2025 16:20:57 +0100
Subject: [PATCH 105/125] feat: add limit and filter props to SearchDialog

---
 components/custom-ui/SearchDialog.vue | 50 ++++++++++++++++-----------
 nuxt.config.ts                        |  3 +-
 2 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
index c4849a40..6bcb16e0 100644
--- a/components/custom-ui/SearchDialog.vue
+++ b/components/custom-ui/SearchDialog.vue
@@ -3,7 +3,18 @@
 import {IconLoader2, IconSearch} from "@tabler/icons-vue";
 import {GenericNodeType, ResourceVariant} from "~/types/aruna-v3-enums";
 
-const DEFAULT_LIMIT = 4;
+const DEFAULT_LIMIT = useRuntimeConfig().public.searchDialogLimit || 10;
+
+/* ----- Properties ----- */
+interface SearchDialogProps {
+  limitResults?: number,
+  filter?: string
+}
+
+const props = defineProps<SearchDialogProps>()
+const limitResults = props.limitResults || DEFAULT_LIMIT
+const filter = props.filter
+/* ----- End Properties ----- */
 
 const router = useRouter()
 
@@ -11,13 +22,25 @@ const queryInput = ref('')
 const fetching = ref(false)
 const response: Ref<SearchResponse | undefined | void> = ref(undefined)
 const dialogOpen = ref(false)
-// mit computed berechnen
-const resources: Ref<SplitResources | undefined> = ref(undefined)
+
+const resources: ComputedRef<SplitResources | undefined> = computed(() => splitResources(response.value?.resources));
+
+type SplitResources = {
+  projects: Resource[],
+  folders: Resource[],
+  objects: Resource[],
+  other: any[],
+}
 
 function handleDialogOpenChange() {
   dialogOpen.value = !dialogOpen.value
 }
 
+function openDialog(): void {
+  queryInput.value = ''; // reset the query when the dialog is opened again
+  dialogOpen.value = true;
+}
+
 // Debounce input to decrease number of requests
 watch(queryInput, () => {
   // Empty input only clears results
@@ -33,11 +56,6 @@ watch(queryInput, () => {
 
 const debouncedInput = debounce(async () => await searchResources(queryInput.value), 250)
 
-function openDialog(): void {
-  queryInput.value = '';
-  dialogOpen.value = true;
-}
-
 async function searchResources(query: string): Promise<void> {
   // No need to search with empty input
   if (!query) {
@@ -48,7 +66,8 @@ async function searchResources(query: string): Promise<void> {
   response.value = await $fetch<SearchResponse>('/api/v3/search', {
     query: {
       query: query,
-      limit: DEFAULT_LIMIT
+      limit: limitResults,
+      filter: filter
     }
   }).catch(error => {
     console.log(error)
@@ -58,17 +77,6 @@ async function searchResources(query: string): Promise<void> {
   dialogOpen.value = true
 }
 
-watch(response, () => {
-  resources.value = splitResources(response.value?.resources)
-})
-
-type SplitResources = {
-  projects: Resource[],
-  folders: Resource[],
-  objects: Resource[],
-  other: any[],
-}
-
 function splitResources(resources: (Resource & { [type: string]: GenericNodeType })[]): SplitResources {
   var result: SplitResources = {
     projects: [],
@@ -146,7 +154,7 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
           </CommandItem>
         </CommandGroup>
       </CommandList>
-      <Button v-if="response?.expected_hits > DEFAULT_LIMIT">
+      <Button v-if="response?.expected_hits > limitResults">
         Show all results
       </Button>
     </CommandDialog>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 0e250973..d02c1b7c 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -100,7 +100,8 @@ export default defineNuxtConfig({
         hidePeriod: 60 * 60 * 24, // Hide banner per default for one day
         validFrom: '', // Some valid date string
         validTo: '', // Some valid date string
-      }
+      },
+      searchDialogLimit: 10
     }
   },
 

From 664f50f73f9ea53153fdabfb3727240a9827a063 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 4 Feb 2025 16:22:50 +0100
Subject: [PATCH 106/125] refactor: Display resource creation form in single
 column

This makes it easier for users to follow the form and easier for the
developer to create a consistent responsive behaviour of the components.
---
 components/custom-ui/ResourceCreation.vue | 886 ++++++++++------------
 1 file changed, 386 insertions(+), 500 deletions(-)

diff --git a/components/custom-ui/ResourceCreation.vue b/components/custom-ui/ResourceCreation.vue
index 085777df..12bfdb0c 100644
--- a/components/custom-ui/ResourceCreation.vue
+++ b/components/custom-ui/ResourceCreation.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import {IconPlus, IconTrash} from '@tabler/icons-vue'
-import {type v2Author} from '~/composables/aruna_api_json'
+import {IconLock, IconLockOpen2, IconPlus, IconTrash} from '@tabler/icons-vue'
 import {
   TagsInput,
   TagsInputInput,
@@ -12,48 +11,43 @@ import {FormControl, FormField, FormItem, FormLabel, FormMessage} from "~/compon
 import {Input} from "~/components/ui/input";
 import {Button} from "~/components/ui/button";
 import {useToast} from '~/components/ui/toast/use-toast'
+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 {ULID_REGEX} from "~/utils/constants"
 import EventBus from "~/composables/EventBus";
 
+import type {Author, KeyValue, GroupInfo} from "~/composables/api_wrapper";
+import type {CreateProjectResponse, CreateResourceResponse} from "~/composables/api_wrapper";
+import {ResourceVariant, VisibilityClass} from "~/types/aruna-v3-enums";
+
 import {prettyDisplayJson} from "~/composables/utils";
 import {toTypedSchema} from "@vee-validate/zod";
 import * as z from "zod";
 import {useForm} from "vee-validate";
 
-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 {ResourceVariant, VisibilityClass} from "~/types/aruna-v3-enums";
-import type {Author, KeyValue, GroupInfo} from "~/composables/api_wrapper";
-
-import type {CreateProjectResponse, CreateResourceResponse} from "~/composables/api_wrapper";
 
-/* ----- Properties ----- */
+// ----- Properties ---------- //
 interface ResourceCreationProps {
   realms: Realm[],
-  groups: GroupInfo[]
+  groups: GroupInfo[],
+  licenses: License[],
+  realmContext: RealmContext,
 }
 
 const props = defineProps<ResourceCreationProps>()
 const realms = toRef(() => props.realms)
 const groups = toRef(() => props.groups)
+const licenses = toRef(() => props.licenses)
+const context = toRef(() => props.realmContext)
+watch(groups, () => console.log('[ResourceCreation] Updated context:', context.value))
 watch(groups, () => console.log('[ResourceCreation] Updated groups:', groups.value))
-/* ----- End Properties ----- */
-
-// Use route to evaluate query parameter
-const route = useRoute()
-const licenses = [
-  {tag: 'CC0', label: 'Creative Commons Zero (CC0 1.0)'},
-  {tag: 'CC-BY-SA', label: 'Attribution-ShareAlike 4.0 International (CC-BY-SA 4.0)'},
-  {tag: 'CC-BY-NC', label: 'Attribution-NonCommercial 4.0 International (CC-BY-NC)'},
-  {tag: 'CC-BY-NC-SA', label: 'Attribution-NonCommercial-ShareAlike 4.0 International (CC-BY-NC-SA)'}
-] //await fetchLicenses()
+// ----- End Properties ---------- //
 
-const createdResource: Ref<Resource | undefined> = ref(undefined)
-const creationError: Ref<string | undefined> = ref(undefined)
+// ----- Query Parameter Evaluation ---------- //
+const route = useRoute() // Use route to evaluate query parameter
 
-/* ----- Query Parameter Evaluation ----- */
 function getParamSingle(param_name: string) {
   const value = route.query[param_name];
   if (Array.isArray(value)) {
@@ -77,39 +71,24 @@ function setQueryParams() {
     if (parentIdParam) {
       //resourceParentId.value = parentIdParam;
     }
-
-    /*
-    const relIdParam = getParamSingle("relId");
-    const relTypeParam = getParamSingle("relType");
-    if (relIdParam && relTypeParam) {
-      addRelation({
-        internal: {
-          resourceId: relIdParam,
-          resourceVariant: fromResourceTypeStr(relTypeParam),
-          definedVariant: v2InternalRelationVariant.INTERNAL_RELATION_VARIANT_METADATA,
-          direction: v2RelationDirection.RELATION_DIRECTION_OUTBOUND
-        }
-      } as v2Relation)
-    }
-    */
   }
 }
 
 onMounted(() => setQueryParams());
-/* ----- End Query Parameter Evaluation ----- */
+// ----- End Query Parameter Evaluation ---------- //
 
-/* ----- Form Schema ----- */
+// ----- Form Schema ---------- //
 const formSchema = toTypedSchema(z.object({
   name: z.string(),
   title: z.string(),
   description: z.string().max(1024, 'Description length is limited to 1024 characters.'),
-  identifiers: z.array(z.string()).optional(),
+  //identifiers: z.array(z.string()).optional(),
   visibility: z.nativeEnum(VisibilityClass),
   variant: z.nativeEnum(ResourceVariant),
   realm_id: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
   group_id: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
   parent_id: z.string().regex(ULID_REGEX, 'Not a valid ULID').optional(),
-  license_tag: z.string(),
+  license_id: z.string(),
   authors: z.array(z.custom<Author>()).optional(),
   labels: z.array(z.custom<KeyValue>()).optional(),
   file: z.custom<File>().optional()
@@ -150,10 +129,10 @@ const formSchema = toTypedSchema(z.object({
 const {handleSubmit, values, setFieldValue} = useForm({
   validationSchema: formSchema,
   initialValues: {
-    identifiers: [],
+    //identifiers: [],
     visibility: VisibilityClass.Public,
     variant: ResourceVariant.Project,
-    license_tag: 'CC0',
+    license_id: licenses.value[0].id,
     authors: [],
     labels: []
   },
@@ -171,11 +150,11 @@ const onSubmit = handleSubmit(async (values) => {
     group_id: values.variant === ResourceVariant.Project ? values.group_id : undefined,
     parent_id: values.variant !== ResourceVariant.Project ? values.parent_id : undefined,
     visibility: values.visibility,
-    identifiers: values.identifiers,
-    license_tag: values.license_tag,
+    license_id: values.license_id,
+    identifiers: identifiers.value, //values.identifiers,
     authors: Array.from(authors.value.values()),
     labels: Array.from(keyValues.value.values()),
-  }
+  } as CreateResourceRequest
 
   toast({
     title: 'You submitted the following values:',
@@ -211,10 +190,13 @@ const onSubmit = handleSubmit(async (values) => {
     })
   }
 })
-/* ----- End Form Schema ----- */
 
-/* ----- Resource Authors ----- */
+// ----- External Resource Identifiers ---------- //
+const identifiers = ref<string[]>([])
+
+// ----- Resource Authors ---------- //
 const authors: Ref<Map<string, Author>> = ref(new Map())
+
 function addAuthor(author: Author) {
   authors.value.set(getUniqueId(), author)
 }
@@ -223,10 +205,9 @@ function removeAuthor(key: string) {
   authors.value.delete(key)
 }
 
-/* ----- End Resource Authors ----- */
-
-/* ----- Resource key-values ----- */
+// ----- Resource key-values ---------- //
 const keyValues: Ref<Map<string, KeyValue>> = ref(new Map())
+
 function addKeyValue(keyValue: KeyValue) {
   keyValues.value.set(keyValue.key, keyValue)
 }
@@ -235,9 +216,9 @@ function removeKeyValue(key: string) {
   keyValues.value.delete(key)
 }
 
-/* ----- End Resource key-values ----- */
-
-/* ----- Upload ----- */
+// ----- Created resource info | Upload ---------- //
+const createdResource: Ref<Resource | undefined> = ref(undefined)
+const creationError: Ref<string | undefined> = ref(undefined)
 const uploadProgress = ref(0)
 
 function updateProgress(current: number, total: number | undefined) {
@@ -247,23 +228,12 @@ function updateProgress(current: number, total: number | undefined) {
   uploadProgress.value = +floatProgress.toFixed(2)
 }
 
-/* ----- End Upload ----- */
-
-// ----- Helper functions -----
+// ----- Helper functions ---------- //
 let id = 0
+
 function getUniqueId(): string {
   return id++ + '';
 }
-// ----- End Helper functions -----
-
-/*
-function textAreaAutoHeight(domElement: HTMLTextAreaElement | null, offset = 0) {
-  if (domElement) {
-    domElement.style.height = 'auto'
-    domElement.style.height = `${domElement.scrollHeight + offset}px`
-  }
-}
-*/
 
 /*
 async function submit() {
@@ -438,468 +408,384 @@ async function submit() {
   }
 }
 */
-
-/*
-async function waitForSync(s3client: S3Client, bucket: string, key: string): Promise<boolean> {
-  // Define head object command
-  const command = new HeadObjectCommand({
-    Bucket: bucket,
-    Key: key
-  })
-
-  // Wait until object is synced
-  let synced = false
-  let tryCounter = 0
-  while (!synced) {
-    try {
-      tryCounter++
-      await s3client.send(command)
-          .then(response => {
-            console.log(response.$metadata.httpStatusCode)
-            synced = response.$metadata.httpStatusCode === 200
-          })
-    } catch (error: any) {
-      //console.error(error)
-      if (error.message.includes('NetworkError')) {
-        throw Error('CORS Error.<br/>Please check the CORS rules of your projects.')
-
-      } else if (tryCounter > 10) {
-        console.error('Wait for sync retries exhausted')
-        throw Error('Wait for sync retries exhausted')
-      }
-
-      await sleep(Math.pow(2, tryCounter))
-    }
-  }
-
-  return synced // Still false if try counter was exhausted
-}
-*/
-//const sleep = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay))
 </script>
 
 <template>
   <!-- Resource Creation Form -->
-  <div class="m-4 flex flex-col grow h-full border border-dashed border-aruna-text/50 rounded-md p-6 gap-y-6">
+  <div class="m-4 flex flex-col grow h-full max-w-screen-2xl border border-dashed border-aruna-text/50 rounded-md p-6 gap-y-4">
     <h1 class="text-3xl font-bold text-aruna-text-accent">
       Resource creation
     </h1>
     <Separator class="bg-aruna-text/50"/>
 
-    <ResizablePanelGroup direction="horizontal">
-      <ResizablePanel id="resource-creation-left">
-        <div class="flex flex-col basis-1/2 h-full p-4">
-          <form id="dialogForm" @submit="onSubmit" class="flex flex-col space-y-4 grow">
-            <!-- Name Input -->
-            <FormField v-slot="{componentField}" name="name">
-              <FormItem>
-                <FormLabel>Name</FormLabel>
-                <FormControl>
-                  <Input type="text"
-                         placeholder="Name of the new resource"
-                         v-bind="componentField"
-                         class="py-2 px-3 h-auto w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
-                                focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
-                                focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
-                                disabled:opacity-50 disabled:pointer-events-none"/>
-                </FormControl>
-                <FormMessage/>
-              </FormItem>
-            </FormField>
-            <!-- End Name Input -->
-
-            <!-- Title Input -->
-            <FormField v-slot="{componentField}" name="title">
-              <FormItem>
-                <FormLabel>Title</FormLabel>
-                <FormControl>
-                  <Input type="text"
-                         placeholder="Title of the new resource"
-                         v-bind="componentField"
-                         class="py-2 px-3 h-auto w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+    <div class="flex flex-col basis-1/2 h-full p-4 pt-0">
+      <form id="dialogForm"
+            @submit="onSubmit"
+            class="flex flex-col space-y-4 grow">
+        <!-- Type / Visibility row -->
+        <div class="flex flex-col lg:flex-row w-full gap-4">
+          <!-- Type Input -->
+          <FormField v-slot="{ componentField }" type="radio" name="variant">
+            <FormItem class="basis-1/2 space-y-3">
+              <FormLabel>Resource Type</FormLabel>
+              <FormControl>
+                <RadioGroup class="flex gap-x-0"
+                            v-bind="componentField"
+                            orientation="horizontal">
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="ResourceVariant.Project"/>
+                    </FormControl>
+                    <FormLabel class="font-bold">Project</FormLabel>
+                  </FormItem>
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="ResourceVariant.Folder"/>
+                    </FormControl>
+                    <FormLabel class="font-bold">Folder</FormLabel>
+                  </FormItem>
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="ResourceVariant.Object"/>
+                    </FormControl>
+                    <FormLabel class="font-bold">Object</FormLabel>
+                  </FormItem>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End Type Input -->
+          <!-- Visibility Input -->
+          <FormField v-slot="{ componentField }" type="radio" name="visibility">
+            <FormItem class="basis-1/2 space-y-3">
+              <FormLabel>Resource Visibility</FormLabel>
+              <FormControl>
+                <RadioGroup class="flex gap-x-0"
+                            v-bind="componentField"
+                            orientation="horizontal">
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="VisibilityClass.Public"/>
+                    </FormControl>
+                    <FormLabel class="font-normal">
+                      Public
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="VisibilityClass.PublicMetadata"/>
+                    </FormControl>
+                    <FormLabel class="font-normal">
+                      Only Metadata Public
+                    </FormLabel>
+                  </FormItem>
+                  <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
+                    <FormControl>
+                      <RadioGroupItem :value="VisibilityClass.Private"/>
+                    </FormControl>
+                    <FormLabel class="font-normal">
+                      Private
+                    </FormLabel>
+                  </FormItem>
+                </RadioGroup>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End Visibility Input -->
+        </div>
+        <!-- End Type / Visibility row -->
+
+        <!-- Name/Title row -->
+        <div class="flex flex-col lg:flex-row w-full gap-4">
+          <!-- Name Input -->
+          <FormField v-slot="{componentField}" name="name">
+            <FormItem class="basis-1/2">
+              <FormLabel>Name</FormLabel>
+              <FormControl>
+                <Input type="text"
+                       placeholder="Name of the new resource"
+                       v-bind="componentField"
+                       class="py-2 px-3 h-auto w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                              focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                              focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                              disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End Name Input -->
+
+          <!-- Title Input -->
+          <FormField v-slot="{componentField}" name="title">
+            <FormItem class="basis-1/2">
+              <FormLabel>Title</FormLabel>
+              <FormControl>
+                <Input type="text"
+                       placeholder="Title of the new resource"
+                       v-bind="componentField"
+                       class="py-2 px-3 h-auto w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
                                 focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
                                 focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
-                                disabled:opacity-50 disabled:pointer-events-none"/>
-                </FormControl>
-                <FormMessage/>
-              </FormItem>
-            </FormField>
-            <!-- End Title Input -->
-
-            <!-- Description Input -->
-            <FormField v-slot="{componentField}" name="description">
-              <FormItem>
-                <FormLabel class="flex justify-between">
-                  Description
-                  <span class="text-xs text-aruna-text"
-                        :class="{'text-destructive': values.description ? values.description?.length > 1024 : false}">
+                                disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End Title Input -->
+        </div>
+        <!-- End Name/Title row -->
+
+        <!-- Identifiers Input -->
+        <TagsInput v-model="identifiers" class="p-0" :class="{'gap-0': identifiers.length === 0}">
+          <div class="flex">
+          <TagsInputItem v-for="item in identifiers" :key="item" :value="item"
+                         class="py-3 px-2 rounded-sm border border-aruna-highlight bg-aruna-bg items-center text-aruna-highlight">
+            <TagsInputItemText/>
+            <TagsInputItemDelete/>
+          </TagsInputItem>
+          </div>
+          <TagsInputInput placeholder="Other external identifiers e.g. DOI or ENA accession"
+                          class="py-1.5 px-2 w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
+                                 focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                 focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                 disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+        </TagsInput>
+        <!-- End Identifiers Input -->
+
+        <!-- Description Input -->
+        <FormField v-slot="{componentField}" name="description">
+          <FormItem>
+            <FormLabel class="flex justify-between">
+              Description
+              <span class="text-xs text-aruna-text"
+                    :class="{'text-destructive': values.description ? values.description?.length > 1024 : false}">
                       Characters left: {{ values.description ? 1024 - values.description.length : 1024 }}
                   </span>
-                </FormLabel>
-                <FormControl class="flex">
+            </FormLabel>
+            <FormControl class="flex">
                   <Textarea v-bind="componentField"
                             :rows="5"
                             placeholder="Here you can enter a description of your resource"
                             class="py-3 px-4 w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
                                    focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
                                    focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
-                                   disabled:opacity-50 disabled:pointer-events-none"/>
-                  <div class="flex w-full pe-4 justify-end text-aruna-text">
-                  </div>
-                </FormControl>
-                <FormMessage/>
-              </FormItem>
-            </FormField>
-            <!-- End Description Input -->
-
-            <!-- Identifiers Input -->
-            <FormField v-slot="{ value }" name="identifiers">
-              <FormItem>
-                <FormLabel>External Identifiers</FormLabel>
-                <FormControl class="bg-aruna-muted">
-                  <TagsInput :model-value="value" class="p-0">
-                    <TagsInputItem v-for="item in value" :key="item" :value="item"
-                                   class="py-3 px-2 bg-aruna-fg text-aruna-text-accent">
-                      <TagsInputItemText/>
-                      <TagsInputItemDelete/>
-                    </TagsInputItem>
-                    <TagsInputInput placeholder="Other external identifiers e.g. DOI or ENA accession"
-                                    class="py-3 px-4 w-full border-aruna-text/50 rounded-md bg-aruna-muted text-aruna-text-accent text-sm
-                                           focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
-                                           focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
-                                           disabled:opacity-50 disabled:pointer-events-none"/>
-                  </TagsInput>
-                </FormControl>
-                <FormMessage/>
-              </FormItem>
-            </FormField>
-            <!-- End Identifiers Input -->
-
-            <!-- Type Input -->
-            <FormField v-slot="{ componentField }" type="radio" name="variant">
-              <FormItem class="space-y-3">
-                <FormLabel>Resource Type</FormLabel>
-                <FormControl>
-                  <RadioGroup class="flex gap-x-0"
-                              v-bind="componentField"
-                              orientation="horizontal">
-                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
-                      <FormControl>
-                        <RadioGroupItem :value="ResourceVariant.Project"/>
-                      </FormControl>
-                      <FormLabel class="font-normal">Project</FormLabel>
-                    </FormItem>
-                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
-                      <FormControl>
-                        <RadioGroupItem :value="ResourceVariant.Folder"/>
-                      </FormControl>
-                      <FormLabel class="font-normal">Folder</FormLabel>
-                    </FormItem>
-                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
-                      <FormControl>
-                        <RadioGroupItem :value="ResourceVariant.Object"/>
-                      </FormControl>
-                      <FormLabel class="font-normal">Object</FormLabel>
-                    </FormItem>
-                  </RadioGroup>
-                </FormControl>
-                <FormMessage/>
-              </FormItem>
-            </FormField>
-            <!-- End Type Input -->
-
-            <div class="flex gap-x-4">
-              <!-- Realm Input -->
-              <FormField v-slot="{componentField}" name="realm_id">
-                <FormItem v-if="values.variant === ResourceVariant.Project"
-                          class="flex flex-col basis-1/2 space-y-4">
-                  <FormLabel>Realm Selection</FormLabel>
-                  <Select v-bind="componentField">
-                    <FormControl>
-                      <SelectTrigger class="bg-aruna-muted">
-                        <SelectValue placeholder="Select a realm for your project"/>
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent class="bg-aruna-bg/90">
-                      <SelectGroup>
-                        <SelectItem v-for="realm in realms" :value="realm.id"
-                                    class="hover:bg-aruna-fg">
-                          {{ realm.name }}
-                        </SelectItem>
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                  <FormMessage/>
-                </FormItem>
-              </FormField>
-              <!-- Realm Input -->
-
-              <!-- Group Input -->
-              <FormField v-slot="{componentField}" name="group_id">
-                <FormItem v-if="values.variant === ResourceVariant.Project"
-                          class="flex flex-col basis-1/2 space-y-4">
-                  <FormLabel>Group Selection</FormLabel>
-                  <Select v-bind="componentField">
-                    <FormControl>
-                      <SelectTrigger class="bg-aruna-muted">
-                        <SelectValue placeholder="Select an administration group for your project"/>
-                      </SelectTrigger>
-                    </FormControl>
-                    <SelectContent class="bg-aruna-bg/90">
-                      <SelectGroup>
-                        <SelectItem v-for="group in groups" :value="group.group.id"
-                                    class="hover:bg-aruna-fg">
-                          {{ group.group.name }}
-                        </SelectItem>
-                      </SelectGroup>
-                    </SelectContent>
-                  </Select>
-                  <FormMessage/>
-                </FormItem>
-              </FormField>
-              <!-- Group Input -->
-            </div>
-
-
-            <!-- Parent Id Input -->
-            <FormField v-slot="{componentField}"
-                       name="parent_id">
-              <FormItem v-if="values.variant !== ResourceVariant.Project">
-                <FormLabel>Parent Id</FormLabel>
-                <FormControl>
-                  <div class="flex rounded-sm">
-                    <span class="px-4 inline-flex items-center min-w-fit rounded-s-sm border border-e-0 border-aruna-highlight bg-transparent text-sm text-aruna-highlight">
+                                   disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+              <div class="flex w-full pe-4 justify-end text-aruna-text">
+              </div>
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+        <!-- End Description Input -->
+
+        <div class="flex flex-col lg:flex-row gap-x-4">
+          <!-- Parent Id Input -->
+          <FormField v-slot="{componentField}"
+                     name="parent_id">
+            <FormItem v-if="values.variant !== ResourceVariant.Project">
+              <FormLabel>Parent Id</FormLabel>
+              <FormControl>
+                <div class="flex rounded-sm">
+                    <span class="px-4 py-2 inline-flex items-center min-w-fit rounded-s-sm border border-aruna-highlight bg-transparent text-sm text-aruna-highlight">
                       Unspecified
                     </span>
-                    <Input type="text"
-                           placeholder="Id of the new resources direct parent"
-                           v-bind="componentField"
-                           class="py-2 px-3 pe-11 block w-full border-gray-200 shadow-sm rounded-s-none rounded-e-lg text-sm focus:z-10 focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 dark:focus:ring-neutral-600"/>
-                  </div>
-                  <!--
                   <Input type="text"
                          placeholder="Id of the new resources direct parent"
                          v-bind="componentField"
-                         class="mt-0"/>
-                  -->
+                         class="py-2 px-3 h-auto w-full border-s-0 border-aruna-text/50 rounded-s-none rounded-e-sm bg-aruna-muted text-aruna-text-accent text-sm
+                                placeholder:text-aruna-text
+                                focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                disabled:opacity-50 disabled:pointer-events-none"/>
+                </div>
+              </FormControl>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End Parent Id Input -->
+
+          <!-- Realm Input -->
+          <FormField v-slot="{componentField}" name="realm_id">
+            <FormItem v-if="values.variant === ResourceVariant.Project"
+                      class="flex flex-col grow space-y-4">
+              <FormLabel>Realm Selection</FormLabel>
+              <Select v-bind="componentField">
+                <FormControl>
+                  <SelectTrigger class="bg-aruna-muted">
+                    <SelectValue placeholder="Select a realm for your project"/>
+                  </SelectTrigger>
                 </FormControl>
-                <FormMessage/>
-              </FormItem>
-            </FormField>
-            <!-- End Parent Id Input -->
-
-            <!-- File Input -->
-            <FormField name="file">
-              <FormItem class="invisible h-0"
-                        :class="{'visible h-auto': values.variant === ResourceVariant.Object}">
-                <FormLabel>File Select/Drag</FormLabel>
+                <SelectContent class="bg-aruna-bg/90">
+                  <SelectGroup>
+                    <SelectItem v-for="realm in realms" :value="realm.id"
+                                class="hover:bg-aruna-fg">
+                      {{ realm.name }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- Realm Input -->
+
+          <!-- Group Input -->
+          <FormField v-slot="{componentField}" name="group_id">
+            <FormItem v-if="values.variant === ResourceVariant.Project"
+                      class="flex flex-col grow space-y-4">
+              <FormLabel>Group Selection</FormLabel>
+              <Select v-bind="componentField">
                 <FormControl>
-                  <input type="file"
-                         v-on:change="(v) => setFieldValue('file', v)"
-                         name="file-input"
-                         id="file-input"
-                         class="block w-full p-0 border border-aruna-text/50 shadow-sm rounded-md bg-aruna-muted text-aruna-text text-sm focus:z-10 focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none
-                            file:bg-aruna-fg
-                            file:text-aruna-text-accent
-                            file:border-0
-                            file:me-4
-                            file:p-2">
+                  <SelectTrigger class="bg-aruna-muted">
+                    <SelectValue placeholder="Select an administration group for your project"/>
+                  </SelectTrigger>
                 </FormControl>
-                <FormMessage/>
-              </FormItem>
-            </FormField>
-            <!-- File Id Input -->
-
-            <!-- Visibility Input -->
-            <FormField v-slot="{ componentField }" type="radio" name="visibility">
-              <FormItem class="space-y-3">
-                <FormLabel>Resource Visibility</FormLabel>
+                <SelectContent class="bg-aruna-bg/90">
+                  <SelectGroup>
+                    <SelectItem v-for="group in groups" :value="group.group.id"
+                                class="hover:bg-aruna-fg">
+                      {{ group.group.name }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- Group Input -->
+
+          <!-- License Input -->
+          <FormField v-slot="{componentField}" name="license_id">
+            <FormItem class="w-full lg:basis-1/3">
+              <FormLabel>License</FormLabel>
+              <Select v-bind="componentField">
                 <FormControl>
-                  <RadioGroup class="flex gap-x-0"
-                              v-bind="componentField"
-                              orientation="horizontal">
-                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
-                      <FormControl>
-                        <RadioGroupItem :value="VisibilityClass.Public"/>
-                      </FormControl>
-                      <FormLabel class="font-normal">
-                        Public
-                      </FormLabel>
-                    </FormItem>
-                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
-                      <FormControl>
-                        <RadioGroupItem :value="VisibilityClass.PublicMetadata"/>
-                      </FormControl>
-                      <FormLabel class="font-normal">
-                        Only Metadata Public
-                      </FormLabel>
-                    </FormItem>
-                    <FormItem class="flex p-4 gap-x-3 space-y-0 items-center justify-center first:rounded-s-sm last:rounded-e-sm border border-aruna-highlight">
-                      <FormControl>
-                        <RadioGroupItem :value="VisibilityClass.Private"/>
-                      </FormControl>
-                      <FormLabel class="font-normal">
-                        Private
-                      </FormLabel>
-                    </FormItem>
-                  </RadioGroup>
+                  <SelectTrigger class="rounded-sm bg-aruna-muted border-aruna-text/50">
+                    <SelectValue placeholder="Select a license for your resource"/>
+                  </SelectTrigger>
                 </FormControl>
-                <FormMessage/>
-              </FormItem>
-            </FormField>
-            <!-- End Visibility Input -->
-
-            <!-- License Input -->
-            <FormField v-slot="{componentField}" name="license_tag">
-              <FormItem>
-                <FormLabel>License</FormLabel>
-                <Select v-bind="componentField">
-                  <FormControl>
-                    <SelectTrigger class="bg-aruna-muted">
-                      <SelectValue placeholder="Select a license for your resource"/>
-                    </SelectTrigger>
-                  </FormControl>
-                  <SelectContent class="bg-aruna-bg/90">
-                    <SelectGroup>
-                      <SelectItem v-for="license in licenses" :value="license.tag"
-                                  class="hover:bg-aruna-fg">
-                        {{ license.label }}
-                      </SelectItem>
-                    </SelectGroup>
-                  </SelectContent>
-                </Select>
-                <FormMessage/>
-              </FormItem>
-            </FormField>
-            <!-- End License Input -->
-          </form>
+                <SelectContent class="bg-aruna-bg/90">
+                  <SelectGroup>
+                    <SelectItem v-for="license in licenses"
+                                :value="license.id"
+                                class="hover:bg-aruna-fg">
+                      {{ license.name }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <FormMessage/>
+            </FormItem>
+          </FormField>
+          <!-- End License Input -->
         </div>
-      </ResizablePanel>
-      <ResizableHandle id="resource-creation-handle" with-handle class="bg-aruna-text/50"/>
-      <ResizablePanel id="resource-creation-right"
-                      :default-size="60"
-                      :min-size="25"
-                      :max-size="75"
-                      :collapsible="true">
-        <div class="flex flex-col basis-1/2 h-full p-4">
-          <div class="flex px-4 grow flex-row md:flex-col overflow-x-auto">
-            <div class="flex flex-row mb-2 justify-start items-center gap-x-4">
-              <span class="block text-lg font-medium text-aruna-text-accent">Authors</span>
-              <AuthorDialog :initial-open="false"
-                            :with-button="true"
-                            button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
-                            button-label="Add"
-                            @add-author="(author: Author) => addAuthor(author)"/>
-            </div>
-
-            <div class="-m-1.5 overflow-x-auto">
-              <div class="p-1.5 min-w-full inline-block align-middle">
-                <div class="overflow-hidden border border-aruna-text/50">
-                  <table class="min-w-full divide-y divide-aruna-text">
-                    <thead class="bg-aruna-muted">
-                    <tr>
-                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                        Name
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                        Email
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                        External Identifier
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
-                        Actions
-                      </th>
-                    </tr>
-                    </thead>
-                    <tbody class="divide-y divide-aruna-text/50">
-                    <tr v-for="[key, author] in authors">
-                      <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                        {{ author.first_name }} {{ author.last_name }}
-                      </td>
-                      <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                        {{ author.email }}
-                      </td>
-                      <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                        {{ author.identifier }}
-                      </td>
-                      <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-center">
-                        <button type="button"
-                                @click="removeAuthor(key)"
-                                class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-destructive focus:z-10 focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
-                          <IconTrash class="flex-shrink-0 size-6"/>
-                        </button>
-                      </td>
-                    </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-
-            <div class="flex flex-row mb-2 mt-6 justify-start items-center gap-x-4">
-              <span class="block text-lg font-medium text-aruna-text-accent">Key-Values</span>
-
-              <KeyValueDialog :initial-open="false"
-                              :with-button="true"
-                              button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
-                              button-label="Add"
-                              @add-key-value="(keyValue: KeyValue) => addKeyValue(keyValue)"/>
-
-              <OntologyDialog :initial-open="false"
-                              :with-button="true"
-                              button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
-                              @add-key-value="(keyValue: KeyValue) => addKeyValue(keyValue)"/>
-            </div>
-
-            <div class="-m-1.5 overflow-x-auto">
-              <div class="p-1.5 min-w-full inline-block align-middle">
-                <div class="overflow-hidden border border-aruna-text/50">
-                  <table class="min-w-full divide-y divide-aruna-text">
-                    <thead class="bg-aruna-muted">
-                    <tr>
-                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                        Key
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                        Value
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-start text-sm font-bold text-aruna-text-accent uppercase">
-                        Locked
-                      </th>
-                      <th scope="col" class="px-6 py-3 text-center text-sm font-bold text-aruna-text-accent uppercase">
-                        Actions
-                      </th>
-                    </tr>
-                    </thead>
-                    <tbody class="divide-y divide-aruna-text/50">
-                    <tr v-for="[key, value] in keyValues">
-                      <td class="px-6 py-2 whitespace-nowrap text-sm font-medium text-aruna-text">
-                        {{ key }}
-                      </td>
-                      <td v-html="prettyDisplayJson(value.value)"
-                          class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text"></td>
-                      <td class="px-6 py-2 whitespace-nowrap text-sm text-aruna-text">
-                        {{ value.locked }}
-                      </td>
-                      <td class="px-6 py-2 whitespace-nowrap text-center text-sm font-medium">
-                        <button type="button"
-                                @click="removeKeyValue(key)"
-                                class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full text-aruna-text hover:text-destructive focus:z-10 focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
-                          <IconTrash class="flex-shrink-0 size-6"/>
-                        </button>
-                      </td>
-                    </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
 
-          </div>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
+        <!-- File Input -->
+        <FormField name="file">
+          <FormItem class="invisible h-0"
+                    :class="{'visible h-auto': values.variant === ResourceVariant.Object}">
+            <FormLabel>File Select/Drag</FormLabel>
+            <FormControl>
+              <input type="file"
+                     v-on:change="(v) => setFieldValue('file', v)"
+                     name="file-input"
+                     id="file-input"
+                     class="block w-full p-0 border border-aruna-text/50 shadow-sm rounded-md bg-aruna-muted text-aruna-text text-sm focus:z-10 focus:border-aruna-text/50 focus:ring-aruna-highlight disabled:opacity-50 disabled:pointer-events-none
+                            file:bg-aruna-fg
+                            file:text-aruna-text-accent
+                            file:border-0
+                            file:me-4
+                            file:p-2">
+            </FormControl>
+            <FormMessage/>
+          </FormItem>
+        </FormField>
+        <!-- File Id Input -->
+      </form>
+
+      <!-- Authors -->
+      <div class="flex flex-row mb-2 justify-start items-center gap-x-4">
+        <span class="block text-lg font-medium text-aruna-text-accent">Authors</span>
+        <AuthorDialog :initial-open="false"
+                      :with-button="true"
+                      button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
+                      button-label="Add"
+                      @add-author="(author: Author) => addAuthor(author)"/>
+      </div>
+      <Table class="table-auto">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Name</TableHead>
+            <TableHead>E-Mail</TableHead>
+            <TableHead>External Identifier</TableHead>
+            <TableHead class="text-center">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-for="[key, author] in authors" :key="key">
+            <TableCell class="font-medium">
+              {{ author.first_name }} {{ author.last_name }}
+            </TableCell>
+            <TableCell>{{ author.email }}</TableCell>
+            <TableCell>{{ author.identifier }}</TableCell>
+            <TableCell class="text-center">
+              <Button type="button"
+                      @click="removeAuthor(key)"
+                      class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full bg-transparent text-aruna-text hover:bg-transparent hover:text-destructive focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
+                <IconTrash class="flex-shrink-0 size-6"/>
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <!-- End Authors -->
+
+      <!-- Labels -->
+      <div class="flex flex-row mb-2 mt-6 justify-start items-center gap-x-4">
+        <span class="block text-lg font-medium text-aruna-text-accent">Key-Values</span>
+
+        <KeyValueDialog :initial-open="false"
+                        :with-button="true"
+                        button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
+                        button-label="Add"
+                        @add-key-value="(keyValue: KeyValue) => addKeyValue(keyValue)"/>
+
+        <OntologyDialog :initial-open="false"
+                        :with-button="true"
+                        button-css="h-auto p-0.5 px-1 rounded-md font-normal text-aruna-highlight border-aruna-highlight hover:border-aruna-highlight/80 hover:bg-transparent hover:text-aruna-highlight/80"
+                        @add-key-value="(keyValue: KeyValue) => addKeyValue(keyValue)"/>
+      </div>
+      <Table class="table-auto">
+        <TableHeader>
+          <TableRow>
+            <TableHead class="max-w-[50px]">Locked</TableHead>
+            <TableHead class="w-fit">Key</TableHead>
+            <TableHead>Value</TableHead>
+            <TableHead class="text-center">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow v-for="[key, value] in keyValues" :key="key">
+            <TableCell class="font-medium max-w-[50px]">
+              <IconLock v-if="value.locked" class="m-0.5 flex-shrink-0 size-5"/>
+              <IconLockOpen2 v-else class="m-0.5 flex-shrink-0 size-5"/>
+            </TableCell>
+            <TableCell class="w-fit">{{ key }}</TableCell>
+            <TableCell v-html="prettyDisplayJson(value.value)"/>
+            <TableCell class="text-center">
+              <Button type="button"
+                      @click="removeKeyValue(key)"
+                      class="inline-flex flex-shrink-0 justify-center items-center size-8 rounded-full bg-transparent text-aruna-text hover:bg-transparent hover:text-destructive focus:outline-none focus:ring-2 focus:text-destructive focus:ring-destructive">
+                <IconTrash class="flex-shrink-0 size-6"/>
+              </Button>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+      <!-- End Labels -->
+    </div>
 
     <Button type="submit"
             form="dialogForm"

From 10782a268ebe510ffdb9b8a9c6a89a06ee807dce Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 4 Feb 2025 16:24:09 +0100
Subject: [PATCH 107/125] fix: Update AWS dependencies to latest versions

Current version was kinda broken as it produced errors in development
mode when refreshing the dashboard.
---
 package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index e2205224..16aeca21 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,9 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.735.0",
-    "@aws-sdk/lib-storage": "^3.735.0",
-    "@aws-sdk/s3-request-presigner": "^3.735.0",
+    "@aws-sdk/client-s3": "^3.738.0",
+    "@aws-sdk/lib-storage": "^3.738.0",
+    "@aws-sdk/s3-request-presigner": "^3.738.0",
     "@bynect/markdown-it-class": "^1.0.2",
     "@nuxtjs/tailwindcss": "^6.13.1",
     "@nuxtjs/color-mode": "^3.5.2",

From fdb5cfe611955335d69b8ca46d5b638a96d1815f Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 4 Feb 2025 16:27:30 +0100
Subject: [PATCH 108/125] feat: Provide licenses from the Aruna API to
 components

---
 components/custom-ui/dashboard/Dashboard.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index 6267e8ae..a5c928c0 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -61,7 +61,6 @@ const props = defineProps<{
 }>()
 const user = toRef(() => props.user)
 const user_id = toRef(() => user.value?.id)
-
 watch(user, () => console.log('[Dashboard Component]', `User got updated: ${user.value ? user.value.id : 'Undefined'}`))
 watch(user_id, () => console.log('[Dashboard Component]', `User Id updated: ${user_id.value}`))
 // ----- END PROPERTIES ----------
@@ -112,7 +111,8 @@ const componentProps = computed(() => {
       }
     case 'FileExplorer':
       return {
-        resources: projects.value
+        resources: projects.value,
+        licenses: licenses.value
       }
     case 'Licenses':
       return {
@@ -126,7 +126,8 @@ const componentProps = computed(() => {
     case 'ResourceCreation':
       return {
         realms: realms.value,
-        groups: groups.value
+        groups: groups.value,
+        licenses: licenses.value
       }
     case 'Profile':
       return {

From f2584159e900121eb946cfd0b78172eae6c3ddf4 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 4 Feb 2025 16:29:57 +0100
Subject: [PATCH 109/125] fix: Pagination in FileExplorer

---
 .../custom-ui/dashboard/FileExplorer.vue      | 24 +++++++++++++------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index 0a6914ea..933df1c6 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -18,6 +18,14 @@ import {
   IconX
 } from '@tabler/icons-vue'
 import {Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbSeparator,} from '@/components/ui/breadcrumb'
+import {
+  Pagination,
+  PaginationList,
+  PaginationListItem,
+  PaginationFirst,
+  PaginationPrev,
+  PaginationEllipsis
+} from "~/components/ui/pagination";
 
 import type {
   CreateResourceRequest,
@@ -63,7 +71,7 @@ import AuthorDialog from "~/components/custom-ui/dialog/AuthorDialog.vue";
 import {Upload} from "@aws-sdk/lib-storage";
 import {S3Client} from "@aws-sdk/client-s3";
 import type {S3ClientConfig} from "@aws-sdk/client-s3/dist-types/S3Client";
-import {PaginationFirst, PaginationPrev} from "~/components/ui/pagination";
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "~/components/ui/tooltip";
 
 const dropZoneRef = ref<HTMLDivElement>()
 
@@ -114,9 +122,11 @@ function updateProgress(current: number, total: number | undefined) {
 /* ----- PROPERTIES ----- */
 interface FileExplorerProps {
   resources: ResourceElement[]
+  licenses: License[]
 }
 
 const props = defineProps<FileExplorerProps>()
+const licenseMap = computed(() => new Map<string, License>(props.licenses.map(license => [license.id, license])))
 // Loaded resources -> Default: your projects
 // Children are lazy loaded
 const loadedResources: Ref<ResourceElement[]> = toRef(() => props.resources)
@@ -384,7 +394,7 @@ async function submitUpload() {
 const currentPage = ref<number>(1)
 const pageSize = ref<number>(3)
 const totalHits = ref<number>(6)
-const offset = computed(() => (currentPage.value-1) * pageSize.value)// currentPage.value * pageSize.value) //
+const offset = computed(() => (currentPage.value - 1) * pageSize.value)// currentPage.value * pageSize.value) //
 watch(offset, () => {
   console.info(`[FileExplorer] Current page: ${currentPage.value}, Current page size: ${pageSize.value}, Current offset: ${offset.value}`)
   console.info('[FileExplorer] Current resource children:', currentHierarchy.value[currentHierarchy.value.length - 1].children.length)
@@ -446,7 +456,7 @@ watch(offset, () => {
 
     <!-- Pagination -->
     <div class="my-2 flex">
-      <Pagination v-if="currentHierarchy.length > 1 && totalHits > pageSize"
+      <Pagination v-if="currentHierarchy.length > 0 && totalHits > pageSize"
                   v-slot="{ page }"
                   :total="totalHits"
                   :items-per-page="pageSize"
@@ -469,11 +479,11 @@ watch(offset, () => {
                 {{ item.value }}
               </Button>
             </PaginationListItem>
-            <PaginationEllipsis v-else :key="item.type" :index="index" />
+            <PaginationEllipsis v-else :key="item.type" :index="index"/>
           </template>
 
-          <PaginationNext />
-          <PaginationLast />
+          <PaginationNext/>
+          <PaginationLast/>
         </PaginationList>
       </Pagination>
     </div>
@@ -494,7 +504,7 @@ watch(offset, () => {
         -->
 
         <!-- Flexbox Resource Display -->
-        <div class="flex flex-row flex-wrap content-start items-start justify-start gap-x-6 gap-y-6 my-4">
+        <div class="flex flex-row flex-wrap content-start items-start justify-start gap-6 my-4">
           <Card v-for="resource in displayedResources"
                 class="rounded-sm border-aruna-text/50 flex flex-col items-center justify-center min-w-[200px] max-w-[300px] h-fit">
             <CardContent class="p-0 flex flex-col items-center w-full">

From dda2cd9f90f53eeb2135d1781a49d1a16f372814 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 4 Feb 2025 16:31:14 +0100
Subject: [PATCH 110/125] refactor: Display resource info with table instead of
 description list

---
 .../custom-ui/dashboard/FileExplorer.vue      | 185 ++++++++++--------
 1 file changed, 105 insertions(+), 80 deletions(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index 933df1c6..d23b8d3e 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -685,7 +685,23 @@ watch(offset, () => {
           </div>
 
           <div v-else-if="infoSelection" class="gap-y-4">
-            <h2 class="text-2xl">{{ infoSelection?.title || 'Title not available' }}</h2>
+            <div class="flex items-center">
+
+              <TooltipProvider :delay-duration="500">
+                <Tooltip>
+                  <TooltipTrigger as-child>
+                    <IconLock v-if="infoSelection?.locked" class="text-destructive"/>
+                    <IconLockOpen2 v-else class="text-aruna-highlight"/>
+                  </TooltipTrigger>
+                  <TooltipContent class="rounded-none text-aruna-highlight bg-aruna-muted border border-aruna-text/50">
+                    <span v-if="infoSelection?.locked">This resource is locked and cannot be edited.</span>
+                    <span v-else>This resource is still editable.</span>
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+
+              <h2 class="ms-4 text-2xl">{{ infoSelection?.title || 'Title not available' }}</h2>
+            </div>
             <Separator class="bg-aruna-text/50 mt-6"/>
             <!--<span class="text-sm font-medium leading-6 text-aruna-text-accent">Labels:</span>-->
             <ScrollArea>
@@ -703,92 +719,101 @@ watch(offset, () => {
                   </span>
                 </div>
               </div>
-              <ScrollBar orientation="horizontal" />
+              <ScrollBar orientation="horizontal"/>
             </ScrollArea>
 
             <Table class="table-auto">
               <TableBody class="">
-              <TableRow>
-                <TableCell class="w-fit text-sm font-medium leading-6 text-aruna-text-accent">Id:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ infoSelection?.id || '' }}
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Name:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ infoSelection?.name || '' }}
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell class="align-text-top text-sm font-medium leading-6 text-aruna-text-accent">Description:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ infoSelection?.description || '' }}
-                </TableCell>
-              </TableRow>
-              <TableRow v-if="infoSelection?.variant === ResourceVariant.Object">
-                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Size:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ formatBytes(infoSelection?.content_len || 0) }}
-                </TableCell>
-              </TableRow>
-              <TableRow v-else>
-                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Children:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ infoSelection?.count || 0 }}
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Created At:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ formatDate(infoSelection?.created_at || '') }}
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Last Modified:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ formatDate(infoSelection?.last_modified || '') }}
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">License:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ infoSelection?.license_id || '' }}
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell class="text-sm align-text-top font-medium leading-6 text-aruna-text-accent">Locations:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  <ul class="list-disc">
-                    <li class="flex gap-x-2" v-for="loc in infoSelection?.location">
-                      <component :is="StatusMap[loc.status as keyof typeof StatusMap]"
-                                 :class="{'text-aruna-text-accent animate-spin': loc.status === SyncingStatus.Pending,
+                <TableRow>
+                  <TableCell class="w-fit min-w-[125px] text-sm font-medium leading-6 text-aruna-text-accent">
+                    Id:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ infoSelection?.id || '' }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Name:</TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ infoSelection?.name || '' }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="align-text-top text-sm font-medium leading-6 text-aruna-text-accent">
+                    Description:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ infoSelection?.description || '' }}
+                  </TableCell>
+                </TableRow>
+                <TableRow v-if="infoSelection?.variant === ResourceVariant.Object">
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Size:</TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ formatBytes(infoSelection?.content_len || 0) }}
+                  </TableCell>
+                </TableRow>
+                <TableRow v-else>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">
+                    Children:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ infoSelection?.count || 0 }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">
+                    Created At:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ formatDate(infoSelection?.created_at || 'N/A') }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">
+                    Last Modified:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ formatDate(infoSelection?.last_modified || 'N/A') }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">
+                    License:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ licenseMap.get(infoSelection?.license_id) || 'N/A' }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm align-text-top font-medium leading-6 text-aruna-text-accent">
+                    Locations:
+                  </TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    <ul v-if="infoSelection?.location.length > 0" class="list-disc">
+                      <li class="flex gap-x-2" v-for="loc in infoSelection?.location">
+                        <component :is="StatusMap[loc.status as keyof typeof StatusMap]"
+                                   :class="{'text-aruna-text-accent animate-spin': loc.status === SyncingStatus.Pending,
                                           'text-aruna-text-accent': loc.status === SyncingStatus.Running,
                                           'text-green-600': loc.status === SyncingStatus.Finished,
                                           'text-destructive': loc.status === SyncingStatus.Error}"/>
-                      {{ loc.endpoint_id }}
-                    </li>
-                  </ul>
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Locked:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ infoSelection?.locked }}
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Visibility:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ infoSelection?.visibility || '' }}
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Deleted:</TableCell>
-                <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                  {{ infoSelection?.deleted }}
-                </TableCell>
-              </TableRow>
+                        {{ loc.endpoint_id }}
+                      </li>
+                    </ul>
+                    <span v-else>N/A</span>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Visibility:</TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ infoSelection?.visibility || '' }}
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Deleted:</TableCell>
+                  <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
+                    {{ infoSelection?.deleted }}
+                  </TableCell>
+                </TableRow>
               </TableBody>
             </Table>
           </div>

From c88d337f2b8551662ca9c86bdf0f27054d6ce0cb Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Tue, 4 Feb 2025 16:49:00 +0100
Subject: [PATCH 111/125] chore: Update display of the resource creation form

---
 components/custom-ui/ResourceCreation.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/components/custom-ui/ResourceCreation.vue b/components/custom-ui/ResourceCreation.vue
index 12bfdb0c..fd727c64 100644
--- a/components/custom-ui/ResourceCreation.vue
+++ b/components/custom-ui/ResourceCreation.vue
@@ -580,11 +580,11 @@ async function submit() {
         </FormField>
         <!-- End Description Input -->
 
-        <div class="flex flex-col lg:flex-row gap-x-4">
+        <div class="flex flex-col xl:flex-row gap-4">
           <!-- Parent Id Input -->
           <FormField v-slot="{componentField}"
                      name="parent_id">
-            <FormItem v-if="values.variant !== ResourceVariant.Project">
+            <FormItem v-if="values.variant !== ResourceVariant.Project" class="w-full lg:basis-1/2">
               <FormLabel>Parent Id</FormLabel>
               <FormControl>
                 <div class="flex rounded-sm">
@@ -592,7 +592,7 @@ async function submit() {
                       Unspecified
                     </span>
                   <Input type="text"
-                         placeholder="Id of the new resources direct parent"
+                         placeholder="Id of the new resource's direct parent."
                          v-bind="componentField"
                          class="py-2 px-3 h-auto w-full border-s-0 border-aruna-text/50 rounded-s-none rounded-e-sm bg-aruna-muted text-aruna-text-accent text-sm
                                 placeholder:text-aruna-text
@@ -613,7 +613,7 @@ async function submit() {
               <FormLabel>Realm Selection</FormLabel>
               <Select v-bind="componentField">
                 <FormControl>
-                  <SelectTrigger class="bg-aruna-muted">
+                  <SelectTrigger class="bg-aruna-muted border-aruna-text/50">
                     <SelectValue placeholder="Select a realm for your project"/>
                   </SelectTrigger>
                 </FormControl>
@@ -638,7 +638,7 @@ async function submit() {
               <FormLabel>Group Selection</FormLabel>
               <Select v-bind="componentField">
                 <FormControl>
-                  <SelectTrigger class="bg-aruna-muted">
+                  <SelectTrigger class="bg-aruna-muted border-aruna-text/50">
                     <SelectValue placeholder="Select an administration group for your project"/>
                   </SelectTrigger>
                 </FormControl>

From a4b65efd705a14791c3c10f51bca3ef06ec9ecd5 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 12 Feb 2025 11:57:37 +0100
Subject: [PATCH 112/125] feat: Add link to resource landing page to
 FileExplorer info bar

---
 .../custom-ui/dashboard/FileExplorer.vue      | 42 ++++++++++++-------
 1 file changed, 26 insertions(+), 16 deletions(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index d23b8d3e..4e2de037 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -3,6 +3,7 @@ import {
   IconCheck,
   IconEdit,
   IconExclamationCircle,
+  IconExternalLink,
   IconFile,
   IconFolder,
   IconFolderPlus,
@@ -685,22 +686,31 @@ watch(offset, () => {
           </div>
 
           <div v-else-if="infoSelection" class="gap-y-4">
-            <div class="flex items-center">
-
-              <TooltipProvider :delay-duration="500">
-                <Tooltip>
-                  <TooltipTrigger as-child>
-                    <IconLock v-if="infoSelection?.locked" class="text-destructive"/>
-                    <IconLockOpen2 v-else class="text-aruna-highlight"/>
-                  </TooltipTrigger>
-                  <TooltipContent class="rounded-none text-aruna-highlight bg-aruna-muted border border-aruna-text/50">
-                    <span v-if="infoSelection?.locked">This resource is locked and cannot be edited.</span>
-                    <span v-else>This resource is still editable.</span>
-                  </TooltipContent>
-                </Tooltip>
-              </TooltipProvider>
-
-              <h2 class="ms-4 text-2xl">{{ infoSelection?.title || 'Title not available' }}</h2>
+            <div class="flex justify-between">
+              <div class="flex items-center">
+                <!-- Locked / Unlocked -->
+                <TooltipProvider :delay-duration="500">
+                  <Tooltip>
+                    <TooltipTrigger as-child>
+                      <IconLock v-if="infoSelection?.locked" class="text-destructive"/>
+                      <IconLockOpen2 v-else class="text-aruna-highlight"/>
+                    </TooltipTrigger>
+                    <TooltipContent class="rounded-none text-aruna-highlight bg-aruna-muted border border-aruna-text/50">
+                      <span v-if="infoSelection?.locked">This resource is locked and cannot be edited.</span>
+                      <span v-else>This resource is still editable.</span>
+                    </TooltipContent>
+                  </Tooltip>
+                </TooltipProvider>
+                <!-- End Locked / Unlocked -->
+                <!-- Name / Title -->
+                <h2 class="ms-4 text-2xl">{{ infoSelection?.title || 'Title not available' }}</h2>
+                <!-- End Name / Title -->
+              </div>
+              <!-- Link to resource landing page -->
+              <NuxtLink :to="`/objects/${infoSelection?.id}`" target="_blank">
+                <IconExternalLink class="flex-shrink-0 text-aruna-text-accent hover:text-aruna-highlight"/>
+              </NuxtLink>
+              <!-- End Link to resource landing page -->
             </div>
             <Separator class="bg-aruna-text/50 mt-6"/>
             <!--<span class="text-sm font-medium leading-6 text-aruna-text-accent">Labels:</span>-->

From 58a85b3da4dd55308d51c518dfbb7a9f2f33d3ad Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 12 Feb 2025 14:51:55 +0100
Subject: [PATCH 113/125] chore: Extend event transaction types

---
 composables/api_wrapper.ts | 78 +++++++++++++++-----------------------
 1 file changed, 31 insertions(+), 47 deletions(-)

diff --git a/composables/api_wrapper.ts b/composables/api_wrapper.ts
index 22e6bd1c..52a34dbb 100644
--- a/composables/api_wrapper.ts
+++ b/composables/api_wrapper.ts
@@ -117,6 +117,7 @@ export type SimpleCredentials = {
 export enum EventTypes {
   RegisterUser = 'RegisterUserRequestTx',
   CreateToken = 'CreateTokenRequestTx',
+  CreateS3Credentials = 'CreateS3CredentialsRequestTx',
   CreateRealm = 'CreateRealmRequestTx',
   CreateGroup = 'CreateGroupRequestTx',
   CreateComponent = 'CreateComponentRequestTx',
@@ -124,21 +125,6 @@ export enum EventTypes {
   TODO = 'Complete this enum'
 }
 
-export type Oidc = {
-  oidc_realm: string
-  oidc_subject: string
-}
-
-export type TxUser = {
-  user_id: string
-  auth_method: {
-    oidc?: Oidc
-  } | {
-    Aruna: number
-  }
-  impersonated_by: TxUser | null
-}
-
 export type BaseTx = {
   id: string
   event_id: string
@@ -149,48 +135,46 @@ export type BaseTx = {
   }
 }
 
+export type TxUser = {
+  user_id: string
+  auth_method: AuthType
+  impersonated_by: TxUser | null
+}
+
+export type AuthType = {
+  Oidc?: Oidc
+  Aruna?: number
+}
+
+export type Oidc = {
+  oidc_realm: string
+  oidc_subject: string
+}
+
+// Specific Events
 export type RegisterUserTx = BaseTx & {
-  req: {
-    first_name: string,
-    last_name: string,
-    email: string,
-    identifier: string
-  }
+  req: RegisterUserRequest
 }
 
 export type CreateTokenTx = BaseTx & {
-  req: {
-    name: string,
-    scope: 'Personal' | 'Resource',
-    expires_at: Date,
-    group_id: string | null,
-    realm_id: string | null
-  }
+  req: CreateTokenRequest
+}
+
+export type CreateS3CredentialsRequestTx = BaseTx & {
+  req: CreateS3CredentialsRequest
+}
+
+export type CreateComponentRequestTx = BaseTx & {
+  req: CreateComponentRequest
 }
 
 export type CreateGroupTx = BaseTx & {
-  req: {
-    name: string,
-    description: string,
-  }
-  generated_group: {
-    id: string
-    name: string
-    description: string
-  }
+  req: CreateGroupRequest
 }
 
 export type CreateRealmTx = BaseTx & {
-  req: {
-    tag: string,
-    name: string,
-    description: string,
-  }
-  generated_group: {
-    id: string
-    name: string
-    description: string
-  }
+  req: CreateRealmRequest
+  generated_group: Group
 }
 
 

From 3e8c11ff328541f7dc15292808e6424f69ded6f4 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 12 Feb 2025 15:40:34 +0100
Subject: [PATCH 114/125] chore: Adapt parts of layout to CI

---
 components/custom-ui/dashboard/Dashboard.vue   |  8 ++++----
 .../custom-ui/dashboard/FileExplorer.vue       | 18 ++++--------------
 .../custom-ui/dashboard/OverviewStats.vue      |  2 +-
 3 files changed, 9 insertions(+), 19 deletions(-)

diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index a5c928c0..a0388709 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -185,10 +185,10 @@ EventBus.on('spinStop', () => spinBaby.value = false)
 
 <template>
   <!--<div class="grid h-full min-h-[calc(100vh-64px)] w-full md:grid-cols-[220px_1fr] lg:grid-cols-[280px_1fr]">-->
-  <div class="grid h-full min-h-[calc(100vh-64px)] w-full md:grid-cols-[220px_1fr]">
-    <div class="hidden border-r bg-aruna-bg/90 md:block">
+  <div class="grid h-full min-h-[calc(100vh-64px)] w-full lg:grid-cols-[220px_1fr]">
+    <div class="hidden border-r border-aruna-text/50 bg-aruna-bg/90 md:block">
       <div class="flex h-full max-h-screen flex-col gap-2">
-        <div class="flex items-center justify-between border-b px-4 lg:h-[60px] lg:px-6">
+        <div class="flex items-center justify-between border-b border-aruna-text/50 px-4 lg:h-[60px] lg:px-6">
           <div class="flex space-x-2">
             <img alt="Aruna logo"
                  class="inline w-24 h-auto align-middle hover:cursor-pointer"
@@ -299,7 +299,7 @@ EventBus.on('spinStop', () => spinBaby.value = false)
 
     <!-- Sidebar for mobile devices -->
     <div class="flex flex-col">
-      <header class="flex items-center gap-4 border-b bg-muted/40 px-4 lg:h-[60px] lg:px-6">
+      <header class="flex items-center gap-4 border-b border-aruna-text/50 bg-muted/40 px-4 lg:h-[60px] lg:px-6">
         <Sheet>
           <SheetTrigger as-child>
             <Button class="shrink-0 md:hidden"
diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index 4e2de037..41f995b4 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -403,12 +403,12 @@ watch(offset, () => {
 // ----- End Pagination ---------- //
 </script>
 <template>
-  <div class="flex flex-col h-full w-full py-6 ps-6">
+  <div class="flex flex-col h-full w-full">
     <!-- Header -->
-    <div class="flex h-14 items-center justify-between border-b px-6 border-gray-800 bg-gray-900">
+    <div class="flex p-4 h-14 items-center justify-between px-6 bg-transparent border-b border-aruna-text/50">
       <nav aria-label="breadcrumb">
         <Breadcrumb>
-          <BreadcrumbList class="text-aruna-text-accent">
+          <BreadcrumbList class="font-bold text-aruna-text-accent">
             <BreadcrumbItem @click="navigateBack('root')"
                             class="hover:cursor-pointer">
               Your Projects
@@ -494,18 +494,8 @@ watch(offset, () => {
                          :direction="checkDirection()"
                          class="h-full">
       <ResizablePanel>
-        <!--
-        <div :class="{'opacity-50': isOverDropZone}"
-            class="absolute flex w-full h-full items-center justify-center opacity-0 transition-all ease-in-out delay-50 duration-500">
-          <div class="flex flex-col bg-aruna-highlight items-center justify-center gap-y-6 p-32 border-2 border-dashed border-aruna-text-accent rounded-sm">
-            Drop your file here
-            <IconPlus class="flex-shrink-0 size-8 text-aruna-text-accent border rounded-full border-aruna-text-accent"/>
-          </div>
-        </div>
-        -->
-
         <!-- Flexbox Resource Display -->
-        <div class="flex flex-row flex-wrap content-start items-start justify-start gap-6 my-4">
+        <div class="flex flex-row flex-wrap content-start items-start justify-start gap-6 ms-4 my-4">
           <Card v-for="resource in displayedResources"
                 class="rounded-sm border-aruna-text/50 flex flex-col items-center justify-center min-w-[200px] max-w-[300px] h-fit">
             <CardContent class="p-0 flex flex-col items-center w-full">
diff --git a/components/custom-ui/dashboard/OverviewStats.vue b/components/custom-ui/dashboard/OverviewStats.vue
index 2f1e2058..7d41cf2e 100644
--- a/components/custom-ui/dashboard/OverviewStats.vue
+++ b/components/custom-ui/dashboard/OverviewStats.vue
@@ -19,7 +19,7 @@ function emitTabSwitch(tabId: string) {
 
 <template>
   <!--<div class="flex flex-1 items-center justify-center rounded-md border border-dashed border-slate-500 shadow-sm">-->
-  <div class="mx-4 mt-4 flex flex-1 flex-col rounded-md border border-dashed border-slate-500 shadow-sm">
+  <div class="mx-4 mt-4 flex flex-1 flex-col">
     <div class="flex flex-col my-6">
       <div class="grid gap-4 p-4 md:grid-cols-2 md:gap-8 lg:grid-cols-5">
         <Card>

From 388a295d751c513435ab962dcd55544b1856173d Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 12 Feb 2025 15:43:02 +0100
Subject: [PATCH 115/125] feat: Implement EditableLabel component

This component can be used to display an arbitrary string which can
switched to edit mode with a double click. On save the updated value is
send to the parent component via event 'updated-value'.
---
 components/custom-ui/EditableLabel.vue | 137 +++++++++++++++++++++++++
 1 file changed, 137 insertions(+)
 create mode 100644 components/custom-ui/EditableLabel.vue

diff --git a/components/custom-ui/EditableLabel.vue b/components/custom-ui/EditableLabel.vue
new file mode 100644
index 00000000..9cd7dade
--- /dev/null
+++ b/components/custom-ui/EditableLabel.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import {IconCancel, IconCheck, IconDeviceFloppy, IconLoader3} from '@tabler/icons-vue'
+import {Input} from "~/components/ui/input";
+import {useToast} from '~/components/ui/toast/use-toast'
+
+const {toast} = useToast()
+
+// ----- v-model ---------- //
+const editMode = defineModel<boolean>('edit-mode')
+watch(editMode, (value, oldValue, onCleanup) => {
+  if (!value && oldValue) {
+    waiting.value = false
+    editedText.value = text.value
+  }
+  onCleanup(() => {
+    waiting.value = false
+    editedText.value = text.value
+  })
+})
+
+// ----- Properties ---------- //
+interface EditableLabelProps {
+  resourceId: string,
+  text: string,
+  multiline: boolean,
+  textCss?: string,
+}
+
+const props = defineProps<EditableLabelProps>()
+const resourceId = toRef(() => props.resourceId)
+const text = toRef(() => props.text)
+const editedText = ref<string>(text.value || '')
+const waiting = ref(false)
+// ----- End Properties ---------- //
+
+const emit = defineEmits<{
+  (e: 'updated-value', resourceId: string, value: string): void
+}>();
+
+async function emitSave() {
+  waiting.value = true
+  emit('updated-value', resourceId.value, editedText.value)
+}
+
+async function save() {
+  const request = {
+    id: props.resourceId,
+    description: text.value
+  } as UpdateResourceDescriptionRequest
+  waiting.value = true
+
+  await $fetch<UpdateResourceDescriptionResponse>('/api/v3/resources/description', {
+    method: 'POST',
+    body: request
+  }).then(response => {
+    console.info('[EditableLabel] Description update successful')
+    toast({
+      description: h('div',
+          {class: 'flex space-x-2 items-center justify-center text-aruna-text-accent'},
+          [
+            h(IconCheck, {class: 'flex-shrink-0 size-6 text-aruna-highlight'}),
+            h('span',
+                {class: 'text-fuchsia-50'},
+                ['Update successful.'])
+          ]),
+      duration: 5000
+    })
+
+    waiting.value = false
+    editMode.value = false
+
+  }).catch(error => {
+    console.error('[EditableLabel] Update error', error.data)
+    waiting.value = false
+  })
+
+}
+</script>
+<template>
+  <div v-if="editMode"
+       class="flex flex-col w-full items-center gap-1.5">
+    <div class="w-full items-center">
+      <!-- Textarea for multiline strings -->
+      <div v-if="multiline"
+           class="flex">
+        <Textarea v-model="editedText"
+                  :rows="5"
+                  placeholder="Enter a description for your resource"
+                  class="py-3 ps-4 pe-6 w-full border-aruna-text/50 rounded-s-md rounded-e-none bg-aruna-muted text-aruna-text-accent text-sm
+                                   focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                                   focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                                   disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+        <div class="flex flex-col h-fit">
+          <Button variant="outline"
+                  @click="emitSave()"
+                  :disabled="waiting"
+                  class="rounded-none rounded-tr-sm border-aruna-text/50 px-2 h-auto bg-transparent text-aruna-highlight hover:bg-aruna-highlight/25 hover:text-aruna-highlight">
+            <IconLoader3 v-if="waiting" class="text-aruna-highlight animate-spin"/>
+            <IconDeviceFloppy v-else/>
+          </Button>
+          <Button variant="outline"
+                  @click="editMode = false"
+                  class="rounded-none rounded-br-sm border-aruna-text/50 px-2 h-auto bg-transparent text-destructive hover:bg-destructive/25 hover:text-destructive">
+            <IconCancel/>
+          </Button>
+        </div>
+      </div>
+      <!-- End Textarea for multiline strings -->
+      <!-- Input for single line strings -->
+      <div v-else class="flex">
+        <Input type="text"
+               v-model="editedText"
+               placeholder="Enter a description for your resource"
+               class="py-2 px-3 h-auto w-full border-aruna-text/50 rounded-l-md rounded-e-none bg-aruna-muted text-aruna-text-accent text-sm
+                    focus:border-aruna-highlight focus:ring-aruna-highlight focus:outline-none
+                    focus-visible:border-aruna-highlight focus-visible:ring-aruna-highlight focus-visible:outline-none
+                    disabled:opacity-50 disabled:pointer-events-none placeholder:text-aruna-text"/>
+        <Button variant="outline"
+                @click="emitSave()"
+                :disabled="waiting"
+                class="rounded-none border-aruna-text/50 px-2 h-auto bg-transparent text-aruna-highlight hover:bg-aruna-highlight/25 hover:text-aruna-highlight">
+          <IconLoader3 v-if="waiting" class="text-aruna-highlight animate-spin"/>
+          <IconDeviceFloppy v-else/>
+        </Button>
+        <Button variant="outline"
+                @click="editMode = false"
+                class="rounded-s-none border-aruna-text/50 px-2 h-auto bg-transparent text-destructive hover:bg-destructive/25 hover:text-destructive">
+          <IconCancel/>
+        </Button>
+      </div>
+      <!-- End Input for single line strings -->
+    </div>
+  </div>
+  <!-- Text Display -->
+  <span v-else :class="cn('text-aruna-text', props.textCss)">{{ text }}</span>
+  <!-- End Text Display -->
+</template>
\ No newline at end of file

From ea4d5958ede20e2039752e4596753ea70a85f485 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 12 Feb 2025 15:45:24 +0100
Subject: [PATCH 116/125] chore: Add API endpoints for resource updates

---
 server/api/v3/resources/description.post.ts | 17 +++++++++++++++++
 server/api/v3/resources/name.post.ts        | 17 +++++++++++++++++
 server/api/v3/resources/title.post.ts       | 17 +++++++++++++++++
 3 files changed, 51 insertions(+)
 create mode 100644 server/api/v3/resources/description.post.ts
 create mode 100644 server/api/v3/resources/name.post.ts
 create mode 100644 server/api/v3/resources/title.post.ts

diff --git a/server/api/v3/resources/description.post.ts b/server/api/v3/resources/description.post.ts
new file mode 100644
index 00000000..ec374a21
--- /dev/null
+++ b/server/api/v3/resources/description.post.ts
@@ -0,0 +1,17 @@
+import {UpdateResourceDescriptionResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<UpdateResourceDescriptionResponse>(`${baseUrl}/api/v3/resources/description`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  }).then(response => {
+    console.log('[UpdateDescription Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/resources/name.post.ts b/server/api/v3/resources/name.post.ts
new file mode 100644
index 00000000..f05e1a26
--- /dev/null
+++ b/server/api/v3/resources/name.post.ts
@@ -0,0 +1,17 @@
+import {UpdateResourceNameResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<UpdateResourceNameResponse>(`${baseUrl}/api/v3/resources/name`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  }).then(response => {
+    console.log('[UpdateName Server]', response)
+    return response
+  })
+})
\ No newline at end of file
diff --git a/server/api/v3/resources/title.post.ts b/server/api/v3/resources/title.post.ts
new file mode 100644
index 00000000..ca8aff21
--- /dev/null
+++ b/server/api/v3/resources/title.post.ts
@@ -0,0 +1,17 @@
+import {UpdateResourceTitleResponse} from "~/composables/api_wrapper";
+
+export default defineEventHandler(async event => {
+  const body = await readBody(event)
+  const baseUrl = useRuntimeConfig().serverHostUrl
+
+  return await $fetch<UpdateResourceTitleResponse>(`${baseUrl}/api/v3/resources/title`, {
+    method: 'POST',
+    headers: {
+      'Authorization': `Bearer ${event.context.access_token}`
+    },
+    body: body
+  }).then(response => {
+    console.log('[UpdateTitle Server]', response)
+    return response
+  })
+})
\ No newline at end of file

From 51cd09717f25d346805d9a8d99b50e87f839a731 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 12 Feb 2025 15:45:42 +0100
Subject: [PATCH 117/125] chore: Fix broken background image link

---
 pages/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/index.vue b/pages/index.vue
index 821601ad..85b08750 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,7 +8,7 @@ import Hero from "~/components/custom-ui/frontpage/Hero.vue";
 </script>
 <template>
   <div class="flex flex-col flex-grow">
-    <div class="bg-[url('/public/imgs/global-bg.webp')] bg-cover bg-fixed bg-center bg-no-repeat">
+    <div class="bg-[url('/imgs/global-bg.webp')] bg-cover bg-fixed bg-center bg-no-repeat">
       <!-- Header + Navigation -->
       <NavigationTop/>
       <!-- END Header + Navigation -->

From 94e8c2b4c91f3e845386cf5fc9a80e6b0d5d0be8 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 12 Feb 2025 15:47:10 +0100
Subject: [PATCH 118/125] feat: Replace static info display with EditableLabel

This is a rudimentary integration without checks for permissions etc.
---
 .../custom-ui/dashboard/FileExplorer.vue      | 179 +++++++++++++++---
 1 file changed, 150 insertions(+), 29 deletions(-)

diff --git a/components/custom-ui/dashboard/FileExplorer.vue b/components/custom-ui/dashboard/FileExplorer.vue
index 41f995b4..2620cbfe 100644
--- a/components/custom-ui/dashboard/FileExplorer.vue
+++ b/components/custom-ui/dashboard/FileExplorer.vue
@@ -73,6 +73,7 @@ import {Upload} from "@aws-sdk/lib-storage";
 import {S3Client} from "@aws-sdk/client-s3";
 import type {S3ClientConfig} from "@aws-sdk/client-s3/dist-types/S3Client";
 import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "~/components/ui/tooltip";
+import EditableLabel from "~/components/custom-ui/EditableLabel.vue";
 
 const dropZoneRef = ref<HTMLDivElement>()
 
@@ -117,10 +118,10 @@ function updateProgress(current: number, total: number | undefined) {
   fileUploadProgress.value = +floatProgress.toFixed(2)
 }
 
-/* ----- End Dropzone ----- */
+// ----- End Dropzone ---------- //
 
 
-/* ----- PROPERTIES ----- */
+// ----- PROPERTIES ---------- //
 interface FileExplorerProps {
   resources: ResourceElement[]
   licenses: License[]
@@ -142,6 +143,10 @@ const infoSelection: Ref<ResourceElement | undefined> = ref(undefined)
 watch(infoSelection, () => console.log('[FileExplorer] Current selection:', infoSelection.value))
 const infoOpen: Ref<boolean> = ref(false)
 
+const nameEditMode = ref(false)
+const titleEditMode = ref(false)
+const descriptionEditMode = ref(false)
+
 watchEffect(async () => {
   console.log('[FileExplorer] Current Hierarchy:', currentHierarchy.value.map(ele => ele.id).join(', '))
   if (currentHierarchy.value.length <= 0) {
@@ -395,12 +400,110 @@ async function submitUpload() {
 const currentPage = ref<number>(1)
 const pageSize = ref<number>(3)
 const totalHits = ref<number>(6)
-const offset = computed(() => (currentPage.value - 1) * pageSize.value)// currentPage.value * pageSize.value) //
+const offset = computed(() => (currentPage.value - 1) * pageSize.value)
 watch(offset, () => {
   console.info(`[FileExplorer] Current page: ${currentPage.value}, Current page size: ${pageSize.value}, Current offset: ${offset.value}`)
   console.info('[FileExplorer] Current resource children:', currentHierarchy.value[currentHierarchy.value.length - 1].children.length)
 })
+
 // ----- End Pagination ---------- //
+
+// ----- Update Functions --------------------
+async function updateName(resourceId: string, name: string) {
+  await $fetch('/api/v3/resources/name', {
+    method: 'POST',
+    body: {
+      id: resourceId,
+      name: name
+    }
+  }).then(() => {
+    infoSelection.value.name = name
+    nameEditMode.value = false
+    toast({
+      description: h('div',
+          {class: 'flex space-x-2 items-center justify-center text-aruna-text-accent'},
+          [
+            h(IconCheck, {class: 'flex-shrink-0 size-6 text-aruna-highlight'}),
+            h('span',
+                {class: 'text-fuchsia-50'},
+                ['Name successfully updated.'])
+          ]),
+      duration: 5000
+    })
+  }).catch(error => {
+    toast({
+      title: 'Error',
+      //description: 'Something went wrong. If this problem persists please contact an administrator.',
+      description: `Failed to update name: ${error.data.message}`,
+      variant: 'destructive',
+      duration: 10000,
+    })
+  })
+}
+
+async function updateTitle(resourceId: string, title: string) {
+  await $fetch('/api/v3/resources/title', {
+    method: 'POST',
+    body: {
+      id: resourceId,
+      title: title
+    }
+  }).then(() => {
+    infoSelection.value.title = title
+    titleEditMode.value = false
+    toast({
+      description: h('div',
+          {class: 'flex space-x-2 items-center justify-center text-aruna-text-accent'},
+          [
+            h(IconCheck, {class: 'flex-shrink-0 size-6 text-aruna-highlight'}),
+            h('span',
+                {class: 'text-fuchsia-50'},
+                ['Title successfully updated.'])
+          ]),
+      duration: 5000
+    })
+  }).catch(error => {
+    toast({
+      title: 'Error',
+      //description: 'Something went wrong. If this problem persists please contact an administrator.',
+      description: `Failed to update title: ${error.data.message}`,
+      variant: 'destructive',
+      duration: 10000,
+    })
+  })
+}
+
+async function updateDescription(resourceId: string, description: string) {
+  await $fetch('/api/v3/resources/description', {
+    method: 'POST',
+    body: {
+      id: resourceId,
+      description: description
+    }
+  }).then(() => {
+    infoSelection.value.description = description
+    descriptionEditMode.value = false
+    toast({
+      description: h('div',
+          {class: 'flex space-x-2 items-center justify-center text-aruna-text-accent'},
+          [
+            h(IconCheck, {class: 'flex-shrink-0 size-6 text-aruna-highlight'}),
+            h('span',
+                {class: 'text-fuchsia-50'},
+                ['Description successfully updated.'])
+          ]),
+      duration: 5000
+    })
+  }).catch(error => {
+    toast({
+      title: 'Error',
+      //description: 'Something went wrong. If this problem persists please contact an administrator.',
+      description: `Failed to update description: ${error.data.message}`,
+      variant: 'destructive',
+      duration: 10000,
+    })
+  })
+}
 </script>
 <template>
   <div class="flex flex-col h-full w-full">
@@ -659,16 +762,16 @@ watch(offset, () => {
             </div>
 
             <Label for="license">License</Label>
-            <Select :default-value="licenses[0].id"
+            <Select :default-value="props.licenses[0].id"
                     @update:model-value="(v) => fileLicense = v">
               <SelectTrigger class="bg-aruna-muted w-full max-w-[450px]">
                 <SelectValue placeholder="Select a license for your resource"/>
               </SelectTrigger>
               <SelectContent class="bg-aruna-bg/90 truncate overflow-ellipsis">
                 <SelectGroup>
-                  <SelectItem v-for="license in licenses" :value="license.id"
+                  <SelectItem v-for="license in props.licenses" :value="license.id"
                               class="hover:bg-aruna-fg">
-                    {{ license.label }}
+                    {{ license.name }}
                   </SelectItem>
                 </SelectGroup>
               </SelectContent>
@@ -676,14 +779,14 @@ watch(offset, () => {
           </div>
 
           <div v-else-if="infoSelection" class="gap-y-4">
-            <div class="flex justify-between">
-              <div class="flex items-center">
+            <div class="flex items-center justify-between">
+              <div class="flex w-full items-center">
                 <!-- Locked / Unlocked -->
                 <TooltipProvider :delay-duration="500">
                   <Tooltip>
                     <TooltipTrigger as-child>
-                      <IconLock v-if="infoSelection?.locked" class="text-destructive"/>
-                      <IconLockOpen2 v-else class="text-aruna-highlight"/>
+                      <IconLock v-if="infoSelection?.locked" class="me-4 text-destructive"/>
+                      <IconLockOpen2 v-else class="me-4 text-aruna-highlight"/>
                     </TooltipTrigger>
                     <TooltipContent class="rounded-none text-aruna-highlight bg-aruna-muted border border-aruna-text/50">
                       <span v-if="infoSelection?.locked">This resource is locked and cannot be edited.</span>
@@ -693,12 +796,19 @@ watch(offset, () => {
                 </TooltipProvider>
                 <!-- End Locked / Unlocked -->
                 <!-- Name / Title -->
-                <h2 class="ms-4 text-2xl">{{ infoSelection?.title || 'Title not available' }}</h2>
+                <EditableLabel v-model:edit-mode="titleEditMode"
+                               @dblclick="titleEditMode = true"
+                               @updated-value="updateTitle"
+                               :resourceId="infoSelection?.id"
+                               :text="infoSelection?.title || 'Title not available'"
+                               text-css="text-2xl text-aruna-text-accent"
+                               :multiline="false"/>
+                <!--<h2 class="ms-4 text-2xl">{{ infoSelection?.title || 'Title not available' }}</h2>-->
                 <!-- End Name / Title -->
               </div>
               <!-- Link to resource landing page -->
               <NuxtLink :to="`/objects/${infoSelection?.id}`" target="_blank">
-                <IconExternalLink class="flex-shrink-0 text-aruna-text-accent hover:text-aruna-highlight"/>
+                <IconExternalLink class="ms-4 flex-shrink-0 text-aruna-text-accent hover:text-aruna-highlight"/>
               </NuxtLink>
               <!-- End Link to resource landing page -->
             </div>
@@ -725,7 +835,7 @@ watch(offset, () => {
             <Table class="table-auto">
               <TableBody class="">
                 <TableRow>
-                  <TableCell class="w-fit min-w-[125px] text-sm font-medium leading-6 text-aruna-text-accent">
+                  <TableCell class="w-[125px] text-sm font-medium leading-6 text-aruna-text-accent">
                     Id:
                   </TableCell>
                   <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
@@ -735,7 +845,12 @@ watch(offset, () => {
                 <TableRow>
                   <TableCell class="text-sm font-medium leading-6 text-aruna-text-accent">Name:</TableCell>
                   <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                    {{ infoSelection?.name || '' }}
+                    <EditableLabel v-model:edit-mode="nameEditMode"
+                                   @dblclick="nameEditMode = true"
+                                   @updated-value="updateName"
+                                   :resourceId="infoSelection?.id"
+                                   :text="infoSelection?.name"
+                                   :multiline="false"/>
                   </TableCell>
                 </TableRow>
                 <TableRow>
@@ -743,7 +858,12 @@ watch(offset, () => {
                     Description:
                   </TableCell>
                   <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                    {{ infoSelection?.description || '' }}
+                    <EditableLabel v-model:edit-mode="descriptionEditMode"
+                                   @dblclick="descriptionEditMode = true"
+                                   @updated-value="updateDescription"
+                                   :resourceId="infoSelection?.id"
+                                   :text="infoSelection?.description"
+                                   :multiline="true"/>
                   </TableCell>
                 </TableRow>
                 <TableRow v-if="infoSelection?.variant === ResourceVariant.Object">
@@ -781,7 +901,7 @@ watch(offset, () => {
                     License:
                   </TableCell>
                   <TableCell class="mt-1 ps-4 text-sm leading-6 text-aruna-text sm:col-span-2 sm:mt-0">
-                    {{ licenseMap.get(infoSelection?.license_id) || 'N/A' }}
+                    {{ licenseMap.get(infoSelection?.license_id)?.name || 'N/A' }}
                   </TableCell>
                 </TableRow>
                 <TableRow>
@@ -818,19 +938,20 @@ watch(offset, () => {
             </Table>
           </div>
 
-          <div class="flex gap-x-4">
-            <Button v-if="fileUpload"
-                    variant="outline"
-                    @click="submitUpload"
-                    class="inline-flex w-fit bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
-              Upload
-            </Button>
-            <Button variant="outline"
-                    @click="closeInfo"
-                    class="inline-flex w-fit bg-transparent text-aruna-text border border-aruna-text hover:bg-aruna-h hover:text-aruna-text-accent hover:border-aruna-text-accent">
-              Close
-            </Button>
-
+          <div class="flex justify-between">
+            <div class="flex gap-x-2">
+              <Button v-if="fileUpload"
+                      variant="outline"
+                      @click="submitUpload"
+                      class="inline-flex w-fit bg-transparent text-aruna-highlight border border-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent">
+                Upload
+              </Button>
+              <Button variant="outline"
+                      @click="closeInfo"
+                      class="inline-flex w-fit bg-transparent text-aruna-text border border-aruna-text hover:bg-aruna-h hover:text-aruna-text-accent hover:border-aruna-text-accent">
+                Close
+              </Button>
+            </div>
             <Button v-if="infoSelection"
                     variant="outline"
                     @click="deleteResource(infoSelection)"

From 8a417aceebcce4f005d171ec9227aed053fc2591 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 12 Feb 2025 15:58:36 +0100
Subject: [PATCH 119/125] fix: Emit event after realm component creation

---
 components/custom-ui/dashboard/Realms.vue            | 4 ++--
 components/custom-ui/dialog/RealmComponentDialog.vue | 5 ++---
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/components/custom-ui/dashboard/Realms.vue b/components/custom-ui/dashboard/Realms.vue
index 8f58a94b..f849ace6 100644
--- a/components/custom-ui/dashboard/Realms.vue
+++ b/components/custom-ui/dashboard/Realms.vue
@@ -278,7 +278,7 @@ function openComponentCreation(realmId: string) {
   componentDialogOpen.value = true
 }
 
-function addComponent(component: v3Component) {
+function addComponent(component: v3Component, realmId: string) {
   toast({
     title: 'Event Received',
     description: `Received "AddComponent" event: ${component.id}`
@@ -411,7 +411,7 @@ const expandedDescription = ref<Set<string>>(new Set())
   <RealmComponentDialog :initial-open="componentDialogOpen"
                         :with-button="false"
                         :realm-id="currentRealm"
-                        @add-component=""
+                        @add-component="addComponent"
                         @update:open="componentDialogOpen = false"/>
 
   <div class="mx-4 mt-4 h-full flex flex-col">
diff --git a/components/custom-ui/dialog/RealmComponentDialog.vue b/components/custom-ui/dialog/RealmComponentDialog.vue
index 0f1f80b2..e164be2f 100644
--- a/components/custom-ui/dialog/RealmComponentDialog.vue
+++ b/components/custom-ui/dialog/RealmComponentDialog.vue
@@ -35,7 +35,7 @@ watch(externalTrigger, () => (open.value = externalTrigger.value))
 
 /* ----- EVENT EMITS ----- */
 const emit = defineEmits<{
-  'add-component': [component: v3Component]
+  'add-component': [component: v3Component, realmId: string]
 }>()
 /* ----- END EVENT EMITS ----- */
 
@@ -120,7 +120,7 @@ const onSubmit = handleSubmit(async (values) => {
       title: 'Success',
       description: h('pre', {class: 'mt-2 w-[500px] rounded-md bg-slate-950 p-4'}, h('code', {class: 'text-white'}, JSON.stringify(response, null, 2))),
     })
-    emit('add-component', response.component)
+    emit('add-component', response.component, values.realm_id)
     open.value = false
 
   }).catch(error => {
@@ -152,7 +152,6 @@ const onSubmit = handleSubmit(async (values) => {
         </DialogTitle>
         <DialogDescription class="flex flex-col gap-y-4 justify-start">
           Add a new component to your realm.
-          <pre>{{ JSON.stringify(values, null, 2) }}</pre>
         </DialogDescription>
       </DialogHeader>
 

From 63c0f8201bcc348068768b7357d05e2e5a2d7636 Mon Sep 17 00:00:00 2001
From: Jannis Hochmuth <jannis.hochmuth@computational.bio.uni-giessen.de>
Date: Wed, 12 Feb 2025 16:03:48 +0100
Subject: [PATCH 120/125] chore: export missing types

---
 composables/api_wrapper.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/composables/api_wrapper.ts b/composables/api_wrapper.ts
index 52a34dbb..04185182 100644
--- a/composables/api_wrapper.ts
+++ b/composables/api_wrapper.ts
@@ -48,7 +48,7 @@ export type CreateRealmRequest = paths["/api/v3/realms"]["post"]["requestBody"][
 export type CreateTokenRequest = paths["/api/v3/users/tokens"]["post"]["requestBody"]["content"]["application/json"];
 export type CreateResourceRequest = paths["/api/v3/resources"]["post"]["requestBody"]["content"]["application/json"];
 export type CreateS3CredentialsRequest = paths["/api/v3/users/s3credentials"]["post"]["requestBody"]["content"]["application/json"];
-
+export type UpdateResourceDescriptionRequest = paths["/api/v3/resources/description"]["post"]["requestBody"]["content"]["application/json"];
 
 // ----- Responses -----
 // Global
@@ -62,6 +62,10 @@ export type GetEventsResponse = paths["/api/v3/info/events"]["get"]["responses"]
 export type GetStatsResponse = paths["/api/v3/info/stats"]["get"]["responses"][200]["content"]["application/json"];
 export type SearchResponse = paths["/api/v3/info/search"]["get"]["responses"][200]["content"]["application/json"];
 
+// License
+export type CreateLicensesResponse = paths["/api/v3/license"]["post"]["responses"][200]["content"]["application/json"];
+export type GetLicensesResponse = paths["/api/v3/license"]["get"]["responses"][200]["content"]["application/json"];
+
 // Realms
 export type CreateRealmResponse = paths["/api/v3/realms"]["post"]["responses"][200]["content"]["application/json"];
 export type GetRealmComponentsResponse = paths["/api/v3/realms/{id}/components"]["get"]["responses"][200]["content"]["application/json"];
@@ -73,6 +77,9 @@ export type CreateResourceResponse = paths["/api/v3/resources"]["post"]["respons
 export type GetResourcesResponse = paths["/api/v3/resources"]["get"]["responses"][200]["content"]["application/json"];
 export type GetRelationsResponse = paths["/api/v3/resources/{id}/relations"]["get"]["responses"][200]["content"]["application/json"];
 export type DeleteResourcesResponse = paths["/api/v3/resources/{id}"]["delete"]["responses"][200]["content"]["application/json"];
+export type UpdateResourceNameResponse = paths["/api/v3/resources/name"]["post"]["responses"][200]["content"]["application/json"];
+export type UpdateResourceTitleResponse = paths["/api/v3/resources/title"]["post"]["responses"][200]["content"]["application/json"];
+export type UpdateResourceDescriptionResponse = paths["/api/v3/resources/description"]["post"]["responses"][200]["content"]["application/json"];
 
 // Users
 export type RegisterUserResponse = paths["/api/v3/users"]["post"]["responses"][200]["content"]["application/json"];
@@ -113,6 +120,11 @@ export type SimpleCredentials = {
   secret_key: string
 }
 
+export type RealmContext = {
+  realm: Realm,
+  group: Group
+}
+
 // ----- Events -----
 export enum EventTypes {
   RegisterUser = 'RegisterUserRequestTx',

From 22316a3c968d33b71ce6abdd5af898a4046a1031 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 18 Feb 2025 13:29:58 +0100
Subject: [PATCH 121/125] feat: WIP change explore page to new v3 api

---
 components/card/resource.vue  | 119 +++++++++++++++++++---------------
 components/search_results.vue |  11 +++-
 pages/explore.vue             |  89 ++++++++++++++-----------
 3 files changed, 124 insertions(+), 95 deletions(-)

diff --git a/components/card/resource.vue b/components/card/resource.vue
index dc8ea0a1..6bfba076 100644
--- a/components/card/resource.vue
+++ b/components/card/resource.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import {modelsv2Status, v2DataClass, type v2GenericResource, v2ResourceVariant,} from '~/composables/aruna_api_json';
+import {modelsv2Status, v2DataClass, v2ResourceVariant,} from '~/composables/aruna_api_json';
 
 /* ----- PROPERTIES ----- */
 interface ResourceCardProps {
-  resource: v2GenericResource
+  resource: Resource
 }
 
 const {resource} = defineProps<ResourceCardProps>()
-const entry = toSearchResult(resource)
+
 
 /* ----- END PROPERTIES ----- */
 
@@ -36,63 +36,76 @@ function dataClassCss(dataClass: v2DataClass): string {
 </script>
 
 <template>
-  <div v-if="entry"
+  <div
        class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"
-       :class="{'border-l-destructive': entry.object_status === modelsv2Status.STATUS_DELETED}">
+       :class="{'border-l-destructive': resource.deleted}">
     <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">
-      <!-- Name and ID display with links -->
-      <NuxtLink :to="`/objects/${entry.id}`"
+      <!-- Name and ID display -->
+      <NuxtLink :to="`/objects/${resource.id}`"
                 class="text-aruna-highlight font-bold">
-        <h3>{{ entry.name }}</h3>
+        <h3>{{ resource.name }}</h3>
       </NuxtLink>
+      <h4>{{ resource.type === "Resource" ? resource.variant : resource.type }}</h4>
+      <!-- END Name and ID display -->
+    </div>
+  </div>
+<!--  <div v-if="entry"-->
+<!--       class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"-->
+<!--       :class="{'border-l-destructive': entry.object_status === modelsv2Status.STATUS_DELETED}">-->
+<!--    <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">-->
+<!--      &lt;!&ndash; Name and ID display with links &ndash;&gt;-->
+<!--      <NuxtLink :to="`/objects/${entry.id}`"-->
+<!--                class="text-aruna-highlight font-bold">-->
+<!--        <h3>{{ entry.name }}</h3>-->
+<!--      </NuxtLink>-->
 
-      <NuxtLink :to="`/objects/${entry.id}`"
-                class="text-sm text-aruna-text-accent font-bold">
-        <h4>{{ entry.id }}</h4>
-      </NuxtLink>
-      <!-- END Name and ID display with links -->
+<!--      <NuxtLink :to="`/objects/${entry.id}`"-->
+<!--                class="text-sm text-aruna-text-accent font-bold">-->
+<!--        <h4>{{ entry.id }}</h4>-->
+<!--      </NuxtLink>-->
+<!--      &lt;!&ndash; END Name and ID display with links &ndash;&gt;-->
 
-      <!-- Badges -->
-      <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">
-        <!-- DataClass Badge -->
-        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', dataClassCss(entry.data_class))">
-          {{ displayDataClass(entry.data_class) }}
-        </Badge>
-        <!-- END DataClass -->
-        <!-- Stats Badge -->
-        <Badge v-if="entry.variant !== v2ResourceVariant.RESOURCE_VARIANT_OBJECT"
-               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-          Children: {{ entry.stats.count }}
-        </Badge>
-        <Badge class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-          {{ entry.stats.size ? formatBytes(+entry.stats.size) : "N/A Bytes" }}
-        </Badge>
-        <!-- END Stats Badge -->
-      </div>
-      <!-- END Badges -->
-    </div>
+<!--      &lt;!&ndash; Badges &ndash;&gt;-->
+<!--      <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">-->
+<!--        &lt;!&ndash; DataClass Badge &ndash;&gt;-->
+<!--        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', dataClassCss(entry.data_class))">-->
+<!--          {{ displayDataClass(entry.data_class) }}-->
+<!--        </Badge>-->
+<!--        &lt;!&ndash; END DataClass &ndash;&gt;-->
+<!--        &lt;!&ndash; Stats Badge &ndash;&gt;-->
+<!--        <Badge v-if="entry.variant !== v2ResourceVariant.RESOURCE_VARIANT_OBJECT"-->
+<!--               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">-->
+<!--          Children: {{ entry.stats.count }}-->
+<!--        </Badge>-->
+<!--        <Badge class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">-->
+<!--          {{ entry.stats.size ? formatBytes(+entry.stats.size) : "N/A Bytes" }}-->
+<!--        </Badge>-->
+<!--        &lt;!&ndash; END Stats Badge &ndash;&gt;-->
+<!--      </div>-->
+<!--      &lt;!&ndash; END Badges &ndash;&gt;-->
+<!--    </div>-->
 
-    <div class="mx-2 grow flex-col basis-2/3">
-      <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>
-      <p v-if="entry.description.length > 0" class="mt-2 text-aruna-text">
-        {{ displayDescription(entry.description) }}
-      </p>
+<!--    <div class="mx-2 grow flex-col basis-2/3">-->
+<!--      <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>-->
+<!--      <p v-if="entry.description.length > 0" class="mt-2 text-aruna-text">-->
+<!--        {{ displayDescription(entry.description) }}-->
+<!--      </p>-->
 
-      <hr v-if="entry.key_values.length > 0" class="my-4 text-aruna-text "/>
+<!--      <hr v-if="entry.key_values.length > 0" class="my-4 text-aruna-text "/>-->
 
-      <!-- Basic Label Display -->
-      <div class="flex flex-row flex-wrap">
-        <div v-for="label in entry.key_values" class="flex flex-row my-1 me-2 last:me-0">
-          <span
-              :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"
-              class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">
-            {{ label.key }}
-          </span>
-          <span v-if="label.value"
-                class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">
-            {{ label.value }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
+<!--      &lt;!&ndash; Basic Label Display &ndash;&gt;-->
+<!--      <div class="flex flex-row flex-wrap">-->
+<!--        <div v-for="label in entry.key_values" class="flex flex-row my-1 me-2 last:me-0">-->
+<!--          <span-->
+<!--              :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"-->
+<!--              class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">-->
+<!--            {{ label.key }}-->
+<!--          </span>-->
+<!--          <span v-if="label.value"-->
+<!--                class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">-->
+<!--            {{ label.value }}</span>-->
+<!--        </div>-->
+<!--      </div>-->
+<!--    </div>-->
+<!--  </div>-->
 </template>
\ No newline at end of file
diff --git a/components/search_results.vue b/components/search_results.vue
index fe1c755f..7690e221 100644
--- a/components/search_results.vue
+++ b/components/search_results.vue
@@ -1,16 +1,21 @@
 <script setup lang="ts">
-import type {v2GenericResource} from '@/composables/aruna_api_json';
 
 interface SearchResultListProps {
-  resources: v2GenericResource[]
+  resources: Resource[],
+  fetching: boolean,
 }
 const {resources} = defineProps<SearchResultListProps>()
 </script>
 
 <template>
-  <div v-if="resources.length == 0">
+  <div v-if="fetching">
+    <h2 class="text-aruna-text-accent font-bold text-center">Fetching Results</h2>
+  </div>
+
+  <div v-if="resources.length == 0 && !fetching">
     <h2 class="text-aruna-text-accent font-bold text-center">No results found</h2>
   </div>
 
+
   <CardResource v-for="hit in resources" :resource="hit" />
 </template>
\ No newline at end of file
diff --git a/pages/explore.vue b/pages/explore.vue
index 0980d9c5..aaf4790f 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -1,14 +1,11 @@
 <script lang="ts" setup>
-import {v2ResourceVariant, type v2GenericResource} from "~/composables/aruna_api_json";
 import {
   IconFile,
-  IconFiles,
   IconFolder,
   IconFolders,
   IconSearch,
   IconWorldSearch,
 } from "@tabler/icons-vue";
-import {Button} from '@/components/ui/button'
 import {
   Pagination,
   PaginationEllipsis,
@@ -19,23 +16,30 @@ import {
   PaginationNext,
   PaginationPrev,
 } from '@/components/ui/pagination'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import {ResourceVariant} from "~/types/aruna-v3-enums";
 
 import {searchResources} from "~/composables/api_wrapper";
 
 const currentPage: Ref<number> = ref(1);
 const limit: Ref<number> = ref(20);
-const hits: Ref<v2GenericResource[]> = ref([]);
+const hits: Ref<Resource[]> = ref([]);
 const estimatedTotal = ref(0);
+const fetching = ref(false);
+
+const debouncedInput = debounce(async () => await queryResources(true), 250)
 
 /* Query */
 const query = ref("");
 watch(query, async () => {
-  await queryResources(true)
+  fetching.value = true;
+  await debouncedInput()
 });
 
 /* Filter */
-const filter = ref("object_type = PROJECT");
-const typeFilter = ref(v2ResourceVariant.RESOURCE_VARIANT_PROJECT);
+const filter = ref("variant=0");
+const typeFilter = ref(ResourceVariant.Project);
 const customFilter = ref("");
 const customFilterValid = ref(true);
 
@@ -48,25 +52,22 @@ watch(typeFilter, async () => {
 
 function generateFilter() {
   switch (typeFilter.value) {
-    case v2ResourceVariant.RESOURCE_VARIANT_UNSPECIFIED: {
+    case null: {
       filter.value = "";
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_PROJECT: {
-      filter.value = "object_type = PROJECT";
+    case ResourceVariant.Project: {
+      filter.value = "variant=0";
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_COLLECTION: {
-      filter.value = "object_type = COLLECTION";
+    case ResourceVariant.Folder: {
+      filter.value = "variant=1";
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_DATASET: {
-      filter.value = "object_type = DATASET";
+    case ResourceVariant.Object: {
+      filter.value = "variant=2";
       break;
     }
-    case v2ResourceVariant.RESOURCE_VARIANT_OBJECT: {
-      filter.value = "object_type = OBJECT";
-    }
   }
 
   if (customFilter.value.length > 0) {
@@ -93,13 +94,26 @@ async function queryResources(pageReset: boolean) {
   })
 
   try {
-    const response = await searchResources(body)
+    //const response = await searchResources(body)
+    const response = await $fetch<SearchResponse>('/api/v3/search', {
+      query: {
+        query: query.value,
+        limit: limit.value,
+        filter: filter.value,
+        offset: offset,
+      }
+    }).catch(error => {
+      console.error(error)
+      throw new Error("Resource search failed.")
+    })
 
     customFilterValid.value = true;
     hits.value = response.resources ? response.resources : [];
-    estimatedTotal.value = response.estimatedTotal
-        ? Number(response.estimatedTotal)
+    console.log(hits.value);
+    estimatedTotal.value = response.expected_hits
+        ? Number(response.expected_hits)
         : 0;
+    fetching.value = false;
   } catch (error) {
     console.warn(error);
     customFilterValid.value = false;
@@ -133,13 +147,22 @@ onMounted(async () => await queryResources(true));
         <div>
           <label class="sr-only" for="search-query-input-with-icon">Search query input</label>
           <div class="flex rounded-md shadow-sm">
+            <!-- <Input type="text"
+                   id="search-query-input-with-icon"
+                   v-model="query"
+                   name="search-query-input-with-icon"
+                   placeholder="Search Aruna Resources"
+            />
+            <Button type="button">
+              <IconSearch class="flex-shrink-0 size-6"/>
+            </Button> -->
             <input type="text"
                    v-model="query"
                    id="search-query-input-with-icon"
                    name="search-query-input-with-icon"
                    class="py-3 px-4 pe-11 block w-full border-e-0 border-aruna-text/50 rounded-s-md text-sm focus:z-10 focus:ring-1 focus:ring-aruna-highlight focus:border-aruna-highlight disabled:opacity-50 disabled:pointer-events-none bg-aruna-bg/90 text-aruna-text"
                    placeholder="Search Aruna Resources"/>
-            <button type="button"
+                 <button type="button"
                     class="w-[2.875rem] h-[2.875rem] flex-shrink-0 inline-flex justify-center items-center gap-x-2 text-sm font-semibold rounded-e-md border border-aruna-highlight bg-aruna-bg/90 text-aruna-highlight hover:bg-aruna-highlight hover:text-aruna-text-accent disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-highlight">
               <IconSearch class="flex-shrink-0 size-6"/>
             </button>
@@ -162,7 +185,7 @@ onMounted(async () => await queryResources(true));
                  class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_UNSPECIFIED"
+                   :value="null"
                    id="resource-type-all"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
@@ -175,7 +198,7 @@ onMounted(async () => await queryResources(true));
             <input type="radio"
                    checked
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_PROJECT"
+                   :value="ResourceVariant.Project"
                    id="resource-type-projects"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
@@ -187,31 +210,19 @@ onMounted(async () => await queryResources(true));
                  class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_COLLECTION"
+                   :value="ResourceVariant.Folder"
                    id="resource-type-collections"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
             <IconFolder class="flex-shrink-0 size-5 mx-2 text-aruna-text ms-5"/>
-            <span class="text-sm text-aruna-text">Collections</span>
-          </label>
-
-          <label for="resource-type-datasets"
-                 class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
-            <input type="radio"
-                   v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_DATASET"
-                   id="resource-type-datasets"
-                   name="resource-type-select"
-                   class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
-            <IconFiles class="flex-shrink-0 size-5 mx-2 text-aruna-text ms-5"/>
-            <span class="text-sm text-aruna-text">Datasets</span>
+            <span class="text-sm text-aruna-text">Folder</span>
           </label>
 
           <label for="resource-type-objects"
                  class="cursor-pointer max-w-xs flex p-3 w-full bg-aruna-bg/90 border border-aruna-text/50 rounded-md text-sm focus:border-aruna-text/50 focus:ring-aruna-highlight text-aruna-text">
             <input type="radio"
                    v-model="typeFilter"
-                   :value="v2ResourceVariant.RESOURCE_VARIANT_OBJECT"
+                   :value="ResourceVariant.Object"
                    id="resource-type-objects"
                    name="resource-type-select"
                    class="shrink-0 mt-0.5 border-aruna-text/50 rounded-full text-aruna-highlight focus:ring-0 disabled:opacity-50 disabled:pointer-events-none bg-aruna-muted checked:bg-aruna-highlight checked:border-aruna-muted focus:ring-offset-0"/>
@@ -295,7 +306,7 @@ onMounted(async () => await queryResources(true));
         </Pagination>
 
         <!-- Start Display Search Results -->
-        <SearchResults :key="hits" :resources="hits"/>
+        <SearchResults :resources="hits" :fetching="fetching"/>
         <!-- End Display Search Results -->
 
         <Pagination v-if="estimatedTotal > limit"

From 948399dc0dc4bb30d104d464243a43b00560d9b5 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Mon, 24 Feb 2025 18:27:34 +0100
Subject: [PATCH 122/125] feat: reenable badges on explore page

---
 components/card/resource.vue  | 142 +++++++++++++++++-----------------
 components/search_results.vue |   1 -
 pages/explore.vue             |   6 +-
 3 files changed, 73 insertions(+), 76 deletions(-)

diff --git a/components/card/resource.vue b/components/card/resource.vue
index 6bfba076..6ff572b2 100644
--- a/components/card/resource.vue
+++ b/components/card/resource.vue
@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import {modelsv2Status, v2DataClass, v2ResourceVariant,} from '~/composables/aruna_api_json';
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger,} from "@/components/ui/tooltip"
+
+import {ResourceVariant, VisibilityClass} from "~/types/aruna-v3-enums";
+
 
 /* ----- PROPERTIES ----- */
 interface ResourceCardProps {
@@ -8,7 +11,6 @@ interface ResourceCardProps {
 
 const {resource} = defineProps<ResourceCardProps>()
 
-
 /* ----- END PROPERTIES ----- */
 
 function displayDescription(description: string): string {
@@ -17,19 +19,19 @@ function displayDescription(description: string): string {
   }
   return description
 }
-function displayDataClass(dataClass: v2DataClass): string {
-  switch (dataClass) {
-    case v2DataClass.DATA_CLASS_PUBLIC: return 'Public'
-    case v2DataClass.DATA_CLASS_PRIVATE: return 'Private'
+function displayVisbility(visibility: VisibilityClass): string {
+  switch (visibility) {
+    case VisibilityClass.Public: return 'Public';
+    case VisibilityClass.PublicMetadata: return 'Public Metadata';
+    case VisibilityClass.Private: return 'Private';
     default: return 'Unspecified'
   }
 }
-function dataClassCss(dataClass: v2DataClass): string {
-  switch (dataClass) {
-    case v2DataClass.DATA_CLASS_PUBLIC: return 'border-green-600 text-green-600'
-    case v2DataClass.DATA_CLASS_PRIVATE: return 'border-red-600/80 text-red-600/80'
-    case v2DataClass.DATA_CLASS_CONFIDENTIAL: return 'border-white text-white'
-    case v2DataClass.DATA_CLASS_WORKSPACE: return 'border-indigo-600 text-indigo-600'
+function visibilityCss(visibility: VisibilityClass): string {
+  switch (visibility) {
+    case VisibilityClass.Public: return 'border-green-600 text-green-600';
+    case VisibilityClass.PublicMetadata: return 'border-white text-white';
+    case VisibilityClass.Private: return 'border-red-600/80 text-red-600/80';
     default: return 'border-aruna-text/50 text-aruna-text/50'
   }
 }
@@ -41,71 +43,65 @@ function dataClassCss(dataClass: v2DataClass): string {
        :class="{'border-l-destructive': resource.deleted}">
     <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">
       <!-- Name and ID display -->
-      <NuxtLink :to="`/objects/${resource.id}`"
-                class="text-aruna-highlight font-bold">
-        <h3>{{ resource.name }}</h3>
-      </NuxtLink>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <NuxtLink :to="`/objects/${resource.id}`"
+                      class="text-aruna-highlight font-bold">
+              <h3>{{ resource.name }}</h3>
+            </NuxtLink>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{{ resource.id }}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
       <h4>{{ resource.type === "Resource" ? resource.variant : resource.type }}</h4>
       <!-- END Name and ID display -->
-    </div>
-  </div>
-<!--  <div v-if="entry"-->
-<!--       class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"-->
-<!--       :class="{'border-l-destructive': entry.object_status === modelsv2Status.STATUS_DELETED}">-->
-<!--    <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">-->
-<!--      &lt;!&ndash; Name and ID display with links &ndash;&gt;-->
-<!--      <NuxtLink :to="`/objects/${entry.id}`"-->
-<!--                class="text-aruna-highlight font-bold">-->
-<!--        <h3>{{ entry.name }}</h3>-->
-<!--      </NuxtLink>-->
-
-<!--      <NuxtLink :to="`/objects/${entry.id}`"-->
-<!--                class="text-sm text-aruna-text-accent font-bold">-->
-<!--        <h4>{{ entry.id }}</h4>-->
-<!--      </NuxtLink>-->
-<!--      &lt;!&ndash; END Name and ID display with links &ndash;&gt;-->
 
-<!--      &lt;!&ndash; Badges &ndash;&gt;-->
-<!--      <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">-->
-<!--        &lt;!&ndash; DataClass Badge &ndash;&gt;-->
-<!--        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', dataClassCss(entry.data_class))">-->
-<!--          {{ displayDataClass(entry.data_class) }}-->
-<!--        </Badge>-->
-<!--        &lt;!&ndash; END DataClass &ndash;&gt;-->
-<!--        &lt;!&ndash; Stats Badge &ndash;&gt;-->
-<!--        <Badge v-if="entry.variant !== v2ResourceVariant.RESOURCE_VARIANT_OBJECT"-->
-<!--               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">-->
-<!--          Children: {{ entry.stats.count }}-->
-<!--        </Badge>-->
-<!--        <Badge class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">-->
-<!--          {{ entry.stats.size ? formatBytes(+entry.stats.size) : "N/A Bytes" }}-->
-<!--        </Badge>-->
-<!--        &lt;!&ndash; END Stats Badge &ndash;&gt;-->
-<!--      </div>-->
-<!--      &lt;!&ndash; END Badges &ndash;&gt;-->
-<!--    </div>-->
+            <!-- Badges -->
+            <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">
+              <!-- DataClass Badge -->
+              <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', visibilityCss(resource.data_class))">
+                {{ displayVisbility(resource.visibility) }}
+              </Badge>
+              <!-- END DataClass -->
+              <!-- Stats Badge -->
+              <Badge v-if="resource.variant !== ResourceVariant.Object"
+                     class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+                Children: {{ resource.count }}
+              </Badge>
+              <Badge v-if="resource.variant === ResourceVariant.Object"
+                    class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+                {{ resource.content_len ? formatBytes(+resource.content_len) : "N/A Bytes" }}
+              </Badge>
+              <!-- END Stats Badge -->
+            </div>
+            <!-- END Badges -->
+          </div>
+        <div class="mx-2 grow flex-col basis-2/3">
+          <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>
+          <p v-if="resource.description.length > 0" class="mt-2 text-aruna-text">
+            {{ displayDescription(resource.description) }}
+          </p>
 
-<!--    <div class="mx-2 grow flex-col basis-2/3">-->
-<!--      <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>-->
-<!--      <p v-if="entry.description.length > 0" class="mt-2 text-aruna-text">-->
-<!--        {{ displayDescription(entry.description) }}-->
-<!--      </p>-->
+          <hr v-if="resource.labels.length > 0" class="my-4 text-aruna-text "/>
 
-<!--      <hr v-if="entry.key_values.length > 0" class="my-4 text-aruna-text "/>-->
+          <!-- Basic Label Display -->
+          <div class="flex flex-row flex-wrap">
+            <div v-for="label in resource.labels" class="flex flex-row my-1 me-2 last:me-0">
+              <span
+                  :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"
+                  class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">
+                {{ label.key }}
+              </span>
+              <span v-if="label.value"
+                    class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">
+                {{ label.value }}</span>
+            </div>
+          </div>
 
-<!--      &lt;!&ndash; Basic Label Display &ndash;&gt;-->
-<!--      <div class="flex flex-row flex-wrap">-->
-<!--        <div v-for="label in entry.key_values" class="flex flex-row my-1 me-2 last:me-0">-->
-<!--          <span-->
-<!--              :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"-->
-<!--              class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">-->
-<!--            {{ label.key }}-->
-<!--          </span>-->
-<!--          <span v-if="label.value"-->
-<!--                class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">-->
-<!--            {{ label.value }}</span>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--  </div>-->
+        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/components/search_results.vue b/components/search_results.vue
index 7690e221..60b1eaf2 100644
--- a/components/search_results.vue
+++ b/components/search_results.vue
@@ -16,6 +16,5 @@ const {resources} = defineProps<SearchResultListProps>()
     <h2 class="text-aruna-text-accent font-bold text-center">No results found</h2>
   </div>
 
-
   <CardResource v-for="hit in resources" :resource="hit" />
 </template>
\ No newline at end of file
diff --git a/pages/explore.vue b/pages/explore.vue
index aaf4790f..5219fbdf 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -53,7 +53,8 @@ watch(typeFilter, async () => {
 function generateFilter() {
   switch (typeFilter.value) {
     case null: {
-      filter.value = "";
+      filter.value = "variant IN [0,1,2]";
+      // limit search to projects, folders and objects
       break;
     }
     case ResourceVariant.Project: {
@@ -94,7 +95,7 @@ async function queryResources(pageReset: boolean) {
   })
 
   try {
-    //const response = await searchResources(body)
+    //const response = await searchResources(body) // TODO remove dead code
     const response = await $fetch<SearchResponse>('/api/v3/search', {
       query: {
         query: query.value,
@@ -147,6 +148,7 @@ onMounted(async () => await queryResources(true));
         <div>
           <label class="sr-only" for="search-query-input-with-icon">Search query input</label>
           <div class="flex rounded-md shadow-sm">
+            <!-- TODO change to shadcn components -->
             <!-- <Input type="text"
                    id="search-query-input-with-icon"
                    v-model="query"

From 51cbde9d4c4fceb2310912a521c4ae15f4101a19 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Mon, 24 Feb 2025 18:29:22 +0100
Subject: [PATCH 123/125] chore: formatting

---
 components/card/resource.vue | 80 ++++++++++++++++++------------------
 1 file changed, 40 insertions(+), 40 deletions(-)

diff --git a/components/card/resource.vue b/components/card/resource.vue
index 6ff572b2..7cf4c924 100644
--- a/components/card/resource.vue
+++ b/components/card/resource.vue
@@ -60,48 +60,48 @@ function visibilityCss(visibility: VisibilityClass): string {
       <h4>{{ resource.type === "Resource" ? resource.variant : resource.type }}</h4>
       <!-- END Name and ID display -->
 
-            <!-- Badges -->
-            <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">
-              <!-- DataClass Badge -->
-              <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', visibilityCss(resource.data_class))">
-                {{ displayVisbility(resource.visibility) }}
-              </Badge>
-              <!-- END DataClass -->
-              <!-- Stats Badge -->
-              <Badge v-if="resource.variant !== ResourceVariant.Object"
-                     class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-                Children: {{ resource.count }}
-              </Badge>
-              <Badge v-if="resource.variant === ResourceVariant.Object"
-                    class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
-                {{ resource.content_len ? formatBytes(+resource.content_len) : "N/A Bytes" }}
-              </Badge>
-              <!-- END Stats Badge -->
-            </div>
-            <!-- END Badges -->
-          </div>
-        <div class="mx-2 grow flex-col basis-2/3">
-          <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>
-          <p v-if="resource.description.length > 0" class="mt-2 text-aruna-text">
-            {{ displayDescription(resource.description) }}
-          </p>
-
-          <hr v-if="resource.labels.length > 0" class="my-4 text-aruna-text "/>
+      <!-- Badges -->
+      <div class="flex flex-col md:flex-row mt-2 gap-x-2 gap-y-2">
+        <!-- DataClass Badge -->
+        <Badge :class="cn('px-2 py-1 bg-transparent hover:bg-transparent border', visibilityCss(resource.data_class))">
+          {{ displayVisbility(resource.visibility) }}
+        </Badge>
+        <!-- END DataClass -->
+        <!-- Stats Badge -->
+        <Badge v-if="resource.variant !== ResourceVariant.Object"
+               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+          Children: {{ resource.count }}
+        </Badge>
+        <Badge v-if="resource.variant === ResourceVariant.Object"
+              class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+          {{ resource.content_len ? formatBytes(+resource.content_len) : "N/A Bytes" }}
+        </Badge>
+        <!-- END Stats Badge -->
+      </div>
+      <!-- END Badges -->
+    </div>
+    <div class="mx-2 grow flex-col basis-2/3">
+      <h4 class="text-sm my-3 uppercase text-aruna-text-accent">Description</h4>
+      <p v-if="resource.description.length > 0" class="mt-2 text-aruna-text">
+        {{ displayDescription(resource.description) }}
+      </p>
 
-          <!-- Basic Label Display -->
-          <div class="flex flex-row flex-wrap">
-            <div v-for="label in resource.labels" class="flex flex-row my-1 me-2 last:me-0">
-              <span
-                  :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"
-                  class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">
-                {{ label.key }}
-              </span>
-              <span v-if="label.value"
-                    class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">
-                {{ label.value }}</span>
-            </div>
-          </div>
+      <hr v-if="resource.labels.length > 0" class="my-4 text-aruna-text "/>
 
+      <!-- Basic Label Display -->
+      <div class="flex flex-row flex-wrap">
+        <div v-for="label in resource.labels" class="flex flex-row my-1 me-2 last:me-0">
+          <span
+              :class="{ 'me-2 rounded-md': label.value === '' || label.value === undefined, 'rounded-l-md': label.value && label.value.length > 0 }"
+              class="text-xs font-medium truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-l-md text-aruna-highlight border border-aruna-highlight">
+            {{ label.key }}
+          </span>
+          <span v-if="label.value"
+                class="truncate max-w-60 whitespace-nowrap items-center gap-x-1.5 py-1.5 px-3 rounded-r-lg text-xs font-medium border border-l-0 border-aruna-highlight text-aruna-bg bg-aruna-highlight">
+            {{ label.value }}</span>
         </div>
+      </div>
+
     </div>
+  </div>
 </template>
\ No newline at end of file

From 1fbdc850f148e2bfe58f433b4da80c8ce2281922 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Thu, 27 Feb 2025 14:04:57 +0100
Subject: [PATCH 124/125] feat: add link to show more results button

---
 components/custom-ui/SearchDialog.vue        | 2 +-
 components/custom-ui/dashboard/Dashboard.vue | 2 +-
 pages/explore.vue                            | 5 +++--
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
index 6bcb16e0..113459e9 100644
--- a/components/custom-ui/SearchDialog.vue
+++ b/components/custom-ui/SearchDialog.vue
@@ -155,7 +155,7 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
         </CommandGroup>
       </CommandList>
       <Button v-if="response?.expected_hits > limitResults">
-        Show all results
+        <NuxtLink :href="'/explore?q=' + queryInput">Show all results</NuxtLink>
       </Button>
     </CommandDialog>
     <!-- END COMMAND DIALOG-->
diff --git a/components/custom-ui/dashboard/Dashboard.vue b/components/custom-ui/dashboard/Dashboard.vue
index caae2768..d38499a8 100644
--- a/components/custom-ui/dashboard/Dashboard.vue
+++ b/components/custom-ui/dashboard/Dashboard.vue
@@ -350,7 +350,7 @@ EventBus.on('spinStop', () => spinBaby.value = false)
               <Skeleton class="h-auto w-[300px]"/>
             </template>
           </ClientOnly>
-          <SearchDialog />
+          <SearchDialog filter="variant IN [0,1,2]"/>
         </div>
         <DropdownMenu>
           <ClientOnly fallbackTag="span">
diff --git a/pages/explore.vue b/pages/explore.vue
index 5219fbdf..2c43536c 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -22,16 +22,17 @@ import {ResourceVariant} from "~/types/aruna-v3-enums";
 
 import {searchResources} from "~/composables/api_wrapper";
 
+const route = useRoute()
 const currentPage: Ref<number> = ref(1);
 const limit: Ref<number> = ref(20);
 const hits: Ref<Resource[]> = ref([]);
 const estimatedTotal = ref(0);
-const fetching = ref(false);
+const fetching = ref(true);
 
 const debouncedInput = debounce(async () => await queryResources(true), 250)
 
 /* Query */
-const query = ref("");
+const query = ref(route.query.q ? route.query.q : '')
 watch(query, async () => {
   fetching.value = true;
   await debouncedInput()

From ddfc6b7fc7a1670d5a55d5bd5e0da26d7ebe39d3 Mon Sep 17 00:00:00 2001
From: Stefan Nitz <stefan.nitz@bioinfsys.uni-giessen.de>
Date: Tue, 18 Mar 2025 10:47:25 +0100
Subject: [PATCH 125/125] chore: update styling for SearchDialog Button and add
 clickhandler for SearchDialog

---
 components/card/resource.vue          | 32 ++++++++++++++++++---------
 components/custom-ui/SearchDialog.vue | 11 +++++----
 pages/explore.vue                     | 11 ---------
 3 files changed, 28 insertions(+), 26 deletions(-)

diff --git a/components/card/resource.vue b/components/card/resource.vue
index 7cf4c924..15ca185b 100644
--- a/components/card/resource.vue
+++ b/components/card/resource.vue
@@ -19,28 +19,38 @@ function displayDescription(description: string): string {
   }
   return description
 }
+
 function displayVisbility(visibility: VisibilityClass): string {
   switch (visibility) {
-    case VisibilityClass.Public: return 'Public';
-    case VisibilityClass.PublicMetadata: return 'Public Metadata';
-    case VisibilityClass.Private: return 'Private';
-    default: return 'Unspecified'
+    case VisibilityClass.Public:
+      return 'Public';
+    case VisibilityClass.PublicMetadata:
+      return 'Public Metadata';
+    case VisibilityClass.Private:
+      return 'Private';
+    default:
+      return 'Unspecified'
   }
 }
+
 function visibilityCss(visibility: VisibilityClass): string {
   switch (visibility) {
-    case VisibilityClass.Public: return 'border-green-600 text-green-600';
-    case VisibilityClass.PublicMetadata: return 'border-white text-white';
-    case VisibilityClass.Private: return 'border-red-600/80 text-red-600/80';
-    default: return 'border-aruna-text/50 text-aruna-text/50'
+    case VisibilityClass.Public:
+      return 'border-green-600 text-green-600';
+    case VisibilityClass.PublicMetadata:
+      return 'border-white text-white';
+    case VisibilityClass.Private:
+      return 'border-red-600/80 text-red-600/80';
+    default:
+      return 'border-aruna-text/50 text-aruna-text/50'
   }
 }
 </script>
 
 <template>
   <div
-       class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"
-       :class="{'border-l-destructive': resource.deleted}">
+      class="flex flex-auto my-3 p-4 gap-x-4 bg-aruna-bg/90 border border-l-4 border-l-aruna-highlight shadow-sm rounded-md border-aruna-text/50"
+      :class="{'border-l-destructive': resource.deleted}">
     <div class="flex flex-col basis-1/3 gap-y-3 border-aruna-text/50">
       <!-- Name and ID display -->
       <TooltipProvider>
@@ -73,7 +83,7 @@ function visibilityCss(visibility: VisibilityClass): string {
           Children: {{ resource.count }}
         </Badge>
         <Badge v-if="resource.variant === ResourceVariant.Object"
-              class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
+               class="px-2 py-1 bg-transparent hover:bg-transparent border border-aruna-text text-aruna-text">
           {{ resource.content_len ? formatBytes(+resource.content_len) : "N/A Bytes" }}
         </Badge>
         <!-- END Stats Badge -->
diff --git a/components/custom-ui/SearchDialog.vue b/components/custom-ui/SearchDialog.vue
index 113459e9..769b92f8 100644
--- a/components/custom-ui/SearchDialog.vue
+++ b/components/custom-ui/SearchDialog.vue
@@ -109,8 +109,9 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
 
 <template>
   <div class="relative flex">
-    <Button @click="openDialog()">
-      <IconSearch class="mr-1 h-4 w-4 text-muted-foreground"/>
+    <Button @click="openDialog()"
+            class="py-2 px-3 inline-flex justify-center items-center bg-transparent border border-aruna-highlight rounded-sm text-aruna-highlight hover:text-aruna-text-accent hover:bg-aruna-highlight disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:ring-1 focus:ring-aruna-highlight cursor-pointer">
+      <IconSearch class="mr-1 h-4 w-4"/>
       Search
     </Button>
 
@@ -137,13 +138,15 @@ function splitResources(resources: (Resource & { [type: string]: GenericNodeType
         </CommandGroup>
         <CommandGroup heading="Folders">
           <CommandItem v-for="resource in resources?.folders"
-                       :value="resource">
+                       :value="resource"
+                       @select="router.push('/objects/' + resource.id)">
             {{ resource.name }}
           </CommandItem>
         </CommandGroup>
         <CommandGroup heading="Objects">
           <CommandItem v-for="resource in resources?.objects"
-                       :value="resource">
+                       :value="resource"
+                       @select="router.push('/objects/' + resource.id)">
             {{ resource.name }}
           </CommandItem>
         </CommandGroup>
diff --git a/pages/explore.vue b/pages/explore.vue
index 2c43536c..42234b87 100644
--- a/pages/explore.vue
+++ b/pages/explore.vue
@@ -96,7 +96,6 @@ async function queryResources(pageReset: boolean) {
   })
 
   try {
-    //const response = await searchResources(body) // TODO remove dead code
     const response = await $fetch<SearchResponse>('/api/v3/search', {
       query: {
         query: query.value,
@@ -149,16 +148,6 @@ onMounted(async () => await queryResources(true));
         <div>
           <label class="sr-only" for="search-query-input-with-icon">Search query input</label>
           <div class="flex rounded-md shadow-sm">
-            <!-- TODO change to shadcn components -->
-            <!-- <Input type="text"
-                   id="search-query-input-with-icon"
-                   v-model="query"
-                   name="search-query-input-with-icon"
-                   placeholder="Search Aruna Resources"
-            />
-            <Button type="button">
-              <IconSearch class="flex-shrink-0 size-6"/>
-            </Button> -->
             <input type="text"
                    v-model="query"
                    id="search-query-input-with-icon"