From 16cace76c08a1d65f4dd161191dd6d4fff7991bb Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Sun, 12 Jan 2025 20:46:31 -0500
Subject: [PATCH 01/13] Fixed create modal shortcuts (shift 1, 2, or 3)

---
 frontend/layouts/default.vue | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 065199d1..d1c6b099 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -68,7 +68,7 @@
                       <button class="group" @click="btn.action">
                         {{ btn.name.value }}
 
-                        <kbd v-if="btn.shortcut" class="ml-auto hidden text-neutral-400 group-hover:inline">{{
+                        <kbd v-if="btn.shortcut" class="kbd kbd-sm ml-auto hidden text-neutral-400 group-hover:inline">{{
                           btn.shortcut
                         }}</kbd>
                       </button>
@@ -143,9 +143,14 @@
 
   const displayOutdatedWarning = computed(() => !isDev && !hasHiddenLatest.value && isOutdated.value);
 
+  const activeElement = useActiveElement();
   const keys = useMagicKeys({
     aliasMap: {
       "⌃": "control_",
+      "Shift+": "ShiftLeft_",
+      "!": "ShiftLeft_digit1",
+      "@": "ShiftLeft_digit2",
+      "#": "ShiftLeft_digit3",
     },
   });
 
@@ -171,7 +176,7 @@
     {
       id: 0,
       name: computed(() => t("menu.create_item")),
-      shortcut: "⌃1",
+      shortcut: "!",
       action: () => {
         modals.item = true;
       },
@@ -179,7 +184,7 @@
     {
       id: 1,
       name: computed(() => t("menu.create_location")),
-      shortcut: "⌃2",
+      shortcut: "@",
       action: () => {
         modals.location = true;
       },
@@ -187,7 +192,7 @@
     {
       id: 2,
       name: computed(() => t("menu.create_label")),
-      shortcut: "⌃3",
+      shortcut: "#",
       action: () => {
         modals.label = true;
       },
@@ -195,9 +200,12 @@
   ];
 
   dropdown.forEach(option => {
-    if (option.shortcut) {
-      whenever(keys[option.shortcut], () => {
-        option.action();
+    if (option?.shortcut) {
+      const shortcutKeycode = option.shortcut.replace(/([0-9])/, "digit$&");
+      whenever(keys[shortcutKeycode], () => {
+        if (activeElement.value?.tagName === "BODY") {
+          option.action();
+        }
       });
     }
   });

From 690ebbf951178912ad5de03f14a147b40cc21e5c Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Sun, 12 Jan 2025 21:19:23 -0500
Subject: [PATCH 02/13] Autofocus on name fields in create modals

---
 frontend/components/Item/CreateModal.vue     | 28 +++++++++++---------
 frontend/components/Label/CreateModal.vue    |  9 ++++---
 frontend/components/Location/CreateModal.vue |  9 ++++---
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index 5d01462b..e8043cc6 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -141,20 +141,24 @@
     }
   }
 
-  whenever(
+  watch(
     () => modal.value,
-    () => {
-      focused.value = true;
-
-      if (locationId.value) {
-        const found = locations.value.find(l => l.id === locationId.value);
-        if (found) {
-          form.location = found;
+    (open) => {
+      if (open) {
+        useTimeoutFn(() => { focused.value = true }, 50);
+  
+        if (locationId.value) {
+          const found = locations.value.find(l => l.id === locationId.value);
+          if (found) {
+            form.location = found;
+          }
         }
-      }
-
-      if (labelId.value) {
-        form.labels = labels.value.filter(l => l.id === labelId.value);
+  
+        if (labelId.value) {
+          form.labels = labels.value.filter(l => l.id === labelId.value);
+        }
+      } else {
+        focused.value = false;
       }
     }
   );
diff --git a/frontend/components/Label/CreateModal.vue b/frontend/components/Label/CreateModal.vue
index 89d74354..d26bfb30 100644
--- a/frontend/components/Label/CreateModal.vue
+++ b/frontend/components/Label/CreateModal.vue
@@ -64,10 +64,13 @@
     loading.value = false;
   }
 
-  whenever(
+  watch(
     () => modal.value,
-    () => {
-      focused.value = true;
+    (open) => {
+      if (open)
+        useTimeoutFn(() => { focused.value = true}, 50);
+      else
+        focused.value = false;
     }
   );
 
diff --git a/frontend/components/Location/CreateModal.vue b/frontend/components/Location/CreateModal.vue
index 0552194a..f85e6617 100644
--- a/frontend/components/Location/CreateModal.vue
+++ b/frontend/components/Location/CreateModal.vue
@@ -59,10 +59,13 @@
     parent: null as LocationSummary | null,
   });
 
-  whenever(
+  watch(
     () => modal.value,
-    () => {
-      focused.value = true;
+    (open) => {
+      if (open)
+        useTimeoutFn(() => { focused.value = true}, 50);
+      else
+        focused.value = false;
     }
   );
 

From 448b3f00350cd5dada22536f0bcc664236700a3d Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Sun, 12 Jan 2025 21:42:31 -0500
Subject: [PATCH 03/13] Made clicking outside to close modals optional

---
 frontend/components/Base/Modal.vue             | 12 +++++++++---
 frontend/components/global/QuickMenu/Modal.vue |  2 +-
 frontend/layouts/default.vue                   |  2 +-
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/frontend/components/Base/Modal.vue b/frontend/components/Base/Modal.vue
index 6939f929..98e1db80 100644
--- a/frontend/components/Base/Modal.vue
+++ b/frontend/components/Base/Modal.vue
@@ -41,6 +41,10 @@
       type: Boolean,
       default: true,
     },
+    clickOutsideToClose: {
+      type: Boolean,
+      default: false,
+    }
   });
 
   const modalBox = ref();
@@ -51,9 +55,11 @@
     }
   }
 
-  onClickOutside(modalBox, () => {
-    close();
-  });
+  if (props.clickOutsideToClose) {
+    onClickOutside(modalBox, () => {
+      close();
+    });
+  }
 
   function close() {
     if (props.readonly) {
diff --git a/frontend/components/global/QuickMenu/Modal.vue b/frontend/components/global/QuickMenu/Modal.vue
index 5d094260..acf87797 100644
--- a/frontend/components/global/QuickMenu/Modal.vue
+++ b/frontend/components/global/QuickMenu/Modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseModal v-model="modal" :show-close-button="false">
+  <BaseModal v-model="modal" :show-close-button="false" :click-outside-to-close="true">
     <div class="relative">
       <span class="text-neutral-400">{{ $t("components.quick_menu.shortcut_hint") }}</span>
       <QuickMenuInput
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index d1c6b099..28f9bc4d 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -203,7 +203,7 @@
     if (option?.shortcut) {
       const shortcutKeycode = option.shortcut.replace(/([0-9])/, "digit$&");
       whenever(keys[shortcutKeycode], () => {
-        if (activeElement.value?.tagName === "BODY") {
+        if (activeElement.value?.tagName !== "INPUT") {
           option.action();
         }
       });

From 57cbc0c3f448833e0a81c07f5eabadeb1f94968d Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Sun, 12 Jan 2025 21:47:01 -0500
Subject: [PATCH 04/13] Rearranged creation modal layout

---
 frontend/components/Item/CreateModal.vue     | 2 +-
 frontend/components/Location/CreateModal.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index e8043cc6..fa82f6db 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -3,6 +3,7 @@
     <template #title> {{ $t("components.item.create_modal.title") }} </template>
     <form @submit.prevent="create()">
       <LocationSelector v-model="form.location" />
+      <FormMultiselect v-model="form.labels" :label="$t('global.labels')" :items="labels ?? []" />
       <FormTextField
         ref="nameInput"
         v-model="form.name"
@@ -17,7 +18,6 @@
         :label="$t('components.item.create_modal.item_description')"
         :max-length="1000"
       />
-      <FormMultiselect v-model="form.labels" :label="$t('global.labels')" :items="labels ?? []" />
 
       <div class="modal-action mb-6">
         <div>
diff --git a/frontend/components/Location/CreateModal.vue b/frontend/components/Location/CreateModal.vue
index f85e6617..165c60ed 100644
--- a/frontend/components/Location/CreateModal.vue
+++ b/frontend/components/Location/CreateModal.vue
@@ -2,6 +2,7 @@
   <BaseModal v-model="modal">
     <template #title>{{ $t("components.location.create_modal.title") }}</template>
     <form @submit.prevent="create()">
+      <LocationSelector v-model="form.parent" />
       <FormTextField
         ref="locationNameRef"
         v-model="form.name"
@@ -17,7 +18,6 @@
         :label="$t('components.location.create_modal.location_description')"
         :max-length="1000"
       />
-      <LocationSelector v-model="form.parent" />
       <div class="modal-action">
         <div class="flex justify-center">
           <BaseButton class="rounded-r-none" type="submit" :loading="loading">{{ $t("global.create") }}</BaseButton>

From 4987bb6dca4c29d644a6c68aa88e6966464b0cef Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Sun, 12 Jan 2025 21:51:10 -0500
Subject: [PATCH 05/13] Autofill location parent field from url in create modal

---
 frontend/components/Location/CreateModal.vue | 24 ++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Location/CreateModal.vue b/frontend/components/Location/CreateModal.vue
index 165c60ed..cefa9b97 100644
--- a/frontend/components/Location/CreateModal.vue
+++ b/frontend/components/Location/CreateModal.vue
@@ -62,10 +62,18 @@
   watch(
     () => modal.value,
     (open) => {
-      if (open)
+      if (open) {
         useTimeoutFn(() => { focused.value = true}, 50);
-      else
+
+        if (locationId.value) {
+          const found = locations.value.find(l => l.id === locationId.value);
+          if (found) {
+            form.parent = found;
+          }
+        }
+      } else {
         focused.value = false;
+      }
     }
   );
 
@@ -80,8 +88,20 @@
   const api = useUserApi();
   const toast = useNotifier();
 
+  const locationsStore = useLocationStore();
+  const locations = computed(() => locationsStore.allLocations);
+
+  const route = useRoute();
+
   const { shift } = useMagicKeys();
 
+  const locationId = computed(() => {
+    if (route.fullPath.includes("/location/")) {
+      return route.params.id;
+    }
+    return null;
+  });
+
   async function create(close = true) {
     if (loading.value) {
       toast.error("Already creating a location");

From 9f511e37087259de85ae1392e19363907c33cef0 Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Sun, 12 Jan 2025 22:14:21 -0500
Subject: [PATCH 06/13] Made multiselect border consistent with other inputs

---
 frontend/components/Form/Multiselect.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Form/Multiselect.vue b/frontend/components/Form/Multiselect.vue
index 91e1a27a..8b2dd954 100644
--- a/frontend/components/Form/Multiselect.vue
+++ b/frontend/components/Form/Multiselect.vue
@@ -4,7 +4,7 @@
       <span class="label-text">{{ label }}</span>
     </label>
     <div class="dropdown dropdown-top sm:dropdown-end">
-      <div tabindex="0" class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-gray-400 p-4">
+      <div tabindex="0" class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-base-content border-opacity-20 p-4">
         <span v-for="itm in value" :key="itm.id" class="badge">
           {{ itm.name }}
         </span>
@@ -20,7 +20,7 @@
       <div
         tabindex="0"
         style="display: inline"
-        class="dropdown-content menu z-[9999] mb-1 w-full rounded border border-gray-400 bg-base-100 shadow"
+        class="dropdown-content menu z-[9999] mb-1 w-full rounded border border-base-content border-opacity-20 bg-base-100 shadow"
       >
         <div class="m-2">
           <input v-model="search" placeholder="Search…" class="input input-bordered input-sm w-full" />

From 224b6697f037aff80545ddfa114cbc7640083725 Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Mon, 13 Jan 2025 11:27:02 -0500
Subject: [PATCH 07/13] Move label field back, don't open dropdown on quick
 menu open, and ui:fix'd

---
 frontend/components/Base/Modal.vue             |  2 +-
 frontend/components/Form/Multiselect.vue       |  5 ++++-
 frontend/components/Item/CreateModal.vue       | 12 +++++++-----
 frontend/components/Label/CreateModal.vue      |  9 +++++----
 frontend/components/Location/CreateModal.vue   |  6 ++++--
 frontend/components/global/QuickMenu/Input.vue |  5 ++---
 frontend/layouts/default.vue                   |  8 +++++---
 7 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/frontend/components/Base/Modal.vue b/frontend/components/Base/Modal.vue
index 98e1db80..b1ea21c2 100644
--- a/frontend/components/Base/Modal.vue
+++ b/frontend/components/Base/Modal.vue
@@ -44,7 +44,7 @@
     clickOutsideToClose: {
       type: Boolean,
       default: false,
-    }
+    },
   });
 
   const modalBox = ref();
diff --git a/frontend/components/Form/Multiselect.vue b/frontend/components/Form/Multiselect.vue
index 8b2dd954..e5420a40 100644
--- a/frontend/components/Form/Multiselect.vue
+++ b/frontend/components/Form/Multiselect.vue
@@ -4,7 +4,10 @@
       <span class="label-text">{{ label }}</span>
     </label>
     <div class="dropdown dropdown-top sm:dropdown-end">
-      <div tabindex="0" class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-base-content border-opacity-20 p-4">
+      <div
+        tabindex="0"
+        class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-base-content border-opacity-20 p-4"
+      >
         <span v-for="itm in value" :key="itm.id" class="badge">
           {{ itm.name }}
         </span>
diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index fa82f6db..d0598c2c 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -3,7 +3,6 @@
     <template #title> {{ $t("components.item.create_modal.title") }} </template>
     <form @submit.prevent="create()">
       <LocationSelector v-model="form.location" />
-      <FormMultiselect v-model="form.labels" :label="$t('global.labels')" :items="labels ?? []" />
       <FormTextField
         ref="nameInput"
         v-model="form.name"
@@ -18,6 +17,7 @@
         :label="$t('components.item.create_modal.item_description')"
         :max-length="1000"
       />
+      <FormMultiselect v-model="form.labels" :label="$t('global.labels')" :items="labels ?? []" />
 
       <div class="modal-action mb-6">
         <div>
@@ -143,17 +143,19 @@
 
   watch(
     () => modal.value,
-    (open) => {
+    open => {
       if (open) {
-        useTimeoutFn(() => { focused.value = true }, 50);
-  
+        useTimeoutFn(() => {
+          focused.value = true;
+        }, 50);
+
         if (locationId.value) {
           const found = locations.value.find(l => l.id === locationId.value);
           if (found) {
             form.location = found;
           }
         }
-  
+
         if (labelId.value) {
           form.labels = labels.value.filter(l => l.id === labelId.value);
         }
diff --git a/frontend/components/Label/CreateModal.vue b/frontend/components/Label/CreateModal.vue
index d26bfb30..a16b480d 100644
--- a/frontend/components/Label/CreateModal.vue
+++ b/frontend/components/Label/CreateModal.vue
@@ -66,11 +66,12 @@
 
   watch(
     () => modal.value,
-    (open) => {
+    open => {
       if (open)
-        useTimeoutFn(() => { focused.value = true}, 50);
-      else
-        focused.value = false;
+        useTimeoutFn(() => {
+          focused.value = true;
+        }, 50);
+      else focused.value = false;
     }
   );
 
diff --git a/frontend/components/Location/CreateModal.vue b/frontend/components/Location/CreateModal.vue
index cefa9b97..3363c50f 100644
--- a/frontend/components/Location/CreateModal.vue
+++ b/frontend/components/Location/CreateModal.vue
@@ -61,9 +61,11 @@
 
   watch(
     () => modal.value,
-    (open) => {
+    open => {
       if (open) {
-        useTimeoutFn(() => { focused.value = true}, 50);
+        useTimeoutFn(() => {
+          focused.value = true;
+        }, 50);
 
         if (locationId.value) {
           const found = locations.value.find(l => l.id === locationId.value);
diff --git a/frontend/components/global/QuickMenu/Input.vue b/frontend/components/global/QuickMenu/Input.vue
index 8f047a7e..942d891b 100644
--- a/frontend/components/global/QuickMenu/Input.vue
+++ b/frontend/components/global/QuickMenu/Input.vue
@@ -81,9 +81,8 @@
     unrefElement(inputBoxButton).click();
   };
 
-  watch(inputBoxFocused, () => {
-    if (inputBoxFocused.value) revealActions();
-    else inputValue.value = "";
+  watch(inputBoxFocused, val => {
+    if (!val) inputValue.value = "";
   });
 
   watch(inputValue, (val, oldVal) => {
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 28f9bc4d..26f69014 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -68,9 +68,11 @@
                       <button class="group" @click="btn.action">
                         {{ btn.name.value }}
 
-                        <kbd v-if="btn.shortcut" class="kbd kbd-sm ml-auto hidden text-neutral-400 group-hover:inline">{{
-                          btn.shortcut
-                        }}</kbd>
+                        <kbd
+                          v-if="btn.shortcut"
+                          class="kbd kbd-sm ml-auto hidden text-neutral-400 group-hover:inline"
+                          >{{ btn.shortcut }}</kbd
+                        >
                       </button>
                     </li>
                   </ul>

From f3bb0b21ae41c0812ecfeb5956094ab0b1d4b070 Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Sun, 19 Jan 2025 19:11:49 -0500
Subject: [PATCH 08/13] Fix quick actions selecting when clicking out of modal

---
 .../components/global/QuickMenu/Input.vue     | 19 ++++++++++++++-----
 .../components/global/QuickMenu/Modal.vue     | 13 +------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/frontend/components/global/QuickMenu/Input.vue b/frontend/components/global/QuickMenu/Input.vue
index 942d891b..34b845a3 100644
--- a/frontend/components/global/QuickMenu/Input.vue
+++ b/frontend/components/global/QuickMenu/Input.vue
@@ -7,6 +7,7 @@
     ></ComboboxInput>
     <ComboboxOptions
       class="card dropdown-content absolute max-h-48 w-full overflow-y-scroll rounded-lg border border-base-300 bg-base-100"
+      :unmount="false"
     >
       <ComboboxOption
         v-for="(action, idx) in filteredActions"
@@ -68,32 +69,40 @@
     },
   });
 
-  const selectedAction = useVModel(props, "modelValue");
+  const emit = defineEmits(["update:modelValue", "actionSelected"]);
+  const selectedAction = ref();
 
   const inputValue = ref("");
   const inputBox = ref();
   const inputBoxButton = ref();
   const { focused: inputBoxFocused } = useFocus(inputBox);
 
-  const emit = defineEmits(["update:modelValue", "quickSelect"]);
-
   const revealActions = () => {
     unrefElement(inputBoxButton).click();
   };
 
   watch(inputBoxFocused, val => {
-    if (!val) inputValue.value = "";
+    if (val) revealActions();
+    else inputValue.value = "";
   });
 
   watch(inputValue, (val, oldVal) => {
     if (!oldVal) {
       const action = props.actions?.find(v => v.shortcut === val);
       if (action) {
-        emit("quickSelect", action);
+        emit("actionSelected", action);
+        inputBoxFocused.value = false;
       }
     }
   });
 
+  watch(selectedAction, val => {
+    if (val) {
+      emit("actionSelected", val);
+      selectedAction.value = null;
+    }
+  });
+
   const filteredActions = computed(() => {
     const searchTerm = inputValue.value.toLowerCase();
     return (props.actions || []).filter(action => {
diff --git a/frontend/components/global/QuickMenu/Modal.vue b/frontend/components/global/QuickMenu/Modal.vue
index acf87797..538e9755 100644
--- a/frontend/components/global/QuickMenu/Modal.vue
+++ b/frontend/components/global/QuickMenu/Modal.vue
@@ -2,12 +2,7 @@
   <BaseModal v-model="modal" :show-close-button="false" :click-outside-to-close="true">
     <div class="relative">
       <span class="text-neutral-400">{{ $t("components.quick_menu.shortcut_hint") }}</span>
-      <QuickMenuInput
-        ref="inputBox"
-        v-model="selectedAction"
-        :actions="props.actions || []"
-        @quick-select="invokeAction"
-      ></QuickMenuInput>
+      <QuickMenuInput ref="inputBox" :actions="props.actions || []" @action-selected="invokeAction"></QuickMenuInput>
     </div>
   </BaseModal>
 </template>
@@ -28,7 +23,6 @@
   });
 
   const modal = useVModel(props, "modelValue");
-  const selectedAction = ref<QuickMenuAction>();
 
   const inputBox = ref<QuickMenuInputData>({ focused: false, revealActions: () => {} });
 
@@ -37,7 +31,6 @@
   }, 50).start;
 
   const onModalClose = () => {
-    selectedAction.value = undefined;
     inputBox.value.focused = false;
   };
 
@@ -51,8 +44,4 @@
     modal.value = false;
     useTimeoutFn(action.action, 100).start();
   }
-
-  watch(selectedAction, action => {
-    if (action) invokeAction(action);
-  });
 </script>

From 60bbe25a8ead93cc1d79ce9a580f9b2f43e57207 Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Sun, 19 Jan 2025 20:58:41 -0500
Subject: [PATCH 09/13] Fix lint warning

---
 frontend/components/Form/Multiselect.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/components/Form/Multiselect.vue b/frontend/components/Form/Multiselect.vue
index e5420a40..ad67c644 100644
--- a/frontend/components/Form/Multiselect.vue
+++ b/frontend/components/Form/Multiselect.vue
@@ -6,7 +6,7 @@
     <div class="dropdown dropdown-top sm:dropdown-end">
       <div
         tabindex="0"
-        class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-base-content border-opacity-20 p-4"
+        class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-base-content/20 p-4"
       >
         <span v-for="itm in value" :key="itm.id" class="badge">
           {{ itm.name }}
@@ -23,7 +23,7 @@
       <div
         tabindex="0"
         style="display: inline"
-        class="dropdown-content menu z-[9999] mb-1 w-full rounded border border-base-content border-opacity-20 bg-base-100 shadow"
+        class="dropdown-content menu z-[9999] mb-1 w-full rounded border border-base-content/20 bg-base-100 shadow"
       >
         <div class="m-2">
           <input v-model="search" placeholder="Search…" class="input input-bordered input-sm w-full" />

From 0abf6284bab9c4e3559a85ad737e50341a58f68b Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Wed, 22 Jan 2025 21:02:43 -0500
Subject: [PATCH 10/13] fixed quick actions bug FOR REAL this time

---
 frontend/components/global/QuickMenu/Input.vue |  4 ++--
 frontend/components/global/QuickMenu/Modal.vue |  2 +-
 frontend/layouts/default.vue                   | 14 +++++++-------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/components/global/QuickMenu/Input.vue b/frontend/components/global/QuickMenu/Input.vue
index 34b845a3..52ff0e93 100644
--- a/frontend/components/global/QuickMenu/Input.vue
+++ b/frontend/components/global/QuickMenu/Input.vue
@@ -1,5 +1,5 @@
 <template>
-  <Combobox v-model="selectedAction">
+  <Combobox v-model="selectedAction" :nullable="true">
     <ComboboxInput
       ref="inputBox"
       class="input input-bordered mt-2 w-full"
@@ -70,7 +70,7 @@
   });
 
   const emit = defineEmits(["update:modelValue", "actionSelected"]);
-  const selectedAction = ref();
+  const selectedAction = ref(null);
 
   const inputValue = ref("");
   const inputBox = ref();
diff --git a/frontend/components/global/QuickMenu/Modal.vue b/frontend/components/global/QuickMenu/Modal.vue
index 538e9755..9196b231 100644
--- a/frontend/components/global/QuickMenu/Modal.vue
+++ b/frontend/components/global/QuickMenu/Modal.vue
@@ -1,5 +1,5 @@
 <template>
-  <BaseModal v-model="modal" :show-close-button="false" :click-outside-to-close="true">
+  <BaseModal v-model="modal" :show-close-button="false" :click-outside-to-close="true" :class="{ 'self-start': true }">
     <div class="relative">
       <span class="text-neutral-400">{{ $t("components.quick_menu.shortcut_hint") }}</span>
       <QuickMenuInput ref="inputBox" :actions="props.actions || []" @action-selected="invokeAction"></QuickMenuInput>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 26f69014..8ae255b2 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -71,7 +71,7 @@
                         <kbd
                           v-if="btn.shortcut"
                           class="kbd kbd-sm ml-auto hidden text-neutral-400 group-hover:inline"
-                          >{{ btn.shortcut }}</kbd
+                          >{{ btn.shortcut.replaceAll("Shift+", "⇧") }}</kbd
                         >
                       </button>
                     </li>
@@ -150,9 +150,9 @@
     aliasMap: {
       "⌃": "control_",
       "Shift+": "ShiftLeft_",
-      "!": "ShiftLeft_digit1",
-      "@": "ShiftLeft_digit2",
-      "#": "ShiftLeft_digit3",
+      "1": "digit1",
+      "2": "digit2",
+      "3": "digit3",
     },
   });
 
@@ -178,7 +178,7 @@
     {
       id: 0,
       name: computed(() => t("menu.create_item")),
-      shortcut: "!",
+      shortcut: "Shift+1",
       action: () => {
         modals.item = true;
       },
@@ -186,7 +186,7 @@
     {
       id: 1,
       name: computed(() => t("menu.create_location")),
-      shortcut: "@",
+      shortcut: "Shift+2",
       action: () => {
         modals.location = true;
       },
@@ -194,7 +194,7 @@
     {
       id: 2,
       name: computed(() => t("menu.create_label")),
-      shortcut: "#",
+      shortcut: "Shift+3",
       action: () => {
         modals.label = true;
       },

From 0be0729eed8d07cd1fc2257a4663b2e77e371697 Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Thu, 23 Jan 2025 21:34:54 -0500
Subject: [PATCH 11/13] fix quick menu on small screens

---
 frontend/components/Base/Modal.vue            | 32 +++++++++++++++++--
 frontend/components/Form/Multiselect.vue      |  5 +--
 .../components/global/QuickMenu/Modal.vue     |  8 ++++-
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/frontend/components/Base/Modal.vue b/frontend/components/Base/Modal.vue
index b1ea21c2..865ef469 100644
--- a/frontend/components/Base/Modal.vue
+++ b/frontend/components/Base/Modal.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="z-[999]">
     <input :id="modalId" v-model="modal" type="checkbox" class="modal-toggle" />
-    <div class="modal modal-bottom overflow-visible sm:modal-middle">
+    <div
+      class="modal overflow-visible sm:modal-middle"
+      :class="{ 'modal-bottom': !props.modalTop }"
+      :modal-top="props.modalTop"
+    >
       <div ref="modalBox" class="modal-box relative overflow-visible">
         <button
           v-if="props.showCloseButton"
@@ -21,6 +25,26 @@
   </div>
 </template>
 
+<style lang="css" scoped>
+  @media (max-width: 640px) {
+    .modal[modal-top] {
+      align-items: start;
+    }
+
+    .modal[modal-top] :where(.modal-box) {
+      max-width: none;
+      --tw-translate-y: 2.5rem /* 40px */;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
+        skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+      width: 100%;
+      border-top-left-radius: 0px;
+      border-top-right-radius: 0px;
+    }
+  }
+</style>
+
 <script setup lang="ts">
   const emit = defineEmits(["cancel", "update:modelValue"]);
   const props = defineProps({
@@ -45,6 +69,10 @@
       type: Boolean,
       default: false,
     },
+    modalTop: {
+      type: Boolean,
+      default: false,
+    },
   });
 
   const modalBox = ref();
@@ -79,4 +107,4 @@
       document.removeEventListener("keydown", escClose);
     }
   });
-</script>
+</script>
\ No newline at end of file
diff --git a/frontend/components/Form/Multiselect.vue b/frontend/components/Form/Multiselect.vue
index ad67c644..c0ed6083 100644
--- a/frontend/components/Form/Multiselect.vue
+++ b/frontend/components/Form/Multiselect.vue
@@ -4,10 +4,7 @@
       <span class="label-text">{{ label }}</span>
     </label>
     <div class="dropdown dropdown-top sm:dropdown-end">
-      <div
-        tabindex="0"
-        class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-base-content/20 p-4"
-      >
+      <div tabindex="0" class="flex min-h-[48px] w-full flex-wrap gap-2 rounded-lg border border-base-content/20 p-4">
         <span v-for="itm in value" :key="itm.id" class="badge">
           {{ itm.name }}
         </span>
diff --git a/frontend/components/global/QuickMenu/Modal.vue b/frontend/components/global/QuickMenu/Modal.vue
index 9196b231..84eb8838 100644
--- a/frontend/components/global/QuickMenu/Modal.vue
+++ b/frontend/components/global/QuickMenu/Modal.vue
@@ -1,5 +1,11 @@
 <template>
-  <BaseModal v-model="modal" :show-close-button="false" :click-outside-to-close="true" :class="{ 'self-start': true }">
+  <BaseModal
+    v-model="modal"
+    :show-close-button="false"
+    :click-outside-to-close="true"
+    :modal-top="true"
+    :class="{ 'self-start': true }"
+  >
     <div class="relative">
       <span class="text-neutral-400">{{ $t("components.quick_menu.shortcut_hint") }}</span>
       <QuickMenuInput ref="inputBox" :actions="props.actions || []" @action-selected="invokeAction"></QuickMenuInput>

From 60affde307fb09beb8f5307b61e2c1c5f324411b Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Sat, 25 Jan 2025 17:13:07 -0500
Subject: [PATCH 12/13] run lint

---
 frontend/components/Base/Modal.vue | 42 +++++++++++++++---------------
 frontend/layouts/default.vue       |  6 +++--
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/frontend/components/Base/Modal.vue b/frontend/components/Base/Modal.vue
index 865ef469..86bd0d38 100644
--- a/frontend/components/Base/Modal.vue
+++ b/frontend/components/Base/Modal.vue
@@ -25,26 +25,6 @@
   </div>
 </template>
 
-<style lang="css" scoped>
-  @media (max-width: 640px) {
-    .modal[modal-top] {
-      align-items: start;
-    }
-
-    .modal[modal-top] :where(.modal-box) {
-      max-width: none;
-      --tw-translate-y: 2.5rem /* 40px */;
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
-        skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-      width: 100%;
-      border-top-left-radius: 0px;
-      border-top-right-radius: 0px;
-    }
-  }
-</style>
-
 <script setup lang="ts">
   const emit = defineEmits(["cancel", "update:modelValue"]);
   const props = defineProps({
@@ -107,4 +87,24 @@
       document.removeEventListener("keydown", escClose);
     }
   });
-</script>
\ No newline at end of file
+</script>
+
+<style lang="css" scoped>
+  @media (max-width: 640px) {
+    .modal[modal-top] {
+      align-items: start;
+    }
+
+    .modal[modal-top] :where(.modal-box) {
+      max-width: none;
+      --tw-translate-y: 2.5rem /* 40px */;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate))
+        skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+      width: 100%;
+      border-top-left-radius: 0px;
+      border-top-right-radius: 0px;
+    }
+  }
+</style>
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 4d73b1ee..ade012a7 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -34,8 +34,10 @@
         <footer v-if="status" class="bottom-0 w-full bg-base-300 pb-4 text-center text-secondary-content">
           <p class="text-center text-sm">
             <a href="https://github.com/sysadminsmedia/homebox/releases/tag/{{ status.build.version }}" target="_blank">
-            {{ $t("global.version", { version: status.build.version }) }} ~
-            {{ $t("global.build", { build: status.build.commit }) }}</a> ~
+              {{ $t("global.version", { version: status.build.version }) }} ~
+              {{ $t("global.build", { build: status.build.commit }) }}</a
+            >
+            ~
             <a href="https://homebox.software/en/api.html" target="_blank">API</a>
           </p>
         </footer>

From 37315f1271801cb0a5b09321f7a46a20a63dfadf Mon Sep 17 00:00:00 2001
From: Corknut <grassyolive@gmail.com>
Date: Sat, 25 Jan 2025 17:40:52 -0500
Subject: [PATCH 13/13] change quick actions to reactive

---
 frontend/layouts/default.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index ade012a7..a8ca5ce6 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -279,7 +279,7 @@
     modals.import = false;
   });
 
-  const quickMenuActions = ref(
+  const quickMenuActions = reactive(
     [
       {
         text: computed(() => `${t("global.create")}: ${t("menu.create_item")}`),