onOpenThread(message)}
@@ -113,15 +120,30 @@ export function MessageThreadSummaryRow({
))}
-
-
- {summary.replyCount}{" "}
- {summary.replyCount === 1 ? "reply" : "replies"}
+
+
+ {summary.replyCount} {replyLabel}
{summary.lastReplyAt ? (
-
- last {formatRelativeTime(summary.lastReplyAt)}
-
+ <>
+
+ ยท
+
+
+
+ last reply {formatLastReplyTime(summary.lastReplyAt)}
+
+
+ View thread
+
+
+
) : null}
diff --git a/desktop/tests/e2e/custom-emoji.spec.ts b/desktop/tests/e2e/custom-emoji.spec.ts
index 4d891560782..fa125ca5d4b 100644
--- a/desktop/tests/e2e/custom-emoji.spec.ts
+++ b/desktop/tests/e2e/custom-emoji.spec.ts
@@ -158,6 +158,40 @@ test("reacting with a custom emoji renders via the localhost media proxy", async
),
);
+ const inlineAddReactionButton = row.getByLabel("Add reaction");
+ await expect
+ .poll(() =>
+ inlineAddReactionButton.evaluate((button) => {
+ return getComputedStyle(button).opacity;
+ }),
+ )
+ .toBe("0");
+ await expect
+ .poll(() =>
+ inlineAddReactionButton.evaluate((button) => {
+ const rect = button.getBoundingClientRect();
+ return `${Math.round(rect.width)}x${Math.round(rect.height)}`;
+ }),
+ )
+ .toBe("40x32");
+ await expect
+ .poll(() =>
+ inlineAddReactionButton.evaluate((button) => {
+ return getComputedStyle(button).transitionProperty;
+ }),
+ )
+ .not.toContain("width");
+ await row.hover();
+ await expect(inlineAddReactionButton).toBeVisible();
+ await expect
+ .poll(() =>
+ inlineAddReactionButton.evaluate((button) => {
+ const rect = button.getBoundingClientRect();
+ return `${Math.round(rect.width)}x${Math.round(rect.height)}`;
+ }),
+ )
+ .toBe("40x32");
+
// Toggle the reaction back off: click the pill, which fires remove_reaction
// -> emits a kind:5 deletion targeting the reaction event. The pill must
// disappear. Guards the mock-bridge deletion path: the reaction event needs a
diff --git a/desktop/tests/e2e/messaging.spec.ts b/desktop/tests/e2e/messaging.spec.ts
index 829f28d380c..030095a6c86 100644
--- a/desktop/tests/e2e/messaging.spec.ts
+++ b/desktop/tests/e2e/messaging.spec.ts
@@ -403,7 +403,7 @@ test("opens a single-level thread panel with inline expansion", async ({
const siblingReply = `Sibling threaded reply ${timestamp}`;
const nestedReply = `Nested threaded reply ${timestamp}`;
const nestedReplyFromBob = `Nested reply from Bob ${timestamp}`;
- const nestedReplyVisibleTopMaxPx = 260;
+ const nestedReplyVisibleTopMaxPx = 280;
const fillerReplies = Array.from(
{ length: 14 },
(_, index) => `Thread filler reply ${index} ${timestamp}`,
@@ -473,6 +473,68 @@ test("opens a single-level thread panel with inline expansion", async ({
await expect(
rootSummaryRow.getByTestId("message-thread-summary-participant"),
).toHaveCount(1);
+ await expect
+ .poll(() =>
+ rootSummaryRow
+ .getByTestId("message-thread-summary-participant")
+ .first()
+ .evaluate((wrapper) => {
+ const avatar = wrapper.firstElementChild;
+ if (!(avatar instanceof HTMLElement)) return "missing";
+ const rect = avatar.getBoundingClientRect();
+ return `${Math.round(rect.width)}x${Math.round(rect.height)}`;
+ }),
+ )
+ .toBe("32x32");
+
+ await page.mouse.move(0, 0);
+ const rootSummaryWidthBeforeHover = await rootSummaryRow.evaluate((row) =>
+ Math.round(row.getBoundingClientRect().width),
+ );
+ await expect
+ .poll(() =>
+ rootSummaryRow
+ .getByTestId("message-thread-summary-last-reply")
+ .evaluate((label) =>
+ Number.parseFloat(getComputedStyle(label).opacity),
+ ),
+ )
+ .toBeGreaterThan(0.8);
+ await expect
+ .poll(() =>
+ rootSummaryRow
+ .getByTestId("message-thread-summary-hover-action")
+ .evaluate((label) =>
+ Number.parseFloat(getComputedStyle(label).opacity),
+ ),
+ )
+ .toBeLessThan(0.1);
+ await rootSummaryRow.hover();
+ await expect
+ .poll(() =>
+ rootSummaryRow
+ .getByTestId("message-thread-summary-last-reply")
+ .evaluate((label) =>
+ Number.parseFloat(getComputedStyle(label).opacity),
+ ),
+ )
+ .toBeLessThan(0.1);
+ await expect
+ .poll(() =>
+ rootSummaryRow
+ .getByTestId("message-thread-summary-hover-action")
+ .evaluate((label) =>
+ Number.parseFloat(getComputedStyle(label).opacity),
+ ),
+ )
+ .toBeGreaterThan(0.8);
+ await expect
+ .poll(() =>
+ rootSummaryRow.evaluate((row) =>
+ Math.round(row.getBoundingClientRect().width),
+ ),
+ )
+ .toBe(rootSummaryWidthBeforeHover);
await threadPanel.getByTestId("message-thread-close").click();
await expect(threadPanel).toBeHidden();