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] 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>