Focus Mode / Do Not Disturb Status Toggle — HTML CSS JS

Presence status — Available, Focus mode, Away — has quietly become one of the most-used controls in modern collaboration software. Slack, Discord, Microsoft Teams, and Linear all ship a status picker prominently in their top-level UI, and for good reason: visible status serves two audiences at once. It tells the *user themselves* that they've deliberately entered a protected work state, and it tells *teammates* not to expect an immediate response — without either party needing to send or read an explanatory message. This snippet implements that full pattern: a three-way status picker, a focus-mode duration selector, and a persistent, live-counting badge that reflects the active state anywhere else in the interface.

Why explicit focus status beats silent notification muting

Muting notifications silently (turning off sound with no visible signal) solves half the problem — the user is undisturbed, but teammates have no idea why messages are going unanswered and may escalate through another channel, assume the user is ignoring them, or simply lose trust in the async communication norms of the team. Visible focus status resolves this asymmetry: a small purple dot and "Focus mode active" label next to the user's avatar communicates *why* they're unreachable without the user having to type a single word. This is a specific instance of a broader 2026 "attention design" trend — interfaces increasingly treat a user's attention as a resource worth explicitly protecting and signaling, rather than treating every notification as equally deserving of interruption.

Three status states, one shared component

The .status-options group uses role="radiogroup" with each option as role="radio" and aria-checked, correctly modeling mutually-exclusive selection for assistive technology — only one of Available, Focus mode, or Away can be active at a time, exactly like a native radio button group, even though the markup uses styled <button> elements rather than <input type="radio"> for full visual control. setStatus() is the single function responsible for updating the ARIA state, the color-coded .status-dot (green for available, purple for focus, amber for away), and conditionally revealing the duration picker — keeping presentation and state perfectly in sync from one code path.

Duration selection and the countdown badge

Selecting "Focus mode" doesn't immediately activate anything — it reveals an inline .duration-panel with three duration chips: 30 minutes, 1 hour, or "Until tomorrow" (calculated via msUntilTomorrow9am(), which targets the next day at 9am rather than a fixed offset, matching how most real focus-mode features define an "overnight" duration). Choosing a duration calls startFocus(), which records focusEndsAt as an absolute timestamp (not a countdown value) — a small but important detail, because deriving remaining time as focusEndsAt - Date.now() on every tick keeps the countdown accurate even if the tab is backgrounded and setInterval timing drifts, whereas decrementing a counter every second would drift under exactly those conditions. The countdown renders in two places simultaneously — the compact .focus-badge next to the mock avatar and the fuller .active-focus panel below the status picker — both fed by the same tickCountdown() function, demonstrating how a single piece of state (focusEndsAt) can drive multiple UI surfaces without duplicating logic.

One-click exit, always available

Because focus mode is meant to be a deliberate, temporary state rather than a trap, an "End focus mode" action is available from both the compact badge (a small × button) and the full status card, and selecting a different status (Available or Away) also implicitly ends focus mode via the same endFocus() cleanup path. This reflects a core usability rule for any interruption-blocking feature: exiting must always be at least as easy as entering, or users will distrust the feature and stop using it — the opposite of the intended calm-UI benefit.