feat(widgets): keep a widget on screen while you navigate away (#205)

MSC2931: a widget with m.always_on_screen (auto-granted) can send
set_always_on_screen; the host now answers it, and a widget that asked
keeps running in a small floating window (title, Back to room, close)
when the Widgets panel closes or you switch rooms. Back to room returns
to it with the panel open on that widget, without reloading it.

Moving an iframe reloads it, so widget frames now live in an app-level
layer from the start (widgetSessions.ts) and are positioned over the
panel's placeholder while docked. A widget that did not ask is torn
down as before. One floating widget at a time; it also goes when the
widget withdraws, is removed from the room, or on logout. A permission
request while floating grants nothing extra.

Refs #205

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

.gitleaks.toml

@@ -12,6 +12,9 @@ regexes = [
   '''https?://matrix\.lotusguild\.org''',
   '''https?://code\.lotusguild\.org/api/packages/LotusGuild/npm/''',
   '''matrix\.lotusguild\.org''',
+  # Lotus Chat desktop updater's minisign PUBLIC key (published in the
+  # cinny-desktop README); utils/updateErrors.ts verifies Linux downloads with it.
+  '''RWRZZdyii05/NUcz337A5SAbiZK\+NPVDWuiL2mM5Jk1p/LfRmNfiZ/6l''',
 ]
 paths = [
   '''config\.json''',

LOTUS_FEATURES.md

@@ -233,7 +233,7 @@ All decoration files are 256×256 APNGs. They animate natively in all modern bro
 Decoration preference is stored in the public Matrix profile field `io.lotus.avatar_decoration` (a slug string, e.g. `lotus_flower`). Any Lotus Chat user viewing your profile sees your current decoration.
 
 **CDN:**
-Files are self-hosted on the Lotus Nextcloud instance. Direct access: `https://drive.lotusguild.org/public.php/dav/files/{token}/cinny-decorations/{slug}.png`. `<img>` elements load cross-origin freely — no CORS headers needed.
+Static files at `https://chat.lotusguild.org/decorations/{slug}.png` (thumbnails: `thumbs/{slug}.webp`), cached for a week. They come from the versioned `avatar-decorations` package in Gitea's package registry, installed by the matrix repo's LXC 106 deploy (see its README, "Avatar decorations"). To add or replace decorations, publish a new package version there, then update the catalog in `avatarDecorations.ts`. They used to be served from Nextcloud (matrix #22). `<img>` elements load cross-origin freely, so no CORS headers are needed.
 
 **Module-level cache with in-flight deduplication:**
 `useAvatarDecoration(userId)` fetches the profile field once per user per session. A `Map<userId, slug|null>` cache prevents redundant requests; a second `pending` waiters map ensures multiple components requesting the same userId simultaneously share one HTTP request rather than firing duplicates.

e2e/a11y.spec.ts

@@ -118,8 +118,26 @@ test.describe('accessibility', () => {
     test('room settings', async ({ page }) => {
       await page.getByRole('button', { name: 'More Options' }).first().click();
       await page.getByText('Room Settings', { exact: true }).click();
-      await expect(page.getByRole('dialog').first()).toBeVisible();
+      // [Gitea #278] The dialog has an accessible name.
+      await expect(page.getByRole('dialog', { name: 'A11y Room settings' })).toBeVisible();
       await auditPage(page, 'room settings');
+      // [Gitea #278] aria-selected on the power chips, unlabelled pack name and
+      // export date inputs were only on these pages.
+      // One page at a time, in order.
+      for (const name of ['Permissions', 'Emojis & Stickers', 'Export']) {
+        // eslint-disable-next-line no-await-in-loop
+        await page.getByRole('dialog').getByText(name, { exact: true }).first().click();
+        // eslint-disable-next-line no-await-in-loop
+        await page.waitForTimeout(1000);
+        // eslint-disable-next-line no-await-in-loop
+        await auditPage(page, `room settings: ${name}`);
+      }
+    });
+
+    test('inbox invites', async ({ page }) => {
+      await page.goto('/inbox/invites/');
+      await expect(page.getByRole('button', { name: /Known|Unknown|Spam/ }).first()).toBeVisible();
+      await auditPage(page, 'inbox invites');
     });
   });
 });

e2e/local-homeserver.spec.ts

@@ -265,6 +265,46 @@ test.describe('local homeserver regression', () => {
     await expect.poll(threadUnread).toBe(false);
   });
 
+  test("a thread I don't follow stays unread while I view the room (#314)", async ({ page }) => {
+    const room = await createRoom(alice, 'Unfollowed Thread Room', { invite: [bob.userId] });
+    await joinRoom(bob, room);
+    const inThread = (root: string) => ({
+      'm.relates_to': {
+        rel_type: 'm.thread',
+        event_id: root,
+        is_falling_back: true,
+        'm.in_reply_to': { event_id: root },
+      },
+    });
+    const root = await sendText(bob, room, "bob's thread root");
+    await loginUI(page, alice);
+    await openRoom(page, room);
+    await sendText(bob, room, 'reply in bob thread', inThread(root));
+    await sendText(bob, room, 'newer main message 314');
+    await expect(page.getByText('newer main message 314')).toBeVisible();
+    const threadUnread = async () => {
+      const filter = {
+        room: {
+          rooms: [room],
+          timeline: { limit: 1, unread_thread_notifications: true, not_types: [uniq('x.')] },
+        },
+      };
+      const sync = await api<{
+        rooms: {
+          join: Record<string, { unread_thread_notifications?: Record<string, unknown> }>;
+        };
+      }>(
+        'GET',
+        `/_matrix/client/v3/sync?timeout=0&filter=${enc(JSON.stringify(filter))}`,
+        alice.token,
+      );
+      return root in (sync.rooms.join[room]?.unread_thread_notifications ?? {});
+    };
+    await page.waitForTimeout(2000); // let any receipt the room view would send go out
+    // Viewing the room used to read every thread you don't follow (#314).
+    expect(await threadUnread()).toBe(true);
+  });
+
   test('timeline image opens the gallery lightbox (#219) @webkit', async ({ page }) => {
     const room = await createRoom(alice, 'Lightbox Room');
     const png = Buffer.from(

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.28",
         "@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.28",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.28/element-call-embedded-0.25.0-lotus.28.tgz",
+      "integrity": "sha512-IFBHHSVw0CzrrLgx3oIIcJmBB4YMb8at4oVuSKXifZ7MmyHydxg9U3sTlZGgLUjMVrrAXj4gFzCksGHet4LSQw==",
       "dev": true
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {

package.json

@@ -12,7 +12,7 @@
     "build": "vite build",
     "preview": "vite preview",
     "lint": "npm run check:eslint && npm run check:prettier",
-    "check:eslint": "eslint src/* --max-warnings 36",
+    "check:eslint": "eslint src/* --max-warnings 29",
     "check:prettier": "prettier --check .",
     "fix:prettier": "prettier --write .",
     "typecheck": "tsc --noEmit",
@@ -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.28",
     "@playwright/test": "1.63.0",
     "@rollup/plugin-inject": "5.0.5",
     "@rollup/plugin-wasm": "6.2.2",

src/app/components/CallEmbedProvider.tsx

@@ -86,10 +86,14 @@ import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
 import { CallsUnavailableMessage } from '../features/call/CallsUnavailable';
 import { zIndices } from '../styles/zIndex';
+import { useReconnectWhenSynced } from '../hooks/useCallError';
 import { useDenoiseNotices } from '../hooks/useDenoiseNotices';
 
 const PIP_MIN_W = 200;
 const PIP_MIN_H = 112;
+/** [Gitea #323] Minimised PiP bar size. */
+const PIP_MINI_W = 220;
+const PIP_MINI_H = 40;
 /** Default PiP top: just below the 64px-ish room header. */
 const PIP_DEFAULT_TOP = 72;
 
@@ -814,6 +818,7 @@ function CallUtils({ embed, joined }: { embed: CallEmbed; joined: boolean }) {
   useCallPolicyRevokedToast(embed, joined);
   useCallEndedToast(embed);
   useScreenshareNotices(embed);
+  useReconnectWhenSynced(embed.control);
   useDenoiseNotices(embed);
   // [Gitea #43] The in-frame screenshare button follows the same room policy
   // as the host bar's (hidden where the server would refuse the share).
@@ -1003,6 +1008,28 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
   );
 
   const [pipIsFullscreen, setPipIsFullscreen] = useState(false);
+  // [Gitea #323] Minimised PiP: a small draggable bar (room name + expand)
+  // instead of the video. Remembered; phones start minimised.
+  const [pipMinimized, setPipMinimized] = useState<boolean>(() => {
+    try {
+      const v = localStorage.getItem('pip-minimized');
+      if (v !== null) return v === '1';
+    } catch {
+      /* storage unavailable */
+    }
+    return window.innerWidth < 600;
+  });
+  const pipFullSizeRef = React.useRef({ width: 280, height: 158 });
+  const togglePipMinimized = useCallback(() => {
+    setPipMinimized((m) => {
+      try {
+        localStorage.setItem('pip-minimized', m ? '0' : '1');
+      } catch {
+        /* storage unavailable */
+      }
+      return !m;
+    });
+  }, []);
   useEffect(() => {
     const onFsChange = () => setPipIsFullscreen(!!document.fullscreenElement);
     document.addEventListener('fullscreenchange', onFsChange);
@@ -1103,6 +1130,26 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
     }
   }, [pipMode, callVisible]);
 
+  // [Gitea #323] Apply the minimised / full PiP size (after the entry effect
+  // below has positioned and sized it). Keeps the bar on screen.
+  React.useEffect(() => {
+    const el = callEmbedRef.current;
+    if (!el || !pipMode) return;
+    if (pipMinimized) {
+      if (el.offsetHeight > PIP_MINI_H) {
+        pipFullSizeRef.current = { width: el.offsetWidth, height: el.offsetHeight };
+      }
+      el.style.width = `${PIP_MINI_W}px`;
+      el.style.height = `${PIP_MINI_H}px`;
+    } else {
+      el.style.width = `${pipFullSizeRef.current.width}px`;
+      el.style.height = `${pipFullSizeRef.current.height}px`;
+    }
+    const rect = el.getBoundingClientRect();
+    el.style.left = `${Math.max(0, Math.min(rect.left, window.innerWidth - el.offsetWidth))}px`;
+    el.style.top = `${Math.max(0, Math.min(rect.top, window.innerHeight - el.offsetHeight))}px`;
+  }, [pipMode, pipMinimized, callEmbedRef]);
+
   React.useEffect(() => {
     if (!pipMode) return;
     const onPipWindowResize = (): void => {
@@ -1421,19 +1468,50 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                 position: 'absolute',
                 inset: 0,
                 zIndex: 1,
-                background: 'transparent',
+                // Minimised: cover the frame so only the bar shows.
+                background: pipMinimized ? color.Surface.Container : 'transparent',
                 cursor: 'grab',
                 // [Gitea #43] The call's "Share your screen?" prompt is drawn
                 // inside the frame: let the click reach its Share button.
                 pointerEvents: pipPromptOpen ? 'none' : undefined,
                 display: 'flex',
-                alignItems: 'flex-start',
                 justifyContent: 'flex-end',
+                alignItems: pipMinimized ? 'center' : 'flex-start',
                 padding: '6px',
               }}
             >
-              <div style={{ display: 'flex', gap: config.space.S100, alignItems: 'center' }}>
-                {document.fullscreenEnabled && (
+              <div
+                style={{
+                  display: 'flex',
+                  gap: config.space.S100,
+                  alignItems: 'center',
+                  ...(pipMinimized ? { width: '100%' } : {}),
+                }}
+              >
+                {/* Leftmost: the top-right corner is a resize handle. */}
+                <IconButton
+                  type="button"
+                  size="300"
+                  radii="300"
+                  variant="Surface"
+                  fill="None"
+                  aria-label={pipMinimized ? 'Expand call' : 'Minimise call'}
+                  aria-pressed={pipMinimized}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    togglePipMinimized();
+                  }}
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onTouchStart={(e) => e.stopPropagation()}
+                  style={{
+                    background: 'rgba(0,0,0,0.65)',
+                    backdropFilter: 'blur(4px)',
+                    color: '#fff',
+                  }}
+                >
+                  <Icon size="100" src={pipMinimized ? Icons.ChevronTop : Icons.Minus} />
+                </IconButton>
+                {!pipMinimized && document.fullscreenEnabled && (
                   <IconButton
                     type="button"
                     size="300"
@@ -1465,14 +1543,23 @@ export function CallEmbedProvider({ children }: CallEmbedProviderProps) {
                     fontSize: '11px',
                     fontWeight: 600,
                     pointerEvents: 'none',
+                    ...(pipMinimized
+                      ? {
+                          flexGrow: 1,
+                          minWidth: 0,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                          whiteSpace: 'nowrap',
+                        }
+                      : {}),
                   }}
                 >
-                  ↗ Return to call
+                  {pipMinimized ? `↗ ${callEmbed.room.name ?? 'Call'}` : '↗ Return to call'}
                 </div>
               </div>
             </div>
-            <PipMuteOverlay callEmbed={callEmbed} />
-            {(['se', 'sw', 'ne', 'nw'] as Corner[]).map((corner) => {
+            {!pipMinimized && <PipMuteOverlay callEmbed={callEmbed} />}
+            {(pipMinimized ? [] : (['se', 'sw', 'ne', 'nw'] as Corner[])).map((corner) => {
               const s = corner.includes('s');
               const e2 = corner.includes('e');
               const dots = [

src/app/components/ManualVerification.tsx

@@ -82,7 +82,7 @@ export function ManualVerificationMethodSwitcher({
                 <MenuItem
                   size="300"
                   variant="Surface"
-                  aria-selected={value === ManualVerificationMethod.RecoveryPassphrase}
+                  aria-pressed={value === ManualVerificationMethod.RecoveryPassphrase}
                   radii="300"
                   onClick={() => handleSelect(ManualVerificationMethod.RecoveryPassphrase)}
                 >
@@ -93,7 +93,7 @@ export function ManualVerificationMethodSwitcher({
                 <MenuItem
                   size="300"
                   variant="Surface"
-                  aria-selected={value === ManualVerificationMethod.RecoveryKey}
+                  aria-pressed={value === ManualVerificationMethod.RecoveryKey}
                   radii="300"
                   onClick={() => handleSelect(ManualVerificationMethod.RecoveryKey)}
                 >

src/app/components/Modal500.tsx

@@ -7,8 +7,10 @@ import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
 type Modal500Props = {
   requestClose: () => void;
   children: ReactNode;
+  /** [Gitea #278] The dialog's accessible name (role="dialog" needs one). */
+  label: string;
 };
-export function Modal500({ requestClose, children }: Modal500Props) {
+export function Modal500({ requestClose, children, label }: Modal500Props) {
   const isMobile = useScreenSizeContext() === ScreenSize.Mobile;
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
@@ -26,6 +28,7 @@ export function Modal500({ requestClose, children }: Modal500Props) {
             variant="Background"
             role="dialog"
             aria-modal="true"
+            aria-label={label}
             // On mobile expand to fill the viewport. On desktop fall back to the
             // folds `size="500"` width (~50rem) — overriding maxWidth here would
             // squish the two-pane settings layout.

src/app/components/SecretStorage.tsx

@@ -1,6 +1,7 @@
 import React, { FormEventHandler, useCallback } from 'react';
 import { Box, Text, Button, Spinner, color } from 'folds';
 import { decodeRecoveryKey, deriveRecoveryKeyFromPassphrase } from 'matrix-js-sdk/lib/crypto-api';
+import type { SecretStorageKeyDescription } from 'matrix-js-sdk/lib/secret-storage';
 import { PasswordInput } from './password-input';
 import {
   SecretStorageKeyContent,
@@ -39,7 +40,10 @@ export function SecretStorageRecoveryPassphrase({
           bits,
         );
 
-        const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
+        const match = await mx.secretStorage.checkKey(
+          decodedRecoveryKey,
+          keyContent as SecretStorageKeyDescription,
+        );
 
         if (!match) {
           throw new Error('Invalid recovery passphrase.');
@@ -132,7 +136,10 @@ export function SecretStorageRecoveryKey({
       async (recoveryKey) => {
         const decodedRecoveryKey = decodeRecoveryKey(recoveryKey);
 
-        const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
+        const match = await mx.secretStorage.checkKey(
+          decodedRecoveryKey,
+          keyContent as SecretStorageKeyDescription,
+        );
 
         if (!match) {
           throw new Error('Invalid recovery key.');

src/app/components/editor/Editor.tsx

@@ -117,7 +117,14 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
 
     const renderPlaceholder = useCallback(
       ({ attributes, children }: RenderPlaceholderProps) => (
-        <span {...attributes} className={css.EditorPlaceholderContainer}>
+        <span
+          {...attributes}
+          // [Gitea #278] Slate puts an inline `opacity: 0.333` on the placeholder,
+          // which beat EditorPlaceholderContainer's AA-contrast opacity (#222):
+          // measured 2.66:1. Drop it so the class decides.
+          style={{ ...attributes.style, opacity: undefined }}
+          className={css.EditorPlaceholderContainer}
+        >
           {/* Inner component to style the actual text position and appearance */}
           <Text as="span" className={css.EditorPlaceholderTextVisual} truncate>
             {children}

src/app/components/image-pack-view/UsageSwitcher.tsx

@@ -39,7 +39,7 @@ export function UsageSelector({ selected, onChange }: UsageSelectorProps) {
           key={getUsageStr(usage)}
           size="300"
           variant={isSelected(usage) ? 'SurfaceVariant' : 'Surface'}
-          aria-selected={isSelected(usage)}
+          aria-pressed={isSelected(usage)}
           radii="300"
           onClick={() => onChange(usage)}
         >

src/app/components/setting-tile/SettingTile.tsx

@@ -34,7 +34,8 @@ export function SettingTile({ title, description, before, after, children }: Set
   });
 
   return (
-    <Box alignItems="Center" gap="300">
+    // data-setting-tile: lets a group card draw dividers between tiles only (#273).
+    <Box alignItems="Center" gap="300" data-setting-tile="">
       {before && <Box shrink="No">{before}</Box>}
       <Box grow="Yes" direction="Column" gap="100">
         {title && (

src/app/components/time-date/DatePicker.tsx

@@ -69,7 +69,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   variant={selectedDay === day ? 'Primary' : 'SurfaceVariant'}
                   fill="None"
                   radii="300"
-                  aria-selected={selectedDay === day}
+                  aria-pressed={selectedDay === day}
                   onClick={() => handleDay(day)}
                   disabled={
                     (selectedYear === minYear && selectedMonth === minMonth && day < minDay) ||
@@ -90,7 +90,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   variant={selectedMonth === month ? 'Primary' : 'SurfaceVariant'}
                   fill="None"
                   radii="300"
-                  aria-selected={selectedMonth === month}
+                  aria-pressed={selectedMonth === month}
                   onClick={() => handleMonth(month)}
                   disabled={
                     (selectedYear === minYear && month < minMonth) ||
@@ -115,7 +115,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
                   variant={selectedYear === year ? 'Primary' : 'SurfaceVariant'}
                   fill="None"
                   radii="300"
-                  aria-selected={selectedYear === year}
+                  aria-pressed={selectedYear === year}
                   onClick={() => handleYear(year)}
                 >
                   <Text size="T300">{year}</Text>

src/app/components/time-date/TimePicker.tsx

@@ -71,7 +71,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                     variant={hour === selectedHour ? 'Primary' : 'Background'}
                     fill="None"
                     radii="300"
-                    aria-selected={hour === selectedHour}
+                    aria-pressed={hour === selectedHour}
                     onClick={() => handleHour(hour)}
                     disabled={(minDay && hour < minHour24) || (maxDay && hour > maxHour24)}
                   >
@@ -90,7 +90,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                       variant={hour === selectedHour ? 'Primary' : 'Background'}
                       fill="None"
                       radii="300"
-                      aria-selected={hour === selectedHour}
+                      aria-pressed={hour === selectedHour}
                       onClick={() => handleHour(hour)}
                       disabled={
                         (minDay && hour12to24(hour, selectedPM) < minHour24) ||
@@ -109,7 +109,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                 variant={minute === selectedMinute ? 'Primary' : 'Background'}
                 fill="None"
                 radii="300"
-                aria-selected={minute === selectedMinute}
+                aria-pressed={minute === selectedMinute}
                 onClick={() => handleMinute(minute)}
                 disabled={
                   (minDay && hour24 === minHour24 && minute < minMinute) ||
@@ -127,7 +127,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                 variant={!selectedPM ? 'Primary' : 'SurfaceVariant'}
                 fill="None"
                 radii="300"
-                aria-selected={!selectedPM}
+                aria-pressed={!selectedPM}
                 onClick={() => handlePeriod(false)}
                 disabled={minDay && minPM}
               >
@@ -138,7 +138,7 @@ export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
                 variant={selectedPM ? 'Primary' : 'SurfaceVariant'}
                 fill="None"
                 radii="300"
-                aria-selected={selectedPM}
+                aria-pressed={selectedPM}
                 onClick={() => handlePeriod(true)}
                 disabled={maxDay && !maxPM}
               >

src/app/components/user-avatar/UserAvatar.tsx

@@ -33,7 +33,9 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
     <AvatarImage
       className={classNames(css.UserAvatar, className)}
       src={src}
-      alt={alt}
+      // [Gitea #278] An avatar sits next to the person's name or inside a
+      // labelled button, so without an explicit alt it is decorative.
+      alt={alt ?? ''}
       onError={() => setError(true)}
       onLoad={handleLoad}
       draggable={false}

src/app/components/user-profile/UserRoomProfile.tsx

@@ -286,10 +286,11 @@ function UserPrivateNotes({ userId }: { userId: string }) {
       </Box>
       <textarea
         aria-label="Private note about this user"
+        aria-describedby="private-note-storage"
         value={draft}
         onChange={handleChange}
         maxLength={USER_NOTE_MAX_LENGTH}
-        placeholder="Notes only visible to you…"
+        placeholder="Add a private note…"
         rows={3}
         style={{
           width: '100%',
@@ -305,6 +306,11 @@ function UserPrivateNotes({ userId }: { userId: string }) {
           outline: 'none',
         }}
       />
+      {/* [Gitea #329] Account data isn't end-to-end encrypted: say so. */}
+      <Text id="private-note-storage" size="T200" priority="300">
+        Only you can see this in Lotus Chat. It&apos;s stored on your homeserver and isn&apos;t
+        end-to-end encrypted.
+      </Text>
     </Box>
   );
 }

src/app/features/bookmarks/BookmarksPanel.css.ts

@@ -1,10 +1,11 @@
 import { style } from '@vanilla-extract/css';
-import { config, toRem } from 'folds';
+import { config } from 'folds';
+import { SIDE_PANEL_WIDTH } from '../../styles/sidePanel';
 
-// Mirrors MembersDrawer: a 266px side panel on desktop that becomes a
+// Mirrors MembersDrawer: a side panel (shared width) on desktop that becomes a
 // full-screen fixed panel on narrow viewports — the app's canonical drawer.
 export const BookmarksPanel = style({
-  width: toRem(266),
+  width: SIDE_PANEL_WIDTH,
   '@media': {
     '(max-width: 750px)': {
       position: 'fixed',

src/app/features/call-status/AudioOutputButton.tsx

@@ -16,6 +16,7 @@ import {
   toRem,
 } from 'folds';
 import { CallEmbed } from '../../plugins/call';
+import { AUDIO_OUTPUT_STATE } from '../../plugins/call/CallControl';
 import { MobileTouchTarget } from '../../styles/mobile.css';
 import { stopPropagation } from '../../utils/keyboard';
 
@@ -39,6 +40,21 @@ export function AudioOutputButton({ embed, disabled }: { embed: CallEmbed; disab
   const [devices, setDevices] = useState<OutputDevice[]>([]);
   const [selected, setSelected] = useState<string | undefined>(embed.control.audioOutputId);
 
+  // [Gitea #310] Prefer the fork's list: its ids are the ones valid inside
+  // the call iframe. Older forks don't report one; fall back to our own.
+  const [forkDevices, setForkDevices] = useState(embed.control.audioOutputs);
+  useEffect(() => {
+    const onState = () => {
+      setForkDevices(embed.control.audioOutputs);
+      setSelected(embed.control.audioOutputId);
+    };
+    onState();
+    embed.control.on(AUDIO_OUTPUT_STATE, onState);
+    return () => {
+      embed.control.off(AUDIO_OUTPUT_STATE, onState);
+    };
+  }, [embed]);
+
   const refresh = useCallback(async () => {
     try {
       const all = await navigator.mediaDevices.enumerateDevices();
@@ -53,11 +69,13 @@ export function AudioOutputButton({ embed, disabled }: { embed: CallEmbed; disab
   }, []);
 
   useEffect(() => {
-    if (!anchor) return undefined;
+    if (!anchor || forkDevices) return undefined;
     refresh();
     navigator.mediaDevices.addEventListener('devicechange', refresh);
     return () => navigator.mediaDevices.removeEventListener('devicechange', refresh);
-  }, [anchor, refresh]);
+  }, [anchor, refresh, forkDevices]);
+
+  const shown = forkDevices ?? devices;
 
   const choose = (id: string) => {
     embed.control.setAudioOutput(id);
@@ -90,13 +108,14 @@ export function AudioOutputButton({ embed, disabled }: { embed: CallEmbed; disab
             aria-label="Audio output"
           >
             <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-              {devices.length === 0 && (
+              {shown.length === 0 && (
                 <Text size="T200" priority="300" style={{ padding: config.space.S200 }}>
                   No audio outputs found.
                 </Text>
               )}
-              {devices.map((d) => {
-                const isSelected = selected ? d.id === selected : d.id === 'default';
+              {shown.map((d) => {
+                const isSelected =
+                  selected !== undefined ? d.id === selected : d.id === 'default' || d.id === '';
                 return (
                   <MenuItem
                     key={d.id}

src/app/features/call-status/CallStatus.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Box, Spinner, Text, color } from 'folds';
+import { Box, Button, Spinner, Text, color } from 'folds';
 import { useAtomValue } from 'jotai';
 import classNames from 'classnames';
 import { LiveChip } from './LiveChip';
@@ -18,6 +18,7 @@ import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { MemberSpeaking } from './MemberSpeaking';
 import { clockSkewAtom } from '../../state/clockSkew';
 import { describeSkewVsServer } from '../../utils/clockSkew';
+import { useCallError } from '../../hooks/useCallError';
 
 type CallStatusProps = {
   callEmbed: CallEmbed;
@@ -42,6 +43,8 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
   const clockSkew = useAtomValue(clockSkewAtom);
 
   const compact = screenSize === ScreenSize.Mobile;
+  // [Gitea #318] The call dropped ("Connection lost" in the frame).
+  const callError = useCallError(callEmbed.control);
 
   const memberVisible = callJoined && callMembers.length > 0;
 
@@ -65,6 +68,25 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
           {!compact && (
             <>
               <CallRoomName room={room} />
+              {callError && (
+                <>
+                  <StatusDivider />
+                  <Text size="T200" truncate role="alert" style={{ color: color.Critical.Main }}>
+                    Call disconnected
+                  </Text>
+                  {callError.recoverable && (
+                    <Button
+                      size="300"
+                      radii="300"
+                      variant="Critical"
+                      fill="Soft"
+                      onClick={() => callEmbed.control.reconnect()}
+                    >
+                      <Text size="B300">Reconnect</Text>
+                    </Button>
+                  )}
+                </>
+              )}
               {clockSkew.warning && clockSkew.skewMs !== null && (
                 <>
                   <StatusDivider />
@@ -102,8 +124,19 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
       {memberVisible && !compact && <StatusDivider />}
       <Box shrink="No" alignItems="Center" gap="Inherit">
         {compact && (
-          <Box grow="Yes">
+          <Box grow="Yes" alignItems="Center" gap="200">
             <CallRoomName room={room} />
+            {callError?.recoverable && (
+              <Button
+                size="300"
+                radii="300"
+                variant="Critical"
+                fill="Soft"
+                onClick={() => callEmbed.control.reconnect()}
+              >
+                <Text size="B300">Reconnect</Text>
+              </Button>
+            )}
           </Box>
         )}
         <CallControl callJoined={callJoined} compact={compact} callEmbed={callEmbed} />

src/app/features/call/CallControls.tsx

@@ -44,6 +44,7 @@ import { stopPropagation } from '../../utils/keyboard';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { useCallEmbedRef } from '../../hooks/useCallEmbed';
 import { pttActiveAtom } from '../../hooks/useCallHotkeys';
+import { SCREENSHARE_AUDIO_STATE } from '../../plugins/call/CallControl';
 import { CallSoundboard } from './CallSoundboard';
 import { useRoomCallPolicy } from '../../hooks/useRoomCallPolicy';
 import { ScreenshareConfirm } from './ScreenshareConfirm';
@@ -90,6 +91,21 @@ export function CallControls({ callEmbed }: CallControlsProps) {
 
   const { microphone, video, sound, screenshare, spotlight, screenshareAudioMuted } =
     useCallControlState(callEmbed.control);
+  // [Gitea #277] Only offer "Mute Screenshare Audio" while a remote share's
+  // audio is playing, or while it is muted (so a hidden mute can't silently
+  // swallow the next share).
+  const [remoteScreenshareAudio, setRemoteScreenshareAudio] = useState(
+    callEmbed.control.remoteScreenshareAudio,
+  );
+  useEffect(() => {
+    const onState = () => setRemoteScreenshareAudio(callEmbed.control.remoteScreenshareAudio);
+    onState();
+    callEmbed.control.on(SCREENSHARE_AUDIO_STATE, onState);
+    return () => {
+      callEmbed.control.off(SCREENSHARE_AUDIO_STATE, onState);
+    };
+  }, [callEmbed]);
+  const showScreenshareAudio = remoteScreenshareAudio || screenshareAudioMuted;
   const micLevel = useCallMicLevel(callEmbed);
 
   const [cords, setCords] = useState<RectCords>();
@@ -122,6 +138,8 @@ export function CallControls({ callEmbed }: CallControlsProps) {
   };
   const showScreenshare = allowScreenshare || screenshare;
   const showVideoGroup = showCamera || showScreenshare || !!document.fullscreenEnabled;
+  // [Gitea #265] Phones can't share their screen from a browser; don't offer it.
+  const canShareScreen = typeof navigator.mediaDevices?.getDisplayMedia === 'function';
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
   };
@@ -166,6 +184,111 @@ export function CallControls({ callEmbed }: CallControlsProps) {
     return () => clearTimeout(id);
   }, [hangupState.status, callEmbed, setCallEmbed]);
 
+  const moreMenu = (
+    <PopOut
+      anchor={cords}
+      position="Top"
+      align="Center"
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: () => setCords(undefined),
+            clickOutsideDeactivates: true,
+            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu>
+            <Box direction="Column" style={{ padding: config.space.S100 }}>
+              {compact && showScreenshare && screenshareMode !== 'hidden' && canShareScreen && (
+                <MenuItem
+                  size="300"
+                  variant="Surface"
+                  radii="300"
+                  onClick={() => {
+                    setCords(undefined);
+                    handleScreenshareToggle();
+                  }}
+                >
+                  <Text size="B300" truncate>
+                    {screenshare ? 'Stop Screenshare' : 'Share Screen'}
+                  </Text>
+                </MenuItem>
+              )}
+              {compact && showScreenshareAudio && (
+                <MenuItem
+                  size="300"
+                  variant="Surface"
+                  radii="300"
+                  onClick={() => {
+                    setCords(undefined);
+                    callEmbed.control.toggleScreenshareAudio();
+                  }}
+                >
+                  <Text size="B300" truncate>
+                    {screenshareAudioMuted ? 'Unmute Screenshare Audio' : 'Mute Screenshare Audio'}
+                  </Text>
+                </MenuItem>
+              )}
+              {compact && !!document.fullscreenEnabled && (
+                <MenuItem
+                  size="300"
+                  variant="Surface"
+                  radii="300"
+                  onClick={() => {
+                    setCords(undefined);
+                    handleFullscreen();
+                  }}
+                >
+                  <Text size="B300" truncate>
+                    {isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
+                  </Text>
+                </MenuItem>
+              )}
+              <MenuItem size="300" variant="Surface" radii="300" onClick={handleSpotlightClick}>
+                <Text size="B300" truncate>
+                  {spotlight ? 'Grid View' : 'Spotlight View'}
+                </Text>
+              </MenuItem>
+              <MenuItem size="300" variant="Surface" radii="300" onClick={handleReactionsClick}>
+                <Text size="B300" truncate>
+                  Reactions
+                </Text>
+              </MenuItem>
+              <MenuItem size="300" variant="Surface" radii="300" onClick={handleSettingsClick}>
+                <Text size="B300" truncate>
+                  Settings
+                </Text>
+              </MenuItem>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <IconButton
+        variant="Surface"
+        fill="Soft"
+        radii="400"
+        size="400"
+        onClick={handleOpenMenu}
+        outlined
+        aria-label="More options"
+        aria-expanded={!!cords}
+        aria-haspopup="menu"
+      >
+        <Icon size="400" src={Icons.VerticalDots} />
+      </IconButton>
+    </PopOut>
+  );
+
+  const hangupIcon = exiting ? (
+    <Spinner variant="Critical" fill="Solid" size="200" />
+  ) : (
+    <Icon src={Icons.PhoneDown} size="200" filled />
+  );
+
   const pttKeyLabel = pttKey === 'Space' ? 'SPACE' : pttKey.replace('Key', '').replace('Digit', '');
 
   return (
@@ -204,144 +327,114 @@ export function CallControls({ callEmbed }: CallControlsProps) {
         }}
         onCancel={() => setShareConfirm(false)}
       />
-      <SequenceCard
-        className={css.ControlCard}
-        variant="SurfaceVariant"
-        gap="400"
-        radii="500"
-        alignItems="Center"
-        justifyContent="SpaceBetween"
-        wrap="Wrap"
-      >
-        <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
-          <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-            <MicrophoneButton
-              enabled={microphone}
-              onToggle={handleMicrophoneToggle}
-              level={micLevel}
-            />
-            <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
-          </Box>
-          {!compact && showVideoGroup && <ControlDivider />}
-          {showVideoGroup && (
+      {compact ? (
+        // [Gitea #265] Phones / narrow windows: ONE row. Screenshare, its audio
+        // mute and fullscreen live in More (they rarely matter on a phone), and
+        // End is icon-only. The old stacked layout took four rows (~40% of a
+        // portrait phone).
+        <SequenceCard
+          className={css.ControlCard}
+          variant="SurfaceVariant"
+          gap="200"
+          radii="500"
+          alignItems="Center"
+          justifyContent="SpaceBetween"
+          wrap="NoWrap"
+        >
+          <MicrophoneButton
+            enabled={microphone}
+            onToggle={handleMicrophoneToggle}
+            level={micLevel}
+          />
+          <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
+          {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
+          <ChatButton />
+          {soundboardEnabled && <CallSoundboard callEmbed={callEmbed} />}
+          {moreMenu}
+          <Button
+            variant="Critical"
+            fill="Solid"
+            radii="400"
+            size="400"
+            onClick={hangup}
+            disabled={exiting}
+            aria-label="End Call"
+            style={{ paddingInline: config.space.S300 }}
+          >
+            {hangupIcon}
+          </Button>
+        </SequenceCard>
+      ) : (
+        <SequenceCard
+          className={css.ControlCard}
+          variant="SurfaceVariant"
+          gap="400"
+          radii="500"
+          alignItems="Center"
+          justifyContent="SpaceBetween"
+          wrap="Wrap"
+        >
+          <Box alignItems="Center" gap="Inherit" grow="Yes">
             <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-              {/* Show a forbidden control while its track is still live so the
-                  user can stop it; once stopped it hides and can't be restarted. */}
-              {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
-              {showScreenshare && (
-                <>
-                  {screenshareMode !== 'hidden' && (
-                    <ScreenShareButton
-                      enabled={screenshare}
-                      onToggle={() => handleScreenshareToggle()}
-                    />
-                  )}
-                  {/* Mute-screenshare-audio sits directly next to the screenshare
-                      control since they're the same concern. */}
-                  <ScreenshareAudioButton
-                    muted={screenshareAudioMuted}
-                    onToggle={() => callEmbed.control.toggleScreenshareAudio()}
-                  />
-                </>
-              )}
-              {!!document.fullscreenEnabled && (
-                <FullscreenButton isFullscreen={isFullscreen} onToggle={handleFullscreen} />
-              )}
+              <MicrophoneButton
+                enabled={microphone}
+                onToggle={handleMicrophoneToggle}
+                level={micLevel}
+              />
+              <SoundButton enabled={sound} onToggle={() => callEmbed.control.toggleSound()} />
             </Box>
-          )}
-        </Box>
-        {!compact && <ControlDivider />}
-        <Box alignItems="Center" gap="Inherit" grow="Yes" direction={compact ? 'Column' : 'Row'}>
-          <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
-            <ChatButton />
-            {soundboardEnabled && <CallSoundboard callEmbed={callEmbed} />}
-            <PopOut
-              anchor={cords}
-              position="Top"
-              align="Center"
-              content={
-                <FocusTrap
-                  focusTrapOptions={{
-                    initialFocus: false,
-                    onDeactivate: () => setCords(undefined),
-                    clickOutsideDeactivates: true,
-                    isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                    isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                    escapeDeactivates: stopPropagation,
-                  }}
-                >
-                  <Menu>
-                    <Box direction="Column" style={{ padding: config.space.S100 }}>
-                      <MenuItem
-                        size="300"
-                        variant="Surface"
-                        radii="300"
-                        onClick={handleSpotlightClick}
-                      >
-                        <Text size="B300" truncate>
-                          {spotlight ? 'Grid View' : 'Spotlight View'}
-                        </Text>
-                      </MenuItem>
-                      <MenuItem
-                        size="300"
-                        variant="Surface"
-                        radii="300"
-                        onClick={handleReactionsClick}
-                      >
-                        <Text size="B300" truncate>
-                          Reactions
-                        </Text>
-                      </MenuItem>
-                      <MenuItem
-                        size="300"
-                        variant="Surface"
-                        radii="300"
-                        onClick={handleSettingsClick}
-                      >
-                        <Text size="B300" truncate>
-                          Settings
-                        </Text>
-                      </MenuItem>
-                    </Box>
-                  </Menu>
-                </FocusTrap>
-              }
-            >
-              <IconButton
-                variant="Surface"
-                fill="Soft"
-                radii="400"
-                size="400"
-                onClick={handleOpenMenu}
-                outlined
-                aria-label="More options"
-                aria-expanded={!!cords}
-                aria-haspopup="menu"
+            {showVideoGroup && <ControlDivider />}
+            {showVideoGroup && (
+              <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
+                {/* Show a forbidden control while its track is still live so the
+                    user can stop it; once stopped it hides and can't be restarted. */}
+                {showCamera && <VideoButton enabled={video} onToggle={handleVideoToggle} />}
+                {showScreenshare && (
+                  <>
+                    {screenshareMode !== 'hidden' && (
+                      <ScreenShareButton
+                        enabled={screenshare}
+                        onToggle={() => handleScreenshareToggle()}
+                      />
+                    )}
+                    {/* Mute-screenshare-audio sits directly next to the screenshare
+                        control since they're the same concern. */}
+                    {showScreenshareAudio && (
+                      <ScreenshareAudioButton
+                        muted={screenshareAudioMuted}
+                        onToggle={() => callEmbed.control.toggleScreenshareAudio()}
+                      />
+                    )}
+                  </>
+                )}
+                {!!document.fullscreenEnabled && (
+                  <FullscreenButton isFullscreen={isFullscreen} onToggle={handleFullscreen} />
+                )}
+              </Box>
+            )}
+          </Box>
+          <ControlDivider />
+          <Box alignItems="Center" gap="Inherit" grow="Yes">
+            <Box shrink="No" alignItems="Inherit" justifyContent="Inherit" gap="200">
+              <ChatButton />
+              {soundboardEnabled && <CallSoundboard callEmbed={callEmbed} />}
+              {moreMenu}
+            </Box>
+            <Box shrink="No" direction="Column">
+              <Button
+                style={{ minWidth: toRem(88) }}
+                variant="Critical"
+                fill="Solid"
+                onClick={hangup}
+                before={hangupIcon}
+                disabled={exiting}
               >
-                <Icon size="400" src={Icons.VerticalDots} />
-              </IconButton>
-            </PopOut>
+                <Text size="B400">End</Text>
+              </Button>
+            </Box>
           </Box>
-          <Box shrink="No" direction="Column">
-            <Button
-              style={{ minWidth: toRem(88) }}
-              variant="Critical"
-              fill="Solid"
-              onClick={hangup}
-              before={
-                exiting ? (
-                  <Spinner variant="Critical" fill="Solid" size="200" />
-                ) : (
-                  <Icon src={Icons.PhoneDown} size="200" filled />
-                )
-              }
-              disabled={exiting}
-            >
-              <Text size="B400">End</Text>
-            </Button>
-          </Box>
-        </Box>
-      </SequenceCard>
+        </SequenceCard>
+      )}
     </Box>
   );
 }

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

@@ -30,6 +30,7 @@ import {
   AccountDataSubmitCallback,
 } from '../../../components/AccountDataEditor';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { setRoomAccountData } from '../../../utils/accountData';
 
 type DeveloperToolsProps = {
   requestClose: () => void;
@@ -58,8 +59,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
 
   const submitAccountData: AccountDataSubmitCallback = useCallback(
     async (type, content) => {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      await mx.setRoomAccountData(room.roomId, type as any, content);
+      await setRoomAccountData(mx, room.roomId, type, content);
     },
     [mx, room.roomId],
   );

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

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState, FormEventHandler, useEffect } from 'react';
-import { MatrixError } from 'matrix-js-sdk';
+import { IContent, MatrixError } from 'matrix-js-sdk';
 import {
   Box,
   Chip,
@@ -22,6 +22,7 @@ import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { syntaxErrorPosition } from '../../../utils/dom';
 import { Cursor } from '../../../plugins/text-area';
+import { sendRoomEvent, sendStateEvent } from '../../../utils/room';
 
 const EDITOR_INTENT_SPACE_COUNT = 2;
 
@@ -51,9 +52,9 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
     useCallback(
       (evtType, evtStateKey, evtContent) => {
         if (typeof evtStateKey === 'string') {
-          return mx.sendStateEvent(room.roomId, evtType as any, evtContent, evtStateKey);
+          return sendStateEvent(mx, room.roomId, evtType, evtContent, evtStateKey);
         }
-        return mx.sendEvent(room.roomId, evtType as any, evtContent);
+        return sendRoomEvent(mx, room.roomId, null, evtType, evtContent as IContent);
       },
       [mx, room],
     ),

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

@@ -31,6 +31,7 @@ import { usePowerLevels } from '../../../hooks/usePowerLevels';
 import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import { sendStateEvent } from '../../../utils/room';
 
 const EDITOR_INTENT_SPACE_COUNT = 2;
 
@@ -59,7 +60,7 @@ function StateEventEdit({ type, stateKey, content, requestClose }: StateEventEdi
 
   const [submitState, submit] = useAsyncCallback<object, MatrixError, [object]>(
     useCallback(
-      (c) => mx.sendStateEvent(room.roomId, type as any, c, stateKey),
+      (c) => sendStateEvent(mx, room.roomId, type, c, stateKey),
       [mx, room, type, stateKey],
     ),
   );

src/app/features/common-settings/emojis-stickers/RoomPacks.tsx

@@ -109,8 +109,11 @@ function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
           alignItems="End"
         >
           <Box direction="Column" gap="100" grow="Yes">
-            <Text size="L400">Name</Text>
+            <Text as="label" htmlFor="room-pack-name" size="L400">
+              Name
+            </Text>
             <Input
+              id="room-pack-name"
               name="nameInput"
               required
               size="400"

src/app/features/common-settings/general/RoomProfile.tsx

@@ -52,8 +52,7 @@ import { settingsAtom } from '../../../state/settings';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
-
-const MARKDOWN_PATTERN = /(\*\*|__|\*|_|~~|`|\[.+?\]\(.+?\))/;
+import { buildTopicContent } from '../../../utils/topicMarkdown';
 
 function wrapSelection(textarea: HTMLTextAreaElement, syntax: string, placeholder: string) {
   const start = textarea.selectionStart;
@@ -71,30 +70,6 @@ function wrapSelection(textarea: HTMLTextAreaElement, syntax: string, placeholde
   textarea.setSelectionRange(cursorStart, cursorEnd);
 }
 
-function topicMarkdownToHtml(text: string): string {
-  return text
-    .replace(/&/g, '&')
-    .replace(/</g, '&lt;')
-    .replace(/>/g, '&gt;')
-    .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
-    .replace(/__(.+?)__/g, '<strong>$1</strong>')
-    .replace(/\*(.+?)\*/g, '<em>$1</em>')
-    .replace(/_(.+?)_/g, '<em>$1</em>')
-    .replace(/~~(.+?)~~/g, '<del>$1</del>')
-    .replace(/`(.+?)`/g, '<code>$1</code>')
-    .replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>')
-    .replace(/\n/g, '<br>');
-}
-
-function buildTopicContent(topic: string): Record<string, string> {
-  if (!MARKDOWN_PATTERN.test(topic)) return { topic };
-  const formattedBody = topicMarkdownToHtml(topic);
-  // Use HTML-stripped text as the plain topic so the header shows clean text, not raw markdown syntax
-  const plainTopic = formattedBody.replace(/<br>/g, '\n').replace(/<[^>]+>/g, '');
-
-  return { topic: plainTopic, format: 'org.matrix.custom.html', formatted_body: formattedBody };
-}
-
 type RoomProfileEditProps = {
   canEditAvatar: boolean;
   canEditName: boolean;

src/app/features/common-settings/permissions/PermissionGroups.tsx

@@ -136,7 +136,8 @@ export function PermissionGroups({
                     outlined={powerChanges}
                     fill="Soft"
                     radii="Pill"
-                    aria-selected={opened}
+                    aria-haspopup="menu"
+                    aria-expanded={opened}
                     disabled={!canEdit || applyingChanges}
                     after={
                       powerChanges && (
@@ -200,7 +201,8 @@ export function PermissionGroups({
                           outlined={powerChanges}
                           fill="Soft"
                           radii="Pill"
-                          aria-selected={opened}
+                          aria-haspopup="menu"
+                          aria-expanded={opened}
                           disabled={!canEdit || applyingChanges}
                           after={
                             powerChanges && (

src/app/features/common-settings/soundboard/Soundboard.tsx

@@ -38,10 +38,14 @@ export function Soundboard({ requestClose }: SoundboardProps) {
           <PageContent>
             <Box direction="Column" gap="700">
               <Box direction="Column" gap="200">
-                <Text size="L400">This room / space (shared)</Text>
+                <Text size="L400">
+                  {room?.isSpaceRoom() ? 'This space (shared)' : 'This room (shared)'}
+                </Text>
                 <Text size="T200" priority="300">
-                  Clips here are shared with everyone, and inherited by every room under this space
-                  — just like emoji/sticker packs. Only members with permission can edit.
+                  {/* [Gitea #279] Only a space's clips are inherited by rooms under it. */}
+                  {room?.isSpaceRoom()
+                    ? 'Clips here are shared with everyone, and inherited by every room under this space — just like emoji/sticker packs. Only members with permission can edit.'
+                    : 'Clips here are shared with everyone in this room — just like emoji/sticker packs. Only members with permission can edit.'}
                 </Text>
                 {room && <RoomSoundboardPack room={room} stateKey="" />}
               </Box>

src/app/features/lotus/avatarDecorations.ts

@@ -3,8 +3,10 @@
 // of this file at runtime (by regex) instead of re-declaring it, so the two can
 // never drift. If you migrate the CDN, change it here ONLY — keep the
 // `export const DECORATION_CDN = '...'` shape so the sync script can still parse it.
-export const DECORATION_CDN =
-  'https://drive.lotusguild.org/public.php/dav/files/bHswJ9pNKp2t26N/cinny-decorations';
+// matrix #22: static files on chat.lotusguild.org (a versioned package installed
+// by the matrix repo's LXC 106 deploy), not Nextcloud's public DAV. Absolute, so
+// the desktop app and the Element Call fork's origin allowlist both work.
+export const DECORATION_CDN = 'https://chat.lotusguild.org/decorations';
 
 // Runtime base. A deployment can repoint the decorations at a different host
 // without editing the catalog literal above (which scripts/syncDecorations.mjs

src/app/features/outbox/OutboxFeature.tsx

@@ -94,10 +94,15 @@ export function OutboxFeature() {
       OFFLINE.has(mx.getSyncState()) ||
       (typeof navigator !== 'undefined' && navigator.onLine === false);
 
-    const persist = (next: OutboxEntry[]) => {
-      if (next === entries) return;
+    // [Gitea #268] Read-modify-write: another tab may have queued or cleared
+    // entries since we last looked, and saving our own copy over the key
+    // would drop theirs. Entries are added/removed by txnId, so applying our
+    // change to the stored list merges cleanly.
+    const persist = (update: (list: OutboxEntry[]) => OutboxEntry[]) => {
+      const stored = loadOutbox(userId);
+      const next = update(stored);
       entries = next;
-      saveOutbox(userId, entries);
+      if (next !== stored) saveOutbox(userId, next);
     };
 
     /**
@@ -123,8 +128,8 @@ export function OutboxFeature() {
         if (!shouldKeepInOutbox(event.getType(), event.getContent())) return;
         live.set(txnId, { event, room });
         if (event.status === EventStatus.NOT_SENT) scheduleBlipRetry(event);
-        persist(
-          withEntry(entries, {
+        persist((list) =>
+          withEntry(list, {
             txnId,
             roomId: room.roomId,
             threadId: event.threadRootId ?? null,
@@ -138,7 +143,7 @@ export function OutboxFeature() {
       // SENT, CANCELLED, or the remote echo replaced it (status null).
       live.delete(txnId);
       autoRetries.delete(txnId);
-      persist(withoutEntry(entries, txnId));
+      persist((list) => withoutEntry(list, txnId));
     };
 
     /** Re-send network failures, oldest first; a room stops at its first failure. */
@@ -191,7 +196,7 @@ export function OutboxFeature() {
           return !!room && isDelivered(room, entry.txnId);
         },
       );
-      plan.drop.forEach((entry) => persist(withoutEntry(entries, entry.txnId)));
+      plan.drop.forEach((entry) => persist((list) => withoutEntry(list, entry.txnId)));
       plan.restore.forEach((entry) => {
         const room = mx.getRoom(entry.roomId);
         if (!room || live.has(entry.txnId)) return;

src/app/features/room-settings/ExportRoomHistory.tsx

@@ -353,8 +353,11 @@ ${msgRows}
                 >
                   <Box gap="400" wrap="Wrap">
                     <Box direction="Column" gap="100" style={{ flex: 1, minWidth: 160 }}>
-                      <Text size="T300">From</Text>
+                      <Text as="label" htmlFor="export-from-date" size="T300">
+                        From
+                      </Text>
                       <Input
+                        id="export-from-date"
                         type="date"
                         variant="Secondary"
                         size="400"
@@ -364,8 +367,11 @@ ${msgRows}
                       />
                     </Box>
                     <Box direction="Column" gap="100" style={{ flex: 1, minWidth: 160 }}>
-                      <Text size="T300">To</Text>
+                      <Text as="label" htmlFor="export-to-date" size="T300">
+                        To
+                      </Text>
                       <Input
+                        id="export-to-date"
                         type="date"
                         variant="Secondary"
                         size="400"

src/app/features/room-settings/RoomInsights.tsx

@@ -401,16 +401,19 @@ export function RoomInsights({ requestClose }: RoomInsightsProps) {
                               {displayName}
                             </Text>
                             <Box alignItems="Center" gap="200">
-                              <div
-                                style={{
-                                  height: 6,
-                                  width: barWidth,
-                                  background: color.Primary.Main,
-                                  borderRadius: config.radii.R300,
-                                  transition: 'width 0.3s ease',
-                                  flexShrink: 0,
-                                }}
-                              />
+                              {/* [Gitea #270] The bar's % width is of its own track,
+                                  not of the row, so the count always fits beside it. */}
+                              <div style={{ flex: 1, minWidth: 0 }}>
+                                <div
+                                  style={{
+                                    height: 6,
+                                    width: barWidth,
+                                    background: color.Primary.Main,
+                                    borderRadius: config.radii.R300,
+                                    transition: 'width 0.3s ease',
+                                  }}
+                                />
+                              </div>
                               <Text size="T200" priority="300" style={{ flexShrink: 0 }}>
                                 {count}
                               </Text>

src/app/features/room-settings/RoomServerACL.tsx

@@ -32,24 +32,12 @@ import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { SequenceCard } from '../../components/sequence-card';
 import { SequenceCardStyle } from '../common-settings/styles.css';
 import { stopPropagation } from '../../utils/keyboard';
-import { isValidServerPattern, matchesAnyGlob } from '../../utils/serverAcl';
+import { isValidServerPattern, matchesAnyGlob, normalizeServerAcl } from '../../utils/serverAcl';
 import { MobileTouchTarget } from '../../styles/mobile.css';
 import { useModalStyle } from '../../hooks/useModalStyle';
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
-type ServerAclContent = {
-  allow: string[];
-  deny: string[];
-  allow_ip_literals: boolean;
-};
-
-const DEFAULT_ACL: ServerAclContent = {
-  allow: ['*'],
-  deny: [],
-  allow_ip_literals: false,
-};
-
 // ── Server list sub-component ─────────────────────────────────────────────────
 
 type ServerListProps = {
@@ -185,20 +173,20 @@ export function RoomServerACL({ requestClose }: RoomServerACLProps) {
 
   // Read current ACL from room state
   const aclEvent = useStateEvent(room, StateEvent.RoomServerAcl);
-  const currentAcl = aclEvent?.getContent<ServerAclContent>() ?? DEFAULT_ACL;
+  const currentAcl = normalizeServerAcl(aclEvent?.getContent());
 
   // Local draft state — initialised from current ACL
-  const [allowList, setAllowList] = useState<string[]>(() => currentAcl.allow ?? ['*']);
-  const [denyList, setDenyList] = useState<string[]>(() => currentAcl.deny ?? []);
+  const [allowList, setAllowList] = useState<string[]>(() => currentAcl.allow);
+  const [denyList, setDenyList] = useState<string[]>(() => currentAcl.deny);
   const [allowIpLiterals, setAllowIpLiterals] = useState<boolean>(
-    () => currentAcl.allow_ip_literals ?? false,
+    () => currentAcl.allow_ip_literals,
   );
 
   // Track whether there are unsaved changes
   const isDirty =
-    JSON.stringify(allowList) !== JSON.stringify(currentAcl.allow ?? ['*']) ||
-    JSON.stringify(denyList) !== JSON.stringify(currentAcl.deny ?? []) ||
-    allowIpLiterals !== (currentAcl.allow_ip_literals ?? false);
+    JSON.stringify(allowList) !== JSON.stringify(currentAcl.allow) ||
+    JSON.stringify(denyList) !== JSON.stringify(currentAcl.deny) ||
+    allowIpLiterals !== currentAcl.allow_ip_literals;
 
   // Save handler
   const [saveState, save] = useAsyncCallback(
@@ -336,7 +324,10 @@ export function RoomServerACL({ requestClose }: RoomServerACLProps) {
                       id="allow-ip-literals"
                       checked={allowIpLiterals}
                       disabled={!canEdit}
-                      onClick={() => setAllowIpLiterals(!allowIpLiterals)}
+                      // folds' Checkbox has no onChange; readOnly tells React the
+                      // click handler controls it (no "checked without onChange").
+                      readOnly
+                      onClick={(e) => setAllowIpLiterals(e.currentTarget.checked)}
                       size="300"
                       variant="Primary"
                     />

src/app/features/room-settings/RoomSettingsRenderer.tsx

@@ -21,7 +21,7 @@ function RenderSettings({ state }: RenderSettingsProps) {
   if (!room) return null;
 
   return (
-    <Modal500 requestClose={closeSettings}>
+    <Modal500 requestClose={closeSettings} label={`${room.name} settings`}>
       <SpaceProvider value={space ?? null}>
         <RoomProvider value={room}>
           <RoomSettings initialPage={page} requestClose={closeSettings} />

src/app/features/room/MediaGallery.css.ts

@@ -1,13 +1,13 @@
 import { style } from '@vanilla-extract/css';
 import { color, config, toRem } from 'folds';
+import { SIDE_PANEL_WIDTH } from '../../styles/sidePanel';
 
 // Right-side drawer DOCKED into the room layout row (a flex sibling of the
-// timeline), exactly like MembersDrawer — not a floating overlay. 320px is a
-// little wider than the 266px member/bookmark drawers because it hosts a media
-// grid. On narrow viewports it becomes a full-screen fixed panel, matching the
-// app's other drawers.
+// timeline), exactly like MembersDrawer — not a floating overlay. Same width as
+// every other right-hand panel (styles/sidePanel.ts, #263). On narrow viewports
+// it becomes a full-screen fixed panel, matching the app's other drawers.
 export const MediaGalleryDrawer = style({
-  width: toRem(320),
+  width: SIDE_PANEL_WIDTH,
   overflow: 'hidden',
   '@media': {
     '(max-width: 750px)': {

src/app/features/room/MembersDrawer.css.ts

@@ -1,8 +1,9 @@
 import { keyframes, style } from '@vanilla-extract/css';
-import { config, toRem } from 'folds';
+import { config } from 'folds';
+import { SIDE_PANEL_WIDTH } from '../../styles/sidePanel';
 
 export const MembersDrawer = style({
-  width: toRem(266),
+  width: SIDE_PANEL_WIDTH,
   '@media': {
     '(max-width: 750px)': {
       position: 'fixed',

src/app/features/room/ScheduleMessageModal.tsx

@@ -20,7 +20,12 @@ import { IContent } from 'matrix-js-sdk';
 import { useTimestampFormatter } from '../../hooks/useTimestampFormatter';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
-import { scheduleMessage } from '../../utils/scheduledMessages';
+import {
+  describeScheduleError,
+  MAX_SCHEDULE_AHEAD_MS,
+  scheduleMessage,
+  SCHEDULE_TOO_FAR_TEXT,
+} from '../../utils/scheduledMessages';
 import { useModalStyle } from '../../hooks/useModalStyle';
 import {
   toLocalDate,
@@ -121,7 +126,13 @@ export function ScheduleMessageModal({
       return;
     }
     const diffMs = sendAt.getTime() - Date.now();
-    if (diffMs < 60_000) {
+    // [Gitea #275] Say so as soon as a too-late time is picked, not on submit.
+    const tooFar = diffMs > MAX_SCHEDULE_AHEAD_MS;
+    setError((e) => {
+      if (tooFar) return SCHEDULE_TOO_FAR_TEXT;
+      return e === SCHEDULE_TOO_FAR_TEXT ? null : e;
+    });
+    if (diffMs < 60_000 || tooFar) {
       setPreview(null);
       return;
     }
@@ -149,6 +160,10 @@ export function ScheduleMessageModal({
       setError('Scheduled time must be at least 1 minute in the future.');
       return;
     }
+    if (diffMs > MAX_SCHEDULE_AHEAD_MS) {
+      setError(SCHEDULE_TOO_FAR_TEXT);
+      return;
+    }
     if (!messageText.trim()) {
       setError('Please enter a message to schedule.');
       return;
@@ -162,7 +177,7 @@ export function ScheduleMessageModal({
       onScheduled(delayId, sendAt.getTime(), content);
       onClose();
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to schedule message.');
+      setError(describeScheduleError(err));
       setSubmitting(false);
     }
   };
@@ -247,6 +262,8 @@ export function ScheduleMessageModal({
                     <input
                       id="schedule-date"
                       type="date"
+                      min={toLocalDate(new Date())}
+                      max={toLocalDate(new Date(Date.now() + MAX_SCHEDULE_AHEAD_MS))}
                       value={dateValue}
                       onChange={(e) => setDateValue(e.target.value)}
                       style={pickerInputStyle(color, config)}
@@ -294,7 +311,8 @@ export function ScheduleMessageModal({
                   </Box>
                 </Box>
               ) : (
-                (dateValue || timeValue) && (
+                (dateValue || timeValue) &&
+                error !== SCHEDULE_TOO_FAR_TEXT && (
                   <Text size="T200" style={{ color: color.Critical.Main }}>
                     Must be at least 1 minute in the future
                   </Text>

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

@@ -1137,25 +1137,31 @@ export const Message = React.memo(
         </AvatarBase>
       );
 
+      // [Gitea #269] The content column shrinks to the message's width; the
+      // receipt pill / delivery status sit OUTSIDE it, in a full-width column,
+      // so their `margin-left: auto` reaches the row's right edge instead of
+      // wherever the text happens to end.
       const msgContentJSX = (
-        <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }}>
-          {reply}
-          {edit && onEditId ? (
-            <MessageEditor
-              style={{
-                maxWidth: '100%',
-                width: '100vw',
-              }}
-              roomId={room.roomId}
-              room={room}
-              mEvent={mEvent}
-              imagePackRooms={imagePackRooms}
-              onCancel={() => onEditId()}
-            />
-          ) : (
-            children
-          )}
-          {reactions}
+        <Box direction="Column" style={{ maxWidth: '100%', flexGrow: 1, minWidth: 0 }}>
+          <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }}>
+            {reply}
+            {edit && onEditId ? (
+              <MessageEditor
+                style={{
+                  maxWidth: '100%',
+                  width: '100vw',
+                }}
+                roomId={room.roomId}
+                room={room}
+                mEvent={mEvent}
+                imagePackRooms={imagePackRooms}
+                onCancel={() => onEditId()}
+              />
+            ) : (
+              children
+            )}
+            {reactions}
+          </Box>
           {readReceiptUsers.length > 0 && (
             <ReadReceiptAvatars
               room={room}

src/app/features/room/message/styles.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { globalStyle, style } from '@vanilla-extract/css';
 import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
 
 export const MessageBase = style({
@@ -77,3 +77,14 @@ export const ReactionsMore = style([
 export const ReactionsTooltipText = style({
   wordBreak: 'break-word',
 });
+
+// [Gitea #199] Long-press opens the message action sheet on touch screens. On
+// iOS a long-press otherwise belongs to the system: a link/image callout, or
+// the text-selection loupe, both of which race (and win against) the 450 ms
+// press. No callout on message rows, and no selection while a finger is
+// down; copying text is in the sheet.
+globalStyle('[data-touch-actions]', { WebkitTouchCallout: 'none' });
+globalStyle('[data-touch-actions][data-pressing], [data-touch-actions][data-pressing] *', {
+  userSelect: 'none',
+  WebkitUserSelect: 'none',
+});

src/app/features/room/room-pin-menu/RoomPinMenu.tsx

@@ -531,7 +531,7 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
                         No Pinned Messages
                       </Text>
                       <Text size="T400" align="Center">
-                        Users with sufficient power level can pin a messages from its context menu.
+                        Users with sufficient power level can pin a message from its context menu.
                       </Text>
                     </Box>
                   </Box>

src/app/features/room/thread/ThreadPanel.css.ts

@@ -1,8 +1,9 @@
 import { style } from '@vanilla-extract/css';
-import { config, toRem } from 'folds';
+import { config } from 'folds';
+import { SIDE_PANEL_WIDTH } from '../../../styles/sidePanel';
 
 export const ThreadPanel = style({
-  width: toRem(360),
+  width: SIDE_PANEL_WIDTH,
   '@media': {
     '(max-width: 750px)': {
       position: 'fixed',

src/app/features/room/thread/ThreadsListPanel.css.ts

@@ -1,8 +1,9 @@
 import { style } from '@vanilla-extract/css';
-import { color, config, toRem } from 'folds';
+import { color, config } from 'folds';
+import { SIDE_PANEL_WIDTH } from '../../../styles/sidePanel';
 
 export const ThreadsListPanel = style({
-  width: toRem(340),
+  width: SIDE_PANEL_WIDTH,
   '@media': {
     '(max-width: 750px)': {
       position: 'fixed',

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

@@ -0,0 +1,76 @@
+import React, { useEffect, useSyncExternalStore } from 'react';
+import { Box, color, config, Icon, IconButton, Icons, Text } from 'folds';
+import { useSetAtom } from 'jotai';
+import {
+  destroyAllWidgetSessions,
+  destroyWidgetSession,
+  FLOATING_WIDGET,
+  floatingWidgetSessions,
+  subscribeWidgetSessions,
+  widgetSessionsVersion,
+} from './widgetSessions';
+import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
+import { widgetViewingAtom, widgetsPanelAtom } from '../../../state/widgetsPanel';
+import { zIndices } from '../../../styles/zIndex';
+
+/**
+ * [Gitea #205] Title bar for a widget kept on screen (MSC2931) after its room
+ * or the Widgets panel was left. The widget's own frame is positioned by
+ * widgetSessions.ts right below this bar. Mounted once for the signed-in
+ * client; unmounting (logout) stops every widget.
+ */
+export function FloatingWidget() {
+  useSyncExternalStore(subscribeWidgetSessions, widgetSessionsVersion);
+  const { navigateRoom } = useRoomNavigate();
+  const setPanel = useSetAtom(widgetsPanelAtom);
+  const setViewing = useSetAtom(widgetViewingAtom);
+  useEffect(() => () => destroyAllWidgetSessions(), []);
+
+  const session = floatingWidgetSessions()[0];
+  if (!session) return null;
+  const f = FLOATING_WIDGET;
+  const back = () => {
+    setViewing((prev) => ({ ...prev, [session.roomId]: session.widgetId }));
+    setPanel(true);
+    navigateRoom(session.roomId);
+  };
+
+  return (
+    <Box
+      role="region"
+      aria-label={`${session.name} (kept on screen)`}
+      alignItems="Center"
+      gap="100"
+      style={{
+        position: 'fixed',
+        right: f.right,
+        bottom: f.bottom + f.height,
+        width: f.width,
+        height: f.bar,
+        zIndex: zIndices.floatingWidget,
+        padding: `0 ${config.space.S100} 0 ${config.space.S300}`,
+        background: color.Surface.Container,
+        color: color.Surface.OnContainer,
+        borderRadius: '8px 8px 0 0',
+        boxShadow: '0 8px 24px rgba(0,0,0,0.35)',
+      }}
+    >
+      <Icon size="100" src={Icons.Category} />
+      <Text size="T300" truncate style={{ flexGrow: 1 }}>
+        {session.name}
+      </Text>
+      <IconButton size="300" radii="300" variant="Surface" aria-label="Back to room" onClick={back}>
+        <Icon size="100" src={Icons.ArrowGoLeft} />
+      </IconButton>
+      <IconButton
+        size="300"
+        radii="300"
+        variant="Surface"
+        aria-label={`Close ${session.name}`}
+        onClick={() => destroyWidgetSession(session.key)}
+      >
+        <Icon size="100" src={Icons.Cross} />
+      </IconButton>
+    </Box>
+  );
+}

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

@@ -1,138 +1,48 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useSyncExternalStore } from 'react';
 import { Box, Icon, Icons, Text, color } from 'folds';
-import {
-  MatrixEvent,
-  MatrixEventEvent,
-  Room,
-  RoomEvent,
-  RoomEventHandlerMap,
-  RoomStateEvent,
-} from 'matrix-js-sdk';
-import { Capability, ClientWidgetApi, IRoomEvent, Widget } from 'matrix-widget-api';
+import { Room } from 'matrix-js-sdk';
+import { Widget } from 'matrix-widget-api';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-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[];
-  origin: string;
-  resolve: (allowed: Set<Capability>, remember: boolean) => void;
-};
+import {
+  attachWidgetSession,
+  detachWidgetSession,
+  getWidgetSession,
+  subscribeWidgetSessions,
+  widgetSessionKey,
+  widgetSessionsVersion,
+} from './widgetSessions';
 
 type RoomWidgetViewProps = {
   room: Room;
   widget: Widget;
 };
 
-// Hosts one room widget in a sandboxed iframe via ClientWidgetApi (so widgets
-// that wait on the client handshake load). Display-only access is granted
-// silently; reading/sending in this room is asked for (WidgetPermissionPrompt)
-// and, once granted, the room's live events are fed to the widget.
-// Re-mounts only when the widget id or its (template) URL changes — not on every
-// unrelated room-state update — so viewing a widget doesn't reload constantly.
+// Shows one room widget in the Widgets panel. The widget itself runs in a
+// session (widgetSessions.ts) whose sandboxed iframe lives in an app-level
+// layer and is positioned over this placeholder, so a widget that asked to
+// stay on screen can keep running in a floating window after the panel closes.
+// Display-only access is granted silently; reading/sending in this room is
+// asked for (WidgetPermissionPrompt) and, once granted, the room's live events
+// are fed to the widget. Re-attaches only when the widget id or its (template)
+// URL changes, so viewing a widget doesn't reload it on unrelated state updates.
 export function RoomWidgetView({ room, widget }: RoomWidgetViewProps) {
   const mx = useMatrixClient();
-  const containerRef = useRef<HTMLDivElement>(null);
+  const slotRef = useRef<HTMLDivElement>(null);
   const widgetRef = useRef(widget);
   widgetRef.current = widget;
-  const [blocked, setBlocked] = useState(false);
-  const [pendingAsk, setPendingAsk] = useState<PendingAsk>();
+  const key = widgetSessionKey(room.roomId, widget.id);
+  useSyncExternalStore(subscribeWidgetSessions, widgetSessionsVersion);
+  const session = getWidgetSession(key);
 
   useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return undefined;
-    const current = widgetRef.current;
+    const slot = slotRef.current;
+    if (!slot) return undefined;
+    attachWidgetSession(mx, room, widgetRef.current, slot);
+    return () => detachWidgetSession(key, slot);
+  }, [mx, room, key, widget.templateUrl]);
 
-    const completeUrl = current.getCompleteUrl({
-      currentUserId: mx.getSafeUserId(),
-      widgetRoomId: room.roomId,
-      deviceId: mx.getDeviceId() ?? undefined,
-      baseUrl: mx.baseUrl,
-    });
-
-    // Security: never render a same-origin widget with allow-same-origin (a
-    // same-origin frame could break out of the sandbox against our own origin).
-    if (!isWidgetUrlSafe(completeUrl, window.location.origin)) {
-      setBlocked(true);
-      return undefined;
-    }
-    setBlocked(false);
-
-    const iframe = document.createElement('iframe');
-    iframe.title = current.name || 'Widget';
-    iframe.sandbox.value =
-      'allow-forms allow-scripts allow-same-origin allow-popups allow-downloads';
-    iframe.allow = 'autoplay; clipboard-write;';
-    iframe.src = completeUrl;
-    iframe.style.width = '100%';
-    iframe.style.height = '100%';
-    iframe.style.border = 'none';
-    container.append(iframe);
-
-    let origin = completeUrl;
-    try {
-      origin = new URL(completeUrl).host;
-    } catch {
-      // isWidgetUrlSafe already rejected unparsable URLs
-    }
-    let cancelAsk: (() => void) | undefined;
-    const driver = new GeneralWidgetDriver(
-      mx,
-      room.roomId,
-      { id: current.id, url: current.templateUrl },
-      (requests) =>
-        new Promise((resolve) => {
-          let settled = false;
-          const done = (allowed: Set<Capability>, remember: boolean) => {
-            if (settled) return;
-            settled = true;
-            cancelAsk = undefined;
-            setPendingAsk(undefined);
-            resolve({ allowed, remember });
-          };
-          cancelAsk = () => done(new Set(), false);
-          setPendingAsk({ requests, origin, resolve: done });
-        }),
-    );
-    const clientApi = new ClientWidgetApi(current, iframe, driver);
-    // Only messages from this widget's own frame and origin are handled, so a
-    // widget can't impersonate another one (or the call).
-    restrictWidgetMessages(clientApi, iframe, current.origin);
-    clientApi.setViewedRoomId(room.roomId);
-
-    // Live room events for widgets that were allowed to see them
-    // (ClientWidgetApi drops anything the widget has no capability for).
-    const feed = (ev: MatrixEvent) => {
-      if (ev.getRoomId() !== room.roomId) return;
-      if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) return;
-      clientApi.feedEvent(ev.getEffectiveEvent() as IRoomEvent).catch(() => undefined);
-    };
-    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);
-    };
-    const onState = (ev: MatrixEvent) => {
-      if (ev.getRoomId() !== room.roomId) return;
-      clientApi.feedStateUpdate(ev.getEffectiveEvent() as IRoomEvent).catch(() => undefined);
-    };
-    mx.on(RoomEvent.Timeline, onTimeline);
-    mx.on(RoomStateEvent.Events, onState);
-
-    return () => {
-      mx.off(RoomEvent.Timeline, onTimeline);
-      mx.off(RoomStateEvent.Events, onState);
-      cancelAsk?.();
-      clientApi.stop();
-      iframe.remove();
-    };
-  }, [mx, room.roomId, widget.id, widget.templateUrl]);
-
-  if (blocked) {
+  if (session?.blocked) {
     return (
       <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="200">
         <Icon size="400" src={Icons.Warning} style={{ color: color.Warning.Main }} />
@@ -149,14 +59,14 @@ export function RoomWidgetView({ room, widget }: RoomWidgetViewProps) {
 
   return (
     <>
-      <Box ref={containerRef} grow="Yes" style={{ height: '100%', minHeight: 0 }} />
-      {pendingAsk && (
+      <Box ref={slotRef} grow="Yes" style={{ height: '100%', minHeight: 0 }} />
+      {session?.pendingAsk && (
         <WidgetPermissionPrompt
           widgetName={widget.name || 'Widget'}
-          origin={pendingAsk.origin}
+          origin={session.pendingAsk.origin}
           addedBy={addedBy}
-          requests={pendingAsk.requests}
-          onDone={pendingAsk.resolve}
+          requests={session.pendingAsk.requests}
+          onDone={session.pendingAsk.resolve}
         />
       )}
     </>

src/app/features/room/widgets/WidgetsPanel.css.ts

@@ -1,8 +1,9 @@
 import { style } from '@vanilla-extract/css';
-import { config, toRem } from 'folds';
+import { config } from 'folds';
+import { SIDE_PANEL_WIDTH } from '../../../styles/sidePanel';
 
 export const WidgetsPanel = style({
-  width: toRem(360),
+  width: SIDE_PANEL_WIDTH,
   '@media': {
     '(max-width: 750px)': {
       position: 'fixed',

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

@@ -16,7 +16,9 @@ import {
   config,
 } from 'folds';
 import { Room } from 'matrix-js-sdk';
+import { useAtom } from 'jotai';
 import classNames from 'classnames';
+import { widgetViewingAtom } from '../../../state/widgetsPanel';
 import * as css from './WidgetsPanel.css';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { RoomWidgetView } from './RoomWidgetView';
@@ -27,7 +29,13 @@ import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 import { StateEvent } from '../../../../types/matrix/room';
 import { sendStateEvent } from '../../../utils/room';
-import { generateWidgetId, validateWidgetUrl, WidgetUrlError } from './widgetUtils';
+import {
+  generateWidgetId,
+  validateWidgetUrl,
+  widgetCompleteUrl,
+  widgetPopoutUrl,
+  WidgetUrlError,
+} from './widgetUtils';
 
 const urlErrorMessage = (err: WidgetUrlError): string => {
   switch (err) {
@@ -54,12 +62,23 @@ export function WidgetsPanel({ room, requestClose }: WidgetsPanelProps) {
   const permissions = useRoomPermissions(creators, powerLevels);
   const canModify = permissions.stateEvent(StateEvent.Widget, mx.getSafeUserId());
 
-  const [viewingId, setViewingId] = useState<string | null>(null);
+  const [viewingByRoom, setViewingByRoom] = useAtom(widgetViewingAtom);
+  const viewingId = viewingByRoom[room.roomId] ?? null;
+  const setViewingId = (id: string | null) =>
+    setViewingByRoom((prev) => ({ ...prev, [room.roomId]: id }));
   const [adding, setAdding] = useState(false);
   const [saving, setSaving] = useState(false);
   const [error, setError] = useState<string>();
 
   const viewing = widgets.find((w) => w.id === viewingId) ?? null;
+  // [Gitea #205] Open a widget in its own window, beside the chat. It runs
+  // standalone there (no widget API), as in Element's popout.
+  const popoutUrl = (widget: (typeof widgets)[number]) =>
+    widgetPopoutUrl(widgetCompleteUrl(widget, mx, room.roomId), window.location.origin);
+  const popout = (widget: (typeof widgets)[number]) => {
+    const url = popoutUrl(widget);
+    if (url) window.open(url, '_blank', 'noopener,noreferrer');
+  };
 
   const handleAdd: FormEventHandler<HTMLFormElement> = async (evt) => {
     evt.preventDefault();
@@ -144,7 +163,13 @@ export function WidgetsPanel({ room, requestClose }: WidgetsPanelProps) {
       <Box grow="Yes" className={css.WidgetsPanelContent}>
         {viewing ? (
           <Box grow="Yes" direction="Column">
-            <Box shrink="No" style={{ padding: config.space.S200 }}>
+            <Box
+              shrink="No"
+              alignItems="Center"
+              justifyContent="SpaceBetween"
+              gap="200"
+              style={{ padding: config.space.S200 }}
+            >
               <Button
                 variant="Secondary"
                 fill="Soft"
@@ -157,6 +182,17 @@ export function WidgetsPanel({ room, requestClose }: WidgetsPanelProps) {
                   {viewing.name || 'Widget'}
                 </Text>
               </Button>
+              {popoutUrl(viewing) && (
+                <IconButton
+                  size="300"
+                  radii="300"
+                  variant="Background"
+                  aria-label={`Open ${viewing.name || 'widget'} in a new window`}
+                  onClick={() => popout(viewing)}
+                >
+                  <Icon size="100" src={Icons.External} />
+                </IconButton>
+              )}
             </Box>
             <RoomWidgetView room={room} widget={viewing} />
           </Box>
@@ -184,6 +220,17 @@ export function WidgetsPanel({ room, requestClose }: WidgetsPanelProps) {
                       {widget.name || widget.templateUrl}
                     </Text>
                   </Box>
+                  {popoutUrl(widget) && (
+                    <IconButton
+                      size="300"
+                      radii="300"
+                      variant="Background"
+                      aria-label={`Open ${widget.name || 'widget'} in a new window`}
+                      onClick={() => popout(widget)}
+                    >
+                      <Icon size="100" src={Icons.External} />
+                    </IconButton>
+                  )}
                   {canModify && (
                     <IconButton
                       size="300"

src/app/features/room/widgets/widgetSessions.ts

@@ -0,0 +1,341 @@
+import {
+  MatrixClient,
+  MatrixEvent,
+  MatrixEventEvent,
+  Room,
+  RoomEvent,
+  RoomEventHandlerMap,
+  RoomStateEvent,
+} from 'matrix-js-sdk';
+import {
+  Capability,
+  ClientWidgetApi,
+  IRoomEvent,
+  IWidgetApiRequest,
+  MatrixCapabilities,
+  Widget,
+  WidgetApiFromWidgetAction,
+} from 'matrix-widget-api';
+import { GeneralWidgetDriver } from './GeneralWidgetDriver';
+import { WidgetPermissionRequest, isWidgetUrlSafe, widgetCompleteUrl } from './widgetUtils';
+import { restrictWidgetMessages } from '../../../plugins/widgetTransport';
+import { isFromFilteredTimelineSet } from '../../../utils/room';
+import { zIndices } from '../../../styles/zIndex';
+
+/**
+ * [Gitea #205] Running room widgets, kept outside React so a widget that asked
+ * to stay on screen (MSC2931 `set_always_on_screen`) survives closing the
+ * Widgets panel or switching rooms.
+ *
+ * Moving an iframe in the DOM reloads it, so every widget frame lives from the
+ * start in one app-level fixed layer. While the panel shows the widget, the
+ * frame is positioned over the panel's placeholder (`attach`), so it looks and
+ * behaves as before. When the placeholder goes away (`detach`) the widget is
+ * torn down, unless it is always-on-screen: then the same live frame moves to
+ * a small floating window (see FloatingWidget) until it is closed, the widget
+ * says it no longer needs to be on screen, or it is removed from the room.
+ */
+
+export type PendingAsk = {
+  requests: WidgetPermissionRequest[];
+  origin: string;
+  resolve: (allowed: Set<Capability>, remember: boolean) => void;
+};
+
+export type WidgetSession = {
+  readonly key: string;
+  readonly roomId: string;
+  readonly widgetId: string;
+  readonly name: string;
+  readonly templateUrl: string;
+  /** The URL is on this app's own origin: never rendered. */
+  readonly blocked: boolean;
+  alwaysOnScreen: boolean;
+  floating: boolean;
+  pendingAsk?: PendingAsk;
+};
+
+type Internal = WidgetSession & {
+  frame: HTMLDivElement;
+  slot: HTMLElement | null;
+  raf: number | undefined;
+  stop: () => void;
+};
+
+/** The floating window's geometry (FloatingWidget draws its title bar above). */
+export const FLOATING_WIDGET = { right: 16, bottom: 96, width: 360, height: 240, bar: 36 };
+
+const DOCKED_Z = 600; // just above the side panel (500 on phones), below popovers/modals
+
+const sessions = new Map<string, Internal>();
+const listeners = new Set<() => void>();
+let version = 0;
+const notify = () => {
+  version += 1;
+  listeners.forEach((l) => l());
+};
+export const subscribeWidgetSessions = (l: () => void): (() => void) => {
+  listeners.add(l);
+  return () => listeners.delete(l);
+};
+export const widgetSessionsVersion = (): number => version;
+
+export const widgetSessionKey = (roomId: string, widgetId: string): string =>
+  `${roomId}|${widgetId}`;
+
+export const getWidgetSession = (key: string): WidgetSession | undefined => sessions.get(key);
+
+export const floatingWidgetSessions = (): WidgetSession[] =>
+  [...sessions.values()].filter((s) => s.floating);
+
+let layerEl: HTMLDivElement | undefined;
+const layer = (): HTMLDivElement => {
+  if (!layerEl || !layerEl.isConnected) {
+    layerEl = document.createElement('div');
+    layerEl.id = 'lotus-widget-layer';
+    // The layer itself is click-through; only the frames inside take input.
+    Object.assign(layerEl.style, { position: 'fixed', inset: '0', pointerEvents: 'none' });
+    document.body.append(layerEl);
+  }
+  return layerEl;
+};
+
+const hideFrame = (s: Internal) => {
+  s.frame.style.visibility = 'hidden';
+};
+
+const placeDocked = (s: Internal) => {
+  const slot = s.slot;
+  if (!slot) return;
+  const r = slot.getBoundingClientRect();
+  if (r.width === 0 || r.height === 0) {
+    hideFrame(s);
+  } else {
+    Object.assign(s.frame.style, {
+      visibility: 'visible',
+      left: `${r.left}px`,
+      top: `${r.top}px`,
+      width: `${r.width}px`,
+      height: `${r.height}px`,
+      right: '',
+      bottom: '',
+      borderRadius: '0',
+      boxShadow: 'none',
+      zIndex: String(DOCKED_Z),
+    });
+  }
+  s.raf = requestAnimationFrame(() => placeDocked(s));
+};
+
+const placeFloating = (s: Internal) => {
+  const f = FLOATING_WIDGET;
+  Object.assign(s.frame.style, {
+    visibility: 'visible',
+    left: '',
+    top: '',
+    right: `${f.right}px`,
+    bottom: `${f.bottom}px`,
+    width: `${f.width}px`,
+    height: `${f.height}px`,
+    borderRadius: '0 0 8px 8px',
+    boxShadow: '0 8px 24px rgba(0,0,0,0.35)',
+    zIndex: String(zIndices.floatingWidget),
+  });
+};
+
+const stopPlacing = (s: Internal) => {
+  if (s.raf !== undefined) cancelAnimationFrame(s.raf);
+  s.raf = undefined;
+};
+
+export const destroyWidgetSession = (key: string): void => {
+  const s = sessions.get(key);
+  if (!s) return;
+  sessions.delete(key);
+  stopPlacing(s);
+  s.stop();
+  s.frame.remove();
+  notify();
+};
+
+export const destroyAllWidgetSessions = (): void => {
+  [...sessions.keys()].forEach(destroyWidgetSession);
+};
+
+/** Start (or reuse) the widget's session and dock its frame over `slot`. */
+export function attachWidgetSession(
+  mx: MatrixClient,
+  room: Room,
+  widget: Widget,
+  slot: HTMLElement,
+): WidgetSession {
+  const key = widgetSessionKey(room.roomId, widget.id);
+  let s = sessions.get(key);
+  if (s && s.templateUrl !== widget.templateUrl) {
+    destroyWidgetSession(key);
+    s = undefined;
+  }
+  if (!s) s = startSession(mx, room, widget, key);
+  stopPlacing(s);
+  s.slot = slot;
+  s.floating = false;
+  if (!s.blocked) placeDocked(s);
+  notify();
+  return s;
+}
+
+/** The panel stopped showing the widget: float it, or tear it down. */
+export function detachWidgetSession(key: string, slot: HTMLElement): void {
+  const s = sessions.get(key);
+  if (!s || s.slot !== slot) return;
+  s.slot = null;
+  stopPlacing(s);
+  if (!s.alwaysOnScreen || s.blocked) {
+    destroyWidgetSession(key);
+    return;
+  }
+  // One floating widget at a time: a newer one replaces an older one.
+  floatingWidgetSessions()
+    .filter((o) => o.key !== key)
+    .forEach((o) => destroyWidgetSession(o.key));
+  // Nobody is there to answer a permission prompt any more.
+  s.pendingAsk?.resolve(new Set(), false);
+  s.floating = true;
+  placeFloating(s);
+  notify();
+}
+
+function startSession(mx: MatrixClient, room: Room, widget: Widget, key: string): Internal {
+  const frame = document.createElement('div');
+  Object.assign(frame.style, {
+    position: 'fixed',
+    pointerEvents: 'auto',
+    overflow: 'hidden',
+    visibility: 'hidden',
+  });
+
+  const completeUrl = widgetCompleteUrl(widget, mx, room.roomId);
+  const blocked = !isWidgetUrlSafe(completeUrl, window.location.origin);
+  const s: Internal = {
+    key,
+    roomId: room.roomId,
+    widgetId: widget.id,
+    name: widget.name || 'Widget',
+    templateUrl: widget.templateUrl,
+    blocked,
+    alwaysOnScreen: false,
+    floating: false,
+    frame,
+    slot: null,
+    raf: undefined,
+    stop: () => undefined,
+  };
+  sessions.set(key, s);
+  if (blocked) return s;
+
+  // Security: never render a same-origin widget with allow-same-origin (a
+  // same-origin frame could break out of the sandbox against our own origin).
+  const iframe = document.createElement('iframe');
+  iframe.title = widget.name || 'Widget';
+  iframe.sandbox.value = 'allow-forms allow-scripts allow-same-origin allow-popups allow-downloads';
+  iframe.allow = 'autoplay; clipboard-write;';
+  iframe.src = completeUrl;
+  Object.assign(iframe.style, { width: '100%', height: '100%', border: 'none' });
+  frame.append(iframe);
+  layer().append(frame);
+
+  let origin = completeUrl;
+  try {
+    origin = new URL(completeUrl).host;
+  } catch {
+    // isWidgetUrlSafe already rejected unparsable URLs
+  }
+  let cancelAsk: (() => void) | undefined;
+  const driver = new GeneralWidgetDriver(
+    mx,
+    room.roomId,
+    { id: widget.id, url: widget.templateUrl },
+    (requests) =>
+      new Promise((resolve) => {
+        let settled = false;
+        const done = (allowed: Set<Capability>, remember: boolean) => {
+          if (settled) return;
+          settled = true;
+          cancelAsk = undefined;
+          s.pendingAsk = undefined;
+          notify();
+          resolve({ allowed, remember });
+        };
+        cancelAsk = () => done(new Set(), false);
+        // A floating widget has nobody to ask: grant nothing extra.
+        if (s.floating) {
+          done(new Set(), false);
+          return;
+        }
+        s.pendingAsk = { requests, origin, resolve: done };
+        notify();
+      }),
+  );
+  const clientApi = new ClientWidgetApi(widget, iframe, driver);
+  // Only messages from this widget's own frame and origin are handled, so a
+  // widget can't impersonate another one (or the call).
+  restrictWidgetMessages(clientApi, iframe, widget.origin);
+  clientApi.setViewedRoomId(room.roomId);
+
+  // MSC2931: the widget asks to stay visible when the user navigates away.
+  const onAlwaysOnScreen = (ev: CustomEvent<IWidgetApiRequest>) => {
+    ev.preventDefault();
+    if (!clientApi.hasCapability(MatrixCapabilities.AlwaysOnScreen)) {
+      clientApi.transport.reply(ev.detail, {
+        error: { message: 'Missing capability' },
+      });
+      return;
+    }
+    const value = (ev.detail.data as { value?: unknown } | undefined)?.value === true;
+    s.alwaysOnScreen = value;
+    clientApi.transport.reply(ev.detail, {});
+    // Floating only because it asked: once it no longer needs to be, go.
+    if (!value && s.floating) destroyWidgetSession(key);
+    else notify();
+  };
+  clientApi.on(`action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`, onAlwaysOnScreen);
+
+  // Live room events for widgets that were allowed to see them
+  // (ClientWidgetApi drops anything the widget has no capability for).
+  const feed = (ev: MatrixEvent) => {
+    if (ev.getRoomId() !== room.roomId) return;
+    if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) return;
+    clientApi.feedEvent(ev.getEffectiveEvent() as IRoomEvent).catch(() => undefined);
+  };
+  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);
+  };
+  const onState = (ev: MatrixEvent) => {
+    if (ev.getRoomId() !== room.roomId) return;
+    // The widget was removed from the room while it was floating.
+    if (
+      s.floating &&
+      (ev.getType() === 'im.vector.modular.widgets' || ev.getType() === 'm.widget') &&
+      ev.getStateKey() === widget.id &&
+      !ev.getContent()?.url
+    ) {
+      destroyWidgetSession(key);
+      return;
+    }
+    clientApi.feedStateUpdate(ev.getEffectiveEvent() as IRoomEvent).catch(() => undefined);
+  };
+  mx.on(RoomEvent.Timeline, onTimeline);
+  mx.on(RoomStateEvent.Events, onState);
+
+  s.stop = () => {
+    mx.off(RoomEvent.Timeline, onTimeline);
+    mx.off(RoomStateEvent.Events, onState);
+    clientApi.off(`action:${WidgetApiFromWidgetAction.UpdateAlwaysOnScreen}`, onAlwaysOnScreen);
+    cancelAsk?.();
+    clientApi.stop();
+  };
+  return s;
+}

src/app/features/room/widgets/widgetUtils.test.ts

@@ -8,6 +8,7 @@ import {
   generateWidgetId,
   classifyWidgetCapabilities,
   loadWidgetConsent,
+  widgetPopoutUrl,
 } from './widgetUtils';
 
 const APP = 'https://chat.lotusguild.org';
@@ -106,3 +107,33 @@ test('classifyWidgetCapabilities: reading protected state is fine, changing unpr
 test('loadWidgetConsent tolerates missing storage', () => {
   assert.equal(loadWidgetConsent('!r:x', 'w', 'https://w.example'), undefined);
 });
+
+test('[#266] space structure, call membership and Lotus room policy can never be granted', () => {
+  const { auto, ask } = classifyWidgetCapabilities(
+    [
+      'm.space.child',
+      'm.space.parent',
+      'org.matrix.msc3401.call',
+      'org.matrix.msc3401.call.member',
+      'm.call.member',
+      'io.lotus.voice_limit',
+      'io.lotus.room_quality',
+    ].map((t) => `org.matrix.msc2762.send.state_event:${t}`),
+  );
+  assert.equal(auto.size, 0);
+  assert.deepEqual(ask, []);
+});
+
+test('[#205] widgetPopoutUrl: only cross-origin https opens in a new window', () => {
+  // Built at runtime so the no-script-url lint rule doesn't flag the test data.
+  const scriptUrl = ['javascript', 'alert(1)'].join(':');
+  assert.equal(
+    widgetPopoutUrl('https://pad.example.org/p/room', APP),
+    'https://pad.example.org/p/room',
+  );
+  assert.equal(widgetPopoutUrl('https://chat.lotusguild.org/evil', APP), null, 'same origin');
+  assert.equal(widgetPopoutUrl('http://pad.example.org/', APP), null, 'not https');
+  assert.equal(widgetPopoutUrl(scriptUrl, APP), null, 'script URL');
+  assert.equal(widgetPopoutUrl('data:text/html,<b>x</b>', APP), null, 'data:');
+  assert.equal(widgetPopoutUrl('not a url', APP), null);
+});

src/app/features/room/widgets/widgetUtils.ts

@@ -1,8 +1,10 @@
+import type { MatrixClient } from 'matrix-js-sdk';
 import {
   Capability,
   EventDirection,
   EventKind,
   MatrixCapabilities,
+  type Widget,
   WidgetEventCapability,
 } from 'matrix-widget-api';
 
@@ -48,6 +50,29 @@ export const isWidgetUrlSafe = (completeUrl: string, appOrigin: string): boolean
   }
 };
 
+/** The widget's URL with its template variables filled in for this viewer. */
+export const widgetCompleteUrl = (widget: Widget, mx: MatrixClient, roomId: string): string =>
+  widget.getCompleteUrl({
+    currentUserId: mx.getSafeUserId(),
+    widgetRoomId: roomId,
+    deviceId: mx.getDeviceId() ?? undefined,
+    baseUrl: mx.baseUrl,
+  });
+
+/**
+ * [Gitea #205] The URL to open a widget in its own window, or null when it
+ * mustn't be opened: only cross-origin https (room state can carry anything,
+ * e.g. a `javascript:` URL from another client, whose origin is "null").
+ */
+export const widgetPopoutUrl = (completeUrl: string, appOrigin: string): string | null => {
+  try {
+    const u = new URL(completeUrl);
+    return u.protocol === 'https:' && u.origin !== appOrigin ? u.href : null;
+  } catch {
+    return null;
+  }
+};
+
 export const generateWidgetId = (): string =>
   `lotus_${Date.now()}_${Math.random().toString(36).slice(2, 10)}`;
 
@@ -67,6 +92,16 @@ export const PROTECTED_STATE_TYPES: ReadonlySet<string> = new Set([
   'm.room.third_party_invite',
   'im.vector.modular.widgets',
   'm.widget',
+  // [Gitea #266] Space structure, call membership and Lotus room policy: a
+  // widget could restructure a space, fake call membership or lift the
+  // voice-channel limit, so these can't be granted even with consent.
+  'm.space.child',
+  'm.space.parent',
+  'org.matrix.msc3401.call',
+  'org.matrix.msc3401.call.member',
+  'm.call.member',
+  'io.lotus.voice_limit',
+  'io.lotus.room_quality',
 ]);
 
 export type WidgetPermissionRequest = {
@@ -137,8 +172,11 @@ export const classifyWidgetCapabilities = (
  */
 export type StoredWidgetConsent = { url: string; allowed: Capability[]; denied: Capability[] };
 
+// [Gitea #266] Swept on logout by clearPlaintextCaches, so one account's
+// approvals never apply to the next account on the same device.
+export const WIDGET_CONSENT_PREFIX = 'lotus.widgetConsent.';
 export const widgetConsentKey = (roomId: string, widgetId: string): string =>
-  `lotus.widgetConsent.${roomId}.${widgetId}`;
+  `${WIDGET_CONSENT_PREFIX}${roomId}.${widgetId}`;
 
 export const loadWidgetConsent = (
   roomId: string,

src/app/features/settings/Settings.tsx

@@ -33,16 +33,9 @@ import { About } from './about';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { stopPropagation } from '../../utils/keyboard';
 import { LogoutDialog } from '../../components/LogoutDialog';
+import { SettingsPages } from './pages';
 
-export enum SettingsPages {
-  GeneralPage,
-  AccountPage,
-  NotificationPage,
-  DevicesPage,
-  EmojisStickersPage,
-  DeveloperToolsPage,
-  AboutPage,
-}
+export { SettingsPages };
 
 type SettingsMenuItem = {
   page: SettingsPages;

src/app/features/settings/SettingsLazy.tsx

@@ -0,0 +1,43 @@
+import React, { lazy, Suspense } from 'react';
+import { Box, Spinner, config } from 'folds';
+import type { SettingsPages } from './pages';
+
+// Settings is a large, rarely-open dialog (all its pages, pickers, the
+// denoise tester…). Load it on first open instead of in the entry chunk, and
+// warm the chunk once the app is idle so opening it rarely waits.
+const loadSettings = () => import('./Settings');
+const SettingsDialog = lazy(() => loadSettings().then((m) => ({ default: m.Settings })));
+if (typeof window !== 'undefined') {
+  const warm = () => {
+    loadSettings().catch(() => undefined);
+  };
+  if ('requestIdleCallback' in window) window.requestIdleCallback(warm, { timeout: 10_000 });
+  else setTimeout(warm, 5_000);
+}
+
+type SettingsProps = {
+  initialPage?: SettingsPages;
+  requestClose: () => void;
+};
+
+export function Settings(props: SettingsProps) {
+  return (
+    <Suspense
+      fallback={
+        // Settings opens inside a FocusTrap, which needs a tabbable node.
+        <Box
+          tabIndex={0}
+          role="status"
+          aria-label="Loading settings"
+          alignItems="Center"
+          justifyContent="Center"
+          style={{ padding: config.space.S700, outline: 'none' }}
+        >
+          <Spinner variant="Secondary" size="400" />
+        </Box>
+      }
+    >
+      <SettingsDialog {...props} />
+    </Suspense>
+  );
+}

src/app/features/settings/about/About.tsx

@@ -8,6 +8,7 @@ import { getOriginBaseUrl, withOriginBaseUrl } from '../../../pages/pathUtils';
 import pkg from '../../../../../package.json';
 import { clearCacheAndReload } from '../../../../client/initMatrix';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { tauriInvoke } from '../../../hooks/useTauri';
 
 const LotusLogo = withOriginBaseUrl(getOriginBaseUrl(), '/public/res/lotus-logo.png');
 
@@ -78,6 +79,51 @@ function useServerSupport(): { support: MSC1929Support | null; loading: boolean
 type AboutProps = {
   requestClose: () => void;
 };
+/**
+ * [Gitea #276] Which build someone is on: the web deploy's commit and build
+ * date (stamped in by vite.config.js), plus the desktop app's own version from
+ * Tauri, the number a desktop or updater bug report needs.
+ */
+function BuildInfo() {
+  const [desktopVersion, setDesktopVersion] = useState<string>();
+  useEffect(() => {
+    tauriInvoke()?.('plugin:app|version')
+      .then((v) => {
+        if (typeof v === 'string') setDesktopVersion(v);
+      })
+      .catch(() => undefined);
+  }, []);
+  const commit = __LOTUS_BUILD_COMMIT__;
+  const built = new Date(__LOTUS_BUILD_DATE__);
+  const builtText = Number.isNaN(built.getTime())
+    ? undefined
+    : built.toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
+  return (
+    <Box direction="Column" gap="0">
+      {desktopVersion && (
+        <Text size="T200" priority="300">
+          Desktop {desktopVersion}
+        </Text>
+      )}
+      <Text size="T200" priority="300">
+        Web build{' '}
+        {commit !== 'unknown' ? (
+          <a
+            href={`https://code.lotusguild.org/LotusGuild/cinny/commit/${commit}`}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {commit}
+          </a>
+        ) : (
+          commit
+        )}
+        {builtText && ` · built ${builtText}`}
+      </Text>
+    </Box>
+  );
+}
+
 export function About({ requestClose }: AboutProps) {
   const mx = useMatrixClient();
   const { support: serverSupport, loading: supportLoading } = useServerSupport();
@@ -117,6 +163,7 @@ export function About({ requestClose }: AboutProps) {
                       <Text size="T200">v{pkg.version}</Text>
                     </Box>
                     <Text>A Matrix client for Lotus Guild.</Text>
+                    <BuildInfo />
                   </Box>
 
                   <Box gap="200" wrap="Wrap">

src/app/features/settings/account/Profile.tsx

@@ -71,6 +71,8 @@ import {
   makePresetId,
   normalizeLabel,
 } from '../../../utils/statusPresets';
+import { STATUS_EXPIRY_KEY, STATUS_MSG_KEY } from '../../../utils/statusKeys';
+import { writeStatusExpiry } from '../../../utils/statusExpiry';
 
 type ProfileProps = {
   profile: UserProfile;
@@ -369,8 +371,7 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) {
   );
 }
 
-export const STATUS_EXPIRY_KEY = (id: string) => `lotus-status-expiry-${id}`;
-export const STATUS_MSG_KEY = (id: string) => `lotus-status-msg-${id}`;
+export { STATUS_EXPIRY_KEY, STATUS_MSG_KEY };
 
 const CLEAR_AFTER_OPTIONS = [
   { label: 'Never', value: '0' },
@@ -512,12 +513,16 @@ function ProfileStatus() {
       if (msg && delayMs > 0) {
         // Persist the expiry timestamp; the always-mounted StatusExpiryMonitor
         // (ClientNonUIFeatures) fires the auto-clear even when Settings is closed.
-        localStorage.setItem(STATUS_EXPIRY_KEY(userId), String(Date.now() + delayMs));
+        const expiresAt = Date.now() + delayMs;
+        localStorage.setItem(STATUS_EXPIRY_KEY(userId), String(expiresAt));
+        // [Gitea #300] …and on every other Lotus device, via account data.
+        writeStatusExpiry(mx, msg, expiresAt).catch(() => undefined);
       } else {
         localStorage.removeItem(STATUS_EXPIRY_KEY(userId));
+        writeStatusExpiry(mx, msg).catch(() => undefined);
       }
     },
-    [saveStatus, userId],
+    [saveStatus, userId, mx],
   );
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -557,6 +562,7 @@ function ProfileStatus() {
     setStatusMsg('');
     localStorage.removeItem(STATUS_MSG_KEY(userId));
     localStorage.removeItem(STATUS_EXPIRY_KEY(userId));
+    writeStatusExpiry(mx, '').catch(() => undefined);
     // Preserve the user's chosen presence when clearing the status message.
     writePresence(mx, {
       presence: presenceStateFromSetting(presenceStatus, hidePresence),

src/app/features/settings/account/ProfileDecoration.tsx

@@ -1,7 +1,12 @@
 import React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Button, Chip, Icon, Icons, Input, Text, Spinner, color } from 'folds';
+import { Avatar, Box, Button, Chip, Icon, Icons, Input, Text, Spinner, color } from 'folds';
 import { Method } from 'matrix-js-sdk';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useUserProfile } from '../../../hooks/useUserProfile';
+import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
+import { nameInitials } from '../../../utils/common';
+import { UserAvatar } from '../../../components/user-avatar';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { SettingTile } from '../../../components/setting-tile';
 import {
@@ -14,6 +19,8 @@ import { invalidateDecorationCache } from '../../../hooks/useAvatarDecoration';
 
 const PROFILE_FIELD = 'io.lotus.avatar_decoration';
 const CELL_SIZE = 72;
+// Matches AvatarDecoration's default inset, so the preview looks like the timeline.
+const PREVIEW_INSET = 8;
 
 function DecorationPreviewCell({
   slug,
@@ -86,6 +93,12 @@ function categoryOf(slug: string | null): string {
 export function ProfileDecoration() {
   const mx = useMatrixClient();
   const userId = mx.getUserId()!;
+  const useAuthentication = useMediaAuthentication();
+  const profile = useUserProfile(userId);
+  const myName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
+  const myAvatarUrl = profile.avatarUrl
+    ? (mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined)
+    : undefined;
 
   const [current, setCurrent] = useState<string | null>(null);
   const [selected, setSelected] = useState<string | null>(null);
@@ -198,6 +211,10 @@ export function ProfileDecoration() {
       <Box direction="Column" gap="300">
         {/* Current selection preview */}
         <Box alignItems="Center" gap="300">
+          {/* [Gitea #272] Your own avatar with the decoration overlaid, as the
+              timeline draws it (AvatarDecoration: the image is the avatar plus
+              an 8px margin on every side). With no decoration the circle gets
+              a visible dashed outline instead of vanishing into the card. */}
           <div
             style={{
               position: 'relative',
@@ -205,10 +222,29 @@ export function ProfileDecoration() {
               height: CELL_SIZE,
               flexShrink: 0,
               borderRadius: '50%',
-              background: color.SurfaceVariant.Container,
-              overflow: 'hidden',
+              boxSizing: 'border-box',
+              border: selected
+                ? 'none'
+                : `2px dashed color-mix(in srgb, ${color.SurfaceVariant.OnContainer} 45%, transparent)`,
             }}
           >
+            <Avatar
+              size="500"
+              radii="Pill"
+              style={{
+                position: 'absolute',
+                inset: PREVIEW_INSET,
+                width: CELL_SIZE - PREVIEW_INSET * 2,
+                height: CELL_SIZE - PREVIEW_INSET * 2,
+              }}
+            >
+              <UserAvatar
+                userId={userId}
+                src={myAvatarUrl}
+                alt=""
+                renderFallback={() => <Text size="H5">{nameInitials(myName)}</Text>}
+              />
+            </Avatar>
             {selected && (
               <img
                 src={decorationUrl(selected)}
@@ -220,6 +256,7 @@ export function ProfileDecoration() {
                   height: '100%',
                   objectFit: 'contain',
                   pointerEvents: 'none',
+                  zIndex: 1,
                 }}
               />
             )}

src/app/features/settings/general/General.tsx

@@ -108,9 +108,11 @@ import {
   TRANSLATE_TARGET_LANGUAGES,
   normalizeLang,
   isSupportedTargetLang,
+  translationUnavailableText,
 } from '../../../utils/translation/langUtils';
 import { chromeTranslationEngine } from '../../../utils/translation/chromeEngine';
-import { SequenceCardStyle } from '../styles.css';
+import { SequenceCardStyle, SettingTileGroup } from '../styles.css';
+import { ScreenSize, useScreenSize } from '../../../hooks/useScreenSize';
 import { UpdateProgress, useTauriUpdater } from '../../../hooks/useTauriUpdater';
 import {
   describeUpdateError,
@@ -1597,6 +1599,7 @@ function Privacy() {
 // [Gitea #104] Sync toggle + the two manual actions. The toggle is itself
 // device-local (never synced) so switching it off here sticks.
 function SettingsSyncSection() {
+  const isMobile = useScreenSize() === ScreenSize.Mobile;
   const [settingsSync, setSettingsSync] = useSetting(settingsAtom, 'settingsSync');
   const { pushNow, clearRemote } = useSettingsSyncActions();
   const [busy, setBusy] = useState<'push' | 'clear' | null>(null);
@@ -1620,6 +1623,34 @@ function SettingsSyncSection() {
     }
   };
 
+  const syncButtons = (
+    <Box gap="200">
+      <Button
+        size="300"
+        variant="Secondary"
+        fill="Soft"
+        outlined
+        radii="300"
+        disabled={busy !== null}
+        before={busy === 'push' ? <Spinner size="100" variant="Secondary" /> : undefined}
+        onClick={() => run('push')}
+      >
+        <Text size="B300">Push now</Text>
+      </Button>
+      <Button
+        size="300"
+        variant="Critical"
+        fill="None"
+        radii="300"
+        disabled={busy !== null}
+        before={busy === 'clear' ? <Spinner size="100" variant="Critical" /> : undefined}
+        onClick={() => run('clear')}
+      >
+        <Text size="B300">Clear synced copy</Text>
+      </Button>
+    </Box>
+  );
+
   return (
     <Box direction="Column" gap="100">
       <Text size="L400">Sync</Text>
@@ -1635,34 +1666,12 @@ function SettingsSyncSection() {
           <SettingTile
             title="Use This Device's Settings Everywhere"
             description="Push this device's current preferences so every other device adopts them, even ones that changed something more recently."
-            after={
-              <Box gap="200">
-                <Button
-                  size="300"
-                  variant="Secondary"
-                  fill="Soft"
-                  outlined
-                  radii="300"
-                  disabled={busy !== null}
-                  before={busy === 'push' ? <Spinner size="100" variant="Secondary" /> : undefined}
-                  onClick={() => run('push')}
-                >
-                  <Text size="B300">Push now</Text>
-                </Button>
-                <Button
-                  size="300"
-                  variant="Critical"
-                  fill="None"
-                  radii="300"
-                  disabled={busy !== null}
-                  before={busy === 'clear' ? <Spinner size="100" variant="Critical" /> : undefined}
-                  onClick={() => run('clear')}
-                >
-                  <Text size="B300">Clear synced copy</Text>
-                </Button>
-              </Box>
-            }
-          />
+            // [Gitea #273] On phones the two buttons squeezed the text into a
+            // narrow column; put them under the description there.
+            after={isMobile ? undefined : syncButtons}
+          >
+            {isMobile && <Box style={{ paddingTop: config.space.S100 }}>{syncButtons}</Box>}
+          </SettingTile>
           {note && (
             <Text
               size="T200"
@@ -1799,7 +1808,8 @@ function Calls() {
           title="Noise Suppression"
           description={
             <Box direction="Column" gap="200">
-              <Text>
+              {/* [Gitea #271] T200 like every other setting description. */}
+              <Text size="T200">
                 Filter background noise from your mic during calls. Browser-native uses the built-in
                 WebRTC suppressor (Google NSNet2). ML runs a dedicated model for stronger removal.
               </Text>
@@ -2032,7 +2042,7 @@ function Calls() {
         )}
       </SequenceCard>
       <SequenceCard
-        className={SequenceCardStyle}
+        className={`${SequenceCardStyle} ${SettingTileGroup}`}
         variant="SurfaceVariant"
         direction="Column"
         gap="400"
@@ -2088,7 +2098,12 @@ function Calls() {
           description={
             deafenBind.error ??
             (deafenHotkey
-              ? `Press ${keyLabel(deafenKey)} during a call to mute your speakers. Press Escape to cancel rebind.${
+              ? `${
+                  // [Gitea #279] The Escape hint only applies while rebinding.
+                  deafenBind.listening
+                    ? 'Press a key to bind it, or Escape to cancel.'
+                    : `Press ${keyLabel(deafenKey)} during a call to mute your speakers.`
+                }${
                   !isSafeGlobalToggleKey(deafenKey)
                     ? ` A letter, digit or Space only works in the call view — on a chat screen typing takes priority${
                         isTauriEnv() && globalCallHotkeys ? ' and other apps are never watched' : ''
@@ -2129,7 +2144,7 @@ function Calls() {
         )}
       </SequenceCard>
       <SequenceCard
-        className={SequenceCardStyle}
+        className={`${SequenceCardStyle} ${SettingTileGroup}`}
         variant="SurfaceVariant"
         direction="Column"
         gap="400"
@@ -2263,7 +2278,11 @@ function Calls() {
         />
       </SequenceCard>
 
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+      <SequenceCard
+        className={`${SequenceCardStyle} ${SettingTileGroup}`}
+        variant="SurfaceVariant"
+        direction="Column"
+      >
         <SettingTile
           title="Soundboard"
           description="Show a soundboard button in the call bar. Upload short audio clips (like custom emojis) to play them into the call. Clips sync across your devices."
@@ -2750,13 +2769,17 @@ function Messages() {
           }
         />
       </SequenceCard>
-      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+      <SequenceCard
+        className={`${SequenceCardStyle} ${SettingTileGroup}`}
+        variant="SurfaceVariant"
+        direction="Column"
+      >
         <SettingTile
           title="Translate Messages Into"
           description={
             translationSupported
               ? 'Translate messages written in other languages into this one. Runs entirely on your device — message text never leaves your computer or touches a cloud service.'
-              : 'On-device translation isn’t available in this browser. Use a Chromium desktop browser (Chrome/Edge 138+) or the Lotus desktop app.'
+              : translationUnavailableText(isTauriEnv())
           }
           after={
             <SettingsSelect

src/app/features/settings/index.ts

@@ -1 +1,2 @@
-export * from './Settings';
+export { SettingsPages } from './pages';
+export { Settings } from './SettingsLazy';

src/app/features/settings/notifications/NotificationModeSwitcher.tsx

@@ -98,7 +98,7 @@ export function NotificationModeSwitcher({ pushRule, onChange }: NotificationMod
                     key={mode}
                     size="300"
                     variant="Surface"
-                    aria-selected={mode === selectedMode}
+                    aria-pressed={mode === selectedMode}
                     radii="300"
                     onClick={() => handleSelect(mode)}
                   >

src/app/features/settings/pages.ts

@@ -0,0 +1,11 @@
+/** Settings dialog pages. Kept apart from Settings.tsx so callers can name a
+ * page without pulling the dialog into the entry chunk. */
+export enum SettingsPages {
+  GeneralPage,
+  AccountPage,
+  NotificationPage,
+  DevicesPage,
+  EmojisStickersPage,
+  DeveloperToolsPage,
+  AboutPage,
+}

src/app/features/settings/styles.css.ts

@@ -1,6 +1,18 @@
-import { style } from '@vanilla-extract/css';
-import { config } from 'folds';
+import { globalStyle, style } from '@vanilla-extract/css';
+import { color, config } from 'folds';
 
 export const SequenceCardStyle = style({
   padding: config.space.S300,
 });
+
+/**
+ * [Gitea #273] Several settings share one card; without a separator the next
+ * tile's title read like part of the previous description. A thin line goes
+ * between tiles only (not between a tile and its own slider or note).
+ */
+export const SettingTileGroup = style({});
+// globalStyle: vanilla-extract's `selectors` may only target the element itself.
+globalStyle(`${SettingTileGroup} > [data-setting-tile] ~ [data-setting-tile]`, {
+  borderTop: `1px solid color-mix(in srgb, ${color.SurfaceVariant.OnContainer} 14%, transparent)`,
+  paddingTop: config.space.S400,
+});

src/app/features/space-settings/SpaceSettingsRenderer.tsx

@@ -21,7 +21,7 @@ function RenderSettings({ state }: RenderSettingsProps) {
   if (!room) return null;
 
   return (
-    <Modal500 requestClose={closeSettings}>
+    <Modal500 requestClose={closeSettings} label={`${room.name} space settings`}>
       <SpaceProvider value={space ?? null}>
         <RoomProvider value={room}>
           <SpaceSettings initialPage={page} requestClose={closeSettings} />

src/app/hooks/useCallError.ts

@@ -0,0 +1,41 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { SyncState } from 'matrix-js-sdk';
+import { CALL_ERROR_CHANGED, CallControl } from '../plugins/call/CallControl';
+import { CallErrorState } from '../plugins/call/callError';
+import { useMatrixClient } from './useMatrixClient';
+import { useSyncState } from './useSyncState';
+
+/** [Gitea #318] The fork's current call error (null while the call is fine). */
+export function useCallError(control: CallControl): CallErrorState {
+  const [err, setErr] = useState(control.callError);
+  useEffect(() => {
+    const on = () => setErr(control.callError);
+    on();
+    control.on(CALL_ERROR_CHANGED, on);
+    return () => {
+      control.off(CALL_ERROR_CHANGED, on);
+    };
+  }, [control]);
+  return err;
+}
+
+/**
+ * [Gitea #318] After a homeserver stall the call drops with "Connection
+ * lost". Once sync is back, reconnect automatically (once per drop).
+ */
+export function useReconnectWhenSynced(control: CallControl): void {
+  const mx = useMatrixClient();
+  const err = useCallError(control);
+  const tried = useRef<CallErrorState>(null);
+  useSyncState(
+    mx,
+    useCallback(
+      (state: SyncState | null) => {
+        if (state !== SyncState.Syncing || !err?.recoverable || tried.current === err) return;
+        tried.current = err;
+        control.reconnect();
+      },
+      [err, control],
+    ),
+  );
+}

src/app/hooks/useLongPress.ts

@@ -17,22 +17,37 @@ export function useLongPress(onLongPress: (x: number, y: number) => void) {
   const timer = useRef<number | undefined>(undefined);
   const start = useRef<{ x: number; y: number } | null>(null);
   const fired = useRef(false);
+  // [Gitea #199] The element being pressed carries `data-pressing` (set on the
+  // DOM directly, no re-render) so iOS can't start a text selection under
+  // the finger; see `[data-touch-actions]` in room/message/styles.css.ts.
+  const pressed = useRef<HTMLElement | null>(null);
 
-  const clear = useCallback(() => {
+  const stopTimer = useCallback(() => {
     if (timer.current !== undefined) window.clearTimeout(timer.current);
     timer.current = undefined;
     start.current = null;
   }, []);
 
+  // The finger is up (or the gesture was cancelled): only now drop
+  // `data-pressing`, so the system selection can't start under a finger that
+  // is still down after the sheet opened.
+  const clear = useCallback(() => {
+    stopTimer();
+    pressed.current?.removeAttribute('data-pressing');
+    pressed.current = null;
+  }, [stopTimer]);
+
   const onTouchStart = useCallback(
     (evt: React.TouchEvent) => {
       if (!coarse || evt.touches.length !== 1) return;
       const t = evt.touches[0];
       start.current = { x: t.clientX, y: t.clientY };
       fired.current = false;
+      pressed.current = evt.currentTarget as HTMLElement;
+      pressed.current.setAttribute('data-pressing', '');
       timer.current = window.setTimeout(() => {
         const s = start.current;
-        clear();
+        stopTimer();
         if (!s) return;
         fired.current = true;
         window.setTimeout(() => {
@@ -41,7 +56,7 @@ export function useLongPress(onLongPress: (x: number, y: number) => void) {
         onLongPress(s.x, s.y);
       }, LONG_PRESS_MS);
     },
-    [coarse, clear, onLongPress],
+    [coarse, stopTimer, onLongPress],
   );
 
   const onTouchMove = useCallback(
@@ -72,7 +87,16 @@ export function useLongPress(onLongPress: (x: number, y: number) => void) {
 
   return {
     coarse,
-    handlers: coarse ? { onTouchStart, onTouchMove, onTouchEnd, onTouchCancel: clear } : {},
+    handlers: coarse
+      ? {
+          // [Gitea #199] Marks the element for the iOS hardening CSS.
+          'data-touch-actions': '',
+          onTouchStart,
+          onTouchMove,
+          onTouchEnd,
+          onTouchCancel: clear,
+        }
+      : {},
     /** True for ~1 s after a long-press fired (drop the Android contextmenu echo). */
     suppressContextMenu: fired,
   };

src/app/hooks/usePowerLevels.ts

@@ -46,7 +46,7 @@ const fillMissingPowers = (powerLevels: IPowerLevels): IPowerLevels =>
     const keys = Object.keys(DEFAULT_POWER_LEVELS) as unknown as (keyof IPowerLevels)[];
     keys.forEach((key) => {
       if (draftPl[key] === undefined) {
-        draftPl[key] = DEFAULT_POWER_LEVELS[key] as any;
+        (draftPl as Record<string, unknown>)[key] = DEFAULT_POWER_LEVELS[key];
       }
     });
     if (draftPl.notifications && typeof draftPl.notifications.room !== 'number') {

src/app/pages/Router.tsx

@@ -68,6 +68,7 @@ import { SHARE_PAGE_PATH } from '../../swShare';
 import { RouteError } from './RouteError';
 import { CallStatusRenderer } from './CallStatusRenderer';
 import { CallEmbedProvider } from '../components/CallEmbedProvider';
+import { FloatingWidget } from '../features/room/widgets/FloatingWidget';
 
 const Share = React.lazy(() => import('./client/share/Share').then((m) => ({ default: m.Share })));
 
@@ -197,6 +198,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                           <Outlet />
                         </ClientLayout>
                         <CallStatusRenderer />
+                        <FloatingWidget />
                       </CallEmbedProvider>
                       <React.Suspense fallback={null}>
                         <SearchModalRenderer />

src/app/pages/client/ClientNonUIFeatures.tsx

@@ -63,7 +63,7 @@ import {
   migrateLocalMuteTimers,
   unmuteRoom,
 } from '../../features/room-nav/muteTimers';
-import { STATUS_EXPIRY_KEY, STATUS_MSG_KEY } from '../../features/settings/account/Profile';
+import { STATUS_EXPIRY_KEY, STATUS_MSG_KEY } from '../../utils/statusKeys';
 import { noteLocalStatusWrite } from '../../utils/ownStatusSync';
 import { setPresenceWithRetry } from '../../utils/presenceWrite';
 import { useDeepLinkNavigate } from '../../hooks/useDeepLinkNavigate';
@@ -92,6 +92,7 @@ import {
   shouldNotifyThreadReply,
   THREAD_NOTIFICATIONS_FALLBACK_BEHAVIOR,
 } from '../../utils/threadNotifications';
+import { readStatusExpiry, statusExpiryAction, writeStatusExpiry } from '../../utils/statusExpiry';
 import { AccountDataEvent } from '../../../types/matrix/accountData';
 
 // Grace period after the initial sync settles before invite notifications arm, so
@@ -436,12 +437,7 @@ function StatusExpiryMonitor() {
     // permanently and the status stayed set forever. Retry the write (honouring
     // Retry-After), and only forget the status once the server has taken it.
     let clearing = false;
-    const check = () => {
-      if (clearing) return;
-      const stored = localStorage.getItem(expiryKey);
-      if (!stored) return;
-      const ts = parseInt(stored, 10);
-      if (!ts || Date.now() < ts) return;
+    const clearStatus = () => {
       clearing = true;
       setPresenceWithRetry(mx, {
         presence: presenceStateFromSetting(presenceStatusRef.current, hidePresenceRef.current),
@@ -451,12 +447,31 @@ function StatusExpiryMonitor() {
           noteLocalStatusWrite();
           localStorage.removeItem(msgKey);
           localStorage.removeItem(expiryKey);
+          writeStatusExpiry(mx, '').catch(() => undefined);
         })
         .catch(() => undefined)
         .finally(() => {
           clearing = false;
         });
     };
+    const check = () => {
+      if (clearing) return;
+      const stored = localStorage.getItem(expiryKey);
+      const ts = stored ? parseInt(stored, 10) : 0;
+      if (ts && Date.now() >= ts) {
+        clearStatus();
+        return;
+      }
+      // [Gitea #300] An expiry set on another device (account data): clear the
+      // status if it is still that one, otherwise just forget the expiry.
+      const action = statusExpiryAction(
+        readStatusExpiry(mx),
+        mx.getUser(userId)?.presenceStatusMsg,
+        Date.now(),
+      );
+      if (action === 'clear') clearStatus();
+      else if (action === 'forget') writeStatusExpiry(mx, '').catch(() => undefined);
+    };
 
     check();
     // Poll often enough that a rate-limited retry lands promptly, but not so

src/app/pages/client/ClientRoot.tsx

@@ -33,6 +33,8 @@ import {
 } from '../../../client/initMatrix';
 import { deleteSearchCacheDatabase } from '../../utils/searchCache';
 import { clearPlaintextCaches } from '../../state/plaintextCaches';
+import { clearSoundboardClipCache } from '../../utils/soundboardClips';
+import { clearSharedPayload } from '../../../swShare';
 import { SplashScreen } from '../../components/splash-screen';
 import { ServerConfigsLoader } from '../../components/ServerConfigsLoader';
 import { CapabilitiesProvider } from '../../hooks/useCapabilities';
@@ -172,6 +174,10 @@ const useLogoutListener = (mx?: MatrixClient) => {
       // (translation, scheduled messages, recent searches/forwards/gifs/
       // stickers, nav paths) — wipe them on server-forced logout too.
       clearPlaintextCaches(mx?.getUserId() ?? undefined);
+      // [Gitea #57] As on manual logout: no decrypted clip bytes via blob: URLs.
+      clearSoundboardClipCache();
+      // [Gitea #267] As on manual logout: drop files stashed by the share target.
+      await clearSharedPayload().catch(() => undefined);
       // Remove only the session credential keys — NOT settings, drafts, and
       // other preferences (N98). The SDK's IndexedDB stores are cleared above;
       // window.localStorage.clear() is reserved for the explicit reset path.

src/app/pages/client/SyncStatus.tsx

@@ -65,12 +65,12 @@ export function SyncStatus({ mx }: SyncStatusProps) {
     );
   }
 
-  if (
-    (stateData.current === SyncState.Prepared ||
-      stateData.current === SyncState.Syncing ||
-      stateData.current === SyncState.Catchup) &&
-    stateData.previous !== SyncState.Syncing
-  ) {
+  // [Gitea #274] Only while catching up after a drop. Upstream also showed it
+  // for PREPARED and for the first SYNCING after PREPARED/RECONNECTING, i.e.
+  // until the NEXT /sync returned: on a quiet account that long-polls ~30 s
+  // while the app already works (a SYNCING means a sync just succeeded).
+  // A real failure still surfaces as Reconnecting / Connection lost.
+  if (stateData.current === SyncState.Catchup) {
     return (
       <Box direction="Column" shrink="No">
         <Box

src/app/pages/client/inbox/Invites.tsx

@@ -369,7 +369,7 @@ function InviteFilters({
     <Box gap="200">
       <Chip
         variant={isKnown ? 'Success' : 'Surface'}
-        aria-selected={isKnown}
+        aria-pressed={isKnown}
         outlined={!isKnown}
         onClick={() => onFilter(InviteFilter.Known)}
         before={isKnown && <Icon size="100" src={Icons.Check} />}
@@ -385,7 +385,7 @@ function InviteFilters({
       </Chip>
       <Chip
         variant={isUnknown ? 'Warning' : 'Surface'}
-        aria-selected={isUnknown}
+        aria-pressed={isUnknown}
         outlined={!isUnknown}
         onClick={() => onFilter(InviteFilter.Unknown)}
         before={isUnknown && <Icon size="100" src={Icons.Check} />}
@@ -401,7 +401,7 @@ function InviteFilters({
       </Chip>
       <Chip
         variant={isSpam ? 'Critical' : 'Surface'}
-        aria-selected={isSpam}
+        aria-pressed={isSpam}
         outlined={!isSpam}
         onClick={() => onFilter(InviteFilter.Spam)}
         before={isSpam && <Icon size="100" src={Icons.Check} />}

src/app/pages/client/share/Share.tsx

@@ -145,6 +145,11 @@ export function Share() {
               <Box direction="Column" gap="400">
                 <Box direction="Column" gap="200">
                   <Text size="L400">Shared</Text>
+                  {/* [Gitea #267] Not everything that arrives here came from the
+                      user's share sheet; say so before they pick a room. */}
+                  <Text size="T200" priority="300">
+                    This came from another app or website. Check it before you send it.
+                  </Text>
                   {shared.files.map((f) => (
                     <Box key={f.name} alignItems="Center" gap="200">
                       <Icon

src/app/pages/client/sidebar/SettingsTab.tsx

@@ -217,7 +217,7 @@ export function SettingsTab() {
       </SidebarItemTooltip>
       <PresencePicker />
       {settingsOpen && (
-        <Modal500 requestClose={() => setSettingsOpen(false)}>
+        <Modal500 requestClose={() => setSettingsOpen(false)} label="Settings">
           <Settings initialPage={initialPage} requestClose={() => setSettingsOpen(false)} />
         </Modal500>
       )}

src/app/pages/client/sidebar/UnverifiedTab.tsx

@@ -82,7 +82,7 @@ function UnverifiedIndicator() {
         </SidebarItem>
       )}
       {settings && (
-        <Modal500 requestClose={closeSettings}>
+        <Modal500 requestClose={closeSettings} label="Settings">
           <Settings initialPage={SettingsPages.DevicesPage} requestClose={closeSettings} />
         </Modal500>
       )}

src/app/plugins/call/CallControl.ts

@@ -3,6 +3,7 @@ import { EventEmitter } from 'events';
 import { CallControlState } from './CallControlState';
 import { ElementMediaStateDetail, ElementMediaStatePayload, ElementWidgetActions } from './types';
 import { canDelegateCapability } from './utils';
+import { CallErrorState, parseCallError } from './callError';
 
 export enum CallControlEvent {
   StateUpdate = 'state_update',
@@ -54,6 +55,38 @@ export function parseForkHotkeyReport(data: unknown): ForkHotkeyReport | null {
   };
 }
 
+export const CALL_ERROR_CHANGED = 'call_error_changed';
+
+export const SCREENSHARE_AUDIO_STATE = 'screenshare_audio_state';
+
+/** Pure: parse the fork's `io.lotus.screenshare_audio_state` (#277). */
+export function parseScreenshareAudioState(data: unknown): boolean | undefined {
+  if (typeof data !== 'object' || data === null) return undefined;
+  const { present } = data as { present?: unknown };
+  return typeof present === 'boolean' ? present : undefined;
+}
+
+export type AudioOutputOption = { id: string; label: string };
+export const AUDIO_OUTPUT_STATE = 'audio_output_state';
+
+/** Pure: parse the fork's `io.lotus.audio_output_state` (#310). */
+export function parseAudioOutputState(
+  data: unknown,
+): { deviceId?: string; available?: AudioOutputOption[] } | undefined {
+  if (typeof data !== 'object' || data === null) return undefined;
+  const { deviceId, available } = data as { deviceId?: unknown; available?: unknown };
+  const list = Array.isArray(available)
+    ? available.filter(
+        (o): o is AudioOutputOption =>
+          typeof o === 'object' &&
+          o !== null &&
+          typeof (o as AudioOutputOption).id === 'string' &&
+          typeof (o as AudioOutputOption).label === 'string',
+      )
+    : undefined;
+  return { deviceId: typeof deviceId === 'string' ? deviceId : undefined, available: list };
+}
+
 export class CallControl extends EventEmitter implements CallControlState {
   private state: CallControlState;
 
@@ -212,11 +245,67 @@ export class CallControl extends EventEmitter implements CallControlState {
     return this._audioOutputId;
   }
 
+  // [Gitea #318] The fork's error page ("Connection lost") is up; the host
+  // kept showing the call as joined with controls that did nothing.
+  private _callError: CallErrorState = null;
+
+  public get callError(): CallErrorState {
+    return this._callError;
+  }
+
+  /** The fork's `io.lotus.call_error` report. */
+  public onCallError(data: unknown) {
+    const next = parseCallError(data);
+    if (next === undefined) return;
+    this._callError = next;
+    this.emit(CALL_ERROR_CHANGED);
+  }
+
+  /** Press the fork's Reconnect / Try again. */
+  public reconnect(): void {
+    this.call.transport.send('io.lotus.reconnect', {}).catch(() => undefined);
+  }
+
   public setAudioOutput(deviceId: string): void {
     this._audioOutputId = deviceId;
     this.sendAudioOutput(deviceId);
   }
 
+  // [Gitea #310] deviceIds are hashed per frame/origin, so ids from the
+  // host's own enumerateDevices() mean nothing inside the call iframe. The
+  // fork reports its outputs (ids valid in the frame) and its effective
+  // selection; the call bar's menu uses those when present.
+  private _audioOutputs: AudioOutputOption[] | undefined;
+
+  public get audioOutputs(): AudioOutputOption[] | undefined {
+    return this._audioOutputs;
+  }
+
+  /** The fork's `io.lotus.audio_output_state` report. */
+  public onAudioOutputState(data: unknown) {
+    const report = parseAudioOutputState(data);
+    if (!report) return;
+    this._audioOutputs = report.available;
+    if (report.deviceId !== undefined) this._audioOutputId = report.deviceId;
+    this.emit(AUDIO_OUTPUT_STATE);
+  }
+
+  // [Gitea #277] Whether a remote screenshare's audio is being received (the
+  // fork's `io.lotus.screenshare_audio_state`), so the call bar only offers
+  // "Mute Screenshare Audio" when there is something to mute.
+  private _remoteScreenshareAudio = false;
+
+  public get remoteScreenshareAudio(): boolean {
+    return this._remoteScreenshareAudio;
+  }
+
+  public onScreenshareAudioState(data: unknown) {
+    const present = parseScreenshareAudioState(data);
+    if (present === undefined || present === this._remoteScreenshareAudio) return;
+    this._remoteScreenshareAudio = present;
+    this.emit(SCREENSHARE_AUDIO_STATE);
+  }
+
   private sendAudioOutput(deviceId: string): void {
     if (!this.joined) return;
     this.call.transport.send('io.lotus.set_audio_output', { deviceId }).catch(() => undefined);

src/app/plugins/call/CallEmbed.ts

@@ -15,6 +15,7 @@ import {
   WidgetApiFromWidgetAction,
   WidgetApiToWidgetAction,
   WidgetDriver,
+  IWidgetApiRequest,
 } from 'matrix-widget-api';
 import { CallWidgetDriver } from './CallWidgetDriver';
 import { trimTrailingSlash } from '../../utils/common';
@@ -453,6 +454,24 @@ export class CallEmbed {
         this.control.onControlsState((evt.detail as { data?: unknown } | undefined)?.data);
       }),
     );
+    // [Gitea #318] The fork's error page ("Connection lost") is up / cleared.
+    this.disposables.push(
+      this.listenAction('io.lotus.call_error', (evt) => {
+        this.control.onCallError((evt.detail as { data?: unknown } | undefined)?.data);
+      }),
+    );
+    // [Gitea #310] The fork's own output list + selection (frame-valid ids).
+    this.disposables.push(
+      this.listenAction('io.lotus.audio_output_state', (evt) => {
+        this.control.onAudioOutputState((evt.detail as { data?: unknown } | undefined)?.data);
+      }),
+    );
+    // [Gitea #277] Remote screenshare audio being received, or not.
+    this.disposables.push(
+      this.listenAction('io.lotus.screenshare_audio_state', (evt) => {
+        this.control.onScreenshareAudioState((evt.detail as { data?: unknown } | undefined)?.data);
+      }),
+    );
     // [Gitea #43] PTT / deafen keys pressed while focus is inside the frame.
     this.disposables.push(
       this.listenAction('io.lotus.hotkey', (evt) => {
@@ -778,7 +797,7 @@ export class CallEmbed {
     const wrapped = (ev: CustomEvent<T>) => {
       ev.preventDefault();
       // Reply with success so the widget transport doesn't time out waiting for a response
-      this.call.transport.reply(ev.detail as any, {});
+      this.call.transport.reply(ev.detail as unknown as IWidgetApiRequest, {});
       callback(ev);
     };
     return this.listenEvent(`action:${type}`, wrapped);

src/app/plugins/call/audioOutputState.test.ts

@@ -0,0 +1,24 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseAudioOutputState } from './CallControl';
+
+test('parseAudioOutputState: keeps valid options, tolerates garbage (#310)', () => {
+  assert.deepEqual(
+    parseAudioOutputState({
+      deviceId: 'f2',
+      available: [{ id: '', label: 'Default' }, { id: 'f2', label: 'Headset' }, { id: 3 }, null],
+    }),
+    {
+      deviceId: 'f2',
+      available: [
+        { id: '', label: 'Default' },
+        { id: 'f2', label: 'Headset' },
+      ],
+    },
+  );
+  assert.deepEqual(parseAudioOutputState({ deviceId: null }), {
+    deviceId: undefined,
+    available: undefined,
+  });
+  assert.equal(parseAudioOutputState('x'), undefined);
+});

src/app/plugins/call/callError.test.ts

@@ -0,0 +1,17 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseCallError } from './callError';
+
+test('parseCallError (#318)', () => {
+  assert.deepEqual(parseCallError({ code: 'CONNECTION_LOST_ERROR', recoverable: true }), {
+    code: 'CONNECTION_LOST_ERROR',
+    recoverable: true,
+  });
+  assert.deepEqual(parseCallError({ code: 'E2EE_NOT_SUPPORTED' }), {
+    code: 'E2EE_NOT_SUPPORTED',
+    recoverable: false,
+  });
+  assert.equal(parseCallError({ code: null }), null);
+  assert.equal(parseCallError({}), undefined);
+  assert.equal(parseCallError('x'), undefined);
+});

src/app/plugins/call/callError.ts

@@ -0,0 +1,14 @@
+/**
+ * [Gitea #318] The fork's `io.lotus.call_error`: its error page is showing
+ * (`{ code, recoverable }`) or was cleared (`{ code: null }`).
+ */
+export type CallErrorState = { code: string; recoverable: boolean } | null;
+
+/** Pure: parse a report; undefined for garbage (ignored). */
+export function parseCallError(data: unknown): CallErrorState | undefined {
+  if (typeof data !== 'object' || data === null) return undefined;
+  const { code, recoverable } = data as { code?: unknown; recoverable?: unknown };
+  if (code === null) return null;
+  if (typeof code !== 'string' || !code) return undefined;
+  return { code, recoverable: recoverable === true };
+}

src/app/plugins/call/screenshareAudioState.test.ts

@@ -0,0 +1,12 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseScreenshareAudioState } from './CallControl';
+
+test('parseScreenshareAudioState: reads present, ignores anything else (#277)', () => {
+  assert.equal(parseScreenshareAudioState({ present: true }), true);
+  assert.equal(parseScreenshareAudioState({ present: false }), false);
+  assert.equal(parseScreenshareAudioState({ present: 'yes' }), undefined);
+  assert.equal(parseScreenshareAudioState({}), undefined);
+  assert.equal(parseScreenshareAudioState(null), undefined);
+  assert.equal(parseScreenshareAudioState('present'), undefined);
+});

src/app/state/plaintextCaches.test.ts

@@ -26,7 +26,10 @@ const api = {
       : Object.getOwnPropertyDescriptor(target, key),
 });
 
-const { clearPlaintextCaches, plaintextCachesWiped } = await import('./plaintextCaches');
+const { clearPlaintextCaches, plaintextCachesWiped, WIDGET_CONSENT_KEY_PREFIX } =
+  await import('./plaintextCaches');
+const { WIDGET_CONSENT_PREFIX, widgetConsentKey } =
+  await import('../features/room/widgets/widgetUtils');
 
 test('clearPlaintextCaches removes every plaintext/PII localStorage key', () => {
   store.clear();
@@ -104,3 +107,17 @@ test('clearPlaintextCaches clears the encrypted-search opt-in and flags the wipe
   assert.equal(store.has('mxjssdk_memory_filter_FILTER_SYNC_@me:server'), false);
   assert.equal(plaintextCachesWiped(), true, 'draft writes stop until the page reloads');
 });
+
+test('[#266] clearPlaintextCaches sweeps remembered widget approvals', () => {
+  assert.equal(WIDGET_CONSENT_KEY_PREFIX, WIDGET_CONSENT_PREFIX, 'prefix kept in sync');
+  store.clear();
+  const consent = widgetConsentKey('!room:server', 'widget-1');
+  store.set(consent, '{"url":"https://pad.example","allowed":[],"denied":[]}');
+  store.set('lotus.widgetConsentNotAKey', 'kept');
+  removed.length = 0;
+
+  clearPlaintextCaches('@me:server');
+
+  assert.ok(removed.includes(consent), 'consent cleared');
+  assert.ok(store.has('lotus.widgetConsentNotAKey'), 'unrelated key kept');
+});

src/app/state/plaintextCaches.ts

@@ -139,6 +139,31 @@ const clearAccountScopedFlags = (userId?: string): void => {
   });
 };
 
+/**
+ * [Gitea #266] Remembered widget approvals (`lotus.widgetConsent.<room>.<widget>`,
+ * widgetUtils.ts) would otherwise apply silently to the next account on this
+ * device, and their keys list the previous account's rooms. Kept as a string
+ * here so logout doesn't pull the widget code into the entry chunk; a test
+ * checks it matches WIDGET_CONSENT_PREFIX.
+ */
+export const WIDGET_CONSENT_KEY_PREFIX = 'lotus.widgetConsent.';
+const clearWidgetConsents = (): void => {
+  let keys: string[];
+  try {
+    keys = Object.keys(localStorage);
+  } catch {
+    return;
+  }
+  keys.forEach((key) => {
+    if (!key.startsWith(WIDGET_CONSENT_KEY_PREFIX)) return;
+    try {
+      localStorage.removeItem(key);
+    } catch {
+      // best-effort
+    }
+  });
+};
+
 export const clearPlaintextCaches = (userId?: string): void => {
   wiped = true;
   clearTranslationCache();
@@ -153,5 +178,6 @@ export const clearPlaintextCaches = (userId?: string): void => {
   clearStatusMessage();
   clearCallVolumesAndSyncMeta(userId);
   clearAccountScopedFlags(userId);
+  clearWidgetConsents();
   if (userId) clearNavToActivePathStore(userId);
 };

src/app/state/room/markedUnread.ts

@@ -2,6 +2,7 @@ import { atom, useSetAtom } from 'jotai';
 import { MatrixClient, MatrixEvent, Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
 import { useEffect } from 'react';
 import { AccountDataEvent } from '../../../types/matrix/accountData';
+import { setRoomAccountData } from '../../utils/accountData';
 
 // MSC2867 — "mark a room as unread". A per-room account-data flag `{ unread }`.
 // Stable type `m.marked_unread`; servers/clients predating the stabilization use
@@ -25,11 +26,9 @@ export const setMarkedUnread = (
   unread: boolean,
 ): Promise<unknown> =>
   Promise.all([
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    mx.setRoomAccountData(roomId, AccountDataEvent.MarkedUnread as any, { unread }),
+    setRoomAccountData(mx, roomId, AccountDataEvent.MarkedUnread, { unread }),
     // Best-effort mirror for older servers; never fail the primary write on it.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    mx.setRoomAccountData(roomId, UNSTABLE_MARKED_UNREAD as any, { unread }).catch(() => undefined),
+    setRoomAccountData(mx, roomId, UNSTABLE_MARKED_UNREAD, { unread }).catch(() => undefined),
   ]);
 
 export const receiptIsMine = (event: MatrixEvent, userId: string): boolean => {

src/app/state/widgetsPanel.ts

@@ -2,3 +2,7 @@ import { atom } from 'jotai';
 
 // Whether the room's Widgets side-panel is open (mirrors mediaGalleryAtom).
 export const widgetsPanelAtom = atom<boolean>(false);
+
+// [Gitea #205] Which widget the panel is showing, per room, so a floating
+// widget's "Back to room" can open the panel on it.
+export const widgetViewingAtom = atom<Record<string, string | null>>({});

src/app/styles/sidePanel.ts

@@ -0,0 +1,9 @@
+import { toRem } from 'folds';
+
+/**
+ * One width for every right-hand room panel (members, bookmarks, threads, a
+ * thread, media gallery, widgets). Swapping one panel for another must not
+ * resize the room view: when the widths differed, the header icons slid
+ * sideways and a second click on the same spot hit a different button (#263).
+ */
+export const SIDE_PANEL_WIDTH = toRem(340);

src/app/styles/zIndex.ts

@@ -5,6 +5,8 @@
  * z-index values and is intentionally not listed here.
  */
 export const zIndices = {
+  /** [Gitea #205] A room widget kept on screen after leaving its room. */
+  floatingWidget: 9980,
   /** In-call incoming-call banner — below seasonal/night-light/modals. */
   inCallBanner: 9990,
   /** Seasonal particle effect — below the night-light tint so particles tint. */

src/app/utils/accountData.ts

@@ -18,6 +18,17 @@ export function getAccountData<T>(
   return event?.getContent() as T | undefined;
 }
 
+/** Room account data under a custom or developer-chosen type (same cast). */
+export function setRoomAccountData<T>(
+  mx: MatrixClient,
+  roomId: string,
+  eventType: string,
+  content: T,
+): Promise<unknown> {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return (mx as any).setRoomAccountData(roomId, eventType, content);
+}
+
 export function setAccountData<T>(
   mx: MatrixClient,
   eventType: AccountDataEvent | string,

src/app/utils/notifications.test.ts

@@ -169,7 +169,7 @@ test('private receipt flag uses ReadPrivate', async () => {
 // follows unread; an explicit mark-as-read still clears everything.
 const sender = (userId: string) => ({ getSender: () => userId });
 
-test('passive: a thread I replied in stays unread; main receipt is scoped to main', async () => {
+test('passive: threads stay unread, followed or not; main receipt is scoped to main (#314)', async () => {
   const mine = thread('$mine', evt('$r1'), { hasCurrentUserParticipated: true });
   const other = thread('$other', evt('$r2'));
   const { mx, calls } = setup({
@@ -181,10 +181,9 @@ test('passive: a thread I replied in stays unread; main receipt is scoped to mai
   await markAsRead(mx, '!r:server', false, { passive: true });
   assert.deepEqual(
     calls.map((c) => [c.eventId, c.unthreaded]),
-    [
-      ['b', false], // main-scoped: unthreaded would also read $mine's reply
-      ['$r2', false],
-    ],
+    // main-scoped (unthreaded would read the threads' replies), and no thread
+    // receipts: [Gitea #314] unfollowed threads used to be read silently.
+    [['b', false]],
   );
 });
 
@@ -203,7 +202,7 @@ test('passive: threads I started or was mentioned in stay unread', async () => {
   assert.equal(calls.length, 0);
 });
 
-test('passive: no followed thread unread → main receipt stays unthreaded', async () => {
+test('passive: an unfollowed unread thread is left unread too (#314)', async () => {
   const other = thread('$other', evt('$r2'), { rootEvent: sender('@bob:server') });
   const { mx, calls } = setup({
     timeline: [evt('a'), evt('b')],
@@ -214,10 +213,16 @@ test('passive: no followed thread unread → main receipt stays unthreaded', asy
   await markAsRead(mx, '!r:server', false, { passive: true });
   assert.deepEqual(
     calls.map((c) => [c.eventId, c.unthreaded]),
-    [
-      ['b', true],
-      ['$r2', false],
-    ],
+    [['b', false]],
+  );
+});
+
+test('passive: no thread unread → main receipt stays unthreaded', async () => {
+  const { mx, calls } = setup({ timeline: [evt('a'), evt('b')], readUpTo: 'a', threads: [] });
+  await markAsRead(mx, '!r:server', false, { passive: true });
+  assert.deepEqual(
+    calls.map((c) => [c.eventId, c.unthreaded]),
+    [['b', true]],
   );
 });
 
@@ -249,9 +254,10 @@ test('passive: the thread open in the panel is left to the panel', async () => {
     threadUnread: { $open: 1, $other: 1 },
   });
   await markAsRead(mx, '!r:server', false, { passive: true, openThreadId: '$open' });
+  // The open thread is left to the panel, and [#314] the other one stays unread.
   assert.deepEqual(
     calls.map((c) => c.eventId),
-    ['$r2'],
+    [],
   );
 });
 

src/app/utils/notifications.ts

@@ -1,27 +1,19 @@
-import { MatrixClient, NotificationCountType, ReceiptType, Room, Thread } from 'matrix-js-sdk';
+import { MatrixClient, NotificationCountType, ReceiptType, Thread } from 'matrix-js-sdk';
 import { getSettings } from '../state/settings';
 import { readMarkedUnread, setMarkedUnread } from '../state/room/markedUnread';
+import { isThreadFollowed } from './room';
 
-/**
- * [Gitea #217] Threads the user is following: they started it, replied in it,
- * or were mentioned in it. `hasCurrentUserParticipated` comes from the server's
- * thread bundle and lags a reply we just sent, so our own loaded events count too.
- */
-export function isThreadFollowed(room: Room, thread: Thread, userId: string | null): boolean {
-  if (thread.hasCurrentUserParticipated) return true;
-  if (userId && thread.rootEvent?.getSender() === userId) return true;
-  if (userId && thread.timeline?.some((e) => e.getSender() === userId)) return true;
-  return (
-    (room.getThreadUnreadNotificationCount(thread.id, NotificationCountType.Highlight) ?? 0) > 0
-  );
-}
+// isThreadFollowed lives in utils/room (getUnreadInfo needs it too).
+export { isThreadFollowed };
 
 export type MarkAsReadOptions = {
   /**
    * [Gitea #217] The read comes from simply looking at the room (timeline at
-   * the bottom and focused), not an explicit "mark as read". Threads the user
-   * follows stay unread until their panel is opened, like Slack and Discord;
-   * the rest are cleared so they don't keep the room dot lit forever.
+   * the bottom and focused), not an explicit "mark as read". Threads stay
+   * unread until opened (or "Mark all read"), like Slack and Discord.
+   * [Gitea #314] That includes threads you don't follow; those no longer
+   * count toward the room's unread dot (see getUnreadInfo), so leaving them
+   * unread doesn't keep the room lit.
    */
   passive?: boolean;
   /**
@@ -66,7 +58,9 @@ export async function markAsRead(
   const threads = room.getThreads();
   const threadUnread = (thread: Thread) =>
     room.getThreadUnreadNotificationCount(thread.id, NotificationCountType.Total) ?? 0;
-  const keepThread = (thread: Thread) => passive && isThreadFollowed(room, thread, mx.getUserId());
+  // [Gitea #314] A passive read leaves every thread's state alone (it used to
+  // silently read every thread you don't follow).
+  const keepThread = (_thread: Thread) => passive;
   // [Gitea #217] An unthreaded receipt also reads every thread reply older than
   // it, so a passive read while a followed thread is unread must stay scoped
   // to the main timeline or the next main message would clear that thread.

src/app/utils/room.test.ts

@@ -928,3 +928,42 @@ test('getAllVersionsRoomCreator returns empty set when no create event', () => {
 test('EventTimeline.FORWARDS constant is available', () => {
   assert.equal(typeof EventTimeline.FORWARDS, 'string');
 });
+
+test('getUnreadInfo: unfollowed threads do not light the room; followed and mentioned do (#314)', () => {
+  const threads = [
+    { id: '$followed', hasCurrentUserParticipated: true },
+    { id: '$other' },
+    { id: '$mention' },
+  ];
+  const counts: Record<string, { total: number; highlight: number }> = {
+    $followed: { total: 2, highlight: 0 },
+    $other: { total: 3, highlight: 0 },
+    $mention: { total: 1, highlight: 1 },
+  };
+  const room = {
+    roomId: '!r:x',
+    // Server room totals include thread counts: 2 + 3 + 1 thread, 0 main.
+    getUnreadNotificationCount: (type: NotificationCountType) =>
+      type === NotificationCountType.Total ? 6 : 1,
+    getThreads: () => threads,
+    getThreadUnreadNotificationCount: (id: string, type: NotificationCountType) =>
+      type === NotificationCountType.Total ? counts[id].total : counts[id].highlight,
+    getEventReadUpTo: () => null,
+    getLiveTimeline: () => ({ getEvents: () => [] }),
+  } as unknown as Room;
+  const me = { getUserId: () => '@me:x' } as unknown as MatrixClient;
+  assert.deepEqual(getUnreadInfo(room, undefined, me), { roomId: '!r:x', highlight: 1, total: 3 });
+  // Only an unfollowed thread is unread: the room isn't lit.
+  counts.$followed.total = 0;
+  counts.$mention = { total: 0, highlight: 0 };
+  const onlyOther = {
+    ...room,
+    getUnreadNotificationCount: (type: NotificationCountType) =>
+      type === NotificationCountType.Total ? 3 : 0,
+  } as unknown as Room;
+  assert.deepEqual(getUnreadInfo(onlyOther, undefined, me), {
+    roomId: '!r:x',
+    highlight: 0,
+    total: 0,
+  });
+});

src/app/utils/room.ts

@@ -18,6 +18,7 @@ import {
   NotificationCountType,
   RelationType,
   Room,
+  Thread,
   RoomMember,
   TimelineEvents,
   IRoomTimelineData,
@@ -59,7 +60,7 @@ export const getStateEvents = (room: Room, eventType: StateEvent): MatrixEvent[]
 export function sendStateEvent<T extends object>(
   mx: MatrixClient,
   roomId: string,
-  eventType: StateEvent,
+  eventType: StateEvent | string,
   content: T,
   stateKey = '',
 ): Promise<ISendEventResponse> {
@@ -418,6 +419,20 @@ export const roomHaveUnread = (mx: MatrixClient, room: Room) => {
   return true;
 };
 
+/**
+ * [Gitea #217] Threads the user is following: they started it, replied in it,
+ * or were mentioned in it. `hasCurrentUserParticipated` comes from the server's
+ * thread bundle and lags a reply we just sent, so our own loaded events count too.
+ */
+export function isThreadFollowed(room: Room, thread: Thread, userId: string | null): boolean {
+  if (thread.hasCurrentUserParticipated) return true;
+  if (userId && thread.rootEvent?.getSender() === userId) return true;
+  if (userId && thread.timeline?.some((e) => e.getSender() === userId)) return true;
+  return (
+    (room.getThreadUnreadNotificationCount(thread.id, NotificationCountType.Highlight) ?? 0) > 0
+  );
+}
+
 export const getUnreadInfo = (
   room: Room,
   mutedThreads?: Set<string>,
@@ -439,6 +454,18 @@ export const getUnreadInfo = (
     if (highlight < 0) highlight = 0;
   }
 
+  // [Gitea #314] Threads you don't follow stay unread in the Threads panel
+  // (viewing the room no longer reads them) but don't light the room's dot.
+  // A mention makes a thread followed, so highlights are never subtracted.
+  if (mx) {
+    room.getThreads().forEach((thread) => {
+      if (mutedThreads?.has(thread.id)) return;
+      if (isThreadFollowed(room, thread, mx.getUserId())) return;
+      total -= room.getThreadUnreadNotificationCount(thread.id, NotificationCountType.Total) ?? 0;
+    });
+    if (total < 0) total = 0;
+  }
+
   const resolvedTotal = highlight > total ? highlight : total;
 
   // Suppress a spurious Total when the room isn't really unread. Two safe cases,

src/app/utils/scheduledMessages.test.ts

@@ -179,3 +179,15 @@ test('groupScheduledByRoom: groups and sorts by sendAt', () => {
   );
   assert.equal(g.get('!2')?.length, 1);
 });
+
+test('[#275] the server limit maps to friendly text; other errors keep theirs', async () => {
+  const { describeScheduleError, SCHEDULE_TOO_FAR_TEXT, MAX_SCHEDULE_AHEAD_MS } =
+    await import('./scheduledMessages');
+  assert.equal(MAX_SCHEDULE_AHEAD_MS, 86_400_000);
+  const tooLarge = Object.assign(new Error('The requested delay (172800000ms) exceeds…'), {
+    errcode: 'ORG.MATRIX.MSC4140_DELAY_TOO_LARGE',
+  });
+  assert.equal(describeScheduleError(tooLarge), SCHEDULE_TOO_FAR_TEXT);
+  assert.equal(describeScheduleError(new Error('Boom')), 'Boom');
+  assert.equal(describeScheduleError('nope'), 'Failed to schedule message.');
+});

src/app/utils/scheduledMessages.ts

@@ -1,6 +1,22 @@
 import { IContent, MatrixClient, Method } from 'matrix-js-sdk';
 import type { ScheduledMessage } from '../state/scheduledMessages';
 
+/**
+ * [Gitea #275] Production Synapse caps delayed events at
+ * `max_event_delay_duration: 24h`; a later time is rejected with
+ * ORG.MATRIX.MSC4140_DELAY_TOO_LARGE. The dialog enforces the same limit and
+ * the server's error maps to the same text, in case the limit changes.
+ */
+export const MAX_SCHEDULE_AHEAD_MS = 24 * 60 * 60 * 1000;
+export const SCHEDULE_TOO_FAR_TEXT = 'You can schedule up to 24 hours ahead.';
+
+/** A user-facing sentence for a failed schedule. */
+export const describeScheduleError = (err: unknown): string => {
+  const errcode = (err as { errcode?: unknown } | null)?.errcode;
+  if (errcode === 'ORG.MATRIX.MSC4140_DELAY_TOO_LARGE') return SCHEDULE_TOO_FAR_TEXT;
+  return err instanceof Error ? err.message : 'Failed to schedule message.';
+};
+
 /**
  * Schedule a message via MSC4140 (delayed messages).
  * Synapse implementation: pass org.matrix.msc4140.delay on the standard

src/app/utils/serverAcl.test.ts

@@ -1,6 +1,11 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
-import { isValidServerPattern, globToRegExp, matchesAnyGlob } from './serverAcl';
+import {
+  isValidServerPattern,
+  globToRegExp,
+  matchesAnyGlob,
+  normalizeServerAcl,
+} from './serverAcl';
 
 test('isValidServerPattern: accepts hostnames, IPs, and globs', () => {
   for (const v of [
@@ -42,3 +47,35 @@ test('matchesAnyGlob: true if any glob matches (self-ban detection)', () => {
   assert.equal(matchesAnyGlob('lotusguild.org', ['*.evil.com']), false);
   assert.equal(matchesAnyGlob('lotusguild.org', []), false);
 });
+
+test('no ACL event: every server allowed, IP literals allowed (#261)', () => {
+  assert.deepEqual(normalizeServerAcl(undefined), {
+    allow: ['*'],
+    deny: [],
+    allow_ip_literals: true,
+  });
+});
+
+test('a missing allow_ip_literals defaults to true, per the spec (#261)', () => {
+  assert.equal(normalizeServerAcl({ allow: ['*'], deny: ['bad.example'] }).allow_ip_literals, true);
+});
+
+test('an explicit allow_ip_literals is kept', () => {
+  assert.equal(
+    normalizeServerAcl({ allow: ['*'], allow_ip_literals: false }).allow_ip_literals,
+    false,
+  );
+  assert.equal(
+    normalizeServerAcl({ allow: ['*'], allow_ip_literals: true }).allow_ip_literals,
+    true,
+  );
+});
+
+test('missing or malformed lists become empty, non-strings are dropped', () => {
+  assert.deepEqual(normalizeServerAcl({ allow: ['a.example', 3, null] }), {
+    allow: ['a.example'],
+    deny: [],
+    allow_ip_literals: true,
+  });
+  assert.deepEqual(normalizeServerAcl({ allow: 'a.example', deny: {} }).allow, []);
+});

src/app/utils/serverAcl.ts

@@ -50,3 +50,29 @@ export function matchesAnyGlob(domain: string, globs: string[]): boolean {
     }
   });
 }
+
+/**
+ * `m.room.server_acl` content with the spec's defaults filled in (#261).
+ * `allow_ip_literals` defaults to **true** when absent; `allow` and `deny`
+ * default to empty lists, but with no ACL event at all every server is allowed,
+ * so the editor starts from `allow: ['*']` in that case.
+ * https://spec.matrix.org/v1.12/client-server-api/#mroomserver_acl
+ */
+export type ServerAclContent = {
+  allow: string[];
+  deny: string[];
+  allow_ip_literals: boolean;
+};
+
+const stringList = (value: unknown): string[] | undefined =>
+  Array.isArray(value) ? value.filter((v): v is string => typeof v === 'string') : undefined;
+
+export function normalizeServerAcl(content: Record<string, unknown> | undefined): ServerAclContent {
+  if (!content) return { allow: ['*'], deny: [], allow_ip_literals: true };
+  return {
+    allow: stringList(content.allow) ?? [],
+    deny: stringList(content.deny) ?? [],
+    allow_ip_literals:
+      typeof content.allow_ip_literals === 'boolean' ? content.allow_ip_literals : true,
+  };
+}

src/app/utils/statusExpiry.test.ts

@@ -0,0 +1,22 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseStatusExpiry, statusExpiryAction } from './statusExpiry';
+
+test('parseStatusExpiry (#300)', () => {
+  assert.deepEqual(parseStatusExpiry({ status_msg: '🍔 Lunch', expires_at: 5 }), {
+    statusMsg: '🍔 Lunch',
+    expiresAt: 5,
+  });
+  assert.equal(parseStatusExpiry({}), undefined);
+  assert.equal(parseStatusExpiry({ status_msg: '', expires_at: 5 }), undefined);
+  assert.equal(parseStatusExpiry({ status_msg: 'x', expires_at: '5' }), undefined);
+});
+
+test('statusExpiryAction: clears only the status that was set to expire (#300)', () => {
+  const e = { statusMsg: '🍔 Lunch', expiresAt: 1000 };
+  assert.equal(statusExpiryAction(e, '🍔 Lunch', 999), 'none');
+  assert.equal(statusExpiryAction(e, '🍔 Lunch', 1000), 'clear');
+  assert.equal(statusExpiryAction(e, '🎮 Gaming', 2000), 'forget');
+  assert.equal(statusExpiryAction(e, '', 2000), 'forget');
+  assert.equal(statusExpiryAction(undefined, 'x', 2000), 'none');
+});

src/app/utils/statusExpiry.ts

@@ -0,0 +1,46 @@
+import { MatrixClient } from 'matrix-js-sdk';
+import { AccountDataEvent } from '../../types/matrix/accountData';
+import { getAccountData } from './room';
+
+/**
+ * [Gitea #300] The status message's auto-clear time, in account data so every
+ * Lotus device knows it. Before, only the device that set "clear after 1 hour"
+ * (localStorage) ever cleared it, and only while it was open.
+ */
+export type StatusExpiry = { statusMsg: string; expiresAt: number };
+
+/** Pure: parse `io.lotus.status_expiry` content. */
+export function parseStatusExpiry(content: unknown): StatusExpiry | undefined {
+  const c = content as { status_msg?: unknown; expires_at?: unknown } | undefined;
+  if (!c || typeof c.status_msg !== 'string' || typeof c.expires_at !== 'number') return undefined;
+  if (!c.status_msg || !Number.isFinite(c.expires_at)) return undefined;
+  return { statusMsg: c.status_msg, expiresAt: c.expires_at };
+}
+
+/**
+ * Pure: what to do with a due expiry. Clear the server status only if it is
+ * still the one that was set to expire; if it has since changed (e.g. on
+ * another device), just forget the expiry.
+ */
+export function statusExpiryAction(
+  entry: StatusExpiry | undefined,
+  currentStatusMsg: string | undefined,
+  now: number,
+): 'none' | 'clear' | 'forget' {
+  if (!entry || now < entry.expiresAt) return 'none';
+  return (currentStatusMsg ?? '') === entry.statusMsg ? 'clear' : 'forget';
+}
+
+export const readStatusExpiry = (mx: MatrixClient): StatusExpiry | undefined =>
+  parseStatusExpiry(getAccountData(mx, AccountDataEvent.LotusStatusExpiry)?.getContent());
+
+/** Record (or with no `expiresAt`, remove) the shared auto-clear time. */
+export async function writeStatusExpiry(
+  mx: MatrixClient,
+  statusMsg: string,
+  expiresAt?: number,
+): Promise<void> {
+  const content =
+    statusMsg && expiresAt !== undefined ? { status_msg: statusMsg, expires_at: expiresAt } : {};
+  await mx.setAccountData(AccountDataEvent.LotusStatusExpiry as never, content as never);
+}

src/app/utils/statusKeys.ts

@@ -0,0 +1,3 @@
+/** localStorage keys for this device's copy of the status message and its expiry. */
+export const STATUS_EXPIRY_KEY = (id: string) => `lotus-status-expiry-${id}`;
+export const STATUS_MSG_KEY = (id: string) => `lotus-status-msg-${id}`;

src/app/utils/topicMarkdown.test.ts

@@ -0,0 +1,72 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { buildTopicContent } from './topicMarkdown';
+
+test('a URL with underscores is sent verbatim (#262)', () => {
+  const t = 'Rules: https://wiki.lotusguild.org/en/server_rules_and_faq';
+  assert.deepEqual(buildTopicContent(t), { topic: t });
+});
+
+test('a markdown link keeps its underscored URL in both fields (#262)', () => {
+  const c = buildTopicContent('[Our wiki](https://wiki.example.org/my_cool_page)');
+  assert.ok('formatted_body' in c);
+  assert.match(c.formatted_body, /href="https:\/\/wiki\.example\.org\/my_cool_page"/);
+  assert.equal(c.topic, 'Our wiki (https://wiki.example.org/my_cool_page)');
+});
+
+test('room aliases and user IDs with underscores are untouched (#262)', () => {
+  for (const t of [
+    'Join #my_room_name:matrix.org',
+    'Ask @some_user_x:matrix.org',
+    'see snake_case_word',
+  ]) {
+    assert.deepEqual(buildTopicContent(t), { topic: t });
+  }
+});
+
+test('emphasis still works at word boundaries', () => {
+  const c = buildTopicContent('this is _really_ *great* and **bold**');
+  assert.ok('formatted_body' in c);
+  assert.match(c.formatted_body, /<i data-md="_">really<\/i>/);
+  assert.match(c.formatted_body, /<i data-md="\*">great<\/i>/);
+  assert.match(c.formatted_body, /<strong data-md="\*\*">bold<\/strong>/);
+  assert.equal(c.topic, 'this is really great and bold');
+});
+
+test('emphasis around an alias keeps the alias intact', () => {
+  const c = buildTopicContent('**Join #my_room:matrix.org**');
+  assert.ok('formatted_body' in c);
+  assert.match(c.formatted_body, /<strong data-md="\*\*">Join #my_room:matrix\.org<\/strong>/);
+  assert.equal(c.topic, 'Join #my_room:matrix.org');
+});
+
+test('inline code keeps its underscores and no backslashes appear', () => {
+  const c = buildTopicContent('run `a_b_c` now');
+  assert.ok('formatted_body' in c);
+  assert.match(c.formatted_body, /<code data-md="`">a_b_c<\/code>/);
+  assert.equal(c.topic, 'run a_b_c now');
+});
+
+test('a double quote in a link target cannot break out of the attribute (#262)', () => {
+  const c = buildTopicContent('[x](https://a" onclick="alert(1))');
+  assert.ok('formatted_body' in c);
+  assert.doesNotMatch(c.formatted_body, /" onclick="/);
+});
+
+test('HTML in the topic is escaped, and the plain topic shows it as typed', () => {
+  const c = buildTopicContent('**<b>hi</b> & bye**');
+  assert.ok('formatted_body' in c);
+  assert.match(c.formatted_body, /&lt;b&gt;hi&lt;\/b&gt; &amp; bye/);
+  assert.equal(c.topic, '<b>hi</b> & bye');
+});
+
+test('line breaks become <br> and survive in the plain topic', () => {
+  const c = buildTopicContent('**Rules**\nBe nice');
+  assert.ok('formatted_body' in c);
+  assert.equal(c.formatted_body, '<strong data-md="**">Rules</strong><br>Be nice');
+  assert.equal(c.topic, 'Rules\nBe nice');
+});
+
+test('plain text with no markdown is sent as typed', () => {
+  assert.deepEqual(buildTopicContent("It's <fun> & games"), { topic: "It's <fun> & games" });
+});

src/app/utils/topicMarkdown.ts

@@ -0,0 +1,63 @@
+import { parseInlineMD } from '../plugins/markdown';
+import { sanitizeText } from './sanitize';
+
+/**
+ * Room topic markdown → `m.room.topic` content (#262).
+ *
+ * Uses the composer's inline markdown parser (the same rules as messages: links,
+ * bare URLs and `"` are handled), with one topic-specific guard: an `_` between
+ * two letters/digits is literal, as in CommonMark. Topics are full of
+ * `#room_alias:server`, `@user_name:server` and snake_case paths, which the
+ * shared parser would otherwise turn into italics and, worse, drop from the
+ * plain `topic` that every other client shows.
+ */
+
+// Spans the guard must not touch: inline code, link targets, bare URLs.
+const PROTECTED = /(`[^`\n]*`|\]\([^)\n]*\)|https?:\/\/[^\s<>"]+)/;
+const INTRAWORD_UNDERSCORES = /(?<=[\p{L}\p{N}])_+(?=[\p{L}\p{N}])/gu;
+
+const escapeIntrawordUnderscores = (line: string): string =>
+  line
+    .split(PROTECTED)
+    .map((part, i) =>
+      // split() with one capture group puts the protected spans at odd indexes.
+      i % 2 === 1 ? part : part.replace(INTRAWORD_UNDERSCORES, (m) => m.replace(/_/g, '\\_')),
+    )
+    .join('');
+
+const ENTITIES: Record<string, string> = {
+  '&amp;': '&',
+  '&lt;': '<',
+  '&gt;': '>',
+  '&quot;': '"',
+  '&#39;': "'",
+};
+const decodeEntities = (s: string): string =>
+  s.replace(/&(?:amp|lt|gt|quot|#39);/g, (e) => ENTITIES[e]);
+
+/** Readable plain text for `topic`: markers dropped, links kept as "text (url)". */
+const htmlToPlain = (html: string): string =>
+  decodeEntities(
+    html
+      .replace(/<a\b[^>]*\bhref="([^"]*)"[^>]*>(.*?)<\/a>/g, (_m, href: string, label: string) => {
+        const text = label.replace(/<[^>]+>/g, '');
+        return text === href ? href : `${text} (${href})`;
+      })
+      .replace(/<br>/g, '\n')
+      .replace(/<[^>]+>/g, ''),
+  );
+
+export type TopicContent =
+  | { topic: string }
+  | { topic: string; format: 'org.matrix.custom.html'; formatted_body: string };
+
+export function buildTopicContent(text: string): TopicContent {
+  const lines = text.split('\n');
+  const html = lines
+    .map((line) => parseInlineMD(sanitizeText(escapeIntrawordUnderscores(line))))
+    .join('<br>');
+  const plainHtml = lines.map(sanitizeText).join('<br>');
+  // No markdown at all: send the text as typed, without a formatted body.
+  if (html === plainHtml) return { topic: text };
+  return { topic: htmlToPlain(html), format: 'org.matrix.custom.html', formatted_body: html };
+}

src/app/utils/translation/langUtils.test.ts

@@ -1,6 +1,7 @@
 import { test } from 'node:test';
 import assert from 'node:assert/strict';
 import {
+  translationUnavailableText,
   normalizeLang,
   sameLanguage,
   languageName,
@@ -53,3 +54,9 @@ test('curated list: unique codes, English present', () => {
   assert.equal(new Set(codes).size, codes.length);
   assert.ok(codes.includes('en'));
 });
+
+test('translationUnavailableText: no "use the desktop app" inside the desktop app (#349)', () => {
+  assert.doesNotMatch(translationUnavailableText(true), /desktop app\.$|Lotus desktop app/);
+  assert.match(translationUnavailableText(true), /this version of the desktop app/);
+  assert.match(translationUnavailableText(false), /this browser/);
+});

src/app/utils/translation/langUtils.ts

@@ -86,6 +86,16 @@ export function isSupportedTargetLang(code: string): boolean {
   return CURATED_NAME.has(normalizeLang(code));
 }
 
+/**
+ * [Gitea #349] Why translation is unavailable, by platform. The desktop app
+ * on Linux/macOS (WebKit) lacks the on-device APIs too, so it must not send
+ * people to "the Lotus desktop app" they're already using.
+ */
+export const translationUnavailableText = (desktopApp: boolean): string =>
+  desktopApp
+    ? 'On-device translation isn’t available in this version of the desktop app. It works in Chrome or Edge 138+ on a computer.'
+    : 'On-device translation isn’t available in this browser. Use Chrome or Edge 138+ on a computer.';
+
 /** Pure: why a manual Translate did nothing (#287). */
 export const translateSkipMessage = (from: string | undefined, targetLang: string): string =>
   from

src/app/utils/updateErrors.test.ts

@@ -69,13 +69,23 @@ test('install kinds: anything unknown keeps the in-app updater', async () => {
 test('package installs get their package manager’s command, not an Install button', async () => {
   const { packageUpdateHelp, isPackageManagedError } = await import('./updateErrors');
   const pacman = packageUpdateHelp('pacman')!;
-  // Not `pacman -U <url>`: that also wants `<url>.sig`, which we don't publish.
-  assert.equal(
-    pacman.command,
-    'curl -LO https://code.lotusguild.org/LotusGuild/cinny-desktop/releases/download/latest/LotusChat-x86_64.pkg.tar.zst && sudo pacman -U ./LotusChat-x86_64.pkg.tar.zst',
+  // [cinny-desktop #36] signature, then checksum, then install, in that order;
+  // a local `pacman -U ./file` (not `<url>`, which also wants `<url>.sig`).
+  const steps = pacman.command!.split(' && ');
+  assert.equal(steps[0], 'cd "$(mktemp -d)"');
+  assert.match(
+    steps[1],
+    /-fLO \S+\/LotusChat-x86_64\.pkg\.tar\.zst -fLO \S+\/SHA256SUMS\.txt -fLO \S+\/SHA256SUMS\.txt\.minisig$/,
   );
+  assert.equal(
+    steps[2],
+    'minisign -Vm SHA256SUMS.txt -P RWRZZdyii05/NUcz337A5SAbiZK+NPVDWuiL2mM5Jk1p/LfRmNfiZ/6l',
+  );
+  assert.equal(steps[3], 'sha256sum -c --ignore-missing SHA256SUMS.txt');
+  assert.equal(steps[4], 'sudo pacman -U ./LotusChat-x86_64.pkg.tar.zst');
   assert.match(pacman.url, /LotusChat-x86_64\.pkg\.tar\.zst$/);
   const deb = packageUpdateHelp('deb')!;
+  assert.match(deb.command!, /minisign -Vm SHA256SUMS\.txt/);
   assert.match(deb.command!, /sudo apt install \.\/LotusChat-x86_64\.deb$/);
   assert.equal(packageUpdateHelp('manual')?.command, undefined);
   assert.equal(packageUpdateHelp('in-app'), undefined);