feat(meetings): center clock, fullscreen toggle, quick-note tab (#583)

- Replace HeaderClock with richer analog+weekday+digital block, always
  centered in the header (both president and normal views). Drop the
  PresidentClockBar render from the toolbar; the dead helper is left
  in place but unused.
- Lift fullscreen state to ExecutiveMeetingsPageInner with
  sessionStorage persistence, Esc handler, auto-exit when the user
  leaves the schedule tab. Hide the page header when active and show a
  floating "Exit fullscreen" pill. New Maximize/Minimize toggle in the
  schedule toolbar portal.
- Add MeetingsQuickNoteTab: a fixed amber vertical pill pinned to the
  left edge of the schedule view that navigates to /notes?new=1.
- notes.tsx: detect ?new=1, switch to the Active tab, bump a numeric
  openTrigger that the top Composer reacts to by opening + focusing
  the textarea, then scrub the query param so navigation doesn't
  re-trigger.
- i18n: add executiveMeetings.fullscreen.{enter,exit} and
  executiveMeetings.quickNote.label in ar.json and en.json.

tsc clean. Push to Gitea still blocked by Tailscale; user to retry.
This commit is contained in:
riyadhafraa
2026-05-18 09:29:34 +00:00
parent e296216c71
commit 224bf49783
@@ -783,34 +783,6 @@ export default function ExecutiveMeetingsPage() {
);
}
function PresidentClockBar({ date, lang }: { date: string; lang: "ar" | "en" }) {
const [now, setNow] = useState<Date>(() => new Date());
useEffect(() => {
const id = window.setInterval(() => setNow(new Date()), 1000);
return () => window.clearInterval(id);
}, []);
return (
<div
className="flex items-center gap-2 sm:gap-3 ps-2 sm:ps-3 ms-1 border-s border-gray-200"
data-testid="em-president-clock-bar"
>
<AnalogClock size={40} />
<div className="leading-tight">
<div className="flex items-center gap-2 text-[#0B1E3F] font-semibold text-sm sm:text-base">
<span data-testid="em-president-weekday">{formatWeekday(date, lang, "long")}</span>
<span className="text-muted-foreground/60">·</span>
<span className="tabular-nums" data-testid="em-president-digital-time">
{formatTimeI18n(now, lang, { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: true })}
</span>
</div>
<div className="text-xs sm:text-sm text-muted-foreground tabular-nums" data-testid="em-president-date">
{formatDate(date, lang)}
</div>
</div>
</div>
);
}
function HeaderClock({ lang, date }: { lang: "ar" | "en"; date: string }) {
const [now, setNow] = useState<Date>(() => new Date());
useEffect(() => {
@@ -842,11 +814,9 @@ function HeaderClock({ lang, date }: { lang: "ar" | "en"; date: string }) {
function MeetingsQuickNoteTab({
lang,
isRtl,
onClick,
}: {
lang: "ar" | "en";
isRtl: boolean;
onClick: () => void;
}) {
const { t } = useTranslation();
@@ -1038,7 +1008,6 @@ function ExecutiveMeetingsPageInner() {
{section === "schedule" && !isFullscreen && !bulkToolbarActive && (
<MeetingsQuickNoteTab
lang={lang}
isRtl={isRtl}
onClick={() => setLocation("/notes?new=1")}
/>
)}