fix(timeline): media gallery / activity log no longer make the timeline drop messages (#259)

The media gallery and activity log register filtered timeline sets on the
room (getOrCreateFilteredTimelineSet); the room re-emits their events as
live RoomEvent.Timeline, so every matching event reached "new event in
the room" listeners twice for the rest of the session. The timeline
window shifted by an extra message per event (loaded messages vanished),
and notifications, unread counts, widget feeds and ring handling saw
duplicates.

isFromFilteredTimelineSet() (unit-tested) identifies emits from a filtered
set; the room timeline, roomToUnread, message notifications, clock-skew
sampling, call ring/decline handling and widget event feeds ignore them.

Verified headless (40 messages, every 5th a file; gallery opened; Bob
sends 3 files + 1 text): before, the first rendered message drifted from
the room start to "file15"; now it stays put.

Fixes #259

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5

src/app/components/CallEmbedProvider.tsx

@@ -20,7 +20,6 @@ import {
 import {
   EventTimelineSetHandlerMap,
   EventType,
-  JoinRule,
   RelationType,
   Room,
   RoomEvent,
@@ -72,7 +71,8 @@ import { useReducedMotion } from '../hooks/useReducedMotion';
 import { useSetting } from '../state/hooks/settings';
 import { useCallPreferences } from '../state/hooks/callPreferences';
 import { settingsAtom } from '../state/settings';
-import { getStateEvent, getStateEvents, getMemberName } from '../utils/room';
+import { getStateEvent, getMemberName, isFromFilteredTimelineSet } from '../utils/room';
+import { isRingableRoom } from '../utils/callRing';
 import { StateEvent } from '../../types/matrix/room';
 import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
 import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
@@ -494,6 +494,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
 
   const handleTimelineEvent: EventTimelineSetHandlerMap[RoomEvent.Timeline] = useCallback(
     async (event, room, toStartOfTimeline, removed, data) => {
+      if (isFromFilteredTimelineSet(data)) return; // [Gitea #259]
       // only process rtc notification reference events.
       // we do not want to wait to decrypt all events.
       if (event.getRelation()?.rel_type !== RelationType.Reference) return;
@@ -581,12 +582,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       // Only ring in rooms where the call button is visible: DMs or invite-only rooms
       // with no space parent. Persistent voice rooms (call rooms), space channels,
       // restricted rooms, and public rooms must never trigger ringing.
-      if (room.isCallRoom()) return;
-      const isDirect = directs.has(room.roomId);
-      const isSpaceChild = getStateEvents(room, StateEvent.SpaceParent).length > 0;
-      const joinRule = room.getJoinRule();
-      const isPrivateInviteGroup = !isSpaceChild && joinRule === JoinRule.Invite;
-      if (!isDirect && !isPrivateInviteGroup) return;
+      if (!isRingableRoom(room, directs.has(room.roomId))) return;
 
       const info: IncomingCallInfo = {
         room,
@@ -644,6 +640,7 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
       data,
     ) => {
       if (eventRoom?.roomId !== room.roomId || !data.liveEvent) return;
+      if (isFromFilteredTimelineSet(data)) return; // [Gitea #259]
       if (event.getType() === EventType.RTCDecline && event.getSender() === myUserId) {
         const related = event.getRelation()?.event_id;
         if (!related || related === refEventId) dismiss(); // declined elsewhere

src/app/features/lotus/backgrounds/animAurora.ts

@@ -51,7 +51,7 @@ const dark: CSSProperties = {
   backgroundSize: '260% 240%, 300% 260%, 240% 280%, 220% 200%, 100% 100%, 100% 100%',
   backgroundPosition: '0% 30%, 100% 70%, 50% 0%, 20% 80%, 50% 50%, 50% 50%',
   backgroundRepeat: 'no-repeat',
-  animation: `${auroraFlow} 60s ease-in-out infinite`,
+  animation: `${auroraFlow} 60s steps(180) infinite`,
 };
 
 const light: CSSProperties = {
@@ -75,7 +75,7 @@ const light: CSSProperties = {
   backgroundSize: '260% 240%, 300% 260%, 240% 280%, 220% 200%, 100% 100%, 100% 100%',
   backgroundPosition: '0% 30%, 100% 70%, 50% 0%, 20% 80%, 50% 50%, 50% 50%',
   backgroundRepeat: 'no-repeat',
-  animation: `${auroraFlow} 60s ease-in-out infinite`,
+  animation: `${auroraFlow} 60s steps(180) infinite`,
 };
 
 export const animAurora: ChatBgVariants = { dark, light };

src/app/features/lotus/backgrounds/animFireflies.ts

@@ -55,7 +55,7 @@ export const animFireflies: ChatBgVariants = {
       '0 0', // wash A   (static)
       '0 0', // wash B   (static)
     ].join(','),
-    animation: `${firefliesDrift} 44s linear infinite`,
+    animation: `${firefliesDrift} 44s steps(528) infinite`,
   },
 
   // Light: a cozy warm dim-dusk. No harsh dots on white — soft amber motes with
@@ -93,6 +93,6 @@ export const animFireflies: ChatBgVariants = {
       '0 0', // wash A   (static)
       '0 0', // wash B   (static)
     ].join(','),
-    animation: `${firefliesDrift} 44s linear infinite`,
+    animation: `${firefliesDrift} 44s steps(528) infinite`,
   },
 };

src/app/features/lotus/backgrounds/animPulse.ts

@@ -76,7 +76,7 @@ export const animPulse: ChatBgVariants = {
       '0 0', // base wash
       '0 0', // vignette
     ].join(','),
-    animation: `${gridPulse} 22s ease-in-out infinite`,
+    animation: `${gridPulse} 22s steps(528) infinite`,
   },
 
   // Light: soft slate-blue grid on pale cool-white, a gentle luminance breathe.
@@ -116,6 +116,6 @@ export const animPulse: ChatBgVariants = {
       '0 0', // base wash
       '0 0', // vignette
     ].join(','),
-    animation: `${gridPulse} 22s ease-in-out infinite`,
+    animation: `${gridPulse} 22s steps(528) infinite`,
   },
 };

src/app/features/lotus/backgrounds/animRain.ts

@@ -97,7 +97,7 @@ export const animRain: ChatBgVariants = {
     ].join(','),
     backgroundSize: ['260px 200px', '100% 100%', '100% 100%', '100% 100%'].join(','),
     backgroundPosition: ['0 0', '0 0', '0 0', '0 0'].join(','),
-    animation: `${rainFall} 12s linear infinite`,
+    animation: `${rainFall} 12s steps(288) infinite`,
   },
 
   // Light: soft teal-grey streaks on a pale cool base — elegant, never neon.
@@ -118,6 +118,6 @@ export const animRain: ChatBgVariants = {
     ].join(','),
     backgroundSize: ['260px 200px', '100% 100%', '100% 100%', '100% 100%'].join(','),
     backgroundPosition: ['0 0', '0 0', '0 0', '0 0'].join(','),
-    animation: `${rainFall} 12s linear infinite`,
+    animation: `${rainFall} 12s steps(288) infinite`,
   },
 };

src/app/features/lotus/backgrounds/animStars.ts

@@ -68,7 +68,7 @@ export const animStars: ChatBgVariants = {
       '0 0', // nebula A
       '0 0', // nebula B
     ].join(','),
-    animation: `${starDrift} 90s linear infinite`,
+    animation: `${starDrift} 90s steps(1080) infinite`,
   },
 
   // Light: an airy pre-dawn sky. No literal white-on-white stars — instead very
@@ -112,6 +112,6 @@ export const animStars: ChatBgVariants = {
       '0 0', // wash A
       '0 0', // wash B
     ].join(','),
-    animation: `${starDrift} 100s linear infinite`,
+    animation: `${starDrift} 100s steps(1200) infinite`,
   },
 };

src/app/features/lotus/chatBackground.ts

@@ -149,6 +149,11 @@ export const getChatBg = (
   }
   // For animated backgrounds, promote the element to its own compositor layer so
   // background-position keyframes don't trigger repaints on descendant elements.
+  // [Gitea #337] background-position can't run on the compositor, so every
+  // animation frame repaints the whole chat area (45 to 70% main-thread busy
+  // at 60 fps). The drifts are slow (3–22 px/s), so each animation uses steps():
+  // ~12 updates/s for the slow ones, ~24/s for rain and pulse: visually the
+  // same, a fraction of the repaints.
   if (style.animation) {
     return { ...style, willChange: 'background-position', contain: 'paint' };
   }

src/app/features/room/RoomTimeline.tsx

@@ -90,6 +90,7 @@ import {
   isMembershipChanged,
   reactionOrEditEvent,
   sendRoomEvent,
+  isFromFilteredTimelineSet,
 } from '../../utils/room';
 import { getLastEditDiff } from '../../utils/editDiff';
 import { tick } from '../../utils/haptics';
@@ -138,6 +139,7 @@ import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
 import { useIsDirectRoom } from '../../hooks/useRoom';
+import { isRingableRoom } from '../../utils/callRing';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
@@ -409,6 +411,9 @@ const useLiveEventArrive = (room: Room, onArrive: (mEvent: MatrixEvent) => void)
       data,
     ) => {
       if (eventRoom?.roomId !== room.roomId || !data.liveEvent) return;
+      // [Gitea #259] The media gallery / activity log register filtered timeline
+      // sets whose events the room re-emits as live: don't count them twice.
+      if (isFromFilteredTimelineSet(data)) return;
       onArrive(mEvent);
     };
     const handleRedaction: RoomEventHandlerMap[RoomEvent.Redaction] = (mEvent, eventRoom) => {
@@ -2030,6 +2035,9 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       [EventType.RTCNotification]: (mEventId, mEvent, item) => {
         const senderId = mEvent.getSender() ?? '';
         if (!senderId || senderId === mx.getUserId()) return null;
+        // Same rule as ringing: no "Missed call" in voice rooms or space
+        // channels, where starting a call is just joining the channel.
+        if (!isRingableRoom(room, direct)) return null;
         const content = mEvent.getContent();
         const mention =
           content['m.mentions']?.room ||

src/app/features/room/widgets/RoomWidgetView.tsx

@@ -14,6 +14,7 @@ import { GeneralWidgetDriver } from './GeneralWidgetDriver';
 import { WidgetPermissionRequest, isWidgetUrlSafe } from './widgetUtils';
 import { restrictWidgetMessages } from '../../../plugins/widgetTransport';
 import { WidgetPermissionPrompt } from './WidgetPermissionPrompt';
+import { isFromFilteredTimelineSet } from '../../../utils/room';
 
 type PendingAsk = {
   requests: WidgetPermissionRequest[];
@@ -111,6 +112,7 @@ export function RoomWidgetView({ room, widget }: RoomWidgetViewProps) {
     };
     const onTimeline: RoomEventHandlerMap[RoomEvent.Timeline] = (ev, r, toStart, removed, data) => {
       if (toStart || removed || !data?.liveEvent) return;
+      if (isFromFilteredTimelineSet(data)) return; // [Gitea #259] don't feed widgets each event twice
       if (ev.isBeingDecrypted()) ev.once(MatrixEventEvent.Decrypted, feed);
       else feed(ev);
     };

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -49,6 +49,7 @@ import {
   getNotificationType,
   getUnreadInfo,
   isNotificationEvent,
+  isFromFilteredTimelineSet,
 } from '../../utils/room';
 import { NotificationType } from '../../../types/matrix/room';
 import { mxcUrlToHttp } from '../../utils/matrix';
@@ -679,6 +680,7 @@ function MessageNotifications() {
       data,
     ) => {
       if (mx.getSyncState() !== 'SYNCING') return;
+      if (isFromFilteredTimelineSet(data)) return; // [Gitea #259] no duplicate notifications
       if (document.hasFocus() && (selectedRoomId === room?.roomId || notificationSelected)) return;
       if (
         !room ||
@@ -1118,6 +1120,7 @@ function ClockSkewFeature() {
       data,
     ) => {
       if (!data.liveEvent) return;
+      if (isFromFilteredTimelineSet(data)) return; // [Gitea #259]
       // Only events our homeserver stamped: a federated event's
       // origin_server_ts is the other server's clock.
       const senderServer = mEvent.getSender()?.split(':').slice(1).join(':');

src/app/state/room/roomToUnread.ts

@@ -24,6 +24,7 @@ import {
   getUnreadInfo,
   getUnreadInfos,
   isNotificationEvent,
+  isFromFilteredTimelineSet,
 } from '../../utils/room';
 import { roomToParentsAtom } from './roomToParents';
 import { useStateEventCallback } from '../../hooks/useStateEventCallback';
@@ -236,6 +237,7 @@ export const useBindRoomToUnreadAtom = (mx: MatrixClient, unreadAtom: typeof roo
       data: IRoomTimelineData,
     ) => {
       if (!room || !data.liveEvent || room.isSpaceRoom() || !isNotificationEvent(mEvent)) return;
+      if (isFromFilteredTimelineSet(data)) return; // [Gitea #259]
       // Single-owner rule: thread replies drive the room badge via
       // RoomEvent.UnreadNotifications below — ignore them here so the count is
       // never double-driven / mis-attributed to the main timeline.

src/app/utils/callRing.test.ts

@@ -0,0 +1,29 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import type { Room } from 'matrix-js-sdk';
+import { isRingableRoom } from './callRing';
+
+const fakeRoom = (opts: { callRoom?: boolean; joinRule?: string; spaceParent?: boolean }): Room =>
+  ({
+    isCallRoom: () => !!opts.callRoom,
+    getJoinRule: () => opts.joinRule ?? 'invite',
+    getLiveTimeline: () => ({
+      getState: () => ({ getStateEvents: () => (opts.spaceParent ? [{}] : []) }),
+    }),
+  }) as unknown as Room;
+
+test('voice rooms never ring or show "missed call", even as DMs', () => {
+  assert.equal(isRingableRoom(fakeRoom({ callRoom: true }), false), false);
+  assert.equal(isRingableRoom(fakeRoom({ callRoom: true }), true), false);
+});
+
+test('DMs and invite-only groups outside a space ring', () => {
+  assert.equal(isRingableRoom(fakeRoom({ joinRule: 'public' }), true), true);
+  assert.equal(isRingableRoom(fakeRoom({ joinRule: 'invite' }), false), true);
+});
+
+test('space channels, public and restricted rooms do not ring', () => {
+  assert.equal(isRingableRoom(fakeRoom({ joinRule: 'invite', spaceParent: true }), false), false);
+  assert.equal(isRingableRoom(fakeRoom({ joinRule: 'public' }), false), false);
+  assert.equal(isRingableRoom(fakeRoom({ joinRule: 'restricted' }), false), false);
+});

src/app/utils/callRing.ts

@@ -0,0 +1,18 @@
+import { JoinRule, Room } from 'matrix-js-sdk';
+import { StateEvent } from '../../types/matrix/room';
+import { getStateEvents } from './room';
+
+/**
+ * Whether a call notification in this room may ring — and, by the same rule,
+ * whether an unanswered one may show as "Missed call" (Gitea #162 follow-up).
+ * Only DMs and invite-only groups outside any space ring, i.e. rooms where the
+ * call button is shown. Persistent voice rooms, space channels, restricted and
+ * public rooms never do: joining a voice channel alone is normal and isn't a
+ * "call" anyone missed.
+ */
+export const isRingableRoom = (room: Room, isDirect: boolean): boolean => {
+  if (room.isCallRoom()) return false;
+  if (isDirect) return true;
+  const isSpaceChild = getStateEvents(room, StateEvent.SpaceParent).length > 0;
+  return !isSpaceChild && room.getJoinRule() === JoinRule.Invite;
+};

src/app/utils/filteredTimeline.test.ts

@@ -0,0 +1,20 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import type { IRoomTimelineData } from 'matrix-js-sdk';
+import { isFromFilteredTimelineSet } from './room';
+
+const data = (filter: unknown): IRoomTimelineData =>
+  ({
+    liveEvent: true,
+    timeline: { getTimelineSet: () => ({ getFilter: () => filter }) },
+  }) as unknown as IRoomTimelineData;
+
+test('isFromFilteredTimelineSet: gallery/activity-log sets are filtered, the main set is not (#259)', () => {
+  assert.equal(isFromFilteredTimelineSet(data({ filterId: 'media' })), true);
+  assert.equal(isFromFilteredTimelineSet(data(undefined)), false);
+  assert.equal(isFromFilteredTimelineSet(undefined), false);
+  assert.equal(
+    isFromFilteredTimelineSet({ liveEvent: true } as unknown as IRoomTimelineData),
+    false,
+  );
+});

src/app/utils/room.ts

@@ -20,6 +20,7 @@ import {
   Room,
   RoomMember,
   TimelineEvents,
+  IRoomTimelineData,
 } from 'matrix-js-sdk';
 import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
 import type { RoomMessageEventContent } from 'matrix-js-sdk/lib/@types/events';
@@ -847,3 +848,14 @@ export const guessPerfectParent = (
 
   return perfectParent;
 };
+
+/**
+ * [Gitea #259] Whether a RoomEvent.Timeline emit came from a FILTERED timeline
+ * set. The media gallery and activity log register filtered sets on the room
+ * (getOrCreateFilteredTimelineSet), and the room re-emits their events with
+ * liveEvent: true, so listeners that mean "a new event in the room" saw each
+ * matching event twice (the timeline window drifted, notifications doubled).
+ * The room's main and thread sets have no filter.
+ */
+export const isFromFilteredTimelineSet = (data?: IRoomTimelineData): boolean =>
+  !!data?.timeline?.getTimelineSet()?.getFilter();