From 6368ada51d46718e8eabdb265667ce1346400d0e Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Fri, 5 Apr 2024 17:44:49 +0200
Subject: [PATCH] Added shortcut to search

---
 src/components/calendar/CalendarMenuSearch.vue | 14 +++++++++++++-
 src/components/ui/button/Button.vue            | 10 +++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/components/calendar/CalendarMenuSearch.vue b/src/components/calendar/CalendarMenuSearch.vue
index 0a010de..4b1005c 100644
--- a/src/components/calendar/CalendarMenuSearch.vue
+++ b/src/components/calendar/CalendarMenuSearch.vue
@@ -6,6 +6,7 @@ import { Input } from '@/components/ui/input'
 import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import { useCalendarEvents } from '@/stores/events'
 import CalendarEventList from './CalendarEventList.vue'
+import { useMagicKeys, whenever } from '@vueuse/core'
 
 const { allEvents } = useCalendarEvents()
 
@@ -34,15 +35,26 @@ function resetSearch() {
   searchQuery.value = ''
 }
 
+function openDialog() {
+  modalOpen.value = true
+}
+
 function closeDialog() {
   modalOpen.value = false
 }
+
+// Key combos to deploy modal
+const keys = useMagicKeys()
+
+whenever(keys.control_period, () => {
+  openDialog()
+})
 </script>
 
 <template>
   <Dialog v-model:open="modalOpen" @update:open="resetSearch">
     <DialogTrigger>
-      <Button>
+      <Button search-slash>
         <PhMagnifyingGlass size="20" weight="light" />
         Recherche avancée
       </Button>
diff --git a/src/components/ui/button/Button.vue b/src/components/ui/button/Button.vue
index 445baad..6e56542 100644
--- a/src/components/ui/button/Button.vue
+++ b/src/components/ui/button/Button.vue
@@ -8,6 +8,7 @@ interface Props extends PrimitiveProps {
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
   class?: HTMLAttributes['class']
+  searchSlash?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -19,8 +20,15 @@ const props = withDefaults(defineProps<Props>(), {
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
+    :class="cn(buttonVariants({ variant, size }), props.class, 'group')"
   >
     <slot />
+
+    <span
+      v-if="props.searchSlash"
+      class="h-4 p-1 ml-1 grid place-items-center text-[0.7em] leading-none font-semibold text-slate-500 bg-slate-100 border-slate-300 border-[1px] rounded-[3px] shadow-sm group-hover:text-slate-600 group-hover:bg-slate-200 group-hover:border-slate-400 transition-colors"
+    >
+      <span class="-mt-[2px]">CTRL + :</span>
+    </span>
   </Primitive>
 </template>