fix(ui): receipt pill, insights counts, settings dividers, decoration preview (#269-#273)

#269 read-receipt pill sits at the message row's right edge, not where the text ends (outside the shrink-to-fit content column; grows in Compact). Bubble layout unchanged. #270 Most Active Members: the bar's % is of its own track, so every row shows its count. #271 Noise Suppression description at T200 like the rest. #272 decoration preview shows your own avatar under the decoration; the empty state is a visible dashed circle. #273 grouped settings get a divider between tiles (SettingTileGroup, via globalStyle; SettingTile roots carry data-setting-tile), and on phones the Sync tile's buttons sit under its description. Fixes #269 Fixes #270 Fixes #271 Fixes #272 Fixes #273 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017PCb59uY3UKqDqt7B6hzd5
Merge pull request 'fix(topic): keep URLs, aliases and user IDs intact in room topics (#262 )' (#427 ) from fix/topic-markdown into lotus
2026-10-19 15:06:20 -04:00 · 2026-10-19 14:41:04 -04:00 · 2026-10-19 14:21:17 -04:00 · 2026-10-19 14:11:16 -04:00 · 2026-10-19 14:07:03 -04:00 · 2026-10-19 13:43:54 -04:00
47 changed files with 1076 additions and 203 deletions
@@ -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''',
@@ -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.
@@ -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(
@@ -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.26",
        "@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.26",
+      "resolved": "https://code.lotusguild.org/api/packages/LotusGuild/npm/%40lotusguild%2Felement-call-embedded/-/0.25.0-lotus.26/element-call-embedded-0.25.0-lotus.26.tgz",
+      "integrity": "sha512-u0gFV/ne61MHVkl2JFY6TjC0C/vY2oYTz6dFaDtAmdLUBH6gU+6ar0QOr5xs9bhr4+HT8CSBibU8mLTR+ByjKA==",
      "dev": true
    },
    "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
@@ -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.26",
    "@playwright/test": "1.63.0",
    "@rollup/plugin-inject": "5.0.5",
    "@rollup/plugin-wasm": "6.2.2",
@@ -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 = [
@@ -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 && (
@@ -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>
  );
 }
@@ -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}
@@ -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} />
@@ -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, '&amp;')
-    .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;
@@ -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
@@ -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>
@@ -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"
                    />
@@ -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}
@@ -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;
@@ -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>
+  );
+}
@@ -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),
@@ -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,
                }}
              />
            )}
@@ -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"
@@ -2129,7 +2139,7 @@ function Calls() {
        )}
      </SequenceCard>
      <SequenceCard
-        className={SequenceCardStyle}
+        className={`${SequenceCardStyle} ${SettingTileGroup}`}
        variant="SurfaceVariant"
        direction="Column"
        gap="400"
@@ -2263,7 +2273,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 +2764,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
@@ -1 +1,2 @@
-export * from './Settings';
+export { SettingsPages } from './pages';
+export { Settings } from './SettingsLazy';
@@ -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,
+}
@@ -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,
+});
@@ -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],
+    ),
+  );
+}
@@ -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
@@ -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,29 @@ export function parseForkHotkeyReport(data: unknown): ForkHotkeyReport | null {
  };
 }

+export const CALL_ERROR_CHANGED = 'call_error_changed';
+
+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 +236,51 @@ 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);
+  }
+
  private sendAudioOutput(deviceId: string): void {
    if (!this.joined) return;
    this.call.transport.send('io.lotus.set_audio_output', { deviceId }).catch(() => undefined);
@@ -453,6 +453,18 @@ 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 #43] PTT / deafen keys pressed while focus is inside the frame.
    this.disposables.push(
      this.listenAction('io.lotus.hotkey', (evt) => {
@@ -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);
+});
@@ -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);
+});
@@ -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 };
+}
@@ -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'],
+    [],
  );
 });

@@ -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.
@@ -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,
+  });
+});
@@ -18,6 +18,7 @@ import {
  NotificationCountType,
  RelationType,
  Room,
+  Thread,
  RoomMember,
  TimelineEvents,
  IRoomTimelineData,
@@ -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,
@@ -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, []);
+});
@@ -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,
+  };
+}
@@ -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');
+});
@@ -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);
+}
@@ -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}`;
@@ -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" });
+});
@@ -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 };
+}
@@ -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/);
+});
@@ -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
@@ -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);
@@ -64,23 +64,38 @@ export const toInstallKind = (value: unknown): InstallKind =>

 export type PackageUpdateHelp = { command?: string; url: string; download: string };

+/** The desktop updater's minisign public key (cinny-desktop tauri.conf.json). */
+export const RELEASE_MINISIGN_KEY = 'RWRZZdyii05/NUcz337A5SAbiZK+NPVDWuiL2mM5Jk1p/LfRmNfiZ/6l';
+
+/**
+ * [cinny-desktop #36] Download a Linux package and install it only after
+ * checking the release's minisign-signed SHA256SUMS.txt. Runs in a fresh temp
+ * directory so a stale SHA256SUMS.txt can't be picked up.
+ */
+const verifiedInstall = (file: string, install: string): string =>
+  [
+    `cd "$(mktemp -d)"`,
+    `curl -fLO ${RELEASE_DOWNLOAD}/${file} -fLO ${RELEASE_DOWNLOAD}/SHA256SUMS.txt -fLO ${RELEASE_DOWNLOAD}/SHA256SUMS.txt.minisig`,
+    `minisign -Vm SHA256SUMS.txt -P ${RELEASE_MINISIGN_KEY}`,
+    `sha256sum -c --ignore-missing SHA256SUMS.txt`,
+    `${install} ./${file}`,
+  ].join(' && ');
+
 export const packageUpdateHelp = (kind: InstallKind): PackageUpdateHelp | undefined => {
  if (kind === 'pacman') {
-    const url = `${RELEASE_DOWNLOAD}/LotusChat-x86_64.pkg.tar.zst`;
-    // Download first, then install the local file: `pacman -U <url>` also
-    // fetches `<url>.sig` and fails without it (we don't sign packages),
-    // while a local file falls under LocalFileSigLevel (signature optional).
+    // Install the local file: `pacman -U <url>` also fetches `<url>.sig` and
+    // fails without it (packages aren't signed for pacman), while a local file
+    // falls under LocalFileSigLevel. Integrity comes from SHA256SUMS.txt.
    return {
-      command: `curl -LO ${url} && sudo pacman -U ./LotusChat-x86_64.pkg.tar.zst`,
-      url,
+      command: verifiedInstall('LotusChat-x86_64.pkg.tar.zst', 'sudo pacman -U'),
+      url: `${RELEASE_DOWNLOAD}/LotusChat-x86_64.pkg.tar.zst`,
      download: 'Download package',
    };
  }
  if (kind === 'deb') {
-    const url = `${RELEASE_DOWNLOAD}/LotusChat-x86_64.deb`;
    return {
-      command: `curl -LO ${url} && sudo apt install ./LotusChat-x86_64.deb`,
-      url,
+      command: verifiedInstall('LotusChat-x86_64.deb', 'sudo apt install'),
+      url: `${RELEASE_DOWNLOAD}/LotusChat-x86_64.deb`,
      download: 'Download package',
    };
  }
@@ -26,6 +26,9 @@ export enum AccountDataEvent {
  // [Gitea #104] Synced subset of the Lotus Settings object (utils/settingsSync).
  LotusSettings = 'io.lotus.settings',

+  // [Gitea #300] When the status message auto-clears: { status_msg, expires_at },
+  // so any Lotus device can clear it (not only the one that set it).
+  LotusStatusExpiry = 'io.lotus.status_expiry',
  // [Gitea #333] Timed mutes: { timers: { [roomId]: unmuteAt } }, so any Lotus
  // device can lift a mute set on another.
  LotusMuteTimers = 'io.lotus.mute_timers',
@@ -251,6 +251,25 @@ const vendorChunks = (id) => {
  if (id.includes('node_modules/immer')) return 'immer';
  if (id.includes('node_modules/folds')) return 'folds';
  if (id.includes('node_modules/emojibase')) return 'emojibase';
+  // HTML sanitising (sanitize-html pulls in postcss + htmlparser2) and colour
+  // maths are needed at startup but are big, stable libraries: keep them in
+  // their own cacheable chunks instead of wherever the chunk graph drops them
+  // (once Settings became lazy they landed in the entry chunk).
+  if (
+    id.includes('node_modules/sanitize-html') ||
+    id.includes('node_modules/postcss') ||
+    id.includes('node_modules/htmlparser2') ||
+    id.includes('node_modules/domhandler') ||
+    id.includes('node_modules/domutils') ||
+    id.includes('node_modules/dom-serializer') ||
+    id.includes('node_modules/entities') ||
+    id.includes('node_modules/parse-srcset') ||
+    id.includes('node_modules/nanoid') ||
+    id.includes('node_modules/picocolors') ||
+    id.includes('node_modules/source-map-js')
+  )
+    return 'sanitize-html';
+  if (id.includes('node_modules/chroma-js')) return 'chroma';
 };

 export default defineConfig({