Add quick search support

frontend/components/Base/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="z-[999]">
+  <div v-if="modal" class="z-[999]">
     <input :id="modalId" v-model="modal" type="checkbox" class="modal-toggle" />
     <div class="modal modal-bottom sm:modal-middle overflow-visible">
       <div class="modal-box overflow-visible relative">

frontend/components/Form/TextField.vue

@@ -41,16 +41,10 @@
     },
   });
 
-  const input = ref<HTMLElement | null>(null);
+  const input = ref<HTMLInputElement | null>(null);
-
+  whenever(input, () => {
-  whenever(
+    input.value!.focus();
-    () => props.triggerFocus,
+  });
-    () => {
-      if (input.value) {
-        input.value.focus();
-      }
-    }
-  );
 
   const value = useVModel(props, "modelValue");
 </script>

frontend/components/QuickSearch.vue

@@ -0,0 +1,34 @@
+<template>
+  <BaseModal v-model="isActive">
+    <template #title> Quick Search </template>
+    <div class="flex flex-wrap md:flex-nowrap gap-4 items-end">
+      <div class="w-full">
+        <FormTextField v-model="query" placeholder="Search" trigger-focus @keyup.prevent.enter="quickSearch" />
+      </div>
+      <BaseButton class="btn-block md:w-auto" @click.prevent="quickSearch">
+        <template #icon>
+          <Icon name="mdi-search" />
+        </template>
+        Search
+      </BaseButton>
+    </div>
+  </BaseModal>
+</template>
+
+<script setup lang="ts">
+  const query = ref("");
+  const { isActive } = useQuickSearch();
+  const router = useRouter();
+
+  function quickSearch() {
+    router.push({
+      path: "/items",
+      query: {
+        q: query.value,
+      },
+    });
+
+    isActive.value = false;
+    query.value = "";
+  }
+</script>

frontend/layouts/default.vue

@@ -9,6 +9,7 @@
     <ItemCreateModal v-model="modals.item" />
     <LabelCreateModal v-model="modals.label" />
     <LocationCreateModal v-model="modals.location" />
+    <QuickSearch />
     <AppToast />
     <div class="drawer drawer-mobile">
       <input id="nav-drawer" v-model="drawerToggle" type="checkbox" class="drawer-toggle" />
@@ -93,16 +94,12 @@
 <script lang="ts" setup>
   import { useLabelStore } from "~~/stores/labels";
   import { useLocationStore } from "~~/stores/locations";
-  import { useQuickSearch } from "~~/composables/use-quick-search";
 
   const username = computed(() => authCtx.user?.name || "User");
 
   // Preload currency format
   useFormatCurrency();
 
-  // Enable global quick search:
-  useQuickSearch();
-
   const modals = reactive({
     item: false,
     location: false,