fix(schedule): load scheduled messages from the server; offer to cancel them at logout (#322)

The tray only knew what this browser had scheduled (localStorage), but
Synapse lists every pending one via MSC4140 GET /delayed_events. Load it
when the tray mounts and on window focus (localStorage stays as a first-
paint cache), keeping only non-state m.room.message events. Logout now
says "N scheduled messages still send after you log out" and offers to
cancel them.

Fixes #322

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

package-lock.json

@@ -81,7 +81,7 @@
       },
       "devDependencies": {
         "@axe-core/playwright": "4.13.0",
-        "@lotusguild/element-call-embedded": "0.25.0-lotus.23",
+        "@lotusguild/element-call-embedded": "0.25.0-lotus.22",
         "@playwright/test": "1.63.0",
         "@rollup/plugin-inject": "5.0.5",
         "@rollup/plugin-wasm": "6.2.2",
@@ -2695,9 +2695,9 @@
       "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@lotusguild/element-call-embedded": {
-      "version": "0.25.0-lotus.23",
-      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.23/element-call-embedded-0.25.0-lotus.23.tgz",
-      "integrity": "sha512-vRmcWeJcU0Accyl2x3mqNEzrIe8djE5BekyYbYOSCsMflC98rZgD1mO7KOe7bA1cX7gparRf6sAt1fotHoU+bA==",
+      "version": "0.25.0-lotus.22",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.22/element-call-embedded-0.25.0-lotus.22.tgz",
+      "integrity": "sha512-AimDKZA4xUKEEyl2XUFUSUDl03tBKFv88T/3igKyH2VqNSPMGnqcQJC5HXIkHLTWrOmg8kLcJ//FFbqlUZiLcA==",
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {

package.json

@@ -108,7 +108,7 @@
   },
   "devDependencies": {
     "@axe-core/playwright": "4.13.0",
-    "@lotusguild/element-call-embedded": "0.25.0-lotus.23",
+    "@lotusguild/element-call-embedded": "0.25.0-lotus.22",
     "@playwright/test": "1.63.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",

src/app/components/AccountDataEditor.tsx

@@ -297,7 +297,7 @@ export function AccountDataEditor({
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton type="button" onClick={requestClose} variant="Surface" aria-label="Close">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/components/DeviceVerificationSetup.tsx

@@ -315,7 +315,7 @@ export const DeviceVerificationSetup = forwardRef<HTMLDivElement, DeviceVerifica
               Setup Device Verification
             </Text>
           </Box>
-          <IconButton type="button" size="300" radii="300" onClick={onCancel} aria-label="Cancel">
+          <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>
@@ -361,7 +361,7 @@ export const DeviceVerificationReset = forwardRef<HTMLDivElement, DeviceVerifica
               Reset Device Verification
             </Text>
           </Box>
-          <IconButton type="button" size="300" radii="300" onClick={onCancel} aria-label="Cancel">
+          <IconButton size="300" radii="300" onClick={onCancel} aria-label="Cancel">
             <Icon src={Icons.Cross} />
           </IconButton>
         </Header>

src/app/components/LogoutDialog.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useCallback } from 'react';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import { Dialog, Header, config, Box, Text, Button, Spinner, color } from 'folds';
 import { useAtom } from 'jotai';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
@@ -9,6 +9,8 @@ import { useMatrixClient } from '../hooks/useMatrixClient';
 import { useModalStyle } from '../hooks/useModalStyle';
 import { useCrossSigningActive } from '../hooks/useCrossSigning';
 import { InfoCard } from './info-card';
+import { ScheduledMessage } from '../state/scheduledMessages';
+import { cancelScheduledMessage, fetchScheduledMessages } from '../utils/scheduledMessages';
 import {
   useDeviceVerificationStatus,
   VerificationStatus,
@@ -36,17 +38,36 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
 
     const [callEmbed, setCallEmbed] = useAtom(callEmbedAtom);
 
-    const [logoutState, logout] = useAsyncCallback<void, Error, []>(
-      useCallback(async () => {
-        // [Gitea #29] Logging out mid-call must hang up first, or the MatrixRTC
-        // membership (expires: 4 h) stays behind as a ghost participant and
-        // everyone else sees you "in call" until it times out.
-        if (callEmbed && callEmbed.joined && !callEmbed.disposed) {
-          await hangupCallAndWait(mx, callEmbed);
-          setCallEmbed(undefined);
-        }
-        await logoutClient(mx);
-      }, [mx, callEmbed, setCallEmbed]),
+    // [Gitea #322] Scheduled messages live on the server and still send after
+    // logout, where no client would show them. Say so, and offer to cancel.
+    const [scheduled, setScheduled] = useState<ScheduledMessage[]>([]);
+    useEffect(() => {
+      let alive = true;
+      fetchScheduledMessages(mx)
+        .then((list) => alive && setScheduled(list))
+        .catch(() => undefined);
+      return () => {
+        alive = false;
+      };
+    }, [mx]);
+
+    const [logoutState, logout] = useAsyncCallback<void, Error, [boolean?]>(
+      useCallback(
+        async (cancelScheduled?: boolean) => {
+          if (cancelScheduled) {
+            await Promise.all(scheduled.map((m) => cancelScheduledMessage(mx, m.delayId)));
+          }
+          // [Gitea #29] Logging out mid-call must hang up first, or the MatrixRTC
+          // membership (expires: 4 h) stays behind as a ghost participant and
+          // everyone else sees you "in call" until it times out.
+          if (callEmbed && callEmbed.joined && !callEmbed.disposed) {
+            await hangupCallAndWait(mx, callEmbed);
+            setCallEmbed(undefined);
+          }
+          await logoutClient(mx);
+        },
+        [mx, callEmbed, setCallEmbed, scheduled],
+      ),
     );
 
     const ongoingLogout = logoutState.status === AsyncStatus.Loading;
@@ -93,6 +114,13 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
                 description="Enable device verification or export your encrypted data from settings to avoid losing access to your messages."
               />
             ))}
+          {scheduled.length > 0 && (
+            <InfoCard
+              variant="Warning"
+              title={`${scheduled.length} scheduled message${scheduled.length === 1 ? '' : 's'}`}
+              description="Scheduled messages still send after you log out. Cancel them now if you don't want them sent."
+            />
+          )}
           <Text priority="400">You’re about to log out. Are you sure?</Text>
           {logoutState.status === AsyncStatus.Error && (
             <Text style={{ color: color.Critical.Main }} size="T300">
@@ -102,12 +130,24 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
           <Box direction="Column" gap="200">
             <Button
               variant="Critical"
-              onClick={logout}
+              onClick={() => logout()}
               disabled={ongoingLogout}
               before={ongoingLogout && <Spinner variant="Critical" fill="Solid" size="200" />}
             >
-              <Text size="B400">Logout</Text>
+              <Text size="B400">
+                {scheduled.length > 0 ? 'Logout and keep scheduled messages' : 'Logout'}
+              </Text>
             </Button>
+            {scheduled.length > 0 && (
+              <Button
+                variant="Critical"
+                fill="Soft"
+                onClick={() => logout(true)}
+                disabled={ongoingLogout}
+              >
+                <Text size="B400">Cancel scheduled messages and logout</Text>
+              </Button>
+            )}
             <Button variant="Secondary" fill="Soft" onClick={handleClose} disabled={ongoingLogout}>
               <Text size="B400">Cancel</Text>
             </Button>

src/app/components/create-room/utils.ts

@@ -139,11 +139,8 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
       data.allowFederation,
       data.additionalCreators,
     ),
-    // [Gitea #328] Every non-space room gets call.member at user level, not just
-    // voice rooms: the call button is shown in private group rooms too, and with
-    // Synapse's state_default (50) only admins could start or join a call there
-    // ("You don't have permission to join!").
-    power_level_content_override: createVoiceRoomPowerLevelsOverride(),
+    power_level_content_override:
+      data.type === RoomType.Call ? createVoiceRoomPowerLevelsOverride() : undefined,
     initial_state: initialState,
   };
 

src/app/features/common-settings/developer-tools/StateEventEditor.tsx

@@ -275,7 +275,7 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi
             </Chip>
           </Box>
           <Box shrink="No">
-            <IconButton type="button" onClick={requestClose} variant="Surface" aria-label="Close">
+            <IconButton onClick={requestClose} variant="Surface" aria-label="Close">
               <Icon src={Icons.Cross} />
             </IconButton>
           </Box>

src/app/features/room/PollCreator.tsx

@@ -143,7 +143,7 @@ export function PollCreator({ roomId, threadRootId, onClose }: PollCreatorProps)
                   Create Poll
                 </Text>
               </Box>
-              <IconButton type="button" size="300" radii="300" onClick={onClose} aria-label="Close">
+              <IconButton size="300" radii="300" onClick={onClose} aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/ReportRoomModal.tsx

@@ -118,7 +118,7 @@ export function ReportRoomModal({ roomId, onClose }: ReportRoomModalProps) {
                   Report Room
                 </Text>
               </Box>
-              <IconButton type="button" size="300" onClick={onClose} radii="300" aria-label="Close">
+              <IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/ReportUserModal.tsx

@@ -124,7 +124,7 @@ export function ReportUserModal({ userId, onClose }: ReportUserModalProps) {
                   Report User
                 </Text>
               </Box>
-              <IconButton type="button" size="300" onClick={onClose} radii="300" aria-label="Close">
+              <IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/ScheduleMessageModal.tsx

@@ -202,7 +202,7 @@ export function ScheduleMessageModal({
                   {title}
                 </Text>
               </Box>
-              <IconButton type="button" size="300" radii="300" onClick={onClose} aria-label="Close">
+              <IconButton size="300" radii="300" onClick={onClose} aria-label="Close">
                 <Icon src={Icons.Cross} />
               </IconButton>
             </Header>

src/app/features/room/ScheduledMessagesTray.tsx

@@ -4,7 +4,12 @@ import { IContent } from 'matrix-js-sdk';
 import { Box, Button, Icon, IconButton, Icons, Text, color, config } from 'folds';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { scheduledMessagesAtom, ScheduledMessage } from '../../state/scheduledMessages';
-import { cancelScheduledMessage, sendScheduledMessageNow } from '../../utils/scheduledMessages';
+import {
+  cancelScheduledMessage,
+  fetchScheduledMessages,
+  groupScheduledByRoom,
+  sendScheduledMessageNow,
+} from '../../utils/scheduledMessages';
 import { ScheduleMessageModal } from './ScheduleMessageModal';
 import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
 import { formatFriendlyDateTime } from '../../utils/datetimeInput';
@@ -26,6 +31,26 @@ export function ScheduledMessagesTray({ roomId }: ScheduledMessagesTrayProps) {
 
   const messages = useMemo(() => scheduledMessages.get(roomId) ?? [], [scheduledMessages, roomId]);
 
+  // [Gitea #322] The server is the source of truth: messages scheduled on
+  // another device (or before a logout) show up here and can be cancelled.
+  // localStorage is only a cache for the first paint; on error we keep it.
+  useEffect(() => {
+    let alive = true;
+    const load = () => {
+      fetchScheduledMessages(mx)
+        .then((list) => {
+          if (alive) setScheduledMessages(groupScheduledByRoom(list));
+        })
+        .catch(() => undefined);
+    };
+    load();
+    window.addEventListener('focus', load);
+    return () => {
+      alive = false;
+      window.removeEventListener('focus', load);
+    };
+  }, [mx, roomId, setScheduledMessages]);
+
   // Remove scheduled messages whose time has passed
   useEffect(() => {
     if (messages.length === 0) return undefined;

src/app/features/room/message/Message.tsx

@@ -725,13 +725,7 @@ export const MessageDeleteItem = as<
                     Delete Message
                   </Text>
                 </Box>
-                <IconButton
-                  type="button"
-                  size="300"
-                  onClick={handleClose}
-                  radii="300"
-                  aria-label="Close"
-                >
+                <IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
                   <Icon src={Icons.Cross} />
                 </IconButton>
               </Header>
@@ -871,13 +865,7 @@ export const MessageReportItem = as<
                     Report Message
                   </Text>
                 </Box>
-                <IconButton
-                  type="button"
-                  size="300"
-                  onClick={handleClose}
-                  radii="300"
-                  aria-label="Close"
-                >
+                <IconButton size="300" onClick={handleClose} radii="300" aria-label="Close">
                   <Icon src={Icons.Cross} />
                 </IconButton>
               </Header>

src/app/features/room/message/Reactions.tsx

@@ -69,15 +69,8 @@ export const Reactions = as<'div', ReactionsProps>(
     const measure = useCallback(() => {
       const container = containerRef.current;
       if (!container) return;
-      // [Gitea #305] The width the chips actually get (content box). The border
-      // box grows by 4 px while collapsed (margin -2 / padding 2), and measuring
-      // it made a row within 4 px of fitting flip collapsed↔expanded every frame.
-      const cs = getComputedStyle(container);
-      const rowWidth =
-        container.clientWidth -
-        (parseFloat(cs.paddingLeft) || 0) -
-        (parseFloat(cs.paddingRight) || 0);
-      const gap = parseFloat(cs.columnGap) || 8;
+      const rowWidth = container.getBoundingClientRect().width;
+      const gap = parseFloat(getComputedStyle(container).columnGap) || 8;
       const chips = keys ? keys.split('\u0000').map((k) => chipRefs.current.get(k)) : [];
       const widths = chips.map((el) => el?.getBoundingClientRect().width ?? 0);
       const moreWidth = moreRef.current?.getBoundingClientRect().width ?? 48;
@@ -117,21 +110,8 @@ export const Reactions = as<'div', ReactionsProps>(
         style={{
           ...props.style,
           ...(collapsed && rowHeight
-            ? // 2px breathing room so row-1 focus outlines are not clipped. Longhand
-              // margins so the timeline's marginTop survives (Gitea #305: the
-              // `margin` shorthand overrode it and, once removed, cleared it).
-              {
-                maxHeight: rowHeight + 4,
-                overflow: 'hidden',
-                padding: 2,
-                marginLeft: -2,
-                marginRight: -2,
-                marginBottom: -2,
-                marginTop:
-                  props.style?.marginTop !== undefined
-                    ? `calc(${typeof props.style.marginTop === 'number' ? `${props.style.marginTop}px` : props.style.marginTop} - 2px)`
-                    : -2,
-              }
+            ? // 2px breathing room so row-1 focus outlines are not clipped.
+              { maxHeight: rowHeight + 4, overflow: 'hidden', padding: 2, margin: -2 }
             : {}),
         }}
         ref={(el) => {

src/app/plugins/call/CallEmbed.ts

@@ -31,7 +31,6 @@ import { verifyDenoiseAssets } from './denoiseSmokeCheck';
 import { canDelegateCapability } from './utils';
 import { getCallPageUrl } from './callPageUrl';
 import { restrictWidgetMessages } from '../widgetTransport';
-import { isRingableRoom } from '../../utils/callRing';
 
 // Maximum time to wait for the embedded Element Call iframe to progress from
 // initial load to a ready/joined state. If it hasn't by then, we assume the
@@ -252,18 +251,8 @@ export class CallEmbed {
       verifyDenoiseAssets(denoiseModel).catch(() => undefined);
     }
 
-    // [Gitea #295] Only ask Element Call to notify where a call can ring at all
-    // (DMs, invite-only groups outside a space). In a voice channel or space
-    // room the notification carries an @room mention, so every member got a
-    // highlighted ping (and phone push) whenever a moderator hopped in, and
-    // other clients showed it as a missed call.
-    // `none` needs element-call-embedded ≥ 0.25.0-lotus.23 (older builds ignore it).
     if (CallEmbed.startingCall(intent)) {
-      let notify = 'none';
-      if (isRingableRoom(room, CallEmbed.dmCall(intent))) {
-        notify = CallEmbed.dmCall(intent) ? 'ring' : 'notification';
-      }
-      params.append('sendNotificationType', notify);
+      params.append('sendNotificationType', CallEmbed.dmCall(intent) ? 'ring' : 'notification');
     }
 
     // [Gitea #43] On its own origin when config.json sets elementCallUrl.

src/app/state/scheduledMessages.ts

@@ -21,8 +21,8 @@ const internalAtom = atomWithStorage<Record<string, ScheduledMessage[]>>(
 /**
  * Global atom: Map<roomId, ScheduledMessage[]>
  * Stores all locally-tracked scheduled messages across rooms.
- * MSC4140 has no list endpoint, so we track them ourselves.
- * Backed by localStorage so scheduled messages survive page refreshes.
+ * Loaded from the server's MSC4140 `GET /delayed_events` when the tray mounts
+ * (Gitea #322); localStorage is a cache for the first paint.
  */
 export const scheduledMessagesAtom = atom(
   (get): Map<string, ScheduledMessage[]> => new Map(Object.entries(get(internalAtom))),

src/app/utils/imageCompression.test.ts

@@ -1,11 +1,6 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import {
-  formatFileSize,
-  hasTransparency,
-  isAnimatedWebp,
-  isCompressible,
-} from './imageCompression';
+import { formatFileSize, isCompressible } from './imageCompression';
 
 test('formatFileSize formats bytes below 1KB as B', () => {
   assert.equal(formatFileSize(0), '0 B');
@@ -30,38 +25,14 @@ test('formatFileSize formats values in the MB range', () => {
 test('isCompressible accepts raster image types', () => {
   assert.equal(isCompressible({ type: 'image/png' } as Blob), true);
   assert.equal(isCompressible({ type: 'image/jpeg' } as Blob), true);
+  assert.equal(isCompressible({ type: 'image/gif' } as Blob), true);
   assert.equal(isCompressible({ type: 'image/webp' } as Blob), true);
 });
 
 test('isCompressible rejects svg, empty type, and non-images', () => {
   assert.equal(isCompressible({ type: 'image/svg+xml' } as Blob), false);
-  // [Gitea #331] usually animated; a canvas keeps one frame
-  assert.equal(isCompressible({ type: 'image/gif' } as Blob), false);
-  assert.equal(isCompressible({ type: 'image/apng' } as Blob), false);
   assert.equal(isCompressible({ type: '' } as Blob), false);
   assert.equal(isCompressible({ type: 'application/pdf' } as Blob), false);
   assert.equal(isCompressible({ type: 'text/plain' } as Blob), false);
   assert.equal(isCompressible({ type: 'video/mp4' } as Blob), false);
 });
-
-const webpHeader = (chunk: string, flags = 0) => {
-  const b = new Uint8Array(32);
-  const put = (at: number, str: string) => b.set(new TextEncoder().encode(str), at);
-  put(0, 'RIFF');
-  put(8, 'WEBP');
-  put(12, chunk);
-  b[20] = flags;
-  return b;
-};
-
-test('isAnimatedWebp: VP8X with the animation flag (#331)', () => {
-  assert.equal(isAnimatedWebp(webpHeader('VP8X', 0x02)), true);
-  assert.equal(isAnimatedWebp(webpHeader('VP8X', 0x10)), false, 'alpha flag only');
-  assert.equal(isAnimatedWebp(webpHeader('VP8 ')), false, 'simple lossy');
-  assert.equal(isAnimatedWebp(new Uint8Array(8)), false);
-});
-
-test('hasTransparency (#331)', () => {
-  assert.equal(hasTransparency(new Uint8ClampedArray([1, 2, 3, 255, 4, 5, 6, 255])), false);
-  assert.equal(hasTransparency(new Uint8ClampedArray([1, 2, 3, 255, 0, 0, 0, 0])), true);
-});

src/app/utils/imageCompression.ts

@@ -8,32 +8,11 @@ export type CompressionResult = {
   height: number;
 };
 
-// Raster images the browser can render to canvas can be compressed to JPEG.
-// SVG is vector and must stay as-is. [Gitea #331] GIF and APNG are usually
-// animated, and a canvas keeps only the first frame, so they aren't offered.
-// Empty type string (undetected MIME) is excluded.
-const NOT_COMPRESSIBLE = new Set(['image/svg+xml', 'image/gif', 'image/apng']);
+// Any raster image the browser can render to canvas can be compressed to JPEG.
+// SVG is vector and must stay as-is; GIF animation is lost on canvas but static
+// frames compress fine. Empty type string (undetected MIME) is excluded.
 const isCompressibleType = (type: string): boolean =>
-  type.startsWith('image/') && !NOT_COMPRESSIBLE.has(type);
-
-/**
- * Pure: whether a WebP file is animated. An animated WebP is a VP8X file
- * whose header has the animation flag (byte 20, bit 0x02) and an ANIM chunk.
- */
-export function isAnimatedWebp(bytes: Uint8Array): boolean {
-  const ascii = (at: number, len: number) => String.fromCharCode(...bytes.subarray(at, at + len));
-  if (bytes.length < 21 || ascii(0, 4) !== 'RIFF' || ascii(8, 4) !== 'WEBP') return false;
-  // Bit 0x02 of the VP8X flags byte (no-bitwise: test it arithmetically).
-  return ascii(12, 4) === 'VP8X' && Math.floor(bytes[20] / 2) % 2 === 1;
-}
-
-/** Pure: whether RGBA pixel data has any pixel that isn't fully opaque. */
-export function hasTransparency(rgba: Uint8ClampedArray): boolean {
-  for (let i = 3; i < rgba.length; i += 4) {
-    if (rgba[i] !== 255) return true;
-  }
-  return false;
-}
+  type.startsWith('image/') && type !== 'image/svg+xml' && type !== '';
 
 /** Returns true if this file can be compressed via canvas (any raster image type). */
 export function isCompressible(file: File | Blob): boolean {
@@ -49,8 +28,7 @@ const JPEG_OUTPUT_TYPE = 'image/jpeg';
  *
  * PNG is skipped entirely: it may carry an alpha channel, and re-encoding to
  * JPEG composites transparency onto an opaque (black) background, corrupting the
- * image. Any other image with transparent pixels, and animated WebP, are left
- * alone for the same reason (#331). Returning null makes callers fall back to uploading the lossless
+ * image. Returning null makes callers fall back to uploading the lossless
  * original. The image is decoded with `imageOrientation: 'from-image'` so any
  * EXIF orientation is baked into the pixels instead of being silently dropped.
  */
@@ -61,15 +39,6 @@ export async function compressImage(
   if (!isCompressibleType(file.type)) return null;
   // Skip PNG (potential alpha) — re-encoding to JPEG would flatten transparency.
   if (file.type === 'image/png') return null;
-  // [Gitea #331] An animated WebP would become a single still frame.
-  if (file.type === 'image/webp') {
-    try {
-      const head = new Uint8Array(await file.slice(0, 32).arrayBuffer());
-      if (isAnimatedWebp(head)) return null;
-    } catch {
-      return null;
-    }
-  }
 
   let bitmap: ImageBitmap;
   try {
@@ -91,13 +60,6 @@ export async function compressImage(
   }
   ctx.drawImage(bitmap, 0, 0);
   bitmap.close();
-  // [Gitea #331] JPEG has no alpha: a transparent WebP (sticker, logo) came out
-  // with a black background. Keep any image with transparency as the original.
-  try {
-    if (hasTransparency(ctx.getImageData(0, 0, width, height).data)) return null;
-  } catch {
-    return null;
-  }
 
   return new Promise((resolve) => {
     canvas.toBlob(

src/app/utils/scheduledMessages.test.ts

@@ -6,6 +6,8 @@ import {
   scheduleMessage,
   cancelScheduledMessage,
   restartScheduledMessage,
+  parseDelayedEvents,
+  groupScheduledByRoom,
 } from './scheduledMessages';
 
 // Minimal MatrixClient stub: records every authedRequest call and returns a
@@ -119,3 +121,61 @@ test('cancel/restart url-encode the delay id', async () => {
   await cancelScheduledMessage(mx, 'a/b c');
   assert.equal(calls[0][1], '/delayed_events/a%2Fb%20c');
 });
+
+test('parseDelayedEvents: Synapse shape, messages only, sendAt from running_since + delay (#322)', () => {
+  const res = {
+    delayed_events: [
+      {
+        delay_id: 'syd_a',
+        room_id: '!r:x',
+        type: 'm.room.message',
+        content: { msgtype: 'm.text', body: 'hi' },
+        delay: 60000,
+        running_since: 1000,
+      },
+      {
+        delay_id: 'syd_call',
+        room_id: '!r:x',
+        type: 'org.matrix.msc3401.call.member',
+        state_key: '_@a:x_D',
+        content: {},
+        delay: 8000,
+        running_since: 1000,
+      },
+      { delay_id: 'syd_bad', room_id: '!r:x', type: 'm.room.message', content: {} },
+      null,
+    ],
+  };
+  assert.deepEqual(parseDelayedEvents(res), [
+    { delayId: 'syd_a', roomId: '!r:x', content: { msgtype: 'm.text', body: 'hi' }, sendAt: 61000 },
+  ]);
+});
+
+test('parseDelayedEvents: MSC `scheduled` shape and garbage', () => {
+  const item = {
+    delay_id: 'd',
+    room_id: '!r:x',
+    type: 'm.room.message',
+    content: { body: 'b' },
+    delay_ms: 5,
+    delayed_since_ts: 10,
+  };
+  assert.equal(parseDelayedEvents({ scheduled: [item] })[0].sendAt, 15);
+  assert.deepEqual(parseDelayedEvents(undefined), []);
+  assert.deepEqual(parseDelayedEvents({ delayed_events: 'nope' }), []);
+});
+
+test('groupScheduledByRoom: groups and sorts by sendAt', () => {
+  const m = (delayId: string, roomId: string, sendAt: number) => ({
+    delayId,
+    roomId,
+    content: {},
+    sendAt,
+  });
+  const g = groupScheduledByRoom([m('b', '!1', 20), m('a', '!1', 10), m('c', '!2', 5)]);
+  assert.deepEqual(
+    g.get('!1')?.map((x) => x.delayId),
+    ['a', 'b'],
+  );
+  assert.equal(g.get('!2')?.length, 1);
+});

src/app/utils/scheduledMessages.ts

@@ -1,4 +1,5 @@
 import { IContent, MatrixClient, Method } from 'matrix-js-sdk';
+import type { ScheduledMessage } from '../state/scheduledMessages';
 
 /**
  * Schedule a message via MSC4140 (delayed messages).
@@ -76,3 +77,61 @@ export async function sendScheduledMessageNow(mx: MatrixClient, delayId: string)
     { prefix: '/_matrix/client/unstable/org.matrix.msc4140' },
   );
 }
+
+type DelayedEventItem = {
+  delay_id?: unknown;
+  room_id?: unknown;
+  type?: unknown;
+  state_key?: unknown;
+  content?: unknown;
+  delay?: unknown;
+  delay_ms?: unknown;
+  running_since?: unknown;
+  delayed_since_ts?: unknown;
+};
+
+/**
+ * [Gitea #322] Pure: the user's pending scheduled messages from an MSC4140
+ * `GET /delayed_events` response. Synapse answers `{ delayed_events: [...] }`;
+ * the current MSC shape is `{ scheduled: [...] }`. Call-membership delayed
+ * events share the endpoint, so only non-state `m.room.message`s are kept.
+ */
+export function parseDelayedEvents(res: unknown): ScheduledMessage[] {
+  if (!res || typeof res !== 'object') return [];
+  const r = res as { delayed_events?: unknown; scheduled?: unknown };
+  const list = Array.isArray(r.delayed_events) ? r.delayed_events : r.scheduled;
+  if (!Array.isArray(list)) return [];
+  const out: ScheduledMessage[] = [];
+  list.forEach((raw: DelayedEventItem) => {
+    if (!raw || typeof raw !== 'object') return;
+    if (raw.type !== 'm.room.message' || raw.state_key !== undefined) return;
+    if (typeof raw.delay_id !== 'string' || typeof raw.room_id !== 'string') return;
+    if (!raw.content || typeof raw.content !== 'object') return;
+    const delay = Number(raw.delay ?? raw.delay_ms);
+    const since = Number(raw.running_since ?? raw.delayed_since_ts);
+    if (!Number.isFinite(delay) || !Number.isFinite(since)) return;
+    out.push({
+      delayId: raw.delay_id,
+      roomId: raw.room_id,
+      content: raw.content as IContent,
+      sendAt: since + delay,
+    });
+  });
+  return out;
+}
+
+/** The user's pending scheduled messages, as the server has them. */
+export async function fetchScheduledMessages(mx: MatrixClient): Promise<ScheduledMessage[]> {
+  const res = await mx.http.authedRequest(Method.Get, '/delayed_events', undefined, undefined, {
+    prefix: '/_matrix/client/unstable/org.matrix.msc4140',
+  });
+  return parseDelayedEvents(res);
+}
+
+/** Group by room, the shape of `scheduledMessagesAtom`. */
+export function groupScheduledByRoom(msgs: ScheduledMessage[]): Map<string, ScheduledMessage[]> {
+  const map = new Map<string, ScheduledMessage[]>();
+  msgs.forEach((m) => map.set(m.roomId, [...(map.get(m.roomId) ?? []), m]));
+  map.forEach((list) => list.sort((a, b) => a.sendAt - b.sendAt));
+  return map;
+}