{canToggleReactions ? (
@@ -432,9 +436,14 @@ export const SystemMessageRow = React.memo(function SystemMessageRow({
) {
setBadgeBurstEmoji(value);
}
- void handleReactionSelect(value).finally(() => {
- setIsReactionPickerOpen(false);
- });
+ void handleReactionSelect(value)
+ .then(() => {
+ recordQuickReactionEmoji(value);
+ })
+ .catch(() => {})
+ .finally(() => {
+ setIsReactionPickerOpen(false);
+ });
}}
/>
diff --git a/desktop/src/features/messages/ui/useQuickReactionEmojis.ts b/desktop/src/features/messages/ui/useQuickReactionEmojis.ts
new file mode 100644
index 000000000..bcf5830f5
--- /dev/null
+++ b/desktop/src/features/messages/ui/useQuickReactionEmojis.ts
@@ -0,0 +1,231 @@
+import * as React from "react";
+
+import {
+ loadActiveWorkspaceId,
+ loadWorkspaces,
+} from "@/features/workspaces/workspaceStorage";
+
+const QUICK_REACTION_STORAGE_KEY = "buzz.quick-reaction-emojis.v1";
+const QUICK_REACTION_UPDATED_EVENT = "buzz:quick-reaction-emojis-updated";
+const DEFAULT_QUICK_REACTIONS = ["👍", "❤️", "😂", "🎉"] as const;
+const MAX_STORED_REACTIONS = 24;
+const sessionQuickReactionEmojis = new Map();
+
+type QuickReactionEntry = {
+ count: number;
+ emoji: string;
+ lastUsedAt: number;
+};
+
+function canUseLocalStorage() {
+ if (typeof window === "undefined") return false;
+
+ try {
+ return Boolean(window.localStorage);
+ } catch {
+ return false;
+ }
+}
+
+function getActiveWorkspaceScope() {
+ if (!canUseLocalStorage()) return null;
+
+ try {
+ return loadActiveWorkspaceId() ?? loadWorkspaces()[0]?.id ?? null;
+ } catch {
+ return null;
+ }
+}
+
+function quickReactionStorageKey(workspaceScope: string | null) {
+ return workspaceScope
+ ? `${QUICK_REACTION_STORAGE_KEY}:${workspaceScope}`
+ : QUICK_REACTION_STORAGE_KEY;
+}
+
+function quickReactionSessionKey(limit: number, workspaceScope: string | null) {
+ return `${workspaceScope ?? "global"}:${limit}`;
+}
+
+function normalizeEntry(entry: unknown): QuickReactionEntry | null {
+ if (!entry || typeof entry !== "object") return null;
+
+ const candidate = entry as Partial;
+ if (
+ typeof candidate.emoji !== "string" ||
+ candidate.emoji.trim().length === 0
+ ) {
+ return null;
+ }
+
+ return {
+ count: Math.max(1, Math.floor(Number(candidate.count) || 1)),
+ emoji: candidate.emoji,
+ lastUsedAt: Math.max(0, Number(candidate.lastUsedAt) || 0),
+ };
+}
+
+function sortEntries(entries: QuickReactionEntry[]) {
+ return [...entries].sort((left, right) => {
+ const countDelta = right.count - left.count;
+ if (countDelta !== 0) return countDelta;
+ return right.lastUsedAt - left.lastUsedAt;
+ });
+}
+
+function readQuickReactionEntries(storageKey: string) {
+ if (!canUseLocalStorage()) return [];
+
+ try {
+ const raw = window.localStorage.getItem(storageKey);
+ const parsed = raw ? JSON.parse(raw) : [];
+ if (!Array.isArray(parsed)) return [];
+ return sortEntries(
+ parsed
+ .map((entry) => normalizeEntry(entry))
+ .filter((entry): entry is QuickReactionEntry => entry !== null),
+ );
+ } catch {
+ return [];
+ }
+}
+
+function writeQuickReactionEntries(
+ entries: QuickReactionEntry[],
+ storageKey: string,
+) {
+ if (!canUseLocalStorage()) return;
+
+ try {
+ window.localStorage.setItem(
+ storageKey,
+ JSON.stringify(sortEntries(entries).slice(0, MAX_STORED_REACTIONS)),
+ );
+ } catch {
+ // Ignore storage failures; the reaction itself should still work.
+ }
+}
+
+function getQuickReactionEmojis(limit: number, workspaceScope: string | null) {
+ const seen = new Set();
+ const next: string[] = [];
+
+ for (const entry of readQuickReactionEntries(
+ quickReactionStorageKey(workspaceScope),
+ )) {
+ if (seen.has(entry.emoji)) continue;
+ seen.add(entry.emoji);
+ next.push(entry.emoji);
+ if (next.length >= limit) return next;
+ }
+
+ for (const emoji of DEFAULT_QUICK_REACTIONS) {
+ if (seen.has(emoji)) continue;
+ seen.add(emoji);
+ next.push(emoji);
+ if (next.length >= limit) return next;
+ }
+
+ return next;
+}
+
+function getSessionQuickReactionEmojis(
+ limit: number,
+ workspaceScope: string | null,
+) {
+ const sessionKey = quickReactionSessionKey(limit, workspaceScope);
+ const cached = sessionQuickReactionEmojis.get(sessionKey);
+ if (cached) return cached;
+
+ const emojis = getQuickReactionEmojis(limit, workspaceScope);
+ sessionQuickReactionEmojis.set(sessionKey, emojis);
+ return emojis;
+}
+
+function invalidateSessionQuickReactions(workspaceScope: string | null) {
+ const prefix = `${workspaceScope ?? "global"}:`;
+ for (const key of sessionQuickReactionEmojis.keys()) {
+ if (key.startsWith(prefix)) {
+ sessionQuickReactionEmojis.delete(key);
+ }
+ }
+}
+
+function notifyQuickReactionUpdate(workspaceScope: string | null) {
+ if (typeof window === "undefined") return;
+ window.dispatchEvent(
+ new CustomEvent(QUICK_REACTION_UPDATED_EVENT, {
+ detail: { workspaceScope },
+ }),
+ );
+}
+
+export function recordQuickReactionEmoji(emoji: string) {
+ const trimmed = emoji.trim();
+ if (!trimmed) return;
+
+ const workspaceScope = getActiveWorkspaceScope();
+ const storageKey = quickReactionStorageKey(workspaceScope);
+ const entries = readQuickReactionEntries(storageKey);
+ const existing = entries.find((entry) => entry.emoji === trimmed);
+ let didAddEntry = false;
+ if (existing) {
+ existing.count += 1;
+ existing.lastUsedAt = Date.now();
+ } else {
+ didAddEntry = true;
+ entries.push({
+ count: 1,
+ emoji: trimmed,
+ lastUsedAt: Date.now(),
+ });
+ }
+
+ writeQuickReactionEntries(entries, storageKey);
+ if (didAddEntry) {
+ invalidateSessionQuickReactions(workspaceScope);
+ notifyQuickReactionUpdate(workspaceScope);
+ }
+}
+
+export function useQuickReactionEmojis(limit = 4) {
+ const workspaceScope = getActiveWorkspaceScope();
+ const [emojis, setEmojis] = React.useState(() =>
+ getSessionQuickReactionEmojis(limit, workspaceScope),
+ );
+
+ React.useEffect(() => {
+ if (typeof window === "undefined") return;
+
+ const storageKey = quickReactionStorageKey(workspaceScope);
+ const sessionKey = quickReactionSessionKey(limit, workspaceScope);
+ const handleStorage = (event: StorageEvent) => {
+ if (event.key === storageKey) {
+ sessionQuickReactionEmojis.delete(sessionKey);
+ setEmojis(getSessionQuickReactionEmojis(limit, workspaceScope));
+ }
+ };
+ const handleLocalUpdate = (event: Event) => {
+ if (
+ event instanceof CustomEvent &&
+ event.detail?.workspaceScope === workspaceScope
+ ) {
+ setEmojis(getSessionQuickReactionEmojis(limit, workspaceScope));
+ }
+ };
+
+ window.addEventListener("storage", handleStorage);
+ window.addEventListener(QUICK_REACTION_UPDATED_EVENT, handleLocalUpdate);
+ setEmojis(getSessionQuickReactionEmojis(limit, workspaceScope));
+
+ return () => {
+ window.removeEventListener("storage", handleStorage);
+ window.removeEventListener(
+ QUICK_REACTION_UPDATED_EVENT,
+ handleLocalUpdate,
+ );
+ };
+ }, [limit, workspaceScope]);
+
+ return emojis;
+}
diff --git a/desktop/tests/e2e/custom-emoji.spec.ts b/desktop/tests/e2e/custom-emoji.spec.ts
index 490280e67..9e37f578e 100644
--- a/desktop/tests/e2e/custom-emoji.spec.ts
+++ b/desktop/tests/e2e/custom-emoji.spec.ts
@@ -151,7 +151,12 @@ test("reacting with a custom emoji renders via the localhost media proxy", async
// The reaction pill renders the custom emoji as an ![:react:]()
. Its
// src must be the localhost proxy URL — proving rewriteRelayUrl() ran. A raw
// relay URL here is the bug.
- const reactionImg = row.locator(`img[alt=':${REACTION_SHORTCODE}:']`);
+ const reactionPill = row.getByLabel(
+ `Toggle :${REACTION_SHORTCODE}: reaction`,
+ );
+ const reactionImg = reactionPill.locator(
+ `img[alt=':${REACTION_SHORTCODE}:']`,
+ );
await expect(reactionImg).toBeVisible();
await expect(reactionImg).toHaveAttribute(
"src",
@@ -199,7 +204,7 @@ test("reacting with a custom emoji renders via the localhost media proxy", async
// disappear. Guards the mock-bridge deletion path: the reaction event needs a
// 64-hex id, because the timeline only honors deletions whose `e` tag is
// 64-hex (getDeletionTargets). A 32-hex reaction id leaves a stale pill here.
- await row.getByLabel(`Toggle :${REACTION_SHORTCODE}: reaction`).click();
+ await reactionPill.click();
await expect(reactionImg).toHaveCount(0);
});
@@ -324,6 +329,8 @@ test("a system message accepts a custom-emoji reaction", async ({ page }) => {
.first()
.click();
- const reactionImg = row.locator(`img[alt=':${REACTION_SHORTCODE}:']`);
+ const reactionImg = row
+ .getByLabel(`Toggle :${REACTION_SHORTCODE}: reaction`)
+ .locator(`img[alt=':${REACTION_SHORTCODE}:']`);
await expect(reactionImg).toBeVisible();
});