Recibidos
- Carmen GilPresupuesto de la reforma
- Pablo RuizFotos del viaje9:12
- Marta LeónEntradas del concierto8:05
Email snooze menu
An email's clock opens a menu of moments, each with a tiny sky and the real time in your language; picking one hides it.
Settings
Code
<div class="uvq13-snz"><p class="hh">Inbox</p><ul class="ib"><li class="r on"><span class="av" style="--c:#f97316" aria-hidden="true">C</span><span class="tx"><b>Carmen Gil</b><span>Renovation quote</span></span><span class="ha"><button type="button" class="ar" aria-label="Archive"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 7.5h16v-3H4zM5.5 7.5V19h13V7.5M10 11.5h4"/></svg></button><button type="button" class="fire" aria-haspopup="menu" aria-label="Snooze"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="13" r="7.5"/><path d="M12 9.5V13l2.5 1.5M4.5 4.5l2.5-2M19.5 4.5l-2.5-2"/></svg></button></span></li><li class="r"><span class="av" style="--c:#0ea5e9" aria-hidden="true">P</span><span class="tx"><b>Pablo Ruiz</b><span>Trip photos</span></span><small>9:12</small></li><li class="r"><span class="av" style="--c:#e11d48" aria-hidden="true">M</span><span class="tx"><b>Marta León</b><span>Concert tickets</span></span><small>8:05</small></li></ul><div class="po" role="menu" aria-label="Snooze until…"><p class="pt" aria-hidden="true">Snooze until…</p><button type="button" role="menuitem" class="op" data-k="ev"><i class="sk ev" aria-hidden="true"></i><span>Later today</span><small></small></button><button type="button" role="menuitem" class="op" data-k="tm"><i class="sk tm" aria-hidden="true"></i><span>Tomorrow morning</span><small></small></button><button type="button" role="menuitem" class="op" data-k="we"><i class="sk we" aria-hidden="true"></i><span>This weekend</span><small></small></button><button type="button" role="menuitem" class="op" data-k="nw"><i class="sk nw" aria-hidden="true"></i><span>Next week</span><small></small></button><button type="button" role="menuitem" class="op" data-k="pk"><i class="sk pk" aria-hidden="true"></i><span>Pick date and time</span><small></small></button><div class="cu"><div class="dy"></div><div class="hs"><button type="button" aria-pressed="true">8:00</button><button type="button" aria-pressed="false">13:00</button><button type="button" aria-pressed="false">18:00</button></div><button type="button" class="sv">Snooze</button></div></div><p class="tst" aria-live="polite"><span class="m"></span><button type="button" class="un">Undo</button></p></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Overlays
See all OverlaysWhere to use it
Snoozing an email is a small decision that deserves a clear menu. The clock in a hovered row opens a popover with later today, tomorrow, this weekend and next week, each with a mini sky whose sun sits at that hour and a time formatted for the page language with Intl. Choosing hides the row and shows an undo bar. It fits mail, task and reminder apps.
The main color is the active state and the second one the undo link. The labels are computed from the real date, so they stay correct every day, and the menu works with arrow keys, Enter and Escape.