feat(web): show comment button on homepage when no cofeat(web): show comment button on homepage when no comments existmments exist#5844
Open
jin225298 wants to merge 2 commits intousememos:mainfrom
Conversation
- Add 'Write a comment' button on memo cards in homepage - Allow users to comment directly without entering detail page - Improve user experience for memo interaction
Contributor
📝 WalkthroughWalkthroughComment preview gating moved from relying on comment count to user authentication; comment list now allows showing an inline editor and a ghost "write a comment" trigger even when there are no comments. Multiple locale files add a Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/src/components/MemoView/components/MemoCommentListView.tsx`:
- Around line 47-55: The "View all" string in MemoCommentListView.tsx is
hardcoded; replace it with the translation function call (use the existing t
function used elsewhere in this component) so the Link renders t('memo.viewAll')
(or similar key) instead of the literal "View all", and add the new translation
key (e.g., "memo.viewAll") with appropriate translations into the locale files
to keep i18n consistent; update any imports if necessary to ensure t is
available in MemoCommentListView.
🪄 Autofix (Beta)
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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ddfd0e88-cec5-4d6b-82bb-ee288182c3c9
📒 Files selected for processing (2)
web/src/components/MemoView/MemoView.tsxweb/src/components/MemoView/components/MemoCommentListView.tsx
- Replace hardcoded "View all" with translation function - Add memo.comment.view-all key to all locale files
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
web/src/components/MemoView/components/MemoCommentListView.tsx (1)
33-35:handleCommentCreatedneed not be async.The handler performs only a synchronous
setShowEditor(false); theasynckeyword and unused parameter add noise. Simplify to a plain function (and drop the parameter or keep it typed but sync).♻️ Suggested change
- const handleCommentCreated = async (_memoCommentName: string) => { - setShowEditor(false); - }; + const handleCommentCreated = () => { + setShowEditor(false); + };(If
MemoEditor'sonConfirmprop type requires the parameter, keep it but dropasync.)🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@web/src/components/MemoView/components/MemoCommentListView.tsx` around lines 33 - 35, Remove the unnecessary async and unused parameter from the comment handler: change the async function handleCommentCreated(_memoCommentName: string) to a plain synchronous function (either handleCommentCreated() or handleCommentCreated(_memoCommentName: string) without async) and keep its body setShowEditor(false); also ensure the signature still matches MemoEditor’s onConfirm prop type if required (keep the parameter for typing only, but drop async).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@web/src/components/MemoView/components/MemoCommentListView.tsx`:
- Around line 31-35: The showCreateButton logic currently hides the inline
"Write a comment" affordance when a memo already has comments; update the
condition to allow logged-in users to always see the create button by removing
the !hasComments check (i.e., make showCreateButton depend only on currentUser),
and mirror this same change where the same gating is applied later (the other
occurrence around the create-button rendering). Ensure you update references to
showCreateButton and any related conditional rendering so the comment composer
trigger appears below the previewed comments even when hasComments is true.
---
Nitpick comments:
In `@web/src/components/MemoView/components/MemoCommentListView.tsx`:
- Around line 33-35: Remove the unnecessary async and unused parameter from the
comment handler: change the async function
handleCommentCreated(_memoCommentName: string) to a plain synchronous function
(either handleCommentCreated() or handleCommentCreated(_memoCommentName: string)
without async) and keep its body setShowEditor(false); also ensure the signature
still matches MemoEditor’s onConfirm prop type if required (keep the parameter
for typing only, but drop async).
🪄 Autofix (Beta)
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: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: aeed0be0-e161-4d53-a6fa-46eef3d6ded5
📒 Files selected for processing (34)
web/src/components/MemoView/components/MemoCommentListView.tsxweb/src/locales/ar.jsonweb/src/locales/ca.jsonweb/src/locales/cs.jsonweb/src/locales/de.jsonweb/src/locales/en-GB.jsonweb/src/locales/en.jsonweb/src/locales/es.jsonweb/src/locales/fa.jsonweb/src/locales/fr.jsonweb/src/locales/gl.jsonweb/src/locales/hi.jsonweb/src/locales/hr.jsonweb/src/locales/hu.jsonweb/src/locales/id.jsonweb/src/locales/it.jsonweb/src/locales/ja.jsonweb/src/locales/ka-GE.jsonweb/src/locales/ko.jsonweb/src/locales/mr.jsonweb/src/locales/nb.jsonweb/src/locales/nl.jsonweb/src/locales/pl.jsonweb/src/locales/pt-BR.jsonweb/src/locales/pt-PT.jsonweb/src/locales/ru.jsonweb/src/locales/sl.jsonweb/src/locales/sv.jsonweb/src/locales/th.jsonweb/src/locales/tr.jsonweb/src/locales/uk.jsonweb/src/locales/vi.jsonweb/src/locales/zh-Hans.jsonweb/src/locales/zh-Hant.json
✅ Files skipped from review due to trivial changes (33)
- web/src/locales/th.json
- web/src/locales/de.json
- web/src/locales/gl.json
- web/src/locales/uk.json
- web/src/locales/mr.json
- web/src/locales/pt-BR.json
- web/src/locales/ca.json
- web/src/locales/nb.json
- web/src/locales/en.json
- web/src/locales/ar.json
- web/src/locales/pl.json
- web/src/locales/hi.json
- web/src/locales/hu.json
- web/src/locales/cs.json
- web/src/locales/zh-Hant.json
- web/src/locales/ka-GE.json
- web/src/locales/tr.json
- web/src/locales/zh-Hans.json
- web/src/locales/fr.json
- web/src/locales/sv.json
- web/src/locales/it.json
- web/src/locales/es.json
- web/src/locales/ko.json
- web/src/locales/hr.json
- web/src/locales/vi.json
- web/src/locales/id.json
- web/src/locales/fa.json
- web/src/locales/pt-PT.json
- web/src/locales/nl.json
- web/src/locales/en-GB.json
- web/src/locales/ja.json
- web/src/locales/ru.json
- web/src/locales/sl.json
Comment on lines
+31
to
+35
| const showCreateButton = currentUser && !showEditor; | ||
|
|
||
| const handleCommentCreated = async (_memoCommentName: string) => { | ||
| setShowEditor(false); | ||
| }; |
Contributor
There was a problem hiding this comment.
Consider allowing inline comment creation even when comments already exist.
The showCreateButton is gated by !hasComments, so once a memo has any comments, logged-in users lose the homepage inline "Write a comment" affordance and must navigate to the detail page again — re-introducing the exact mobile/UX friction that issue #5838 calls out. The linked issue asks for the comment button to be visible on memo cards "regardless of whether a memo currently has comments." Consider dropping the !hasComments condition (the trigger would sit below the 3 preview comments), unless the screenshots in the PR description intentionally reflect a different design decision.
♻️ Suggested change
- {showCreateButton && !hasComments && (
- <Button variant="ghost" size="sm" className="w-full mt-1 text-muted-foreground" onClick={() => setShowEditor(true)}>
+ {showCreateButton && (
+ <Button variant="ghost" size="sm" className="w-full mt-1 text-muted-foreground" onClick={() => setShowEditor(true)}>
<MessageCircleIcon className="w-4 h-4 mr-1" />
{t("memo.comment.write-a-comment")}
</Button>
)}Also applies to: 92-97
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@web/src/components/MemoView/components/MemoCommentListView.tsx` around lines
31 - 35, The showCreateButton logic currently hides the inline "Write a comment"
affordance when a memo already has comments; update the condition to allow
logged-in users to always see the create button by removing the !hasComments
check (i.e., make showCreateButton depend only on currentUser), and mirror this
same change where the same gating is applied later (the other occurrence around
the create-button rendering). Ensure you update references to showCreateButton
and any related conditional rendering so the comment composer trigger appears
below the previewed comments even when hasComments is true.
Author
There was a problem hiding this comment.
Thank you for the feedback. You raise a valid point.
However, I'd like to explain the current design rationale:
- UI Balance: When a memo already has comments, we display up to 3 preview comments in the card. Adding another "Write a comment" button below would make the card significantly taller and potentially cluttered, especially on mobile devices.
- Clear Call-to-Action: When there are no comments, the "Write a comment" button serves as a clear, prominent call-to-action to encourage engagement. When comments exist, the "View all" link provides a natural path to the detail page where users can see all comments and add their own.
- Progressive Enhancement: This PR addresses the primary pain point in Improvements to comments feature (button, sorting) #5838 - the inability to comment from homepage when there are NO comments at all. Users previously had no way to comment without first navigating to the detail page. The current implementation solves this issue.
That said, I'm open to adjusting the design if the maintainers prefer the button to always be visible. I can remove the!hasCommentscondition if needed.
Contributor
There was a problem hiding this comment.
The PR description images show three states of the feature:
- Image 1 (empty state): A memo card with a "Comments" section showing a centered "Write a comment" button — the main feature of this PR.
- Image 2 (editor open): The expanded inline comment editor with a text field ("Add your comment here..."), attachment (+), Private dropdown, Cancel, and Save controls.
- Image 3 (comments exist): The card after a comment is posted, showing "Comments (1)" with a "View all" link and a preview of the comment from user "kang".
@jin225298, thank you for the thorough explanation — the design rationale is well-reasoned and the PR screenshots clearly validate it. The three-state flow (no comments → inline editor → "View all" once comments exist) is a clean and coherent UX pattern that avoids card bloat on mobile. I'll withdraw my suggestion.
✏️ Learnings added
Learnt from: jin225298
Repo: usememos/memos PR: 5844
File: web/src/components/MemoView/components/MemoCommentListView.tsx:31-35
Timestamp: 2026-04-17T01:49:50.248Z
Learning: In `web/src/components/MemoView/components/MemoCommentListView.tsx`, the "Write a comment" inline button on the homepage memo card is intentionally shown **only when `commentAmount === 0`** (`showCreateButton && !hasComments`). Once a memo has comments, the card shows up to 3 comment previews and a "View all" link instead. This is a deliberate UX/UI design decision to avoid card height bloat and clutter on mobile, and to provide a clear call-to-action only in the zero-comment state. Do not flag the `!hasComments` guard on the create button as missing functionality.
Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.
🧠 Learnings used
Learnt from: milvasic
Repo: usememos/memos PR: 5680
File: web/src/components/MemoContent/Table.tsx:115-133
Timestamp: 2026-03-23T18:28:03.127Z
Learning: In `web/src/components/MemoContent/Table.tsx`, the edit (pencil) and delete (trash) icon buttons on rendered tables are intentionally `opacity-0` and revealed only on `group-hover/table`. This is by design — table editing via dialog is not practical on touch devices, and touch users are served by always-visible "Add row" / "Add column" controls instead. Do not flag the hover-only toolbar as a touch-accessibility issue.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Related Issue
Closes #5838 (partial - addresses the comment button visibility)
What this PR does
This PR adds a "Write a comment" button on memo cards in the homepage, even when there are no existing comments.
Why
As described in #5838, if a memo has no existing comments, the comment button is not shown. Users had to navigate to the memo detail page to write a comment. This PR fixes that by:
Changes
MemoView.tsx: Show comment preview section for logged-in users (not just when comments exist)MemoCommentListView.tsx: Added inline comment editor and "Write a comment" buttonScreenshot
Testing
Summary by CodeRabbit
New Features
Bug Fixes
Improvements