fix(outbox): two tabs no longer overwrite each other's queue (#268)

OutboxFeature loaded lotus_outbox_v1 once and then saved its own
in-memory list over the key on every change, so a second tab's save
dropped the first tab's unsent messages. persist() now re-reads the
stored list and applies the change (add/remove by txnId) to it.

Fixes #268

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

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

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

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

@@ -52,7 +52,8 @@ import { settingsAtom } from '../../../state/settings';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
-import { buildTopicContent } from '../../../utils/topicMarkdown';
+
+const MARKDOWN_PATTERN = /(\*\*|__|\*|_|~~|`|\[.+?\]\(.+?\))/;
 
 function wrapSelection(textarea: HTMLTextAreaElement, syntax: string, placeholder: string) {
   const start = textarea.selectionStart;
@@ -70,6 +71,30 @@ 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/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/RoomInsights.tsx

@@ -401,19 +401,16 @@ export function RoomInsights({ requestClose }: RoomInsightsProps) {
                               {displayName}
                             </Text>
                             <Box alignItems="Center" gap="200">
-                              {/* [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>
+                              <div
+                                style={{
+                                  height: 6,
+                                  width: barWidth,
+                                  background: color.Primary.Main,
+                                  borderRadius: config.radii.R300,
+                                  transition: 'width 0.3s ease',
+                                  flexShrink: 0,
+                                }}
+                              />
                               <Text size="T200" priority="300" style={{ flexShrink: 0 }}>
                                 {count}
                               </Text>

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

@@ -1137,31 +1137,25 @@ 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" 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>
+        <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}
           {readReceiptUsers.length > 0 && (
             <ReadReceiptAvatars
               room={room}

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

@@ -1,12 +1,7 @@
 import React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Avatar, Box, Button, Chip, Icon, Icons, Input, Text, Spinner, color } from 'folds';
+import { 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 {
@@ -19,8 +14,6 @@ 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,
@@ -93,12 +86,6 @@ 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);
@@ -211,10 +198,6 @@ 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',
@@ -222,29 +205,10 @@ export function ProfileDecoration() {
               height: CELL_SIZE,
               flexShrink: 0,
               borderRadius: '50%',
-              boxSizing: 'border-box',
-              border: selected
-                ? 'none'
-                : `2px dashed color-mix(in srgb, ${color.SurfaceVariant.OnContainer} 45%, transparent)`,
+              background: color.SurfaceVariant.Container,
+              overflow: 'hidden',
             }}
           >
-            <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)}
@@ -256,7 +220,6 @@ export function ProfileDecoration() {
                   height: '100%',
                   objectFit: 'contain',
                   pointerEvents: 'none',
-                  zIndex: 1,
                 }}
               />
             )}

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

@@ -111,8 +111,7 @@ import {
   translationUnavailableText,
 } from '../../../utils/translation/langUtils';
 import { chromeTranslationEngine } from '../../../utils/translation/chromeEngine';
-import { SequenceCardStyle, SettingTileGroup } from '../styles.css';
-import { ScreenSize, useScreenSize } from '../../../hooks/useScreenSize';
+import { SequenceCardStyle } from '../styles.css';
 import { UpdateProgress, useTauriUpdater } from '../../../hooks/useTauriUpdater';
 import {
   describeUpdateError,
@@ -1599,7 +1598,6 @@ 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);
@@ -1623,34 +1621,6 @@ 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>
@@ -1666,12 +1636,34 @@ 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."
-            // [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>
+            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>
+            }
+          />
           {note && (
             <Text
               size="T200"
@@ -1808,8 +1800,7 @@ function Calls() {
           title="Noise Suppression"
           description={
             <Box direction="Column" gap="200">
-              {/* [Gitea #271] T200 like every other setting description. */}
-              <Text size="T200">
+              <Text>
                 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>
@@ -2042,7 +2033,7 @@ function Calls() {
         )}
       </SequenceCard>
       <SequenceCard
-        className={`${SequenceCardStyle} ${SettingTileGroup}`}
+        className={SequenceCardStyle}
         variant="SurfaceVariant"
         direction="Column"
         gap="400"
@@ -2139,7 +2130,7 @@ function Calls() {
         )}
       </SequenceCard>
       <SequenceCard
-        className={`${SequenceCardStyle} ${SettingTileGroup}`}
+        className={SequenceCardStyle}
         variant="SurfaceVariant"
         direction="Column"
         gap="400"
@@ -2273,11 +2264,7 @@ function Calls() {
         />
       </SequenceCard>
 
-      <SequenceCard
-        className={`${SequenceCardStyle} ${SettingTileGroup}`}
-        variant="SurfaceVariant"
-        direction="Column"
-      >
+      <SequenceCard className={SequenceCardStyle} 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."
@@ -2764,11 +2751,7 @@ function Messages() {
           }
         />
       </SequenceCard>
-      <SequenceCard
-        className={`${SequenceCardStyle} ${SettingTileGroup}`}
-        variant="SurfaceVariant"
-        direction="Column"
-      >
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <SettingTile
           title="Translate Messages Into"
           description={

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

@@ -1,18 +1,6 @@
-import { globalStyle, style } from '@vanilla-extract/css';
-import { color, config } from 'folds';
+import { style } from '@vanilla-extract/css';
+import { 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/utils/topicMarkdown.test.ts

@@ -1,72 +0,0 @@
-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

@@ -1,63 +0,0 @@
-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 };
-}