Merge pull request 'fix(rooms): "Rename for me" names in Ctrl+K, forward/share pickers and notifications (#336)' (#359) from fix/local-room-names-everywhere into lotus

- Tab into a link in the hidden part used to scroll the overflow:hidden box
  itself (top cut off, and it stayed that way); focus inside now expands
  the message, and collapsing resets the scroll.
- "Read more" / "Show less" is announced as a toggle (aria-expanded,
  aria-controls); the arrows are aria-hidden.
- The fade is a mask on the content instead of a gradient in a fixed
  surface colour, so there's no band in bubble layout, on highlights or
  over chat backgrounds.
- The cap is 20rem instead of 320px, so a larger font shows as many lines.

Verified headless on a 41-line message with a link on the last line:
aria-expanded false → focusing the link expands it (aria-expanded true,
no clipping); bubble layout fades into the bubble with no band.

Fixes #343

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

src/app/components/message/MsgTypeRenderers.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
+import React, { CSSProperties, ReactNode, useEffect, useId, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Box, Button, config, Icon, Icons, Text, color, toRem } from 'folds';
 import { IContent, MatrixEvent } from 'matrix-js-sdk';
@@ -41,7 +41,10 @@ import { formatAccuracy } from '../../utils/geoShare';
 import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
 import { FileHeader, FileDownloadButton } from './FileHeader';
 
-const COLLAPSE_MAX_HEIGHT = 320; // px ≈ 20 lines
+// ≈ 20 lines; in rem so a larger font setting doesn't show fewer lines (Gitea #343).
+const COLLAPSE_MAX_HEIGHT_REM = 20;
+const collapseMaxHeightPx = (): number =>
+  COLLAPSE_MAX_HEIGHT_REM * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
 
 type CollapsibleBodyProps = {
   eventId?: string;
@@ -79,7 +82,7 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
     const el = bodyRef.current;
     if (!el) return undefined;
     const observer = new ResizeObserver(() => {
-      setNeedsCollapse(el.scrollHeight > COLLAPSE_MAX_HEIGHT);
+      setNeedsCollapse(el.scrollHeight > collapseMaxHeightPx());
     });
     observer.observe(el);
     return () => observer.disconnect();
@@ -89,16 +92,36 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
   // (Gitea #85); useReducedMotion subscribes to the change event instead.
   const prefersReducedMotion = useReducedMotion();
 
+  const bodyId = useId();
+  const isClipped = needsCollapse && collapsed;
+  // [Gitea #343] The clipped part stays in the DOM, so Tab can reach a link in
+  // it; the browser would then scroll the overflow:hidden box itself (top cut
+  // off, and it stayed that way). Expand instead when focus lands inside.
+  const handleFocus = () => {
+    if (isClipped) setCollapsed(false);
+  };
+  useEffect(() => {
+    if (isClipped && bodyRef.current) bodyRef.current.scrollTop = 0;
+  }, [isClipped]);
+
+  // Fade the content itself rather than painting a fixed-colour gradient over
+  // it, so it blends on any background (bubbles, highlights, chat backgrounds).
+  const fadeMask = 'linear-gradient(#000 calc(100% - 3rem), transparent)';
+
   return (
     <div>
       <div
         ref={bodyRef}
+        id={bodyId}
+        onFocus={handleFocus}
         style={{
           position: 'relative',
-          ...(needsCollapse && collapsed
+          ...(isClipped
             ? {
-                maxHeight: `${COLLAPSE_MAX_HEIGHT}px`,
+                maxHeight: `${COLLAPSE_MAX_HEIGHT_REM}rem`,
                 overflow: 'hidden',
+                maskImage: fadeMask,
+                WebkitMaskImage: fadeMask,
                 transition: prefersReducedMotion ? undefined : 'max-height 0.2s ease',
               }
             : {
@@ -107,23 +130,12 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
         }}
       >
         {children}
-        {needsCollapse && collapsed && (
-          <div
-            style={{
-              position: 'absolute',
-              bottom: 0,
-              left: 0,
-              right: 0,
-              height: '3rem',
-              background: `linear-gradient(transparent, ${color.Surface.Container})`,
-              pointerEvents: 'none',
-            }}
-          />
-        )}
       </div>
       {needsCollapse && (
         <button
           type="button"
+          aria-expanded={!collapsed}
+          aria-controls={bodyId}
           onClick={() => setCollapsed((c) => !c)}
           style={{
             cursor: 'pointer',
@@ -134,7 +146,8 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
           }}
         >
           <Text as="span" size="T200" style={{ color: color.Primary.Main }}>
-            {collapsed ? 'Read more ↓' : 'Show less ↑'}
+            {collapsed ? 'Read more' : 'Show less'}
+            <span aria-hidden="true">{collapsed ? ' ↓' : ' ↑'}</span>
           </Text>
         </button>
       )}

src/app/state/plaintextCaches.test.ts

@@ -83,3 +83,14 @@ test('clearPlaintextCaches wipes drafts (#41) and the status message (#204) but
   assert.ok(!removed.includes('cinny_session'), 'session key not this module’s concern');
   assert.ok(store.has('cinny_session'));
 });
+
+test('clearPlaintextCaches removes the call-volume list and the settings-sync stamp (#347)', () => {
+  store.clear();
+  store.set('lotus-per-user-volume', '{"@bob:server":0.3}');
+  store.set('settings-sync-meta:@me:server', '{"lastSyncedAt":1}');
+  store.set('settings', '{}');
+  clearPlaintextCaches('@me:server');
+  assert.equal(store.has('lotus-per-user-volume'), false);
+  assert.equal(store.has('settings-sync-meta:@me:server'), false);
+  assert.equal(store.has('settings'), true, 'device preferences are kept');
+});

src/app/state/plaintextCaches.ts

@@ -47,6 +47,8 @@ const clearMsgDrafts = (): void => {
  * - `cinny_recent_gifs_v1` / `cinny_recent_stickers_v1` — media the user sent
  * - `navToActivePath<userId>` — per-space last-visited room paths (needs userId)
  * - `lotus_outbox_v1` — decrypted content of messages not yet sent ([Gitea #112])
+ * - `lotus-per-user-volume`, `settings-sync-meta:<userId>` — whom you adjusted in
+ *   calls, and a key naming the account ([Gitea #347])
  * - `draft-msg-*` — unsent composer drafts (decrypted message text, unscoped by
  *   user — see [Gitea #41]; previously deliberately preserved across logout
  *   (N98), which let the next account on this device see/send a prior user's
@@ -92,6 +94,24 @@ const clearStatusMessage = (): void => {
   });
 };
 
+/**
+ * [Gitea #347] Per-person residue that isn't message text but still says whom
+ * the previous user dealt with: Element Call's per-user volume memory (same
+ * origin on the web — element-call `lotusVolumeMemory.ts`) and the settings-sync
+ * stamp, whose key names the account.
+ */
+export const CALL_VOLUME_KEY = 'lotus-per-user-volume';
+const clearCallVolumesAndSyncMeta = (userId?: string): void => {
+  const keys = [CALL_VOLUME_KEY, ...(userId ? [`settings-sync-meta:${userId}`] : [])];
+  keys.forEach((key) => {
+    try {
+      localStorage.removeItem(key);
+    } catch {
+      // best-effort
+    }
+  });
+};
+
 export const clearPlaintextCaches = (userId?: string): void => {
   clearTranslationCache();
   clearScheduledMessages();
@@ -103,5 +123,6 @@ export const clearPlaintextCaches = (userId?: string): void => {
   clearOutbox();
   clearCallSession();
   clearStatusMessage();
+  clearCallVolumesAndSyncMeta(userId);
   if (userId) clearNavToActivePathStore(userId);
 };

src/app/utils/settingsSync.test.ts

@@ -104,3 +104,9 @@ describe('buildSyncedContent', () => {
     assert.deepEqual(c.settings, pickSyncable(base));
   });
 });
+
+describe('device-local keys', () => {
+  it('keeps enterForNewline on each device (#348)', () => {
+    assert.equal(DEVICE_LOCAL_KEYS.has('enterForNewline'), true);
+  });
+});

src/app/utils/settingsSync.ts

@@ -49,6 +49,9 @@ export const DEVICE_LOCAL_KEYS: ReadonlySet<keyof Settings> = new Set<keyof Sett
   'ringtoneVolume',
   'soundboardVolume',
   'cameraOnJoin',
+  // [Gitea #348] Enter = new line suits a phone keyboard, Enter = send a desktop one;
+  // syncing it switched the desktop to Ctrl+Enter when set on the phone.
+  'enterForNewline',
 ]);
 
 /** The subset of `settings` that is synced (deep-copied so callers can't alias). */