Update meeting header to show live digital time

Replace analog clock with a live digital clock display using useNow and formatTimeI18n.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 77cfe984-2c65-4152-bb7a-0df28274fe66
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: b1d23dc1-fa04-4c00-95be-572d8f7be20b
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/c3c252e4-c83d-40ca-9fff-99a3ea60701e/77cfe984-2c65-4152-bb7a-0df28274fe66/m92e9kU
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
riyadhafraa
2026-05-18 12:52:39 +00:00
parent 46b1d59466
commit 5dcf949173
@@ -120,7 +120,7 @@ import { useNoteLabels } from "@/lib/notes-api";
// #486: reuse the same dialog the upcoming-alert pops, so postponing
// from the schedule row quick-actions menu shares one implementation.
import { PostponeDialog } from "@/components/executive-meetings/upcoming-meeting-alert";
import { AnalogClock } from "@/components/executive-meetings/analog-clock";
import { useNow } from "@/components/clock";
import { formatDate, formatTime as formatTimeI18n, formatWeekday } from "@/lib/i18n-format";
import { safeHtml, htmlToPlainText, wrapAsParagraph } from "@/lib/safe-html";
import {
@@ -788,16 +788,27 @@ export default function ExecutiveMeetingsPage() {
}
function HeaderClock({ lang, date }: { lang: "ar" | "en"; date: string }) {
// The analog dial already conveys the live time — the previous digital
// "HH:MM:SS" string next to it was redundant, so it was removed. We
// keep weekday + date because those are calendar info, not clock info.
// Per user request the analog dial was removed — header now shows a
// live 12-hour digital time (e.g. "م 03:50") next to the weekday +
// date. Re-renders every second via useNow.
const now = useNow(1000);
const time = formatTimeI18n(now, lang, {
hour: "2-digit",
minute: "2-digit",
hour12: true,
});
return (
<div
className="flex items-center gap-1.5 sm:gap-3 print:hidden"
data-testid="em-header-clock"
aria-live="off"
>
<AnalogClock size={44} />
<div
className="text-[#0B1E3F] font-semibold text-sm sm:text-base tabular-nums"
data-testid="em-header-time"
>
{time}
</div>
<div className="leading-tight">
<div className="text-[#0B1E3F] font-semibold text-sm sm:text-base" data-testid="em-header-weekday">
{formatWeekday(date, lang, "long")}