Call Tile - Support declined call tile (#33371)

* Extract shared types and css

* Add CallDeclinedTileView

* Add storybook and view tests

* Support declined event in view model

* Render declined view from tile factory

* Update snapshots

* Add 10px padding to top and bottom

* Distinguish between call declined by us and other users

* Support `isCallDeclinedByUs` in view model

* Update tests

* Add better comments

* Rename getInitial to generateSnapshot

apps/web/src/events/EventTileFactory.tsx

@@ -18,6 +18,7 @@ import {
     M_POLL_START,
 } from "matrix-js-sdk/src/matrix";
 import {
+    CallDeclinedTileView,
     CallStartedTileView,
     EncryptionEventView,
     HiddenBodyView,
@@ -56,7 +57,7 @@ import { TextualEventViewModel } from "../viewmodels/room/timeline/event-tile/Te
 import { HiddenBodyViewModel } from "../viewmodels/room/timeline/event-tile/body/HiddenBodyViewModel";
 import { ViewSourceEventViewModel } from "../viewmodels/room/timeline/event-tile/body/ViewSourceEventViewModel";
 import { ElementCallEventType } from "../call-types";
-import { CallStartedTileViewModel } from "../viewmodels/room/timeline/event-tile/call/CallStartedTileViewModel";
+import { CallTileViewModel } from "../viewmodels/room/timeline/event-tile/call/CallTileViewModel";
 
 // Subset of EventTile's IProps plus some mixins
 export interface EventTileTypeProps extends Pick<
@@ -187,9 +188,9 @@ function RoomAvatarEventWrappedView({ mxEvent, ref }: IBodyProps): JSX.Element {
 }
 const RoomAvatarEventFactory: Factory = (ref, props) => <RoomAvatarEventWrappedView ref={ref} {...props} />;
 
-function CallStartedTileViewWrapped({ mxEvent }: IBodyProps): JSX.Element {
+function CallStartedTileViewWrapped({ mxEvent, getRelationsForEvent }: IBodyProps): JSX.Element {
-    const vm = useCreateAutoDisposedViewModel(() => new CallStartedTileViewModel({ mxEvent }));
+    const vm = useCreateAutoDisposedViewModel(() => new CallTileViewModel({ mxEvent, getRelationsForEvent }));
-    return <CallStartedTileView vm={vm} />;
+    return vm.isCallDeclined ? <CallDeclinedTileView vm={vm} /> : <CallStartedTileView vm={vm} />;
 }
 
 export const CallStartedEventFactory: Factory = (ref, props) => {

apps/web/src/viewmodels/room/timeline/event-tile/call/CallStartedTileViewModel.ts

@@ -1,79 +0,0 @@
-/*
- * 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 { BaseViewModel, CallType, type CallStartedTileViewSnapshot } from "@element-hq/web-shared-components";
-
-import type { MatrixEvent } from "matrix-js-sdk/src/matrix";
-import type { IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
-import SettingsStore from "../../../../../settings/SettingsStore";
-import { formatTime } from "../../../../../DateUtils";
-import defaultDispatcher from "../../../../../dispatcher/dispatcher";
-import type { SettingUpdatedPayload } from "../../../../../dispatcher/payloads/SettingUpdatedPayload";
-import type { ActionPayload } from "../../../../../dispatcher/payloads";
-import { Action } from "../../../../../dispatcher/actions";
-
-export interface CallStartedTileViewModelProps {
-    mxEvent: MatrixEvent;
-}
-
-function getIntentFromEvent(event: MatrixEvent): CallStartedTileViewSnapshot["type"] {
-    const content = event.getContent<IRTCNotificationContent>();
-    const intentInContent = content["m.call.intent"];
-    switch (intentInContent) {
-        case "audio":
-            return CallType.Voice;
-        case "video":
-        default:
-            return CallType.Video;
-    }
-}
-
-function getTimeFromEvent(event: MatrixEvent, showTwelveHour: boolean): CallStartedTileViewSnapshot["timestamp"] {
-    const content = event.getContent<IRTCNotificationContent>();
-    const senderTs = content["sender_ts"];
-    const originServerTs = event.getTs();
-    const ts = Math.abs(senderTs - originServerTs) > 20000 ? originServerTs : senderTs;
-
-    const date = new Date(ts);
-    const timestamp = formatTime(date, showTwelveHour);
-    return timestamp;
-}
-
-function getInitialSnapshot(event: MatrixEvent): CallStartedTileViewSnapshot {
-    const type = getIntentFromEvent(event);
-    const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
-    const timestamp = getTimeFromEvent(event, showTwelveHour);
-    return { type, timestamp };
-}
-
-function isSettingsChangedPayload(payload: ActionPayload): payload is SettingUpdatedPayload {
-    return payload.action === Action.SettingUpdated;
-}
-
-/**
- * ViewModel for a timeline tile that indicates the start of an element call.
- */
-export class CallStartedTileViewModel extends BaseViewModel<
-    CallStartedTileViewSnapshot,
-    CallStartedTileViewModelProps
-> {
-    public constructor(props: CallStartedTileViewModelProps) {
-        super(props, getInitialSnapshot(props.mxEvent));
-        SettingsStore.monitorSetting("showTwelveHourTimestamps", null);
-        const token = defaultDispatcher.register(this.onAction);
-        this.disposables.track(() => {
-            defaultDispatcher.unregister(token);
-        });
-    }
-
-    private onAction = (payload: ActionPayload): void => {
-        if (!isSettingsChangedPayload(payload) || payload.settingName !== "showTwelveHourTimestamps") return;
-        const showTwelveHour = (payload.newValue as boolean) ?? false;
-        const timestamp = getTimeFromEvent(this.props.mxEvent, showTwelveHour);
-        this.snapshot.merge({ timestamp });
-    };
-}

apps/web/src/viewmodels/room/timeline/event-tile/call/CallTileViewModel.ts

@@ -0,0 +1,141 @@
+/*
+ * 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 { BaseViewModel, CallType, type CallTileViewSnapshot } from "@element-hq/web-shared-components";
+import { EventType, type MatrixEvent, MatrixEventEvent, RelationType } from "matrix-js-sdk/src/matrix";
+
+import type { IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
+import SettingsStore from "../../../../../settings/SettingsStore";
+import { formatTime } from "../../../../../DateUtils";
+import defaultDispatcher from "../../../../../dispatcher/dispatcher";
+import type { SettingUpdatedPayload } from "../../../../../dispatcher/payloads/SettingUpdatedPayload";
+import type { ActionPayload } from "../../../../../dispatcher/payloads";
+import { Action } from "../../../../../dispatcher/actions";
+import type { GetRelationsForEvent } from "../../../../../components/views/rooms/EventTile";
+import { MatrixClientPeg } from "../../../../../MatrixClientPeg";
+
+export interface CallTileViewModelProps {
+    /**
+     * Event of type `org.matrix.msc4075.rtc.notification`.
+     */
+    mxEvent: MatrixEvent;
+    /**
+     * Helper to fetch related events from a given event.
+     */
+    getRelationsForEvent?: GetRelationsForEvent;
+}
+
+function getIntentFromEvent(event: MatrixEvent): CallTileViewSnapshot["type"] {
+    const content = event.getContent<IRTCNotificationContent>();
+    const intentInContent = content["m.call.intent"];
+    switch (intentInContent) {
+        case "audio":
+            return CallType.Voice;
+        case "video":
+        default:
+            return CallType.Video;
+    }
+}
+
+function getTs(event: MatrixEvent): number {
+    if (event.getType() === EventType.RTCNotification) {
+        /**
+         * According to the spec:
+         * Receivers SHOULD use origin_server_ts if |sender_ts - origin_server_ts| > 20000 ms.
+         */
+        const content = event.getContent<IRTCNotificationContent>();
+        const senderTs = content["sender_ts"];
+        const originServerTs = event.getTs();
+        const ts = Math.abs(senderTs - originServerTs) > 20000 ? originServerTs : senderTs;
+        return ts;
+    } else return event.getTs();
+}
+
+function getTimeFromEvent(event: MatrixEvent, showTwelveHour: boolean): CallTileViewSnapshot["timestamp"] {
+    const ts = getTs(event);
+    const date = new Date(ts);
+    const timestamp = formatTime(date, showTwelveHour);
+    return timestamp;
+}
+
+function generateSnapshot(
+    event: MatrixEvent,
+    getRelationsForEvent?: GetRelationsForEvent,
+): { snapshot: CallTileViewSnapshot; declineEvent: MatrixEvent | null } {
+    const type = getIntentFromEvent(event);
+    const declineEvent = getDeclinedEvent(event, getRelationsForEvent);
+    let isCallDeclinedByUs: boolean | undefined;
+    if (declineEvent) {
+        isCallDeclinedByUs = declineEvent.getSender() === MatrixClientPeg.get()?.getUserId();
+    }
+    const showTwelveHour = SettingsStore.getValue("showTwelveHourTimestamps");
+    const timestamp = getTimeFromEvent(declineEvent ?? event, showTwelveHour);
+    return { snapshot: { type, timestamp, isCallDeclinedByUs }, declineEvent };
+}
+
+function isSettingsChangedPayload(payload: ActionPayload): payload is SettingUpdatedPayload {
+    return payload.action === Action.SettingUpdated;
+}
+
+/**
+ * Get a declined event that is related to the given rtc notification event.
+ * @param event rtc notification event
+ */
+function getDeclinedEvent(event: MatrixEvent, getRelationsForEvent?: GetRelationsForEvent): MatrixEvent | null {
+    const eventId = event.getId();
+    if (eventId && getRelationsForEvent) {
+        const relations = getRelationsForEvent(eventId, RelationType.Reference, EventType.RTCDecline)?.getRelations();
+        if (relations) return relations[0];
+    }
+    return null;
+}
+
+/**
+ * Common view-model for call tiles; currently used to render:
+ * 1. A tile that indicates that a call occurred (call tombstone).
+ * 2. A tile that indicates that a call was declined.
+ */
+export class CallTileViewModel extends BaseViewModel<CallTileViewSnapshot, CallTileViewModelProps> {
+    /**
+     * The decline event associated with this call, if any.
+     */
+    private declineEvent: MatrixEvent | null;
+
+    public constructor(props: CallTileViewModelProps) {
+        const { declineEvent, snapshot } = generateSnapshot(props.mxEvent, props.getRelationsForEvent);
+        super(props, snapshot);
+        this.declineEvent = declineEvent;
+
+        // Listen to the changes on settings so that we can update the timestamp format (12H vs 24H).
+        SettingsStore.monitorSetting("showTwelveHourTimestamps", null);
+        const token = defaultDispatcher.register(this.onAction);
+        this.disposables.track(() => {
+            defaultDispatcher.unregister(token);
+        });
+
+        // When a relation is added to the event, recompute the state.
+        this.disposables.trackListener(props.mxEvent, MatrixEventEvent.RelationsCreated, () => {
+            const { declineEvent, snapshot } = generateSnapshot(props.mxEvent, props.getRelationsForEvent);
+            this.declineEvent = declineEvent;
+            this.snapshot.set(snapshot);
+        });
+    }
+
+    private onAction = (payload: ActionPayload): void => {
+        if (!isSettingsChangedPayload(payload) || payload.settingName !== "showTwelveHourTimestamps") return;
+        const showTwelveHour = (payload.newValue as boolean) ?? false;
+        const timestamp = getTimeFromEvent(this.declineEvent ?? this.props.mxEvent, showTwelveHour);
+        this.snapshot.merge({ timestamp });
+    };
+
+    /**
+     * Whether the call associated with this vm has been declined.
+     */
+    public get isCallDeclined(): boolean {
+        return !!this.declineEvent;
+    }
+}

apps/web/test/viewmodels/event-tiles/CallStartedTileViewModel-test.ts

@@ -1,71 +0,0 @@
-/*
- * 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 { type MatrixEvent, EventType } from "matrix-js-sdk/src/matrix";
-import { CallType } from "@element-hq/web-shared-components";
-import { waitFor } from "jest-matrix-react";
-
-import { mkEvent } from "../../test-utils";
-import { CallStartedTileViewModel } from "../../../src/viewmodels/room/timeline/event-tile/call/CallStartedTileViewModel";
-import SettingsStore from "../../../src/settings/SettingsStore";
-import { SettingLevel } from "../../../src/settings/SettingLevel";
-
-function getMockedRtcNotificationEvent(intent: string, senderTs: number, serverTs: number): MatrixEvent {
-    const mockEvent = mkEvent({
-        type: EventType.RTCNotification,
-        user: "@foo:m.org",
-        content: {
-            "m.call.intent": intent,
-            "sender_ts": senderTs,
-        },
-        ts: serverTs,
-        event: true,
-    });
-    return mockEvent;
-}
-
-describe("CallStartedTileViewModel", () => {
-    it("should set voice intent in state", () => {
-        const mxEvent = getMockedRtcNotificationEvent("audio", 1752583130365, 1752583130365);
-        const vm = new CallStartedTileViewModel({ mxEvent });
-        const { type } = vm.getSnapshot();
-        expect(type).toStrictEqual(CallType.Voice);
-    });
-
-    it("should set video intent in state", () => {
-        const mxEvent = getMockedRtcNotificationEvent("video", 1752583130365, 1752583130365);
-        const vm = new CallStartedTileViewModel({ mxEvent });
-        const { type } = vm.getSnapshot();
-        expect(type).toStrictEqual(CallType.Video);
-    });
-
-    it("should calculate time string correctly", () => {
-        const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
-        const vm = new CallStartedTileViewModel({ mxEvent });
-        const { timestamp } = vm.getSnapshot();
-        expect(timestamp).toStrictEqual("17:55");
-    });
-
-    it("should calculate time string correctly when configured to use 12 hour format", async () => {
-        const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
-        await SettingsStore.setValue("showTwelveHourTimestamps", null, SettingLevel.DEVICE, true);
-        const vm = new CallStartedTileViewModel({ mxEvent });
-        const { timestamp } = vm.getSnapshot();
-        expect(timestamp).toStrictEqual("5:55 PM");
-        SettingsStore.reset();
-    });
-
-    it("should change timestamp format when setting is modified", async () => {
-        const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
-        const vm = new CallStartedTileViewModel({ mxEvent });
-        expect(vm.getSnapshot().timestamp).toStrictEqual("17:55");
-        await SettingsStore.setValue("showTwelveHourTimestamps", null, SettingLevel.DEVICE, true);
-        await waitFor(() => {
-            expect(vm.getSnapshot().timestamp).toStrictEqual("5:55 PM");
-        });
-    });
-});

apps/web/test/viewmodels/event-tiles/CallTileViewModel-test.ts

@@ -0,0 +1,145 @@
+/*
+ * 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 { EventType, type MatrixEvent, MatrixEventEvent, RelationType } from "matrix-js-sdk/src/matrix";
+import { CallType } from "@element-hq/web-shared-components";
+import { waitFor } from "jest-matrix-react";
+
+import { mkEvent, stubClient } from "../../test-utils";
+import { CallTileViewModel } from "../../../src/viewmodels/room/timeline/event-tile/call/CallTileViewModel";
+import SettingsStore from "../../../src/settings/SettingsStore";
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
+
+function getMockedRtcNotificationEvent(intent: string, senderTs: number, serverTs: number): MatrixEvent {
+    const mockEvent = mkEvent({
+        type: EventType.RTCNotification,
+        user: "@foo:m.org",
+        content: {
+            "m.call.intent": intent,
+            "sender_ts": senderTs,
+        },
+        ts: serverTs,
+        event: true,
+    });
+    return mockEvent;
+}
+
+function getMockedRtcDeclineEvent(rtcNotificationEvent: MatrixEvent, sender = "@foo:m.org"): MatrixEvent {
+    const mockEvent = mkEvent({
+        type: EventType.RTCDecline,
+        user: sender,
+        content: {
+            "m.relates_to": {
+                rel_type: "m.reference",
+                event_id: rtcNotificationEvent.getId(),
+            },
+        },
+        ts: 924285416000,
+        event: true,
+    });
+    return mockEvent;
+}
+
+describe("CallTileViewModel", () => {
+    it("should set voice intent in state", () => {
+        const mxEvent = getMockedRtcNotificationEvent("audio", 1752583130365, 1752583130365);
+        const vm = new CallTileViewModel({ mxEvent });
+        const { type } = vm.getSnapshot();
+        expect(type).toStrictEqual(CallType.Voice);
+    });
+
+    it("should set video intent in state", () => {
+        const mxEvent = getMockedRtcNotificationEvent("video", 1752583130365, 1752583130365);
+        const vm = new CallTileViewModel({ mxEvent });
+        const { type } = vm.getSnapshot();
+        expect(type).toStrictEqual(CallType.Video);
+    });
+
+    it("should calculate time string correctly", () => {
+        const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
+        const vm = new CallTileViewModel({ mxEvent });
+        const { timestamp } = vm.getSnapshot();
+        expect(timestamp).toStrictEqual("17:55");
+    });
+
+    it("should calculate time string correctly when configured to use 12 hour format", async () => {
+        const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
+        await SettingsStore.setValue("showTwelveHourTimestamps", null, SettingLevel.DEVICE, true);
+        const vm = new CallTileViewModel({ mxEvent });
+        const { timestamp } = vm.getSnapshot();
+        expect(timestamp).toStrictEqual("5:55 PM");
+        SettingsStore.reset();
+    });
+
+    it("should change timestamp format when setting is modified", async () => {
+        const mxEvent = getMockedRtcNotificationEvent("video", 924285348000, 924285348000);
+        const vm = new CallTileViewModel({ mxEvent });
+        expect(vm.getSnapshot().timestamp).toStrictEqual("17:55");
+        await SettingsStore.setValue("showTwelveHourTimestamps", null, SettingLevel.DEVICE, true);
+        await waitFor(() => {
+            expect(vm.getSnapshot().timestamp).toStrictEqual("5:55 PM");
+        });
+        SettingsStore.reset();
+    });
+
+    describe("On call declined", () => {
+        it("should calculate isCallDeclined correctly", () => {
+            const mxEvent = getMockedRtcNotificationEvent("audio", 1752583130365, 1752583130365);
+            // When there's no decline event, isCallDeclined = false
+            const vm1 = new CallTileViewModel({ mxEvent, getRelationsForEvent: jest.fn() });
+            expect(vm1.isCallDeclined).toStrictEqual(false);
+
+            // When there's a decline event, isCallDeclined = true
+            const declineEvent = getMockedRtcDeclineEvent(mxEvent);
+            const getRelationsForEvent = jest.fn().mockReturnValue({
+                getRelations: () => [declineEvent],
+            });
+            const vm2 = new CallTileViewModel({ mxEvent, getRelationsForEvent });
+            expect(vm2.isCallDeclined).toStrictEqual(true);
+        });
+
+        it("should calculate isCallDeclinedByUs correctly", () => {
+            const cli = stubClient();
+            cli.getUserId = jest.fn().mockReturnValue("@bar:m.org");
+
+            const mxEvent = getMockedRtcNotificationEvent("audio", 924285348000, 924285348000);
+            const declineEvent: MatrixEvent[] = [];
+            const getRelationsForEvent = jest.fn().mockReturnValue({
+                getRelations: () => declineEvent,
+            });
+
+            // Decline event sent by somebody else
+            declineEvent.push(getMockedRtcDeclineEvent(mxEvent));
+            const vm = new CallTileViewModel({ mxEvent, getRelationsForEvent });
+            expect(vm.getSnapshot().isCallDeclinedByUs).toStrictEqual(false);
+
+            // Decline event sent by us
+            declineEvent.pop();
+            declineEvent.push(getMockedRtcDeclineEvent(mxEvent, MatrixClientPeg.get()!.getUserId()!));
+            const vm2 = new CallTileViewModel({ mxEvent, getRelationsForEvent });
+            expect(vm2.getSnapshot().isCallDeclinedByUs).toStrictEqual(true);
+        });
+
+        it("should recompute state when call is declined", () => {
+            const mxEvent = getMockedRtcNotificationEvent("audio", 924285348000, 924285348000);
+            const declineEvent: MatrixEvent[] = [];
+            const getRelationsForEvent = jest.fn().mockReturnValue({
+                getRelations: () => declineEvent,
+            });
+
+            // No decline event yet, so timestamp should be based on rtc notification event.
+            const vm = new CallTileViewModel({ mxEvent, getRelationsForEvent });
+            expect(vm.getSnapshot().timestamp).toStrictEqual("17:55");
+
+            // Decline event arrives, timestamp should update to be that of the decline event.
+            declineEvent.push(getMockedRtcDeclineEvent(mxEvent));
+            mxEvent.emit(MatrixEventEvent.RelationsCreated, RelationType.Reference, EventType.RTCDecline);
+            expect(vm.getSnapshot().timestamp).toStrictEqual("17:56");
+        });
+    });
+});

packages/shared-components/src/i18n/strings/en_EN.json

@@ -203,6 +203,10 @@
     },
     "timeline": {
         "call_tile": {
+            "declined": {
+                "call_declined": "Call declined",
+                "call_declined_by_us": "You declined a call"
+            },
             "video_call_title": "Video call",
             "voice_call_title": "Voice call"
         },

packages/shared-components/src/room/timeline/event-tile/call/CallDeclinedTile/CallDeclinedTileView.stories.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 from "react";
+
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { useMockedViewModel } from "../../../../../core/viewmodel";
+import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { CallType, type CallTileViewSnapshot } from "../common/types";
+import { CallDeclinedTileView } from "./CallDeclinedTileView";
+
+const CallDeclinedTileViewWrapperImpl = ({ ...rest }: CallTileViewSnapshot): React.ReactNode => {
+    const vm = useMockedViewModel(rest, {});
+    return <CallDeclinedTileView vm={vm} />;
+};
+
+const CallDeclinedTileViewWrapper = withViewDocs(CallDeclinedTileViewWrapperImpl, CallDeclinedTileView);
+
+const meta = {
+    title: "Timeline/Timeline Event/Call/CallDeclinedTileView",
+    component: CallDeclinedTileViewWrapper,
+    tags: ["autodocs"],
+    argTypes: {
+        type: {
+            options: [CallType.Video, CallType.Voice],
+            control: { type: "select" },
+        },
+        timestamp: {
+            control: { type: "text" },
+        },
+    },
+    args: {
+        type: CallType.Voice,
+        timestamp: "12:36",
+        isCallDeclinedByUs: false,
+    },
+    parameters: {
+        design: {
+            type: "figma",
+            url: "https://www.figma.com/design/rTaQE2nIUSLav4Tg3nozq7/Compound-Web-Components?node-id=11217-3914&t=jv0JnUoKJUW1Ko96-4",
+        },
+    },
+} satisfies Meta<typeof CallDeclinedTileViewWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const VoiceCall: Story = {
+    args: {
+        type: CallType.Voice,
+    },
+};
+
+export const VideoCall: Story = {
+    args: {
+        type: CallType.Video,
+    },
+};
+
+export const CallDeclinedByUs: Story = {
+    args: {
+        type: CallType.Voice,
+        isCallDeclinedByUs: true,
+    },
+};

packages/shared-components/src/room/timeline/event-tile/call/CallDeclinedTile/CallDeclinedTileView.test.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 { composeStories } from "@storybook/react-vite";
+import { describe, expect, it } from "vitest";
+import React from "react";
+import { render } from "@test-utils";
+
+import * as Stories from "./CallDeclinedTileView.stories";
+
+const { VideoCall, VoiceCall, CallDeclinedByUs } = composeStories(Stories);
+
+describe("CallDeclinedTileView", () => {
+    describe("renders the tile", () => {
+        it("voice call", () => {
+            const { container } = render(<VoiceCall />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("video call", () => {
+            const { container } = render(<VideoCall />);
+            expect(container).toMatchSnapshot();
+        });
+
+        it("call declined by us", () => {
+            const { container } = render(<CallDeclinedByUs />);
+            expect(container).toMatchSnapshot();
+        });
+    });
+});

packages/shared-components/src/room/timeline/event-tile/call/CallDeclinedTile/CallDeclinedTileView.tsx

@@ -0,0 +1,55 @@
+/*
+ * 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 {
+    VideoCallDeclinedSolidIcon,
+    VoiceCallDeclinedSolidIcon,
+} from "@vector-im/compound-design-tokens/assets/web/icons";
+import classnames from "classnames";
+
+import { useViewModel, type ViewModel } from "../../../../../core/viewmodel";
+import { Flex } from "../../../../../core/utils/Flex";
+import styles from "../common/CallTileView.module.css";
+import { useI18n } from "../../../../../core/i18n/i18nContext";
+import { type CallTileViewSnapshot, CallType } from "../common/types";
+
+export type CallDeclinedTileViewModel = ViewModel<CallTileViewSnapshot>;
+
+export interface CallDeclinedTileViewProps {
+    vm: CallDeclinedTileViewModel;
+    className?: string;
+}
+
+function getIconForCallType(type: CallType): React.ReactNode {
+    switch (type) {
+        case CallType.Video:
+            return <VideoCallDeclinedSolidIcon className={styles.icon} width={20} height={20} />;
+        case CallType.Voice:
+            return <VoiceCallDeclinedSolidIcon className={styles.icon} width={20} height={20} />;
+    }
+}
+
+/**
+ * View for a timeline tile that indicates that a call was declined.
+ */
+export function CallDeclinedTileView({ vm, className }: CallDeclinedTileViewProps): React.ReactNode {
+    const { translate: _t } = useI18n();
+    const { type, timestamp, isCallDeclinedByUs } = useViewModel(vm);
+    const classNames = classnames(className, styles.container);
+    return (
+        <Flex className={classNames} align="center" gap="var(--cpd-space-2x)">
+            {getIconForCallType(type)}
+            <div className={styles.title}>
+                {isCallDeclinedByUs
+                    ? _t("timeline|call_tile|declined|call_declined_by_us")
+                    : _t("timeline|call_tile|declined|call_declined")}
+            </div>
+            <div className={styles.time}>{timestamp}</div>
+        </Flex>
+    );
+}

packages/shared-components/src/room/timeline/event-tile/call/CallDeclinedTile/__snapshots__/CallDeclinedTileView.test.tsx.snap

@@ -0,0 +1,97 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`CallDeclinedTileView > renders the tile > call declined by us 1`] = `
+<div>
+  <div
+    class="Flex-module_flex CallTileView-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <svg
+      class="CallTileView-module_icon"
+      fill="currentColor"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.623 3.04a1.07 1.07 0 0 1 1.086.929l.542 3.954q.039.27-.038.504a1.1 1.1 0 0 1-.272.427l-1.64 1.64Q7.806 11.5 8.456 12.4c.433.601 1.444 1.697 1.444 1.697.013.012 1.098 1.014 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.194-.194.426-.27a1.1 1.1 0 0 1 .504-.04l3.953.543q.407.058.67.358.26.301.26.728l.04 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.116-6.56q0-.426.329-.756Q3.67 3 4.095 3zM20.25 3q.405 0 .707.3.3.301.3.708t-.3.707l-1.414 1.414 1.414 1.414q.3.3.3.707t-.3.707-.707.3-.707-.3l-1.414-1.414-1.414 1.414q-.3.3-.707.3t-.707-.3T15 8.25q0-.406.3-.707l1.415-1.414L15.3 4.715q-.3-.3-.301-.707 0-.407.3-.707t.71-.301q.405 0 .707.3l1.414 1.415L19.543 3.3q.3-.3.707-.301"
+      />
+    </svg>
+    <div
+      class="CallTileView-module_title"
+    >
+      You declined a call
+    </div>
+    <div
+      class="CallTileView-module_time"
+    >
+      12:36
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CallDeclinedTileView > renders the tile > video call 1`] = `
+<div>
+  <div
+    class="Flex-module_flex CallTileView-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <svg
+      class="CallTileView-module_icon"
+      fill="currentColor"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M2 8a4 4 0 0 1 4-4h10a2 2 0 0 1 2 2v4.286l3.35-2.871a1 1 0 0 1 1.65.76v7.65a1 1 0 0 1-1.65.76L18 13.715V18a2 2 0 0 1-2 2H6a4 4 0 0 1-4-4zm10.828 6.828q.3-.3.3-.707 0-.405-.3-.707L11.414 12l1.414-1.414q.3-.3.3-.707t-.3-.707-.707-.301q-.405 0-.707.3L10 10.587 8.586 9.172q-.3-.3-.707-.301-.407 0-.707.3t-.3.708q0 .405.3.707L8.586 12l-1.414 1.414q-.3.3-.3.707t.3.707.707.3q.405 0 .707-.3L10 13.414l1.414 1.414q.3.3.707.3t.707-.3"
+      />
+    </svg>
+    <div
+      class="CallTileView-module_title"
+    >
+      Call declined
+    </div>
+    <div
+      class="CallTileView-module_time"
+    >
+      12:36
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CallDeclinedTileView > renders the tile > voice call 1`] = `
+<div>
+  <div
+    class="Flex-module_flex CallTileView-module_container"
+    style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
+  >
+    <svg
+      class="CallTileView-module_icon"
+      fill="currentColor"
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M7.623 3.04a1.07 1.07 0 0 1 1.086.929l.542 3.954q.039.27-.038.504a1.1 1.1 0 0 1-.272.427l-1.64 1.64Q7.806 11.5 8.456 12.4c.433.601 1.444 1.697 1.444 1.697.013.012 1.098 1.014 1.696 1.444q.9.65 1.909 1.153l1.64-1.64q.194-.194.426-.27a1.1 1.1 0 0 1 .504-.04l3.953.543q.407.058.67.358.26.301.26.728l.04 3.527q0 .427-.33.756-.33.33-.756.33a16 16 0 0 1-6.57-1.105 16.2 16.2 0 0 1-5.563-3.663 16.1 16.1 0 0 1-3.653-5.573 16.3 16.3 0 0 1-1.116-6.56q0-.426.329-.756Q3.67 3 4.095 3zM20.25 3q.405 0 .707.3.3.301.3.708t-.3.707l-1.414 1.414 1.414 1.414q.3.3.3.707t-.3.707-.707.3-.707-.3l-1.414-1.414-1.414 1.414q-.3.3-.707.3t-.707-.3T15 8.25q0-.406.3-.707l1.415-1.414L15.3 4.715q-.3-.3-.301-.707 0-.407.3-.707t.71-.301q.405 0 .707.3l1.414 1.415L19.543 3.3q.3-.3.707-.301"
+      />
+    </svg>
+    <div
+      class="CallTileView-module_title"
+    >
+      Call declined
+    </div>
+    <div
+      class="CallTileView-module_time"
+    >
+      12:36
+    </div>
+  </div>
+</div>
+`;

packages/shared-components/src/room/timeline/event-tile/call/CallStartedTile/CallStartedTileView.stories.tsx

@@ -8,11 +8,12 @@
 import React from "react";
 
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { CallStartedTileView, type CallStartedTileViewSnapshot, CallType } from "./CallStartedTileView";
+import { CallStartedTileView } from "./CallStartedTileView";
 import { useMockedViewModel } from "../../../../../core/viewmodel";
 import { withViewDocs } from "../../../../../../.storybook/withViewDocs";
+import { CallType, type CallTileViewSnapshot } from "../common/types";
 
-const CallStartedTileViewWrapperImpl = ({ ...rest }: CallStartedTileViewSnapshot): React.ReactNode => {
+const CallStartedTileViewWrapperImpl = ({ ...rest }: CallTileViewSnapshot): React.ReactNode => {
     const vm = useMockedViewModel(rest, {});
     return <CallStartedTileView vm={vm} />;
 };

packages/shared-components/src/room/timeline/event-tile/call/CallStartedTile/CallStartedTileView.tsx

@@ -11,35 +11,11 @@ import classnames from "classnames";
 
 import { useViewModel, type ViewModel } from "../../../../../core/viewmodel";
 import { Flex } from "../../../../../core/utils/Flex";
-import styles from "./CallStartedTileView.module.css";
+import styles from "../common/CallTileView.module.css";
 import { useI18n } from "../../../../../core/i18n/i18nContext";
+import { type CallTileViewSnapshot, CallType } from "../common/types";
 
-/**
+export type CallStartedTileViewModel = ViewModel<CallTileViewSnapshot>;
- * Represents whether a call is a voice call or video call.
- */
-export const enum CallType {
-    /**
-     * This is a voice call.
-     */
-    Voice = "voice",
-    /**
-     * This is a video call.
-     */
-    Video = "video",
-}
-
-export type CallStartedTileViewSnapshot = {
-    /**
-     * What type of call this tile needs to render for.
-     */
-    type: CallType;
-    /**
-     * Time when this call was started.
-     */
-    timestamp: string;
-};
-
-export type CallStartedTileViewModel = ViewModel<CallStartedTileViewSnapshot>;
 
 export interface CallStartedTileViewProps {
     vm: CallStartedTileViewModel;

packages/shared-components/src/room/timeline/event-tile/call/CallStartedTile/__snapshots__/CallStartedTileView.test.tsx.snap

@@ -3,11 +3,11 @@
 exports[`CallStartedTileView > renders the tile > video call 1`] = `
 <div>
   <div
-    class="Flex-module_flex CallStartedTileView-module_container"
+    class="Flex-module_flex CallTileView-module_container"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <svg
-      class="CallStartedTileView-module_icon"
+      class="CallTileView-module_icon"
       fill="currentColor"
       height="20"
       viewBox="0 0 24 24"
@@ -19,12 +19,12 @@ exports[`CallStartedTileView > renders the tile > video call 1`] = `
       />
     </svg>
     <div
-      class="CallStartedTileView-module_title"
+      class="CallTileView-module_title"
     >
       Video call
     </div>
     <div
-      class="CallStartedTileView-module_time"
+      class="CallTileView-module_time"
     >
       12:36
     </div>
@@ -35,11 +35,11 @@ exports[`CallStartedTileView > renders the tile > video call 1`] = `
 exports[`CallStartedTileView > renders the tile > voice call 1`] = `
 <div>
   <div
-    class="Flex-module_flex CallStartedTileView-module_container"
+    class="Flex-module_flex CallTileView-module_container"
     style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x); --mx-flex-wrap: nowrap;"
   >
     <svg
-      class="CallStartedTileView-module_icon"
+      class="CallTileView-module_icon"
       fill="currentColor"
       height="20"
       viewBox="0 0 24 24"
@@ -51,12 +51,12 @@ exports[`CallStartedTileView > renders the tile > voice call 1`] = `
       />
     </svg>
     <div
-      class="CallStartedTileView-module_title"
+      class="CallTileView-module_title"
     >
       Voice call
     </div>
     <div
-      class="CallStartedTileView-module_time"
+      class="CallTileView-module_time"
     >
       12:36
     </div>

packages/shared-components/src/room/timeline/event-tile/call/common/CallTileView.module.css

@@ -13,6 +13,7 @@
     border-radius: var(--cpd-space-2x);
     padding: var(--cpd-space-2x) var(--cpd-space-3x);
     box-sizing: border-box;
+    margin: 10px 0;
 }
 
 .title {

packages/shared-components/src/room/timeline/event-tile/call/common/types.ts

@@ -0,0 +1,39 @@
+/*
+ * 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.
+ */
+
+/**
+ * Represents whether a call is a voice call or video call.
+ */
+export const enum CallType {
+    /**
+     * This is a voice call.
+     */
+    Voice = "voice",
+    /**
+     * This is a video call.
+     */
+    Video = "video",
+}
+
+/**
+ * The snapshot that both the call started and call declined tiles expect.
+ */
+export type CallTileViewSnapshot = {
+    /**
+     * What type of call this tile needs to render for.
+     */
+    type: CallType;
+    /**
+     * Time when this call was started.
+     */
+    timestamp: string;
+    /**
+     * Whether this call was declined by our user.
+     * Undefined if not rendering a declined call tile.
+     */
+    isCallDeclinedByUs?: boolean;
+};

packages/shared-components/src/room/timeline/event-tile/call/index.ts

@@ -6,3 +6,5 @@
  */
 
 export * from "./CallStartedTile/CallStartedTileView";
+export * from "./CallDeclinedTile/CallDeclinedTileView";
+export * from "./common/types";