Author: Product Team
Status: Draft
PR: #5252
Branch: pm-1672-comments-feature-revamp
Date: 2026-03-26
1. Problem Statement
The comments feature on NeetoRecord's public watch page had significant usability issues that prevented it from being a viable feature for customers:
Comments were hidden behind a secondary tab (Transcript was default)
No way to reopen comments after closing the sidebar
Unauthenticated users saw a passive warning with no action to log in
Redundant empty state messages ('0 comments' + 'No comments yet')
Comment editor was completely hidden from unauthenticated users
Cluttered comment appearance with excessive padding and gray boxes
No way to link to or share specific comments
No ability to edit comments (only delete)
On the admin page, comments were rendered below the video instead of in the sidebar
2. Goals
Make comments a first-class feature that users can discover and use without friction
Create a seamless login-to-comment flow that preserves user intent
Provide a clean, modern comment UI that matches industry standards
Enable comment sharing and linking for team collaboration
Bring admin and public comment experiences to parity
3. User Stories
3.1 Viewing Comments
As a viewer, I want to see comments immediately when I open a video, so that I can read existing discussion without extra clicks.
Acceptance Criteria:
Comments tab is the default when the sidebar opens
Comments tab appears first (left), Transcript second
Comment count is visible as a badge on the tab and the ActionBlock button
When no comments exist, a clear empty state invites the user to start the conversation
3.2 Posting a Comment
As a viewer, I want to post a comment without unnecessary barriers, so that I can share my thoughts quickly.
Acceptance Criteria:
Comment editor is always visible (no auth gate)
Formatting toolbar is hidden by default with an Aa toggle
Placeholder text: 'Add a comment'
If unauthenticated, clicking Comment shows a login modal — draft is saved to sessionStorage
After login, the draft comment is automatically submitted
3.3 Managing Comments
As a commenter, I want to edit and delete my own comments.
Acceptance Criteria:
Edit option in three-dot menu (owner only) — inline editor with Save/Cancel
Delete with soft-delete pattern: inline 'Comment deleted' placeholder with Undo button
Auto-dismiss deleted placeholder after 6 seconds
Undo re-creates the comment via API
3.4 Sharing Comments
As a team member, I want to link to a specific comment so I can reference it in discussions.
Acceptance Criteria:
'Copy link' in three-dot menu copies URL with ?comment=ID param
Opening a linked URL auto-opens sidebar to Comments, scrolls to comment, highlights it
Highlight fades after 3 seconds, URL param is cleaned up
3.5 Admin Experience
As an admin, I want the same comment experience in the admin recording page.
Acceptance Criteria:
Comments render in the sidebar pane (same as Chapters, CTAs, Leads)
Input pinned to bottom of sidebar
Same UI as public page (shared component)
4. Design Specifications
4.1 Sidebar and Navigation
Element |
Specification |
|---|---|
Default tab |
Comments (not Transcript) |
Tab order |
Comments first, Transcript second |
Tab underline |
Full-width, edge-to-edge |
Comment count badge |
Green pill (primary-500) on tab, gray pill (gray-200) on ActionBlock button |
Comments button |
Tertiary style, ChatBubble icon, always visible |
Transcript button |
Icon-only (neetoicons Transcript), tooltip on hover |
4.2 Comment Appearance
Element |
Specification |
|---|---|
Layout |
No background box, no dividers between comments |
Hover |
Subtle bg-gray-50 with rounded-lg |
Commenter name |
body2, semibold |
Timestamp |
nano style, gray-500, with tooltip for exact date |
Actions (emoji, menu) |
Hidden by default, appear on hover (opacity transition) |
Emoji picker |
Gray-400 color, in action area next to three-dot menu |
Content indentation |
ms-8 (under name, not under avatar) |
4.3 Comment Input
Element |
Specification |
|---|---|
Container |
Single bordered box (NeetoEditor + footer), follows neeto-desk pattern |
Toolbar |
Hidden by default, Aa toggle in footer |
Placeholder |
'Start the conversation' / 'Add a comment' (contextual) |
Rows |
2 default, max-h-40 expansion |
Footer |
Aa toggle (left), Comment button (right), py-1 padding |
4.4 Login Modal
Element |
Specification |
|---|---|
Title |
'Log in to comment' |
Description |
'You need to log in to comment on this video. No sign-up required.' |
Buttons |
Cancel (tertiary, left), Log in (primary, right) |
4.5 Delete Placeholder
Element |
Specification |
|---|---|
Background |
bg-gray-50, rounded |
Text |
'Comment deleted' (body3, gray-500) |
Actions |
Undo (text button), X dismiss (text button) |
Auto-dismiss |
6 seconds |
5. Technical Architecture
5.1 Shared Component
CommentsPane is the single shared component used by both public and admin pages. It handles:
Comment CRUD (list, create, update, destroy)
Emoji reactions
Draft persistence (sessionStorage)
Comment linking (URL params, highlight, scroll)
Soft delete with undo
Login modal for unauthenticated users
5.2 Custom CSS (Minimal)
Only custom CSS: 4 lines in video.css to remove NeetoEditor's border inside the integrated wrapper (.nr-comment-editor-wrapper). Same pattern used in neeto-desk-web.
5.3 Translation Keys
12 new keys added under comments.* namespace. 5 unused legacy keys removed.
6. Files Modified
File |
Summary |
|---|---|
CommentsPane.jsx |
Major rewrite — all comment features |
Comments/constants.js |
New — DRAFT_COMMENT_KEY constant |
Transcript/index.jsx |
Tab control, badge, full-width underline |
Transcript/PublicCommentsPane.jsx |
Props threading |
ActionBlock.jsx |
Comments button, icon changes |
Recording.jsx |
Sidebar state, login handler |
RecordingTab/CommentsTab.jsx |
Sidebar component rewrite |
RecordingTab/SideMenu.jsx |
Added COMMENTS to sidebar |
RecordingTab/index.jsx |
Removed below-video rendering |
translations/en.json |
New + cleaned up keys |
video.css |
Editor border removal |
7. Follow-up Items
Item |
Issue |
Priority |
|---|---|---|
Viewer action controls (allow_view_comments, allow_add_comments) |
High |
|
'Edited' indicator on modified comments |
— |
Medium |
Mobile experience (buttons hidden on small viewports) |
— |
Medium |
Timestamp-linked comments |
— |
Low (future) |
Add dividers to other sidebar tabs for consistency |
— |
Low |
8. Testing Checklist
Open public watch page — Comments tab default, count badge visible
Post a comment as authenticated user — appears with scroll
Post as unauthenticated — modal, login, auto-submit
Edit a comment — inline editor with Save/Cancel in footer
Delete a comment — placeholder with Undo, auto-dismiss 6s
Undo delete — comment restored
Copy link — URL copied, comment highlighted
Open copied link — sidebar opens, scrolls, highlights
Toggle formatting — Aa button shows/hides toolbar
Admin page — comments in sidebar, input pinned to bottom
Empty state — icon + 'Start the conversation'
Hover on comment — emoji picker and menu appear