Added clock.

This commit is contained in:
Leo Vasanko
2025-09-23 18:42:13 -06:00
parent d11c551636
commit dca3e21843

View File

@@ -8,6 +8,17 @@
@activate="handleSearchActivate"
@preview="(r) => emit('search-preview', r)"
/>
<div
class="current-time"
aria-label="Current time (click to go to today)"
role="button"
tabindex="-1"
@click="goToToday"
@keydown.enter="goToToday"
@keydown.space.prevent="goToToday"
>
{{ timeString }}
</div>
<div class="today-date" @click="goToToday">{{ todayString }}</div>
<button
type="button"
@@ -62,11 +73,40 @@ import SettingsDialog from '@/components/SettingsDialog.vue'
const calendarStore = useCalendarStore()
// Today label: derive from local ticking clock so it flips right at midnight
const todayString = computed(() => {
const d = new Date(calendarStore.now)
const d = new Date(localNowMs?.value ?? Date.now())
return formatTodayString(d)
})
// Local ticking clock: update every second without thrashing global store
const localNowMs = ref(Date.now())
let clockTimer = null
onMounted(() => {
// Start a 1s ticker for the header clock (independent from store's minute tick)
clockTimer = setInterval(() => {
localNowMs.value = Date.now()
}, 1000)
})
onBeforeUnmount(() => {
if (clockTimer) clearInterval(clockTimer)
})
// Current time (24h, NBSP padding for single-digit hours, with day/night emoji)
const timeString = computed(() => {
const d = new Date(localNowMs.value)
const h = d.getHours()
const m = d.getMinutes()
const hh = h < 10 ? '\u00A0' + h : String(h)
const mm = m < 10 ? '0' + m : String(m)
// Day at 6-18, otherwise night (TODO: sunrise/sunset)
const isDay = h >= 6 && h < 18
const emoji = isDay ? '🌞' : '🌙'
return `${hh}:${mm}${emoji}`
})
const emit = defineEmits(['go-to-today', 'search-activate', 'search-preview'])
const { referenceDate = null } = defineProps({ referenceDate: { type: String, default: null } })
@@ -98,7 +138,9 @@ function openSettings() {
// Capture baseline before opening settings
try {
calendarStore.$history?._baselineIfNeeded?.(true)
} catch {}
} catch {
/* no-op */
}
settingsDialog.value?.open()
}
@@ -267,4 +309,23 @@ onBeforeUnmount(() => {
text-align: center;
margin-inline-end: 2rem;
}
.current-time {
font-family: ui-monospace, SF Mono, Consolas, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
font-size: 3.6em;
white-space: nowrap;
text-align: center;
cursor: pointer;
}
.current-time:hover,
.current-time:focus-visible {
color: var(--strong);
}
@media (max-width: 700px) {
.current-time {
display: none;
}
}
</style>