Implement event/date search bar

src/components/HeaderControls.vue

@@ -1,54 +1,63 @@
 <template>
-  <Transition name="header-controls" appear>
-    <div v-if="isVisible" class="header-controls">
-      <div class="today-date" @click="goToToday">{{ todayString }}</div>
-      <button
-        type="button"
-        class="hist-btn"
-        :disabled="!calendarStore.historyCanUndo"
-        @click="calendarStore.$history?.undo()"
-        title="Undo (Ctrl+Z)"
-        aria-label="Undo"
-      >
-        ↶
-      </button>
-      <button
-        type="button"
-        class="hist-btn"
-        :disabled="!calendarStore.historyCanRedo"
-        @click="calendarStore.$history?.redo()"
-        title="Redo (Ctrl+Shift+Z)"
-        aria-label="Redo"
-      >
-        ↷
-      </button>
-      <button
-        type="button"
-        class="settings-btn"
-        @click="openSettings"
-        aria-label="Open settings"
-        title="Settings"
-      >
-        ⚙
-      </button>
-      <SettingsDialog ref="settingsDialog" />
-    </div>
-  </Transition>
-  <button
-    type="button"
-    class="toggle-btn"
-    @click="toggleVisibility"
-    :aria-label="isVisible ? 'Hide controls' : 'Show controls'"
-    :title="isVisible ? 'Hide controls' : 'Show controls'"
-  >
-    ⋯
-  </button>
+  <div class="header-controls-wrapper">
+    <Transition name="header-controls" appear>
+      <div v-if="isVisible" class="header-controls">
+        <EventSearch
+          ref="eventSearchRef"
+          :reference-date="referenceDate"
+          @activate="handleSearchActivate"
+          @preview="(r) => emit('search-preview', r)"
+        />
+        <div class="today-date" @click="goToToday">{{ todayString }}</div>
+        <button
+          type="button"
+          class="hist-btn"
+          :disabled="!calendarStore.historyCanUndo"
+          @click="calendarStore.$history?.undo()"
+          title="Undo (Ctrl+Z)"
+          aria-label="Undo"
+        >
+          ↶
+        </button>
+        <button
+          type="button"
+          class="hist-btn"
+          :disabled="!calendarStore.historyCanRedo"
+          @click="calendarStore.$history?.redo()"
+          title="Redo (Ctrl+Shift+Z)"
+          aria-label="Redo"
+        >
+          ↷
+        </button>
+        <button
+          type="button"
+          class="settings-btn"
+          @click="openSettings"
+          aria-label="Open settings"
+          title="Settings"
+        >
+          ⚙
+        </button>
+        <SettingsDialog ref="settingsDialog" />
+      </div>
+    </Transition>
+    <button
+      type="button"
+      class="toggle-btn"
+      @click="toggleVisibility"
+      :aria-label="isVisible ? 'Hide controls' : 'Show controls'"
+      :title="isVisible ? 'Hide controls' : 'Show controls'"
+    >
+      ⋯
+    </button>
+  </div>
 </template>
 
 <script setup>
-import { computed, ref, onMounted, onBeforeUnmount } from 'vue'
+import { computed, ref, onMounted, onBeforeUnmount, defineExpose, nextTick } from 'vue'
 import { useCalendarStore } from '@/stores/CalendarStore'
 import { formatTodayString } from '@/utils/date'
+import EventSearch from '@/components/Search.vue'
 import SettingsDialog from '@/components/SettingsDialog.vue'
 
 const calendarStore = useCalendarStore()
@@ -58,7 +67,8 @@ const todayString = computed(() => {
   return formatTodayString(d)
 })
 
-const emit = defineEmits(['go-to-today'])
+const emit = defineEmits(['go-to-today', 'search-activate', 'search-preview'])
+const { referenceDate = null } = defineProps({ referenceDate: { type: String, default: null } })
 
 function goToToday() {
   // Emit the event so the parent can handle the viewport scrolling logic
@@ -68,6 +78,8 @@ function goToToday() {
 
 // Screen size detection and visibility toggle
 const isVisible = ref(false)
+// Track if we auto-opened due to a find (Ctrl/Cmd+F)
+const autoOpenedForSearch = ref(false)
 
 function checkScreenSize() {
   const isSmallScreen = window.innerHeight < 600
@@ -77,6 +89,7 @@ function checkScreenSize() {
 
 function toggleVisibility() {
   isVisible.value = !isVisible.value
+  if (!isVisible.value) autoOpenedForSearch.value = false
 }
 
 // Settings dialog integration
@@ -85,22 +98,75 @@ function openSettings() {
   settingsDialog.value?.open()
 }
 
+// Search component ref exposure
+const eventSearchRef = ref(null)
+function focusSearch(selectAll = true) {
+  eventSearchRef.value?.focusSearch(selectAll)
+}
+function isEditableElement(el) {
+  if (!el) return false
+  const tag = el.tagName
+  return tag === 'INPUT' || tag === 'TEXTAREA' || el.isContentEditable
+}
+defineExpose({ focusSearch })
+
+function handleGlobalFind(e) {
+  if (!(e.ctrlKey || e.metaKey)) return
+  if (e.key === 'f' || e.key === 'F') {
+    if (isEditableElement(e.target)) return
+    e.preventDefault()
+    if (!isVisible.value) {
+      isVisible.value = true
+      autoOpenedForSearch.value = true
+    } else {
+      autoOpenedForSearch.value = false
+    }
+    // Defer focus until after transition renders input
+    nextTick(() => requestAnimationFrame(() => focusSearch(true)))
+  }
+}
+
+function handleSearchActivate(r) {
+  emit('search-activate', r)
+  // Auto close only if we auto-opened for search shortcut
+  if (autoOpenedForSearch.value) {
+    isVisible.value = false
+  }
+  autoOpenedForSearch.value = false
+}
+
 onMounted(() => {
   checkScreenSize()
   window.addEventListener('resize', checkScreenSize)
+  document.addEventListener('keydown', handleGlobalFind, { passive: false })
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('resize', checkScreenSize)
+  document.removeEventListener('keydown', handleGlobalFind)
 })
 </script>
 
 <style scoped>
+.header-controls-wrapper {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 0.4rem 0.5rem 0 0.5rem;
+}
 .header-controls {
   display: flex;
-  justify-content: end;
   align-items: center;
-  margin-inline-end: 2rem;
+  gap: 0.75rem;
+  width: 100%;
+  padding-inline-end: 2rem;
+}
+.header-controls :deep(.search-bar) {
+  flex: 1 1 clamp(14rem, 40vw, 30rem);
+  max-width: clamp(18rem, 40vw, 30rem);
+  min-width: 12rem;
+  margin-inline-end: auto;
 }
 .toggle-btn {
   position: fixed;
@@ -201,6 +267,7 @@ onBeforeUnmount(() => {
 }
 
 .today-date {
+  font-size: 1.5em;
   white-space: pre-line;
   text-align: center;
   margin-inline-end: 2rem;