Threaded (nested) comments with a collapsible, connector-line UI#103
Open
ItsMalikJones wants to merge 2 commits into
Open
Threaded (nested) comments with a collapsible, connector-line UI#103ItsMalikJones wants to merge 2 commits into
ItsMalikJones wants to merge 2 commits into
Conversation
Adds threaded comment replies. - New nullable self-referencing `parent_id` column (additive migration); the Comment model gains parent()/replies() relations and a depth() helper. - HasComments::commentsQuery() returns only top-level comments when threading is enabled and eager-loads replies down to the configured max depth. - A "Reply" Filament action on each comment opens an inline reply editor; saveReply() persists the reply with its parent_id via SaveComment. The reply control is hidden once a comment reaches the max depth. - Replies render recursively beneath their parent with an indent. - Controlled by a `commentions.threading` config block (disabled by default, default max_depth 3). - Deleting a comment recursively deletes its replies (and their files).
- Add Facebook-style thread connector lines for nested replies - Implement collapsible replies with accessible toggle showing descendant count - Cap horizontal indentation at depth 2 to prevent layout issues on small screens - Add `repliesCount()` method to recursively count all descendant comments - Update CSS for thread lines with dark mode support - Add English translations for replies UI
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
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.
Closes #11
Summary
Adds opt-in threaded comment replies to Commentions. Users can reply directly
to a comment, replies render recursively beneath their parent, and long
sub-threads can be collapsed. The feature is disabled by default and gated behind
a new config block, so existing installations are unaffected until they opt in.
What's included
Data layer
parent_idcolumn onthe comments table (
add_parent_id_to_commentions_comments_table.php.stub),with a foreign key that cascades on delete.
Commentmodel —parent()/replies()relations, adepth()helperthat walks the parent chain, and
repliesCount()which recursively counts alldescendants.
HasComments::commentsQuery()— returns only top-level comments whenthreading is enabled, and eager-loads replies down to the configured
max_depthto avoid N+1 queries.SaveComment— accepts an optionalparentIdso replies persist with thecorrect parent.
UI
saveReply()persists the reply via
SaveComment. The control is hidden once a commentreaches
max_depth, both in the UI and enforced server-side.toggle (
<button>witharia-expanded/aria-controls) that collapses orexpands its sub-thread and shows a descendant count ("3 replies") when
collapsed. Collapsing is handled client-side via Alpine, so no extra server
round-trips and nested component state is preserved.
curved elbow connector (a continuous vertical trunk with a rounded branch into
each reply's avatar). The trunk ends cleanly at the last reply. Drawn with pure
CSS, including dark-mode colours.
deep threads stay readable on small screens; the connector line still renders
at every level.
replies_count,hide_replies) plus areplykey addedacross all bundled locales (
ar,en,es,fr,nl,ro).Configuration
A new
commentions.threadingconfig block:Threading is disabled by default.
max_depthis the deepest reply levelallowed — top-level comments are depth 0, so the default of
3permits repliesdown to depth 3.
Backward compatibility
threading.enabled = false(the default), behaviour isidentical to today — a flat comment list.
become top-level comments (
parent_id = null).SaveComment's new argumentis optional).
Testing
tests/Livewire/CommentThreadingTest.phpcover: creatingreplies, depth calculation, top-level-only querying, reply-form behaviour,
max_depthenforcement (UI + server), cascade deletion,repliesCount(),card-vs-flat rendering by depth, the collapse toggle markup and ARIA
attributes, the reply-count label, connector rendering, and the indentation
cap.