calendar/src/components/HeaderControls.vue

<template>
  <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, 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()

const todayString = computed(() => {
  const d = new Date(calendarStore.now)
  return formatTodayString(d)
})

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
  // since this component doesn't have access to viewport refs
  emit('go-to-today')
}

// 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
  // Default to open on large screens, closed on small screens
  isVisible.value = !isSmallScreen
}

function toggleVisibility() {
  isVisible.value = !isVisible.value
  if (!isVisible.value) autoOpenedForSearch.value = false
}

// Settings dialog integration
const settingsDialog = ref(null)
function openSettings() {
  // Capture baseline before opening settings
  try {
    calendarStore.$history?._baselineIfNeeded?.(true)
  } catch {}
  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;
}
.header-controls {
  display: flex;
  align-items: center;
  width: 100%;
  padding-inline-end: 2rem;
}
.toggle-btn {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0;
  margin: 0.5em;
  cursor: pointer;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
  width: 1em;
  height: 1em;
  transition: all 0.2s ease;
}
.toggle-btn:hover {
  color: var(--strong);
}

.toggle-btn:active {
  transform: scale(0.9);
}
.header-controls-enter-active,
.header-controls-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.header-controls-enter-from,
.header-controls-leave-to {
  opacity: 0;
  max-height: 0;
  transform: translateY(-20px);
}

.header-controls-enter-to,
.header-controls-leave-from {
  opacity: 1;
  max-height: 100px;
  transform: translateY(0);
}

.settings-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
}

.hist-btn {
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 0;
  margin: 0;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  outline: none;
  width: 1.9rem;
  height: 1.9rem;
}

.hist-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.hist-btn:not(:disabled):hover,
.hist-btn:not(:disabled):focus-visible {
  color: var(--strong);
}

.hist-btn:active:not(:disabled) {
  transform: scale(0.88);
}

.settings-btn:hover {
  color: var(--strong);
}

.today-date {
  font-size: 1.5em;
  white-space: pre-line;
  text-align: center;
  margin-inline-end: 2rem;
}
</style>