feat: explain a schedule change on the panel, and preview it in advance

Two things the shop asked for, and one it will notice.

**A message on an exception.** A closure or a late opening can now carry
a reason, and it reaches the panel. It shows while the door is shut and
disappears the moment the shop opens — a notice explaining a late
opening is worse than useless once the door is open.

It outranks a free message on purpose: "closed this afternoon, back
tomorrow" is what someone standing outside needs, and "new collection in
store" can wait. Say so if you would rather it were the other way.

The first version keyed this off the day's `isOpen`, which means "this
day has opening hours" — so a day opening at 14:00 counted as open all
morning, exactly when the reason is needed. A test caught it; the rule
now reads the state at this minute.

**Reusable phrases.** The same handful of notices get written over and
over. /admin/modeles keeps them, translated once, and offers them
wherever a message is composed — exceptions, closure periods, the
banner. Picking one costs no translation at all: the saved English is
reused directly, where the service takes the better part of ten seconds.

Exception notes and holiday labels are translated too, which they were
not before. After the save rather than during it, so a slow service
never costs the shop its dates.

**Previewing the future.** The dashboard can render the panel at any
moment within about a year: "what will the window say while I'm away?"
is worth answering before someone is standing in front of a locked door.
The whole pipeline was already a function of "now", so this costs
passing a different instant. An unparseable or absurd value falls back
to the present rather than confidently rendering nonsense.

Checked against a three-week holiday, which surfaced something worth
knowing: the automatic "opens on…" line stays empty, because the
resolver's search is bounded to fourteen days. During a long closure the
message is the only thing that tells customers when the shop is back —
which is a good reason for this feature to exist.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012cSY9pVhZmJUKNN7wf1Myd

app/admin/exceptions/ExceptionsManager.tsx

@@ -2,10 +2,18 @@
 
 import { useState, useTransition } from 'react';
 
+import TemplatePicker, { type Template } from '@/app/admin/components/TemplatePicker';
 import { earlyClosing, lateOpening, usualBounds } from '@/lib/schedule/exceptions';
 import type { ExceptionKind, Slot } from '@/lib/schedule/types';
 
-import { deleteException, saveException, saveExceptionRange } from './actions';
+import { MESSAGE_MAX_CHARS } from '@/lib/screen/contract';
+
+import {
+  deleteException,
+  saveException,
+  saveExceptionRange,
+  translateExceptionNote,
+} from './actions';
 
 export type UpcomingDay = {
   date: string;
@@ -34,6 +42,7 @@ type Props = {
   today: string;
   days: SelectableDay[];
   upcoming: UpcomingDay[];
+  templates: Template[];
 };
 
 const KIND_LABELS: Record<string, { text: string; className: string }> = {
@@ -42,7 +51,7 @@ const KIND_LABELS: Record<string, { text: string; className: string }> = {
   VACATION: { text: 'vacances', className: 'bg-[var(--surface-muted)] text-[var(--ink-muted)]' },
 };
 
-export default function ExceptionsManager({ canEdit, today, days, upcoming }: Props) {
+export default function ExceptionsManager({ canEdit, today, days, upcoming, templates }: Props) {
   const [pending, startTransition] = useTransition();
   const [message, setMessage] = useState<{ kind: 'ok' | 'error'; text: string } | null>(null);
 
@@ -69,9 +78,11 @@ export default function ExceptionsManager({ canEdit, today, days, upcoming }: Pr
         </p>
       ) : null}
 
-      {canEdit ? <QuickPanel today={today} days={days} pending={pending} run={run} /> : null}
+      {canEdit ? (
+        <QuickPanel today={today} days={days} templates={templates} pending={pending} run={run} />
+      ) : null}
 
-      {canEdit ? <RangePanel pending={pending} run={run} /> : null}
+      {canEdit ? <RangePanel templates={templates} pending={pending} run={run} /> : null}
 
       <section>
         <h2 className="text-lg">À venir</h2>
@@ -135,35 +146,49 @@ export default function ExceptionsManager({ canEdit, today, days, upcoming }: Pr
 function QuickPanel({
   today,
   days,
+  templates,
   pending,
   run,
 }: {
   today: string;
   days: SelectableDay[];
+  templates: Template[];
   pending: boolean;
   run: (work: () => Promise<{ ok: true } | { ok: false; error: string }>, success: string) => void;
 }) {
   const [date, setDate] = useState(today);
+  const [note, setNote] = useState('');
 
   const day = days.find((candidate) => candidate.date === date) ?? days[0];
   const isToday = day?.date === today;
   const isOpenThatDay = (day?.usualSlots.length ?? 0) > 0;
 
-  function apply(slots: Slot[], note: string, success: string) {
+  function apply(slots: Slot[], success: string) {
     if (!day) {
       return;
     }
-    run(
-      () =>
-        saveException({
-          date: day.date,
-          isClosed: slots.length === 0,
-          slots,
-          reason: 'TEMPORARY',
-          noteFr: note,
-        }),
-      success,
-    );
+    const text = note.trim();
+
+    run(async () => {
+      const saved = await saveException({
+        date: day.date,
+        isClosed: slots.length === 0,
+        slots,
+        reason: 'TEMPORARY',
+        // Empty means no notice: the message now drives what the panel shows,
+        // so it has to be something the shop chose to say rather than a
+        // sentence the form filled in on its behalf.
+        noteFr: text || null,
+      });
+
+      if (saved.ok && text) {
+        // Separate from the save: a message is worth having, but not at the
+        // price of making the two-click path wait for the translation
+        // service. A failure simply leaves the French alone on screen.
+        await translateExceptionNote(day.date);
+      }
+      return saved;
+    }, success);
   }
 
   const when = isToday ? 'aujourd’hui' : `le ${day?.label.toLowerCase() ?? ''}`;
@@ -196,13 +221,29 @@ function QuickPanel({
         {day?.isException ? ` Actuellement : ${day.effectiveText}.` : ''}
       </p>
 
+      <div className="mt-4 flex flex-wrap items-end gap-3">
+        <label className="min-w-56 flex-1 text-sm">
+          <span className="block text-[var(--ink-muted)]">Message affiché (facultatif)</span>
+          <input
+            type="text"
+            value={note}
+            maxLength={MESSAGE_MAX_CHARS}
+            placeholder="Fermeture exceptionnelle, retour demain"
+            onChange={(event) => setNote(event.target.value)}
+            className="mt-1 w-full rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-2 text-base"
+          />
+        </label>
+        <TemplatePicker templates={templates} onPick={setNote} disabled={pending} />
+      </div>
+      <p className="mt-1 text-sm text-[var(--ink-muted)]">
+        Affiché sur l’écran tant que la boutique est fermée ce jour-là, et retiré dès qu’elle ouvre.
+      </p>
+
       <div className="mt-4 space-y-3">
         <button
           type="button"
           disabled={pending}
-          onClick={() =>
-            apply([], 'Fermeture exceptionnelle', `La boutique sera fermée ${when}.`)
-          }
+          onClick={() => apply([], `La boutique sera fermée ${when}.`)}
           className="w-full rounded-[var(--radius-md)] bg-[var(--accent)] px-4 py-3 font-medium text-[var(--on-accent)] transition-colors hover:bg-[var(--accent-hover)] disabled:opacity-40 sm:w-auto"
         >
           {isToday ? 'Fermé aujourd’hui' : `Fermé ${when}`}
@@ -226,9 +267,11 @@ function QuickPanel({
 
 /** A specific date, or a short run of days. Longer closures are holidays. */
 function RangePanel({
+  templates,
   pending,
   run,
 }: {
+  templates: Template[];
   pending: boolean;
   run: (work: () => Promise<{ ok: true } | { ok: false; error: string }>, success: string) => void;
 }) {
@@ -265,16 +308,17 @@ function RangePanel({
           />
         </label>
         <label className="min-w-48 flex-1 text-sm">
-          <span className="block text-[var(--ink-muted)]">Note affichée (facultatif)</span>
+          <span className="block text-[var(--ink-muted)]">Message affiché (facultatif)</span>
           <input
             type="text"
             value={note}
-            maxLength={120}
+            maxLength={MESSAGE_MAX_CHARS}
             placeholder="Fermeture exceptionnelle"
             onChange={(event) => setNote(event.target.value)}
             className="mt-1 w-full rounded-[var(--radius-sm)] border border-[var(--line-strong)] bg-[var(--surface)] px-2 py-2 text-base"
           />
         </label>
+        <TemplatePicker templates={templates} onPick={setNote} disabled={pending} />
       </div>
 
       <button
@@ -316,7 +360,7 @@ function AdjustHours({
 }: {
   day: SelectableDay;
   pending: boolean;
-  apply: (slots: Slot[], note: string, success: string) => void;
+  apply: (slots: Slot[], success: string) => void;
 }) {
   const bounds = usualBounds(day.usualSlots);
   const [openFrom, setOpenFrom] = useState(bounds.open);
@@ -332,7 +376,7 @@ function AdjustHours({
           type="button"
           disabled={pending || lateResult.length === 0}
           onClick={() =>
-            apply(lateResult, `Ouverture à ${openFrom}`, `Ouverture repoussée à ${openFrom}.`)
+            apply(lateResult, `Ouverture repoussée à ${openFrom}.`)
           }
           className="rounded-[var(--radius-md)] border border-[var(--line-strong)] px-4 py-2.5 transition-colors hover:bg-[var(--surface-muted)] disabled:opacity-40"
         >
@@ -355,7 +399,7 @@ function AdjustHours({
           type="button"
           disabled={pending || earlyResult.length === 0}
           onClick={() =>
-            apply(earlyResult, `Fermeture à ${closeAt}`, `Fermeture avancée à ${closeAt}.`)
+            apply(earlyResult, `Fermeture avancée à ${closeAt}.`)
           }
           className="rounded-[var(--radius-md)] border border-[var(--line-strong)] px-4 py-2.5 transition-colors hover:bg-[var(--surface-muted)] disabled:opacity-40"
         >