9 files changed, 277 insertions, 135 deletions

diff --git a/components/base/Button.vue b/components/base/Button.vue
index a53e329..663ac47 100644
--- a/components/base/Button.vue
+++ b/components/base/Button.vue
@@ -13,7 +13,7 @@ const props = defineProps({
   label: String,
   icon: {
     type: Array<String>,
-    required: false
+    required: false,
   },
   disabled: Boolean,
 });
@@ -28,8 +28,11 @@ const onClick = (event: MouseEvent) => {
 </script>
 
 <template>
-  <a id="button" :class="{ text: type === 'text', solid: type === 'solid', disabled: disabled, [accent]: true }"
-    @click.stop="onClick">
+  <a
+    id="button"
+    :class="{ text: type === 'text', solid: type === 'solid', disabled: disabled, [accent]: true }"
+    @click.stop="onClick"
+  >
     <font-awesome-icon :icon="icon" v-if="icon" />
     {{ label }}
   </a>
@@ -68,7 +71,7 @@ const onClick = (event: MouseEvent) => {
   color: var(--color-false);
 
   &:hover {
-    color: var(--color-false-hover)
+    color: var(--color-false-hover);
   }
 }
 
@@ -103,4 +106,4 @@ const onClick = (event: MouseEvent) => {
     background-color: var(--color-border);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/base/Checkbox.vue b/components/base/Checkbox.vue
index e0325e7..b262b8e 100644
--- a/components/base/Checkbox.vue
+++ b/components/base/Checkbox.vue
@@ -6,7 +6,6 @@ defineProps({
   label: String,
   description: String,
 });
-
 </script>
 
 <template>
@@ -38,5 +37,4 @@ input {
 .checkbox {
   padding: 0 0 0 20px;
 }
-
-</style>
\ No newline at end of file
+</style>
diff --git a/components/base/ItemStack/ItemStackForm.vue b/components/base/ItemStack/ItemStackForm.vue
index ef13abd..ddf8144 100644
--- a/components/base/ItemStack/ItemStackForm.vue
+++ b/components/base/ItemStack/ItemStackForm.vue
@@ -16,25 +16,27 @@ 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"] })
-  })
+    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;
@@ -45,19 +47,31 @@ const parseAndSetYamlValues = (): boolean => {
   }
 
   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"]);
+  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() {
@@ -70,7 +84,7 @@ const itemName = computed({
 
 const isOptionSet = (option: string) => {
   return option in model.value;
-}
+};
 
 const setOption = (option: string, type: 'string' | 'string-list' | 'number' | 'boolean') => {
   switch (type) {
@@ -87,11 +101,11 @@ const setOption = (option: string, type: 'string' | 'string-list' | 'number' | '
       model.value[option] = [];
       break;
   }
-}
+};
 
 const removeOption = (option: string) => {
   delete model.value[option];
-}
+};
 
 const itemType = computed({
   get() {
@@ -114,8 +128,8 @@ const itemLore = computed({
   },
   set(newValue: string) {
     model.value.lore = newValue.split('\n');
-  }
-})
+  },
+});
 
 const itemEnchantments = computed({
   get() {
@@ -123,8 +137,8 @@ const itemEnchantments = computed({
   },
   set(newValue: any) {
     model.value.enchantments = newValue;
-  }
-})
+  },
+});
 
 const itemCustomModelData = computed({
   get() {
@@ -132,8 +146,8 @@ const itemCustomModelData = computed({
   },
   set(newValue: any) {
     model.value.custommodeldata = newValue;
-  }
-})
+  },
+});
 
 const itemItemflags = computed({
   get() {
@@ -141,8 +155,8 @@ const itemItemflags = computed({
   },
   set(newValue: any) {
     model.value.itemflags = newValue;
-  }
-})
+  },
+});
 </script>
 
 <template>
@@ -151,69 +165,163 @@ const itemItemflags = computed({
       <div class="label-with-button">
         <label for="itemstack-type">Type</label>
 
-        <Button label="Edit as YAML" :icon="['fas', 'pencil']" @click="switchToYamlEditor()"></Button>
+        <Button
+          label="Edit as YAML"
+          :icon="['fas', 'pencil']"
+          @click="switchToYamlEditor()"
+        ></Button>
       </div>
-      <multiselect v-model="itemType" :options="materials" :searchable="true" placeholder="Choose a material" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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" />
+      <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>
+      <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>
+      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>
 
@@ -222,7 +330,11 @@ const itemItemflags = computed({
       <div class="label-with-button">
         <label for="itemstack-name">YAML</label>
 
-        <Button label="Use GUI editor" :icon="['fas', 'pencil']" @click="switchToGuiEditor"></Button>
+        <Button
+          label="Use GUI editor"
+          :icon="['fas', 'pencil']"
+          @click="switchToGuiEditor"
+        ></Button>
       </div>
 
       <textarea id="yaml-editor" rows="10" v-model="yamlCode"></textarea>
@@ -245,4 +357,4 @@ const itemItemflags = computed({
 #yaml-editor {
   font-family: monospace;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/base/ItemStack/ItemStackFormOptionLabel.vue b/components/base/ItemStack/ItemStackFormOptionLabel.vue
index ab067f8..e334950 100644
--- a/components/base/ItemStack/ItemStackFormOptionLabel.vue
+++ b/components/base/ItemStack/ItemStackFormOptionLabel.vue
@@ -1,20 +1,24 @@
 <script setup lang="ts">
 defineProps<{
-  option: string
-  label: string
-  type: string
+  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>
+    <Button
+      v-if="isOptionSetFn(option)"
+      label="Remove"
+      :icon="['fas', 'minus']"
+      @click="removeOptionFn(option)"
+    ></Button>
   </div>
 </template>
 
@@ -23,4 +27,4 @@ defineProps<{
   display: flex;
   justify-content: space-between;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/base/ItemStack/ItemStackModal.vue b/components/base/ItemStack/ItemStackModal.vue
index 2a53926..e4e39e5 100644
--- a/components/base/ItemStack/ItemStackModal.vue
+++ b/components/base/ItemStack/ItemStackModal.vue
@@ -5,7 +5,7 @@ import materials from '@/lib/materials';
 const model = defineModel();
 const emit = defineEmits(['confirm']);
 const props = defineProps<{
-  value: any
+  value: any;
 }>();
 const session = useSessionStore();
 
@@ -17,15 +17,14 @@ const isQuestItem = computed(() => {
 });
 const isItemStack = computed(() => {
   return (
-    typeof value.value === 'object'
-    && (
-      value.value?.item !== undefined
-      || value.value?.type !== undefined
-      || value.value?.material !== undefined
-    ))
+    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)
+  return typeof value.value === 'string' && materials.includes(value.value);
 });
 
 const selectedType = ref(
@@ -46,13 +45,15 @@ const selectedQuestItem = computed({
     return value.value?.['quest-item'];
   },
   set(newValue: string) {
-    value.value = {}
+    value.value = {};
     if (newValue) {
       value.value['quest-item'] = newValue;
     }
-  }
-})
-const knownQuestItems = computed(() => { return session.session.items.map((item) => item.id) });
+  },
+});
+const knownQuestItems = computed(() => {
+  return session.session.items.map((item) => item.id);
+});
 
 const setSelectedType = (type: string) => {
   if (type === 'questitem') {
@@ -78,21 +79,33 @@ const confirm = () => {
 
     <template v-slot:body>
       <div id="type">
-        <span class="option" @click="setSelectedType('questitem')" :class="{ selected: selectedType === 'questitem' }">
+        <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
+          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
+          class="option"
+          @click="setSelectedType('material')"
+          :class="{ selected: selectedType === 'material' }"
+        >
           <span>
             <font-awesome-icon :icon="['fas', 'apple-whole']" />
             Material
@@ -103,7 +116,12 @@ const confirm = () => {
 
       <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" />
+        <multiselect
+          v-model="value"
+          :options="materials"
+          :searchable="true"
+          placeholder="Enter material name"
+        />
         <p>Any items of this material will be matched.</p>
       </div>
 
@@ -113,8 +131,12 @@ const confirm = () => {
 
       <div id="quest-item" class="option-group" v-if="selectedType === 'questitem'">
         <label for="quest-item">Quest Item</label>
-        <multiselect v-model="selectedQuestItem" :options="knownQuestItems" :searchable="true"
-          placeholder="Enter quest item" />
+        <multiselect
+          v-model="selectedQuestItem"
+          :options="knownQuestItems"
+          :searchable="true"
+          placeholder="Enter quest item"
+        />
       </div>
 
       <div id="confirm" class="control-group">
@@ -174,4 +196,4 @@ const confirm = () => {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/base/ItemStack/ItemStackPicker.vue b/components/base/ItemStack/ItemStackPicker.vue
index 2dc35d3..09c0130 100644
--- a/components/base/ItemStack/ItemStackPicker.vue
+++ b/components/base/ItemStack/ItemStackPicker.vue
@@ -13,11 +13,13 @@ 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);
+  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;
@@ -27,16 +29,12 @@ const isItemStack = computed(() => {
     return false;
   }
 
-  const key = 'item' in value.value
-    ? 'item'
-    : 'type' in value.value
-      ? 'type'
-      : 'material'
+  const key = 'item' in value.value ? 'item' : 'type' in value.value ? 'type' : 'material';
 
-  return (!!value.value[key]);
+  return !!value.value[key];
 });
 const isMaterial = computed(() => {
-  return typeof value.value === 'string' && materials.includes(value.value)
+  return typeof value.value === 'string' && materials.includes(value.value);
 });
 
 const update = (newValue: any) => {
@@ -49,13 +47,19 @@ const update = (newValue: any) => {
 <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: {{
-    value['quest-item'] }}</span>
-    <span v-if="isItemStack" class="item"><font-awesome-icon :icon="['fas', 'cube']" /> ItemStack: {{ 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>
+    <span v-if="isQuestItem" class="item"
+      ><font-awesome-icon :icon="['fas', 'tag']" /> Quest Item: {{ value['quest-item'] }}</span
+    >
+    <span v-if="isItemStack" class="item"
+      ><font-awesome-icon :icon="['fas', 'cube']" /> ItemStack:
+      {{ 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" />
@@ -94,4 +98,4 @@ const update = (newValue: any) => {
     background-color: var(--color-hover);
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/base/Modal.vue b/components/base/Modal.vue
index f3a32d0..0edc297 100644
--- a/components/base/Modal.vue
+++ b/components/base/Modal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 const model = defineModel();
-
 </script>
 
 <template>
@@ -69,4 +68,4 @@ const model = defineModel();
   font-weight: 600;
   border-bottom: none;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/base/Pulser.vue b/components/base/Pulser.vue
index 796b3cc..c4151fb 100644
--- a/components/base/Pulser.vue
+++ b/components/base/Pulser.vue
@@ -12,7 +12,7 @@
   height: 100px;
   width: 100px;
 
-  >div {
+  > div {
     animation: growAndFade 3s infinite ease-out;
     background-color: var(--color-primary);
     border-radius: 50%;
@@ -37,7 +37,7 @@
 
 @keyframes growAndFade {
   0% {
-    opacity: .25;
+    opacity: 0.25;
     transform: scale(0);
   }
 
@@ -53,4 +53,4 @@ body {
   justify-content: center;
   margin: 0;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/components/base/TrueFalseSwitch.vue b/components/base/TrueFalseSwitch.vue
index 152efa3..46a9d9a 100644
--- a/components/base/TrueFalseSwitch.vue
+++ b/components/base/TrueFalseSwitch.vue
@@ -50,4 +50,4 @@ const invert = () => {
     background-color: var(--color-hover);
   }
 }
-</style>
\ No newline at end of file
+</style>