Added quick navigation for calendar pages

app/components/calendar/Calendar.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { useCalendar } from "@/stores/CalendarStore"
-import { computed, type Component, type ComputedRef } from "vue"
 
 // import { PhMagnifyingGlass } from '@phosphor-icons/vue'
 import MonthlyLayout from "./state/monthly/Layout.vue"
@@ -8,7 +7,9 @@ import CenturyLayout from "./state/centennially/Layout.vue"
 import DecadeLayout from "./state/decennially/Layout.vue"
 import YearLayout from "./state/yearly/Layout.vue"
 
-const { currentConfig, jumpToDate, selectedDate, toPastFar, toPastNear, toFutureNear, toFutureFar } = useCalendar()
+import { onKeyDown } from "@vueuse/core"
+
+const { currentConfig, jumpToDate, selectedDate, toPastFar, toPastNear, toFutureNear, toFutureFar, toggleCreatingEventModal } = useCalendar()
 const { isReadOnly, calendarState } = storeToRefs(useCalendar())
 
 const currentViewComponent: ComputedRef<Component> = computed<Component>(() => {
@@ -32,33 +33,44 @@ onMounted(() => {
   jumpToDate(selectedDate)
 })
 
+/**
+ * Keyboard quick controls
+ */
 // Key combos to navigate
-const { arrowUp, arrowLeft, pageUp } = useMagicKeys()
-const { arrowDown, arrowRight, pageDown } = useMagicKeys()
+const {
+  arrowUp, arrowLeft, pageUp,
+  arrowDown, arrowRight, pageDown,
+} = useMagicKeys()
 
 watch([arrowUp, arrowLeft], (k) => {
-  if (calendarState.value === 'active' && k[0] || k[1]) {
+  if (calendarState.value === 'active' && (k[0] || k[1])) {
     toPastNear()
   }
 })
-
-watch([arrowDown, arrowRight], (k) => {
-  if (calendarState.value === 'active' && k[0] || k[1]) {
-    toFutureNear()
-  }
-})
-
 watch(pageUp!, (k) => {
   if (calendarState.value === 'active' && k) {
     toPastFar()
   }
 })
 
+watch([arrowDown, arrowRight], (k) => {
+  if (calendarState.value === 'active' && (k[0] || k[1])) {
+    toFutureNear()
+  }
+})
 watch(pageDown!, (k) => {
   if (calendarState.value === 'active' && k) {
     toFutureFar()
   }
 })
+
+// Key combo to create an event
+onKeyDown("+", (e) => {
+  if (calendarState.value === 'active') {
+    e.preventDefault()
+    toggleCreatingEventModal()
+  }
+})
 </script>
 
 <template>

app/components/ui/button/Button.vue

@@ -26,7 +26,7 @@ const props = withDefaults(defineProps<Props>(), {
 
     <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-xs group-hover:text-slate-600 group-hover:bg-slate-200 group-hover:border-slate-400 transition-colors"
+      class="h-4 p-1 ml-1 grid place-items-center text-[0.75em] leading-none font-semibold text-slate-500 bg-slate-100 border-slate-300 border-[1px] rounded-[3px] shadow-xs group-hover:text-slate-600 group-hover:bg-slate-200 group-hover:border-slate-400 transition-colors"
     >
       <kbd class="-mt-[2px]">CTRL + :</kbd>
     </span>