Move EventTileBubble to shared components

.stylelintrc.js

@@ -56,7 +56,6 @@ module.exports = {
                     { from: "res/css/views/rooms/_EditMessageComposer.pcss", type: "css" },
                     { from: "res/css/views/right_panel/_BaseCard.pcss", type: "css" },
                     { from: "res/css/views/messages/_MessageTimestamp.pcss", type: "css" },
-                    { from: "res/css/views/messages/_EventTileBubble.pcss", type: "css" },
                     { from: "res/css/views/messages/_MessageActionBar.pcss", type: "css" },
                     { from: "res/css/views/voip/LegacyCallView/_LegacyCallViewButtons.pcss", type: "css" },
                     { from: "res/css/views/elements/_ToggleSwitch.pcss", type: "css" },

packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.module.css

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+.container {
+    background-color: var(--cpd-color-bg-subtle-secondary);
+    padding: 10px;
+    border-radius: 8px;
+    /* Reserve space for external timestamps, but also cap the width */
+    /* Legacy variable: --MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
+    /* max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px); */
+    max-width: min(calc(100% - 2 * 46px), 600px);
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: 24px minmax(0, 1fr) min-content min-content;
+
+    svg {
+        position: relative;
+        grid-column: 1;
+        grid-row: 1 / 3;
+        width: 16px;
+        height: 16px;
+        content: "";
+        inset: 0;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-size: contain;
+        margin-top: var(--cpd-space-1x);
+    }
+
+    .title,
+    .subtitle {
+        grid-column: 2;
+        overflow-wrap: break-word;
+        min-inline-size: 50px;
+    }
+
+    .title {
+        font-weight: var(--cpd-font-weight-semibold);
+        font-size: var(--cpd-font-size-body-md);
+        grid-row: 1;
+    }
+
+    .subtitle {
+        font-size: var(--cpd-font-size-body-sm);
+        grid-row: 2;
+    }
+
+    /* Keep mx_MessageTimestamp to preserve compatibility with the existing timeline layouts. */
+    .mx_MessageTimestamp {
+        grid-column: 4;
+        grid-row: 1 / 3;
+        align-self: center;
+        margin-left: var(--cpd-space-4x);
+    }
+}

packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.stories.tsx

@@ -0,0 +1,74 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React from "react";
+import { LockSolidIcon, ErrorSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Tooltip } from "@vector-im/compound-web";
+
+import type { Meta, StoryFn } from "@storybook/react-vite";
+import { EventTileBubble } from "./EventTileBubble";
+
+export default {
+    title: "Event/EventTileBubble",
+    component: EventTileBubble,
+    tags: ["autodocs"],
+    args: {
+        icon: <ErrorSolidIcon />,
+        title: "Title goes here",
+        subtitle: "Subtitle goes here",
+        className: "custom-class",
+    },
+} as Meta<typeof EventTileBubble>;
+
+const Template: StoryFn<typeof EventTileBubble> = (args) => <EventTileBubble {...args} />;
+
+export const Default = Template.bind({});
+
+export const HasLockSolidIcon = Template.bind({});
+HasLockSolidIcon.args = {
+    className: undefined,
+    icon: <LockSolidIcon />,
+    timestamp: undefined,
+    children: undefined,
+};
+
+export const HasChildren = Template.bind({});
+HasChildren.args = {
+    className: undefined,
+    timestamp: undefined,
+    children: <div>children</div>,
+};
+
+export const HasTimestamp = Template.bind({});
+HasTimestamp.args = {
+    className: undefined,
+    timestamp: <div>timestamp</div>,
+    children: undefined,
+};
+
+export const HasTimestampAndChildren = Template.bind({});
+HasTimestampAndChildren.args = {
+    className: undefined,
+    timestamp: <div>timestamp</div>,
+    children: <div>children</div>,
+};
+
+export const IsCryptoEventBubble = Template.bind({});
+IsCryptoEventBubble.args = {
+    className: undefined,
+    icon: <LockSolidIcon />,
+    title: "Encryption enabled",
+    subtitle: "Messages here are end-to-end encrypted. Verify XYZ in their profile - tap on their profile picture.",
+    timestamp: undefined,
+    children: (
+        <Tooltip description="Thu, 17 Nov 2022, 4:58:32 pm">
+            <span aria-hidden={true} aria-live="off">
+                04:58
+            </span>
+        </Tooltip>
+    ),
+};

packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.test.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import { render } from "@test-utils";
+import { composeStories } from "@storybook/react-vite";
+import { describe, it, expect } from "vitest";
+import React from "react";
+
+import * as stories from "./EventTileBubble.stories.tsx";
+
+const { Default, HasLockSolidIcon, HasChildren, HasTimestamp, HasTimestampAndChildren, IsCryptoEventBubble } =
+    composeStories(stories);
+
+describe("EventTileBubble", () => {
+    it("renders the event tile bubble", () => {
+        const { container } = render(<Default />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the event tile bubble with icon", () => {
+        const { container } = render(<HasLockSolidIcon />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the event tile bubble with children", () => {
+        const { container } = render(<HasChildren />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the event tile bubble with timestamp", () => {
+        const { container } = render(<HasTimestamp />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the event tile bubble with timestamp and children", () => {
+        const { container } = render(<HasTimestampAndChildren />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it("renders the event tile bubble as crypto event bubble", () => {
+        const { container } = render(<IsCryptoEventBubble />);
+        expect(container).toMatchSnapshot();
+    });
+});

packages/shared-components/src/event-tiles/EventTileBubble/EventTileBubble.tsx

@@ -0,0 +1,71 @@
+/*
+ * Copyright 2026 Element Creations Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+import React, { type JSX, type ReactNode } from "react";
+import classNames from "classnames";
+
+import styles from "./EventTileBubble.module.css";
+
+export interface EventTileBubbleProps {
+    /**
+     * Icon rendered at the start of the bubble.
+     */
+    icon: JSX.Element;
+    /**
+     * Main title text for the bubble.
+     */
+    title: string;
+    /**
+     * Optional subtitle rendered beneath the title.
+     */
+    subtitle?: ReactNode;
+    /**
+     * Optional extra class name for the container.
+     */
+    className?: string;
+    /**
+     * Optional timestamp element rendered at the end of the bubble.
+     */
+    timestamp?: JSX.Element;
+    /**
+     * Optional children rendered between subtitle and timestamp.
+     */
+    children?: JSX.Element;
+    /**
+     * Forwarded ref for the container element.
+     */
+    ref?: React.RefObject<any>;
+}
+
+/**
+ * EventTileBubble renders a compact event tile with an icon, title, and optional subtitle/content.
+ *
+ * @example
+ * ```tsx
+ * <EventTileBubble icon={<Icon />} title="Room created" />
+ * ```
+ */
+export function EventTileBubble({
+    icon,
+    title,
+    subtitle,
+    className,
+    timestamp,
+    children,
+    ref,
+}: EventTileBubbleProps): JSX.Element {
+    // Keep mx_EventTileBubble to preserve compatibility with the existing timeline layouts.
+    return (
+        <div className={classNames("mx_EventTileBubble", styles.container, className)} ref={ref}>
+            {icon}
+            <div className={styles.title}>{title}</div>
+            {subtitle && <div className={styles.subtitle}>{subtitle}</div>}
+            {children}
+            {timestamp}
+        </div>
+    );
+}