fix(logout): clear the call-volume list and settings-sync stamp (#347)

Logout left lotus-per-user-volume (Element Call's per-person volume map:
whom the previous user called and turned up/down; same origin on the web)
and settings-sync-meta:<userId> (a key naming the account) in
localStorage. clearPlaintextCaches now removes both; device preferences
(`settings`) are kept as before.

Verified: after joining/leaving a call and logging out via Settings, both
keys are gone (unit test added).

Fixes #347

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, useId, useRef, useState } from 'react';
+import React, { CSSProperties, ReactNode, useEffect, 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,10 +41,7 @@ import { formatAccuracy } from '../../utils/geoShare';
 import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
 import { FileHeader, FileDownloadButton } from './FileHeader';
 
-// ≈ 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);
+const COLLAPSE_MAX_HEIGHT = 320; // px ≈ 20 lines
 
 type CollapsibleBodyProps = {
   eventId?: string;
@@ -82,7 +79,7 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
     const el = bodyRef.current;
     if (!el) return undefined;
     const observer = new ResizeObserver(() => {
-      setNeedsCollapse(el.scrollHeight > collapseMaxHeightPx());
+      setNeedsCollapse(el.scrollHeight > COLLAPSE_MAX_HEIGHT);
     });
     observer.observe(el);
     return () => observer.disconnect();
@@ -92,36 +89,16 @@ 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',
-          ...(isClipped
+          ...(needsCollapse && collapsed
             ? {
-                maxHeight: `${COLLAPSE_MAX_HEIGHT_REM}rem`,
+                maxHeight: `${COLLAPSE_MAX_HEIGHT}px`,
                 overflow: 'hidden',
-                maskImage: fadeMask,
-                WebkitMaskImage: fadeMask,
                 transition: prefersReducedMotion ? undefined : 'max-height 0.2s ease',
               }
             : {
@@ -130,12 +107,23 @@ 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',
@@ -146,8 +134,7 @@ function CollapsibleBody({ eventId, children }: CollapsibleBodyProps) {
           }}
         >
           <Text as="span" size="T200" style={{ color: color.Primary.Main }}>
-            {collapsed ? 'Read more' : 'Show less'}
-            <span aria-hidden="true">{collapsed ? ' ↓' : ' ↑'}</span>
+            {collapsed ? 'Read more ↓' : 'Show less ↑'}
           </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);
 };