fix(inbox/soup): fix reactivity in inbox card user display names - #5471
fix(inbox/soup): fix reactivity in inbox card user display names#5471sedson wants to merge 1 commit into
Conversation
📝 WalkthroughSummary by CodeRabbit
WalkthroughChannel latest-message rendering now displays the sender separately from the markdown message and removes the sender name prop from its callers. Unused sender-name imports and computations were removed. Macro sender names now use the synchronous 🚥 Pre-merge checks | ✅ 3 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (3 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@apps/web/src/features/entity/composed/list-entity/channel.tsx`:
- Around line 109-114: Update the StaticMarkdown usage in the message preview so
the sender and content remain in one inline flow. Reuse the repository’s
existing inline markdown theme pattern, ensuring both the markdown root and
paragraph render inline, and apply it alongside twoLineClampMarkdownTheme
without changing the surrounding sender or content behavior.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: eea4d570-bb6a-4fcb-9a8b-7d8f3dadb81e
📒 Files selected for processing (4)
apps/web/src/features/entity/composed/list-entity/channel.tsxapps/web/src/features/entity/composed/list-entity/narrow-inbox-layout.tsxapps/web/src/features/next-soup/soup-view/views/inbox/inbox-card-layouts.tsxapps/web/src/lib/core/user/index.ts
| <span class="ph-no-capture font-medium text-ink-muted"> | ||
| <DisplayName id={props.message.senderId} format="firstName" />:{' '} | ||
| </span> | ||
| <StaticMarkdown | ||
| theme={twoLineClampMarkdownTheme} | ||
| markdown={ | ||
| (props.senderFirstName ? `**${props.senderFirstName}:** ` : '') + | ||
| props.message.content.trim() | ||
| } | ||
| markdown={props.message.content.trim()} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Keep the sender and message in one inline flow.
StaticMarkdown renders a root <div>, while this change places it after an inline sender <span>. The sender therefore consumes a separate block line, and the outer line-clamp-2 reduces the visible message preview. The previous implementation rendered **sender:** message in one markdown tree. (raw.githubusercontent.com)
Use an inline markdown theme that sets both the root and paragraph to inline, or use another layout that preserves one text flow. The repository already contains this inline-theme pattern. (raw.githubusercontent.com)
Proposed fix
import {
+ createTheme,
twoLineClampMarkdownTheme,
unifiedListMarkdownTheme,
} from '`@core/component/LexicalMarkdown/theme`';
+const inlineTwoLineClampMarkdownTheme = createTheme(
+ {
+ root: 'md inline pr-[2px] cursor-default',
+ paragraph: 'md-p text-[1em] inline',
+ },
+ twoLineClampMarkdownTheme
+);
+
...
- theme={twoLineClampMarkdownTheme}
+ theme={inlineTwoLineClampMarkdownTheme}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <span class="ph-no-capture font-medium text-ink-muted"> | |
| <DisplayName id={props.message.senderId} format="firstName" />:{' '} | |
| </span> | |
| <StaticMarkdown | |
| theme={twoLineClampMarkdownTheme} | |
| markdown={ | |
| (props.senderFirstName ? `**${props.senderFirstName}:** ` : '') + | |
| props.message.content.trim() | |
| } | |
| markdown={props.message.content.trim()} | |
| import { | |
| createTheme, | |
| twoLineClampMarkdownTheme, | |
| unifiedListMarkdownTheme, | |
| } from '`@core/component/LexicalMarkdown/theme`'; | |
| const inlineTwoLineClampMarkdownTheme = createTheme( | |
| { | |
| root: 'md inline pr-[2px] cursor-default', | |
| paragraph: 'md-p text-[1em] inline', | |
| }, | |
| twoLineClampMarkdownTheme | |
| ); | |
| <span class="ph-no-capture font-medium text-ink-muted"> | |
| <DisplayName id={props.message.senderId} format="firstName" />:{' '} | |
| </span> | |
| <StaticMarkdown | |
| theme={inlineTwoLineClampMarkdownTheme} | |
| markdown={props.message.content.trim()} |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@apps/web/src/features/entity/composed/list-entity/channel.tsx` around lines
109 - 114, Update the StaticMarkdown usage in the message preview so the sender
and content remain in one inline flow. Reuse the repository’s existing inline
markdown theme pattern, ensuring both the markdown root and paragraph render
inline, and apply it alongside twoLineClampMarkdownTheme without changing the
surrounding sender or content behavior.
1 participant
No description provided.