From 27d85f0cda4d6f71a5a8eab8f416f29f01602b38 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Mon, 11 Mar 2024 00:32:51 +0000
Subject: Add rest of item stack picker

---
 assets/base.css                                    |  10 +-
 components/base/ItemStack/ItemStackForm.vue        | 248 +++++++++++++++++++++
 .../base/ItemStack/ItemStackFormOptionLabel.vue    |  26 +++
 components/base/ItemStack/ItemStackModal.vue       | 159 +++++++++++++
 components/base/ItemStack/ItemStackPicker.vue      |  96 ++++++++
 components/base/ItemStackForm.vue                  |  50 -----
 components/base/ItemStackModal.vue                 | 159 -------------
 components/base/ItemStackPicker.vue                |  97 --------
 components/base/Modal.vue                          |  10 +-
 components/editor/Sidebar.vue                      |   6 +-
 data/enchantments.json                             |  23 ++
 data/itemflags.json                                |  10 +
 lib/enchantments.ts                                |   3 +
 lib/itemflags.ts                                   |   3 +
 package-lock.json                                  |   4 +-
 package.json                                       |   3 +-
 pages/category/[id].vue                            |   2 +-
 pages/quest/[id].vue                               |   2 +-
 18 files changed, 590 insertions(+), 321 deletions(-)
 create mode 100644 components/base/ItemStack/ItemStackForm.vue
 create mode 100644 components/base/ItemStack/ItemStackFormOptionLabel.vue
 create mode 100644 components/base/ItemStack/ItemStackModal.vue
 create mode 100644 components/base/ItemStack/ItemStackPicker.vue
 delete mode 100644 components/base/ItemStackForm.vue
 delete mode 100644 components/base/ItemStackModal.vue
 delete mode 100644 components/base/ItemStackPicker.vue
 create mode 100644 data/enchantments.json
 create mode 100644 data/itemflags.json
 create mode 100644 lib/enchantments.ts
 create mode 100644 lib/itemflags.ts

diff --git a/assets/base.css b/assets/base.css
index 5e116e8..9dc14ce 100644
--- a/assets/base.css
+++ b/assets/base.css
@@ -112,7 +112,7 @@ code {
   font-family: 'Fira Code', monospace;
 }
 
-input {
+input, textarea {
   font-family: inherit;
   font-size: inherit;
   color: inherit;
@@ -123,18 +123,22 @@ input {
   transition: border-color 0.5s;
 }
 
-input:focus {
+input:focus, textarea:focus {
   outline: none;
   border-color: var(--color-primary);
 }
 
-input:disabled {
+input:disabled, textarea:disabled {
   background: var(--color-background-mute);
   border-color: var(--color-border);
   color: var(--color-text-mute);
   cursor: not-allowed;
 }
 
+a {
+  color: var(--color-primary)
+}
+
 fieldset {
   border: 1px solid var(--color-border);
 }
diff --git a/components/base/ItemStack/ItemStackForm.vue b/components/base/ItemStack/ItemStackForm.vue
new file mode 100644
index 0000000..ef13abd
--- /dev/null
+++ b/components/base/ItemStack/ItemStackForm.vue
@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+import { parse, stringify } from 'yaml';
+import materials from '@/lib/materials';
+import enchantments from '@/lib/enchantments';
+import itemflags from '@/lib/itemflags';
+
+const model = defineModel<any>();
+
+if (typeof model.value !== 'object' || model.value === null) {
+  model.value = {};
+}
+
+const editAsYaml = ref(false);
+const yamlCode = ref('');
+
+const switchToYamlEditor = () => {
+  yamlCode.value = stringify({
+    type: model.value.type || model.value.material || model.value.item || "",
+    ...("name" in model.value && { name: model.value.name }),
+    ...("lore" in model.value && { lore: model.value.lore }),
+    ...("enchantments" in model.value && { enchantments: model.value.enchantments }),
+    ...("itemflags" in model.value && { itemflags: model.value.itemflags }),
+    ...("custommodeldata" in model.value && { custommodeldata: model.value.custommodeldata }),
+    ...("unbreakable" in model.value && { unbreakable: model.value.unbreakable }),
+    ...("attributemodifiers" in model.value && { attributemodifiers: model.value.attributemodifiers }),
+    ...("owner-base64" in model.value && { ["owner-base64"]: model.value["owner-base64"] }),
+    ...("owner-username" in model.value && { ["owner-username"]: model.value["owner-username"] }),
+    ...("owner-uuid" in model.value && { ["owner-uuid"]: model.value["owner-uuid"] })
+  })
+  editAsYaml.value = true;
+}
+
+const switchToGuiEditor = () => {
+  parseAndSetYamlValues();
+  editAsYaml.value = false;
+}
+
+const parseAndSetYamlValues = (): boolean => {
+  let newValues;
+  try {
+    newValues = parse(yamlCode.value);
+  } catch (e) {
+    return false;
+  }
+
+  model.value.type = newValues.type;
+  if ("name" in newValues) model.value.name = String(newValues.name);
+  if ("lore" in newValues) model.value.lore = Array.isArray(newValues.lore) ? newValues.lore : [newValues.lore];
+  if ("enchantments" in newValues) model.value.enchantments = Array.isArray(newValues.enchantments) ? newValues.enchantments : [newValues.enchantments];
+  if ("itemflags" in newValues) model.value.itemflags = Array.isArray(newValues.itemflags) ? newValues.itemflags : [newValues.itemflags];
+  if ("custommodeldata" in newValues) model.value.custommodeldata = Number(newValues.custommodeldata) || 0;
+  if ("unbreakable" in newValues) model.value.unbreakable = !!newValues.unbreakable;
+  if ("attributemodifiers" in newValues) model.value.attributemodifiers = Array.isArray(newValues.attributemodifiers) ? newValues.attributemodifiers : [newValues.attributemodifiers];
+  if ("owner-base64" in newValues) model.value["owner-base64"] = String(newValues["owner-base64"]);
+  if ("owner-username" in newValues) model.value["owner-username"] = String(newValues["owner-username"]);
+  if ("owner-uuid" in newValues) model.value["owner-uuid"] = String(newValues["owner-uuid"]);
+
+  return true;
+}
+
+const itemName = computed({
+  get() {
+    return model.value.name;
+  },
+  set(newValue: string) {
+    model.value.name = newValue;
+  },
+});
+
+const isOptionSet = (option: string) => {
+  return option in model.value;
+}
+
+const setOption = (option: string, type: 'string' | 'string-list' | 'number' | 'boolean') => {
+  switch (type) {
+    case 'string':
+      model.value[option] = '';
+      break;
+    case 'number':
+      model.value[option] = 0;
+      break;
+    case 'boolean':
+      model.value[option] = false;
+      break;
+    case 'string-list':
+      model.value[option] = [];
+      break;
+  }
+}
+
+const removeOption = (option: string) => {
+  delete model.value[option];
+}
+
+const itemType = computed({
+  get() {
+    return model.value.type || model.value.material || model.value.item;
+  },
+  set(newValue: string) {
+    if (model.value.material) {
+      model.value.material = newValue;
+    } else if (model.value.item) {
+      model.value.item = newValue;
+    } else {
+      model.value.type = newValue;
+    }
+  },
+});
+
+const itemLore = computed({
+  get() {
+    return model.value.lore?.join('\n');
+  },
+  set(newValue: string) {
+    model.value.lore = newValue.split('\n');
+  }
+})
+
+const itemEnchantments = computed({
+  get() {
+    return model.value.enchantments;
+  },
+  set(newValue: any) {
+    model.value.enchantments = newValue;
+  }
+})
+
+const itemCustomModelData = computed({
+  get() {
+    return model.value.custommodeldata;
+  },
+  set(newValue: any) {
+    model.value.custommodeldata = newValue;
+  }
+})
+
+const itemItemflags = computed({
+  get() {
+    return model.value.itemflags;
+  },
+  set(newValue: any) {
+    model.value.itemflags = newValue;
+  }
+})
+</script>
+
+<template>
+  <div id="gui-form" v-if="!editAsYaml">
+    <div class="option-group">
+      <div class="label-with-button">
+        <label for="itemstack-type">Type</label>
+
+        <Button label="Edit as YAML" :icon="['fas', 'pencil']" @click="switchToYamlEditor()"></Button>
+      </div>
+      <multiselect v-model="itemType" :options="materials" :searchable="true" placeholder="Choose a material" />
+    </div>
+
+    <div class="option-group" v-if="isOptionSet('name')">
+      <ItemStackFormOptionLabel option="name" type="string" label="Name" :is-option-set-fn="isOptionSet"
+        :set-option-fn="setOption" :remove-option-fn="removeOption" />
+
+      <input id="itemstack-name" name="itemstack-name" v-model="itemName" placeholder="Enter display name" />
+    </div>
+
+    <div class="option-group" v-if="isOptionSet('lore')">
+      <ItemStackFormOptionLabel option="lore" type="string-list" label="Lore" :is-option-set-fn="isOptionSet"
+        :set-option-fn="setOption" :remove-option-fn="removeOption" />
+
+      <textarea rows="5" id="itemstack-lore" name="itemstack-lore" v-model="itemLore" placeholder="Enter item lore" />
+    </div>
+
+    <div class="option-group" v-if="isOptionSet('enchantments')">
+      <ItemStackFormOptionLabel option="enchantments" type="string-list" label="Enchantments"
+        :is-option-set-fn="isOptionSet" :set-option-fn="setOption" :remove-option-fn="removeOption" />
+
+      <multiselect v-model="itemEnchantments" :options="enchantments" :searchable="true" :multiple="true"
+        placeholder="Enter enchantment names" />
+    </div>
+
+    <div class="option-group" v-if="isOptionSet('itemflags')">
+      <ItemStackFormOptionLabel option="itemflags" type="string-list" label="Item flags" :is-option-set-fn="isOptionSet"
+        :set-option-fn="setOption" :remove-option-fn="removeOption" />
+
+      <multiselect v-model="itemItemflags" :options="itemflags" :searchable="true" :multiple="true"
+        placeholder="Enter item flags" />
+    </div>
+
+    <div class="option-group" v-if="isOptionSet('custommodeldata')">
+      <ItemStackFormOptionLabel option="custommodeldata" type="number" label="Custom model data"
+        :is-option-set-fn="isOptionSet" :set-option-fn="setOption" :remove-option-fn="removeOption" />
+
+      <input id="itemstack-custommodeldata" name="itemstack-custommodeldata" v-model="itemCustomModelData" type="number"
+        placeholder="Enter custom model data" />
+    </div>
+
+    <div>
+      <Button v-if="!isOptionSet('name')" @click="setOption('name', 'string')" label="Add specific name"
+        :icon="['fas', 'plus']"></Button>
+      <Button v-if="!isOptionSet('lore')" @click="setOption('lore', 'string-list')" label="Add specific lore"
+        :icon="['fas', 'plus']"></Button>
+      <Button v-if="!isOptionSet('enchantments')" @click="setOption('enchantments', 'string-list')"
+        label="Add specific enchantments" :icon="['fas', 'plus']"></Button>
+      <Button v-if="!isOptionSet('itemflags')" @click="setOption('itemflags', 'string-list')"
+        label="Add specific item flags" :icon="['fas', 'plus']"></Button>
+      <Button v-if="!isOptionSet('custommodeldata')" @click="setOption('custommodeldata', 'string')"
+        label="Add specific custom model data" :icon="['fas', 'plus']"></Button>
+    </div>
+
+    <p>For
+      <NuxtLink to="https://quests.leonardobishop.com/configuration/defining-items.html#unbreakable">
+        unbreakable</NuxtLink>,
+      <NuxtLink to="https://quests.leonardobishop.com/configuration/defining-items.html#attribute-modifiers">
+        attribute-modifiers</NuxtLink>, and
+      <NuxtLink to="https://quests.leonardobishop.com/configuration/defining-items.html#owner">owner</NuxtLink> please
+      switch to YAML.
+    </p>
+  </div>
+
+  <div id="yaml-form" v-if="editAsYaml">
+    <div class="option-group">
+      <div class="label-with-button">
+        <label for="itemstack-name">YAML</label>
+
+        <Button label="Use GUI editor" :icon="['fas', 'pencil']" @click="switchToGuiEditor"></Button>
+      </div>
+
+      <textarea id="yaml-editor" rows="10" v-model="yamlCode"></textarea>
+    </div>
+  </div>
+</template>
+
+<style>
+#gui-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.label-with-button {
+  display: flex;
+  justify-content: space-between;
+}
+
+#yaml-editor {
+  font-family: monospace;
+}
+</style>
\ No newline at end of file
diff --git a/components/base/ItemStack/ItemStackFormOptionLabel.vue b/components/base/ItemStack/ItemStackFormOptionLabel.vue
new file mode 100644
index 0000000..ab067f8
--- /dev/null
+++ b/components/base/ItemStack/ItemStackFormOptionLabel.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps<{
+  option: string
+  label: string
+  type: string
+  isOptionSetFn: (option: string) => boolean;
+  removeOptionFn: (option: string) => void;
+  setOptionFn: (option: string, type: any) => void;
+}>()
+</script>
+
+<template>
+  <div class="label-with-button">
+    <label :for="'itemstack-' + option">{{ label }}</label>
+
+    <Button v-if="isOptionSetFn(option)" label="Remove" :icon="['fas', 'minus']"
+      @click="removeOptionFn(option)"></Button>
+  </div>
+</template>
+
+<style scoped>
+.label-with-button {
+  display: flex;
+  justify-content: space-between;
+}
+</style>
\ No newline at end of file
diff --git a/components/base/ItemStack/ItemStackModal.vue b/components/base/ItemStack/ItemStackModal.vue
new file mode 100644
index 0000000..7cf4db9
--- /dev/null
+++ b/components/base/ItemStack/ItemStackModal.vue
@@ -0,0 +1,159 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import materials from '@/lib/materials';
+
+const model = defineModel();
+
+const emit = defineEmits(['confirm']);
+
+const props = defineProps<{
+  value: any
+}>();
+
+//TODO unshitify
+const value = ref<any>(props.value);
+
+const isQuestItem = computed(() => {
+  return value.value?.['quest-item'] !== undefined;
+});
+const isItemStack = computed(() => {
+  return (
+    typeof value.value === 'object'
+    && (
+      value.value?.item !== undefined
+      || value.value?.type !== undefined
+      || value.value?.material !== undefined
+    ))
+});
+const isMaterial = computed(() => {
+  return typeof value.value === 'string' && materials.includes(value.value)
+});
+
+const selectedType = ref(
+  isQuestItem.value
+    ? 'questitem'
+    : isItemStack.value
+      ? 'itemstack'
+      : isMaterial.value
+        ? 'material'
+        : ''
+);
+
+const noTypeSelected = computed(() => selectedType.value === '');
+const noValue = computed(() => !isQuestItem.value && !isItemStack.value && !isMaterial.value);
+
+const setSelectedType = (type: string) => {
+  if (type === 'questitem') {
+    value.value = {};
+  } else if (type === 'itemstack') {
+    value.value = {};
+  } else if (type === 'material') {
+    value.value = '';
+  }
+  selectedType.value = type;
+};
+
+const confirm = () => {
+  emit('confirm', value.value);
+};
+</script>
+
+<template>
+  <Modal v-model="model">
+    <template v-slot:header>
+      <h2>Edit ItemStack</h2>
+    </template>
+
+    <template v-slot:body>
+      <div id="type">
+        <span class="option" @click="setSelectedType('questitem')" :class="{ selected: selectedType === 'questitem' }">
+          <span>
+            <font-awesome-icon :icon="['fas', 'tag']" />
+            Quest Item
+          </span>
+          <p v-if="noTypeSelected">Re-use a quest item.</p>
+        </span>
+        <span class="option" @click="setSelectedType('itemstack')" :class="{ selected: selectedType === 'itemstack' }">
+          <span>
+            <font-awesome-icon :icon="['fas', 'cube']" />
+            ItemStack
+          </span>
+          <p v-if="noTypeSelected">Define a new item stack.</p>
+        </span>
+        <span class="option" @click="setSelectedType('material')" :class="{ selected: selectedType === 'material' }">
+          <span>
+            <font-awesome-icon :icon="['fas', 'apple-whole']" />
+            Material
+          </span>
+          <p v-if="noTypeSelected">Define a specific item type.</p>
+        </span>
+      </div>
+
+      <div id="material" class="option-group" v-if="selectedType === 'material'">
+        <label for="material">Material</label>
+        <multiselect v-model="value" :options="materials" :searchable="true" placeholder="Enter material name" />
+      </div>
+
+      <div id="itemstack" class="option-group" v-if="selectedType === 'itemstack'">
+        <ItemStackForm v-model="value" />
+      </div>
+
+
+      <div id="confirm" class="control-group">
+        <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button>
+        <Button type="solid" :icon="['fas', 'check']" :label="'Confirm'" @click="confirm"></Button>
+        <!-- :disabled="noTypeSelected || noValue" -->
+      </div>
+    </template>
+  </Modal>
+</template>
+
+<style scoped>
+#confirm {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+
+#type {
+  display: flex;
+  justify-content: space-around;
+  gap: 0.25rem;
+  user-select: none;
+  margin-bottom: 1rem;
+
+  .option {
+    border: 1px solid var(--color-border);
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    flex-basis: 0;
+    flex-grow: 1;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem;
+    background-color: var(--color-background-soft);
+    transition: background-color 0.3s;
+
+    span {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      font-weight: 700;
+    }
+
+    p {
+      text-align: center;
+      font-size: 0.8rem;
+    }
+
+    &:hover {
+      background-color: var(--color-hover);
+    }
+
+    &.selected {
+      background-color: var(--color-primary-mute);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/base/ItemStack/ItemStackPicker.vue b/components/base/ItemStack/ItemStackPicker.vue
new file mode 100644
index 0000000..9141100
--- /dev/null
+++ b/components/base/ItemStack/ItemStackPicker.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import materials from '@/lib/materials';
+
+const props = defineProps<{
+  value: any;
+}>();
+const emit = defineEmits(['update']);
+
+const value = ref(props.value);
+
+const showItemStackModal = ref(false);
+
+//TODO unshitify
+const empty = computed(() => {
+  return value.value === undefined
+    || value.value === null
+    || value.value === ''
+    || (Array.isArray(value.value) && value.value.length === 0)
+    || (typeof value.value === 'object' && Object.keys(value.value).length === 0);
+});
+const isQuestItem = computed(() => {
+  return value.value?.['quest-item'] !== undefined;
+});
+const isItemStack = computed(() => {
+  if (typeof value.value !== 'object' || value.value === null) {
+    return false;
+  }
+
+  const key = 'item' in value.value
+    ? 'item'
+    : 'type' in value.value
+      ? 'type'
+      : 'material'
+
+  return (!!value.value[key]);
+});
+const isMaterial = computed(() => {
+  return typeof value.value === 'string' && materials.includes(value.value)
+});
+
+const update = (newValue: any) => {
+  value.value = newValue;
+  showItemStackModal.value = false;
+  emit('update', value.value);
+};
+</script>
+
+<template>
+  <div class="itemstack" @click="showItemStackModal = true">
+    <span v-if="empty" class="empty">ItemStack...</span>
+    <span v-if="isQuestItem" class="item"><font-awesome-icon :icon="['fas', 'tag']" /> Quest Item</span>
+    <span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'cube']" /> ItemStack of '{{ value.type ||
+    value.item || value.material }}'</span>
+    <span v-if="isMaterial" class="item"><font-awesome-icon :icon="['fas', 'apple-whole']" /> {{ value }}</span>
+    <span v-if="!empty && !isQuestItem && !isItemStack && !isMaterial" class="invalid"><font-awesome-icon
+        :icon="['fas', 'triangle-exclamation']" /> Invalid ItemStack</span>
+  </div>
+
+  <ItemStackModal v-model="showItemStackModal" :value="value" @confirm="update" />
+</template>
+
+<style scoped>
+.itemstack {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+  align-items: center;
+  padding: 0.5rem;
+  user-select: none;
+  transition: background-color 0.3s;
+  background-color: var(--color-background-soft);
+
+  span {
+    font-family: monospace;
+    font-size: 0.8rem;
+  }
+
+  .empty {
+    color: var(--color-text-mute);
+  }
+
+  .item {
+    color: var(--color-primary);
+  }
+
+  .invalid {
+    color: var(--color-false);
+  }
+
+  &:hover {
+    background-color: var(--color-hover);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/components/base/ItemStackForm.vue b/components/base/ItemStackForm.vue
deleted file mode 100644
index 250e8c9..0000000
--- a/components/base/ItemStackForm.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-import materials from '@/lib/materials';
-
-const model = defineModel<any>();
-
-if (typeof model.value !== 'object' || model.value === null) {
-  model.value = {};
-}
-
-const itemName = computed({
-  get() {
-    return model.value.name;
-  },
-  set(newValue: string) {
-    model.value.name = newValue;
-  },
-});
-
-const itemType = computed({
-  get() {
-    return model.value.type || model.value.material || model.value.item;
-  },
-  set(newValue: string) {
-    if (model.value.material) {
-      model.value.material = newValue;
-    } else if (model.value.item) {
-      model.value.item = newValue;
-    } else {
-      model.value.type = newValue;
-    }
-  },
-});
-</script>
-
-<template>
-  <div class="option-group">
-    <label for="itemstack-name">Name</label>
-    <input id="itemstack-name" name="itemstack-name" v-model="itemName" placeholder="Enter a display name" />
-  </div>
-
-  <div class="option-group">
-    <label for="itemstack-name">Type</label>
-    <multiselect v-model="itemType" 
-      :options="materials" :searchable="true" placeholder="Choose a material" />
-  </div>
-</template>
-
-<style scoped>
-</style>
\ No newline at end of file
diff --git a/components/base/ItemStackModal.vue b/components/base/ItemStackModal.vue
deleted file mode 100644
index 7a8aae2..0000000
--- a/components/base/ItemStackModal.vue
+++ /dev/null
@@ -1,159 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import materials from '@/lib/materials';
-
-const model = defineModel();
-
-const emit = defineEmits(['confirm']);
-
-const props = defineProps({
-  value: String,
-});
-
-//TODO unshitify
-const value = ref<any>(props.value);
-
-const isQuestItem = computed(() => {
-  return value.value?.['quest-item'] !== undefined;
-});
-const isItemStack = computed(() => {
-  return (
-    typeof value.value === 'object'
-    && (
-      value.value?.item !== undefined
-      || value.value?.type !== undefined
-      || value.value?.material !== undefined
-    ))
-});
-const isMaterial = computed(() => {
-  return typeof value.value === 'string' && materials.includes(value.value)
-});
-
-const selectedType = ref(
-  isQuestItem.value
-    ? 'questitem'
-    : isItemStack.value
-      ? 'itemstack'
-      : isMaterial.value
-        ? 'material'
-        : ''
-);
-
-const noTypeSelected = computed(() => selectedType.value === '');
-const noValue = computed(() => !isQuestItem.value && !isItemStack.value && !isMaterial.value);
-
-const setSelectedType = (type: string) => {
-  if (type === 'questitem') {
-    value.value = {};
-  } else if (type === 'itemstack') {
-    value.value = {};
-  } else if (type === 'material') {
-    value.value = '';
-  }
-  selectedType.value = type;
-};
-
-const confirm = () => {
-  emit('confirm', value.value);
-};
-</script>
-
-<template>
-  <Modal v-model="model">
-    <template v-slot:header>
-      <h2>Edit ItemStack</h2>
-    </template>
-
-    <template v-slot:body>
-      <div id="type">
-        <span class="option" @click="setSelectedType('questitem')" :class="{ selected: selectedType === 'questitem' }">
-          <span>
-            <font-awesome-icon :icon="['fas', 'tag']" />
-            Quest Item
-          </span>
-          <p v-if="noTypeSelected">Re-use a quest item.</p>
-        </span>
-        <span class="option" @click="setSelectedType('itemstack')" :class="{ selected: selectedType === 'itemstack' }">
-          <span>
-            <font-awesome-icon :icon="['fas', 'cube']" />
-            ItemStack
-          </span>
-          <p v-if="noTypeSelected">Define a new item stack.</p>
-        </span>
-        <span class="option" @click="setSelectedType('material')" :class="{ selected: selectedType === 'material' }">
-          <span>
-            <font-awesome-icon :icon="['fas', 'apple-whole']" />
-            Material
-          </span>
-          <p v-if="noTypeSelected">Define a specific item type.</p>
-        </span>
-      </div>
-
-      <div id="material" class="option-group" v-if="selectedType === 'material'">
-        <label for="material">Material</label>
-        <multiselect v-model="value" :options="materials" :searchable="true" placeholder="Enter material name" />
-      </div>
-
-      <div id="itemstack" class="option-group" v-if="selectedType === 'itemstack'">
-        <ItemStackForm v-model="value" />
-      </div>
-
-
-      <div id="confirm" class="control-group">
-        <Button :icon="['fas', 'times']" :label="'Cancel'" @click="model = false"></Button>
-        <Button type="solid" :icon="['fas', 'check']" :label="'Confirm'" @click="confirm"></Button>
-        <!-- :disabled="noTypeSelected || noValue" -->
-      </div>
-    </template>
-  </Modal>
-</template>
-
-<style scoped>
-#confirm {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 1rem;
-}
-
-#type {
-  display: flex;
-  justify-content: space-around;
-  gap: 0.25rem;
-  user-select: none;
-  margin-bottom: 1rem;
-
-  .option {
-    border: 1px solid var(--color-border);
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    flex-basis: 0;
-    flex-grow: 1;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0.5rem;
-    background-color: var(--color-background-soft);
-    transition: background-color 0.3s;
-
-    span {
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      font-weight: 700;
-    }
-
-    p {
-      text-align: center;
-      font-size: 0.8rem;
-    }
-
-    &:hover {
-      background-color: var(--color-hover);
-    }
-
-    &.selected {
-      background-color: var(--color-primary-mute);
-    }
-  }
-}
-</style>
\ No newline at end of file
diff --git a/components/base/ItemStackPicker.vue b/components/base/ItemStackPicker.vue
deleted file mode 100644
index 66b665f..0000000
--- a/components/base/ItemStackPicker.vue
+++ /dev/null
@@ -1,97 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue';
-import ItemStackModal from './ItemStackModal.vue';
-import materials from '@/lib/materials';
-
-const props = defineProps<{
-  value: any;
-}>();
-const emit = defineEmits(['update']);
-
-const value = ref(props.value);
-
-const showItemStackModal = ref(false);
-
-//TODO unshitify
-const empty = computed(() => {
-  return value.value === undefined
-    || value.value === null
-    || value.value === ''
-    || (Array.isArray(value.value) && value.value.length === 0)
-    || (typeof value.value === 'object' && Object.keys(value.value).length === 0);
-});
-const isQuestItem = computed(() => {
-  return value.value?.['quest-item'] !== undefined;
-});
-const isItemStack = computed(() => {
-  if (typeof value.value !== 'object' || value.value === null) {
-    return false;
-  }
-
-  const key = 'item' in value.value
-    ? 'item'
-    : 'type' in value.value
-      ? 'type'
-      : 'material'
-
-  return (!!value.value[key]);
-});
-const isMaterial = computed(() => {
-  return typeof value.value === 'string' && materials.includes(value.value)
-});
-
-const update = (newValue: any) => {
-  value.value = newValue;
-  showItemStackModal.value = false;
-  emit('update', value.value);
-};
-</script>
-
-<template>
-  <div class="itemstack" @click="showItemStackModal = true">
-    <span v-if="empty" class="empty">ItemStack...</span>
-    <span v-if="isQuestItem" class="item"><font-awesome-icon :icon="['fas', 'tag']" /> Quest Item</span>
-    <span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'cube']" /> ItemStack of '{{ value.type ||
-    value.item || value.material }}'</span>
-    <span v-if="isMaterial" class="item"><font-awesome-icon :icon="['fas', 'apple-whole']" /> {{ value }}</span>
-    <span v-if="!empty && !isQuestItem && !isItemStack && !isMaterial" class="invalid"><font-awesome-icon
-        :icon="['fas', 'triangle-exclamation']" /> Invalid ItemStack</span>
-  </div>
-
-  <ItemStackModal v-model="showItemStackModal" :value="value" @confirm="update" />
-</template>
-
-<style scoped>
-.itemstack {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-  align-items: center;
-  padding: 0.5rem;
-  user-select: none;
-  transition: background-color 0.3s;
-  background-color: var(--color-background-soft);
-
-  span {
-    font-family: monospace;
-    font-size: 0.8rem;
-  }
-
-  .empty {
-    color: var(--color-text-mute);
-  }
-
-  .item {
-    color: var(--color-primary);
-  }
-
-  .invalid {
-    color: var(--color-false);
-  }
-
-  &:hover {
-    background-color: var(--color-hover);
-  }
-}
-</style>
\ No newline at end of file
diff --git a/components/base/Modal.vue b/components/base/Modal.vue
index 46d5da5..f7b6df3 100644
--- a/components/base/Modal.vue
+++ b/components/base/Modal.vue
@@ -18,7 +18,7 @@ const model = defineModel();
 
 <style scoped>
 #modal {
-  align-items: center;
+  align-items: start;
   justify-content: center;
   position: fixed;
   top: 0;
@@ -29,17 +29,18 @@ const model = defineModel();
   background-color: rgba(0, 0, 0, 0.5);
   transition: opacity 0.3s;
   display: none;
-  overflow: visible;
+  overflow: auto;
 }
 
 .modal-content {
   background-color: var(--color-background);
   border: 1px solid var(--color-border);
+  margin-top: 4rem;
   padding: 1rem;
   width: 100%;
   max-width: 600px;
-  max-height: 80%;
-  overflow-y: visible;
+  /* max-height: 90%; */
+  /* overflow-y: auto; */
   border-radius: 4px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }
@@ -64,5 +65,4 @@ const model = defineModel();
   border-bottom: 1px solid var(--color-border);
   margin-bottom: 1rem;
 }
-
 </style>
\ No newline at end of file
diff --git a/components/editor/Sidebar.vue b/components/editor/Sidebar.vue
index 20168df..c48f3b4 100644
--- a/components/editor/Sidebar.vue
+++ b/components/editor/Sidebar.vue
@@ -29,7 +29,7 @@ const setSelectedType = (type: 'quests' | 'items') => {
         </span>
       </span>
     </div>
-    <div id="quests">
+    <div id="quests" v-if="currentType === 'quests'">
       <EditorSidebarCategory v-for="category in session.categories" :key="category.id" :category="category" />
       <EditorSidebarQuest
         v-for="quest in session.quests.filter((q) => (!session.categories.some((c) => c.id === q.options.category)))"
@@ -86,8 +86,8 @@ const setSelectedType = (type: 'quests' | 'items') => {
   }
 
   #quests {
-    max-height: calc(100vh - 73px - 46px);
-    overflow-y: scroll;
+    max-height: calc(100vh - 73px - 46px - 30px);
+    overflow-y: auto;
   }
 
   #configuration-container {
diff --git a/data/enchantments.json b/data/enchantments.json
new file mode 100644
index 0000000..c44e73c
--- /dev/null
+++ b/data/enchantments.json
@@ -0,0 +1,23 @@
+[
+"PROTECTION_ENVIRONMENTAL",
+"PROTECTION_FIRE",
+"PROTECTION_FALL",
+"PROTECTION_EXPLOSIONS",
+"PROTECTION_PROJECTILE",
+"OXYGEN",
+"WATER_WORKER",
+"THORNS",
+"DEPTH_STRIDER",
+"FROST_WALKER",
+"BINDING_CURSE",
+"DAMAGE_ALL",
+"DAMAGE_UNDEAD",
+"DAMAGE_ARTHROPODS",
+"KNOCKBACK",
+"FIRE_ASPECT",
+"LOOT_BONUS_MOBS",
+"SWEEPING_EDGE",
+"DIG_SPEED",
+"SILK_TOUCH",
+"DURABILITY"
+]
\ No newline at end of file
diff --git a/data/itemflags.json b/data/itemflags.json
new file mode 100644
index 0000000..2afe61f
--- /dev/null
+++ b/data/itemflags.json
@@ -0,0 +1,10 @@
+[
+  "HIDE_ARMOR_TRIM",
+  "HIDE_ATTRIBUTES",
+  "HIDE_DESTROYS",
+  "HIDE_DYE",
+  "HIDE_ENCHANTS",
+  "HIDE_PLACED_ON",
+  "HIDE_POTION_EFFECTS",
+  "HIDE_UNBREAKABLE"
+]
\ No newline at end of file
diff --git a/lib/enchantments.ts b/lib/enchantments.ts
new file mode 100644
index 0000000..a770feb
--- /dev/null
+++ b/lib/enchantments.ts
@@ -0,0 +1,3 @@
+import enchantments from '@/data/enchantments.json';
+
+export default enchantments;
\ No newline at end of file
diff --git a/lib/itemflags.ts b/lib/itemflags.ts
new file mode 100644
index 0000000..a7ce433
--- /dev/null
+++ b/lib/itemflags.ts
@@ -0,0 +1,3 @@
+import itemflags from '@/data/itemflags.json';
+
+export default itemflags;
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1b376da..11c78fb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "quests-web-editor",
       "version": "0.0.0",
+      "hasInstallScript": true,
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "^6.5.1",
         "@fortawesome/free-brands-svg-icons": "^6.5.1",
@@ -18,7 +19,8 @@
         "pinia": "^2.1.7",
         "vue": "^3.4.15",
         "vue-multiselect": "^3.0.0-beta.3",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "yaml": "^2.4.1"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.3.3",
diff --git a/package.json b/package.json
index c9fff2d..bd11781 100644
--- a/package.json
+++ b/package.json
@@ -21,7 +21,8 @@
     "pinia": "^2.1.7",
     "vue": "^3.4.15",
     "vue-multiselect": "^3.0.0-beta.3",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "yaml": "^2.4.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.3.3",
diff --git a/pages/category/[id].vue b/pages/category/[id].vue
index 59993e7..a16df59 100644
--- a/pages/category/[id].vue
+++ b/pages/category/[id].vue
@@ -92,7 +92,7 @@ const categoryName = sessionStore.getCategoryById(categoryId)?.display.name;
   display: flex;
   gap: 1rem;
   padding: 1rem;
-  overflow: scroll;
+  overflow: auto;
   max-height: calc(100% - 55px);
 }
 
diff --git a/pages/quest/[id].vue b/pages/quest/[id].vue
index a3a393d..6695f69 100644
--- a/pages/quest/[id].vue
+++ b/pages/quest/[id].vue
@@ -140,7 +140,7 @@ const duplicateQuest = (oldId: string, newId: string) => {
   display: flex;
   gap: 1rem;
   padding: 1rem;
-  overflow: scroll;
+  overflow: auto;
   max-height: calc(100% - 55px);
 }
 
-- 
cgit v1.2.3-70-g09d2