Announce presses

static/app.js

@@ -274,6 +274,7 @@ async function loadChat() {
       const previousScroll = list.scrollTop;
       list.replaceChildren(...messages.map((message) => {
         const item = el("li");
+        if (message.kind === "press") item.classList.add("chat-press");
         const avatar = el("span", Array.from(message.name.trim())[0]?.toUpperCase() || "?", "chat-avatar");
         avatar.setAttribute("aria-hidden", "true");
         const content = el("div", undefined, "chat-message-content");
@@ -371,6 +372,7 @@ $("the-button").addEventListener("click", async () => {
     updateShareLinks();
     await loadMe();
     await loadLeaderboard();
+    if (selectedSection === "chat-section") await loadChat();
   } catch (e) {
     $("press-result").textContent = e.message;
     await refreshState().catch(() => {});

static/style.css

@@ -344,6 +344,8 @@ stripe-buy-button { display: block; max-width: 100%; margin: 1.5rem 0; }
 #chat-messages li:nth-child(3n + 2) .chat-avatar { background: #94e2d51a; color: var(--teal); }
 #chat-messages li:nth-child(3n) .chat-avatar { background: #fab3871a; color: var(--peach); }
 .chat-message-content { min-width: 0; flex: 1; }
+#chat-messages .chat-press .chat-avatar { background: #a6e3a118; color: var(--green); }
+#chat-messages .chat-press p { background: #a6e3a108; border-color: #a6e3a130; color: var(--green); font-size: 0.8rem; }
 .chat-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; padding: 0.1rem 0 0.35rem; }
 .chat-heading strong { color: var(--text); font-size: 0.8rem; overflow-wrap: anywhere; }
 .chat-heading time { color: var(--subtext); font-size: 0.65rem; }