Mute Summary - Everyday Interface Patterns

A static mute thread summary shows Release chat, Mute control, Until tomorrow duration, and Notifications quiet status.

Program

Mute summaries should show the quiet state before any notification preference is saved.

mute_thread_summary.html

Visuals: captured from real browser rendering

<section class="mute-summary" aria-labelledby="mute-summary-title"><h2 id="mute-summary-title">Mute thread summary</h2><dl>
  <div><dt>Thread</dt><dd>Release chat</dd></div>
  <div><dt>Control</dt><dd>Mute</dd></div><div><dt>Duration</dt><dd>Until tomorrow</dd></div>
  <div><dt>Status</dt><dd><span class="badge">Notifications quiet</span></dd></div></dl>
  <p class="check">Learner check: the mute state is visible before any notification setting is saved.</p>
  <p class="note">Static mute thread summary only; no notification service, reminder service, scheduling service, priority service, sync service, storage, cookie, route, API, network, script, event listener, form submit, input, checkbox, analytics, timer, object URL, download, service worker, account/session behavior, or live message update runs.</p></section>
<style>
  .mute-summary { display: grid; gap: 10px; max-width: 38rem; border: 1px solid #0f766e; padding: 12px; background: #f0fdfa; }
  .mute-summary dl { display: grid; gap: 8px; margin: 0; }
  .mute-summary dl div { display: grid; grid-template-columns: 8rem 1fr; gap: 8px; }
  .mute-summary dt { color: #475569; }
  .mute-summary dd, .check, .note { margin: 0; }
  .badge { border-radius: 999px; background: #ccfbf1; padding: 2px 8px; }
  .note { color: #475569; }
</style>

Label the mute summary.
The section is labelled by its visible heading.
Show thread row.
The thread is exact pinned data.
Show control and duration rows.
The control and duration are exact pinned data.
Render notifications-quiet status.
The status badge says notifications are quiet.
Check mute readback.
The check says the mute state is visible before any notification setting is saved.
Check mute honesty.
Thread, control, duration, status, and no live message update.

step flow step(1) labels the source, step(2) shows the thread, step(3) shows control and duration rows, step(4) shows notifications-quiet status, step(5) checks the mute readback, and step(6) checks the honesty note.

mute readback The section heading names the mute thread summary surface.

mute rows Thread, Control, Duration, and Status values are exact pinned data.

no live message update The lesson should not imply notification services, reminder services, scheduling services, priority services, sync services, storage, cookies, routes, APIs, networks, scripts, event listeners, form submits, inputs, checkboxes, analytics, timers, object URLs, downloads, service workers, account/session behavior, or live message updates.