[WEB-5520] fix: comments UI in space app

[aaryan610]

Description

This PR fixes the following things in the Space app comments section-

1. Font size of the add and edit comment boxes.
2. Toolbar visible in the read-only editor.
3. External user text visible based on the access of the comment, not on whether the comment is actually posted by an external user.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• Improvement (change that would cause existing functionality to not work as expected)

Summary by CodeRabbit

• New Features

  • Added configurable display options for comment editors, including small-font settings for improved text presentation.

• Bug Fixes

  • Simplified comment author display by removing unnecessary access-related indicators for a cleaner interface.

• Refactoring

  • Enhanced type safety in comment management workflows and optimized conditional rendering of editing controls.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[makeplane]

Linked to Plane Work Item(s)

• [WEB-5520] Fix Space app comments UI

This comment was auto-generated by Plane

[coderabbitai]

Walkthrough

LiteTextEditor's toolbar now renders conditionally based on the editable prop. The component receives a new displayConfig prop for font sizing across comment-related components. Type safety improves with useForm<TIssuePublicComment> in comment-detail-card. External user indicator removed from comment author display.

Changes

Cohort / File(s)	Summary
LiteTextEditor toolbar conditionals apps/space/core/components/editor/lite-text-editor.tsx	IssueCommentToolbar now renders only when editable prop is true, previously always rendered
LiteTextEditor displayConfig additions apps/space/core/components/issues/peek-overview/comment/add-comment.tsx, apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx	New displayConfig prop with fontSize: "small-font" passed to LiteTextEditor instances (2 usages in comment-detail-card)
Type safety and form improvements apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx	useForm type changed from any to TIssuePublicComment for stricter form type checking
Comment author display simplification apps/web/ce/components/comments/comment-block.tsx	Removed EIssueCommentAccessSpecifier import and external user indicator suffix from author name; removed FC from React imports

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• All changes follow consistent patterns (prop additions, conditional rendering, type narrowing)
• Minimal logic modifications; mostly UI and typing improvements
• No public API signature changes that would require broader impact analysis

Poem

🐰 Hops through the code with glee,
Toolbars dance when they should be,
Font sizes shrink, types grow tight,
Comments flow with cleaner sight! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main UI fixes in the Space app comments section, directly reflecting the core changes across multiple files.
Description check	✅ Passed	The description covers the key bug fixes, includes type of change selections, but lacks screenshots/media, detailed test scenarios, and explicit references to related issues.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/space-app-comments

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eddf80a and 4e204c6.

📒 Files selected for processing (4)

• apps/space/core/components/editor/lite-text-editor.tsx (1 hunks)
• apps/space/core/components/issues/peek-overview/comment/add-comment.tsx (1 hunks)
• apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx (2 hunks)
• apps/web/ce/components/comments/comment-block.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx,mts,cts}

📄 CodeRabbit inference engine (.github/instructions/typescript.instructions.md)

**/*.{ts,tsx,mts,cts}: Use const type parameters for more precise literal inference in TypeScript 5.0+
Use the satisfies operator to validate types without widening them
Leverage inferred type predicates to reduce the need for explicit is return types in filter/check functions
Use NoInfer<T> utility to block inference for specific type arguments when they should be determined by other arguments
Utilize narrowing in switch(true) blocks for control flow analysis (TypeScript 5.3+)
Rely on narrowing from direct boolean comparisons for type guards
Trust preserved narrowing in closures when variables aren't modified after the check (TypeScript 5.4+)
Use constant indices to narrow object/array properties (TypeScript 5.5+)
Use standard ECMAScript decorators (Stage 3) instead of legacy experimentalDecorators
Use using declarations for explicit resource management with Disposable pattern instead of manual cleanup (TypeScript 5.2+)
Use with { type: "json" } for import attributes; avoid deprecated assert syntax (TypeScript 5.3/5.8+)
Use import type explicitly when importing types to ensure they are erased during compilation, respecting verbatimModuleSyntax flag
Use .ts, .mts, .cts extensions in import type statements (TypeScript 5.2+)
Use import type { Type } from "mod" with { "resolution-mode": "import" } for specific module resolution contexts (TypeScript 5.3+)
Use new iterator methods (map, filter, etc.) if targeting modern environments (TypeScript 5.6+)
Utilize new Set methods like union, intersection, etc., when available (TypeScript 5.5+)
Use Object.groupBy / Map.groupBy standard methods for grouping instead of external libraries (TypeScript 5.4+)
Use Promise.withResolvers() for creating promises with exposed resolve/reject functions (TypeScript 5.7+)
Use copying array methods (toSorted, toSpliced, with) for immutable array operations (TypeScript 5.2+)
Avoid accessing instance fields via super in classes (TypeScript 5....

Files:

• apps/space/core/components/issues/peek-overview/comment/add-comment.tsx
• apps/web/ce/components/comments/comment-block.tsx
• apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx
• apps/space/core/components/editor/lite-text-editor.tsx

🧠 Learnings (5)

📚 Learning: 2025-10-09T20:42:31.843Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.

Applied to files:

• apps/web/ce/components/comments/comment-block.tsx

📚 Learning: 2025-10-09T22:12:26.424Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T22:12:26.424Z
Learning: When `types/react` is installed in a TypeScript project (which is standard for React + TypeScript codebases), React types (React.FC, React.ReactNode, React.ComponentProps, etc.) are globally available by design. These type annotations can and should be used without explicitly importing the React namespace. This is a TypeScript/DefinitelyTyped feature, not codebase-specific configuration.

Applied to files:

• apps/web/ce/components/comments/comment-block.tsx

📚 Learning: 2025-10-01T15:30:17.605Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7888
File: packages/propel/src/avatar/avatar.stories.tsx:2-3
Timestamp: 2025-10-01T15:30:17.605Z
Learning: In the makeplane/plane repository, avoid suggesting inline type imports (e.g., `import { Avatar, type TAvatarSize }`) due to bundler compatibility issues. Keep type imports and value imports as separate statements.

Applied to files:

• apps/web/ce/components/comments/comment-block.tsx

📚 Learning: 2025-10-21T17:22:05.204Z

Learnt from: lifeiscontent
Repo: makeplane/plane PR: 7989
File: apps/web/app/(all)/[workspaceSlug]/(projects)/projects/(detail)/[projectId]/pages/(detail)/[pageId]/page.tsx:45-46
Timestamp: 2025-10-21T17:22:05.204Z
Learning: In the makeplane/plane repository, the refactor from useParams() to params prop is specifically scoped to page.tsx and layout.tsx files in apps/web/app (Next.js App Router pattern). Other components (hooks, regular client components, utilities) should continue using the useParams() hook as that is the correct pattern for non-route components.

Applied to files:

• apps/web/ce/components/comments/comment-block.tsx

📚 Learning: 2025-11-25T10:18:05.172Z

Learnt from: CR
Repo: makeplane/plane PR: 0
File: .github/instructions/typescript.instructions.md:0-0
Timestamp: 2025-11-25T10:18:05.172Z
Learning: Applies to **/*.{ts,tsx,mts,cts} : Use `with { type: "json" }` for import attributes; avoid deprecated `assert` syntax (TypeScript 5.3/5.8+)

Applied to files:

• apps/web/ce/components/comments/comment-block.tsx

🧬 Code graph analysis (2)

apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx (1)

packages/types/src/issues/activity/issue_comment.ts (1)

• TIssuePublicComment (122-147)

apps/space/core/components/editor/lite-text-editor.tsx (1)

apps/space/core/components/editor/toolbar.tsx (1)

• IssueCommentToolbar (20-114)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: CodeQL analysis (javascript-typescript)
• GitHub Check: Agent
• GitHub Check: Analyze (javascript)
• GitHub Check: Build and lint web apps

🔇 Additional comments (6)

apps/web/ce/components/comments/comment-block.tsx (2)

1-1: LGTM: Import cleanup.

Removing the unused FC type import is appropriate since the component uses the observer wrapper instead of explicit typing with FC.

---

58-58: LGTM: Display name simplification.

The simplified author display removes the conditional external user suffix, aligning with the PR objective to adjust external user indicator visibility based on comment access rather than user type.

apps/space/core/components/editor/lite-text-editor.tsx (1)

82-98: LGTM: Conditional toolbar rendering.

The toolbar is now correctly hidden in read-only mode by gating its render on the editable prop. This aligns with the PR objective to hide the toolbar in read-only editors while preserving all functionality when editable.

apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx (2)

45-45: Excellent type safety improvement!

Replacing useForm<any> with useForm<TIssuePublicComment> provides proper type checking for the comment form. The type correctly includes the comment_html field used in the form, ensuring type safety throughout the component.

---

123-125: Verify that displayConfig is properly typed.

The addition of displayConfig with fontSize: "small-font" aligns with the PR objective to fix font sizes in comment edit boxes. As noted in the add-comment.tsx review, please ensure that displayConfig is a valid, properly typed prop on ILiteTextEditorProps from @plane/editor.

The verification script in the add-comment.tsx review comment will confirm the prop definition for both usages.

apps/space/core/components/issues/peek-overview/comment/add-comment.tsx (1)

99-101: displayConfig with fontSize: "small-font" is properly typed and valid.

The prop is correctly defined through the type hierarchy:

• ILiteTextEditorProps extends IEditorProps
• IEditorProps includes displayConfig?: TDisplayConfig
• TDisplayConfig.fontSize has type TEditorFontSize
• TEditorFontSize is defined as "small-font" | "large-font" | "mobile-font"

The value "small-font" is a valid literal in the union type, confirming the code change is type-safe.

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull request overview

This PR addresses three UI issues in the Space app's comments section: incorrect font sizes in comment editors, toolbar visibility in read-only mode, and misleading "External User" labels. The changes improve the user experience by ensuring consistent styling and appropriate UI element visibility.

• Removed misleading "External User" label from web app comment display
• Added proper font size configuration ("small-font") to Space app comment editors
• Fixed toolbar to only appear in editable mode, not in read-only comment views

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
apps/web/ce/components/comments/comment-block.tsx	Removed external user label logic and cleaned up unused imports
apps/space/core/components/issues/peek-overview/comment/comment-detail-card.tsx	Improved type safety with TIssuePublicComment and added small-font displayConfig to both editable and read-only editors
apps/space/core/components/issues/peek-overview/comment/add-comment.tsx	Added small-font displayConfig to add-comment editor for consistency
apps/space/core/components/editor/lite-text-editor.tsx	Fixed toolbar rendering to only show when editor is editable

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.