How to build nested comments in Bubble

In the Data tab, create a Data Type called Comment with these fields: content (text), author (User), parent_item_type (text — the type of content being commented on, e.g., 'Post'), parent_item_id (text — the unique ID of the content), parent_comment (Comment — self-reference for nesting), depth (number — 0 for top-level, 1 for replies, 2 for replies-to-replies), is_deleted (yes/no — for soft delete). The self-referencing parent_comment field is the key to nesting — a comment with no parent_comment is a top-level comment, and a comment with a parent_comment is a reply.

On your content page, add a Repeating Group with data source: Do a Search for Comments where parent_item_id = Current Page Item's Unique ID and parent_comment is empty (this gives you only top-level comments). Sort by Created Date descending. In each cell, display the author name, comment content, timestamp, and a Reply button. Add a reply count text showing 'X replies' using Do a Search for Comments where parent_comment = Current Cell's Comment:count. Below the Repeating Group, add a comment input form with a Multiline Input and Submit button.

Inside each top-level comment cell, add another Repeating Group (nested) with data source: Do a Search for Comments where parent_comment = Current Cell's Comment, sorted by Created Date ascending. Set this nested Repeating Group's left margin to 40px to create visual indentation. Inside each nested cell, display the same author, content, and timestamp layout as the parent. For deeper nesting (replies to replies), you can add a third Repeating Group inside the nested one with another 40px left margin. Bubble does not support infinite recursive nesting in Repeating Groups, so limit to 2-3 levels of nesting visually.

When a user clicks the Reply button on a comment, show an inline reply form. Use a custom state on the page called 'replying_to' (type: Comment). The Reply button's workflow sets this custom state to the Current Cell's Comment. Add a Group below each comment cell that is only visible when the page's replying_to is the Current Cell's Comment — this group contains a Multiline Input and Submit button. The Submit workflow: (1) Create a new Comment with parent_comment = page's replying_to, depth = parent_comment's depth + 1, parent_item_id = same as parent. (2) Reset the replying_to state to empty. (3) Clear the input.

Add a custom state on each top-level comment cell called 'is_collapsed' (yes/no, default no). Add a toggle text or icon that shows 'Collapse' when is_collapsed is no and 'Expand (X replies)' when is_collapsed is yes. The toggle click workflow switches the custom state. Set the nested Repeating Group's visibility condition to: Current Cell's Comment's is_collapsed is no. When collapsed, only the top-level comment is visible, saving screen space. For the toggle text, use a Conditional: when is_collapsed is yes, show the reply count to indicate hidden content.

To reduce workload units, avoid running Do a Search for inside each nested Repeating Group cell. Instead, load all comments for the page content in one search at the page level: Do a Search for Comments where parent_item_id = Current Page Item's Unique ID. Store this in a custom state (list of Comments). Then filter this list for display: top-level comments use :filtered where parent_comment is empty, and replies use :filtered where parent_comment = Current Cell's Comment. This reduces database queries from N+1 to 1. For moderation, add a Report button that flags comments and an admin view showing flagged comments for review.