Add threaded comment replies with collapsible UI

- 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

Author: ItsMalikJones

resources/css/commentions.css

@@ -44,3 +44,54 @@
 .mention-item:hover {
     @apply comm:bg-gray-100;
 }
+
+/*
+ * Threaded reply connector — a Facebook-style curved elbow line.
+ * Rendered by the `.commentions-thread` element inside each reply (depth > 0),
+ * which sits absolutely inside the reply row's left padding gutter.
+ */
+.commentions-thread {
+    position: absolute;
+    inset: 0 auto 0 0;
+    width: 1.5rem;
+    pointer-events: none;
+}
+
+.commentions-thread::before,
+.commentions-thread::after {
+    content: "";
+    position: absolute;
+    left: 0.5rem;
+}
+
+/* Vertical trunk running the full height of the reply row. */
+.commentions-thread::before {
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background-color: #d1d5db;
+}
+
+/* Curved elbow branching off the trunk into the reply's avatar. */
+.commentions-thread::after {
+    top: 0;
+    width: 1rem;
+    height: 1.5rem;
+    border-left: 2px solid #d1d5db;
+    border-bottom: 2px solid #d1d5db;
+    border-bottom-left-radius: 0.75rem;
+}
+
+/* The last reply ends the trunk at its own elbow rather than running on. */
+.commentions-replies > :last-child .commentions-thread::before {
+    bottom: auto;
+    height: 1.5rem;
+}
+
+:where(.dark, .dark *) .commentions-thread::before {
+    background-color: #4b5563;
+}
+
+:where(.dark, .dark *) .commentions-thread::after {
+    border-color: #4b5563;
+}

resources/dist/commentions.css

@@ -17,6 +17,8 @@
     'cancel' => 'Cancel',
     'delete' => 'Delete',
     'reply' => 'Reply',
+    'replies_count' => '{0} No replies|{1} :count reply|[2,*] :count replies',
+    'hide_replies' => 'Hide replies',
     'save' => 'Save',
     'comment' => 'Comment',
     'add_reaction' => 'Add Reaction',

resources/lang/en/comments.php

@@ -1,14 +1,33 @@
 @use('\Kirschbaum\Commentions\Config')
 
-<div class="comm:flex comm:items-start comm:gap-x-4 comm:border comm:border-gray-300 comm:dark:border-gray-700 comm:p-4 comm:rounded-lg comm:shadow-sm comm:mb-2" id="filament-comment-{{ $comment->getId() }}">
+<div
+    @class([
+        'comm:flex comm:items-start',
+        'comm:gap-x-4 comm:border comm:border-gray-300 comm:dark:border-gray-700 comm:p-4 comm:rounded-lg comm:shadow-sm comm:mb-2' => $depth === 0,
+        'comm:relative comm:gap-x-3 comm:py-2 comm:pl-6' => $depth > 0,
+    ])
+    id="filament-comment-{{ $comment->getId() }}"
+>
+    @if ($depth > 0)
+        <div class="commentions-thread" aria-hidden="true"></div>
+    @endif
+
     @if ($avatar = $comment->getAuthorAvatar())
         <img
             src="{{ $comment->getAuthorAvatar() }}"
             alt="{{ __('commentions::comments.user_avatar_alt') }}"
-            class="comm:w-10 comm:h-10 comm:rounded-full comm:mt-0.5 comm:object-cover comm:object-center"
+            @class([
+                'comm:rounded-full comm:mt-0.5 comm:object-cover comm:object-center',
+                'comm:w-10 comm:h-10' => $depth === 0,
+                'comm:w-7 comm:h-7' => $depth > 0,
+            ])
         />
     @else
-        <div class="comm:w-10 comm:h-10 comm:rounded-full comm:mt-0.5 "></div>
+        <div @class([
+            'comm:rounded-full comm:mt-0.5',
+            'comm:w-10 comm:h-10' => $depth === 0,
+            'comm:w-7 comm:h-7' => $depth > 0,
+        ])></div>
     @endif
 
     <div class="comm:flex-1">
@@ -155,17 +174,45 @@ class="comm:text-xs comm:text-gray-300 comm:ml-1"
             @endif
 
             @if ($comment->isComment() && config('commentions.threading.enabled', false) && $comment->replies->isNotEmpty())
-                <div class="commentions-replies comm:mt-3 comm:space-y-2 comm:border-l comm:border-gray-200 comm:dark:border-gray-700 comm:pl-3">
-                    @foreach ($comment->replies as $reply)
-                        <livewire:dynamic-component
-                            :component="$commentionsComponentPrefix . 'comment'"
-                            :key="'reply-' . $reply->getContentHash()"
-                            :comment="$reply"
-                            :depth="$depth + 1"
-                            :mentionables="$mentionables"
-                            :tip-tap-css-classes="$tipTapCssClasses"
+                <div x-data="{ expanded: true }" class="comm:mt-3">
+                    <button
+                        type="button"
+                        @click="expanded = !expanded"
+                        :aria-expanded="expanded ? 'true' : 'false'"
+                        aria-controls="comment-replies-{{ $comment->getId() }}"
+                        class="comm:flex comm:items-center comm:gap-x-1 comm:text-xs comm:font-medium comm:text-gray-500 comm:dark:text-gray-400 comm:hover:text-gray-700 comm:dark:hover:text-gray-200 comm:focus:outline-none comm:focus-visible:ring-2 comm:focus-visible:ring-blue-500 comm:rounded comm:mb-1"
+                    >
+                        <x-filament::icon
+                            icon="heroicon-m-chevron-down"
+                            class="comm:w-4 comm:h-4 comm:transition-transform"
+                            x-bind:class="expanded ? '' : 'comm:-rotate-90'"
                         />
-                    @endforeach
+                        <span x-show="expanded">{{ __('commentions::comments.hide_replies') }}</span>
+                        <span x-show="!expanded" x-cloak>{{ trans_choice('commentions::comments.replies_count', $comment->repliesCount(), ['count' => $comment->repliesCount()]) }}</span>
+                    </button>
+
+                    <div
+                        id="comment-replies-{{ $comment->getId() }}"
+                        role="group"
+                        aria-label="{{ trans_choice('commentions::comments.replies_count', $comment->repliesCount(), ['count' => $comment->repliesCount()]) }}"
+                        x-show="expanded"
+                        x-collapse
+                        @class([
+                            'commentions-replies',
+                            'comm:pl-3' => $this->shouldIndentReplies(),
+                        ])
+                    >
+                        @foreach ($comment->replies as $reply)
+                            <livewire:dynamic-component
+                                :component="$commentionsComponentPrefix . 'comment'"
+                                :key="'reply-' . $reply->getContentHash()"
+                                :comment="$reply"
+                                :depth="$depth + 1"
+                                :mentionables="$mentionables"
+                                :tip-tap-css-classes="$tipTapCssClasses"
+                            />
+                        @endforeach
+                    </div>
                 </div>
             @endif
         @endif

resources/views/comment.blade.php

@@ -196,6 +196,17 @@ public function depth(): int
         return $depth;
     }
 
+    /**
+     * Total number of descendant comments across all nested reply levels.
+     */
+    public function repliesCount(): int
+    {
+        return $this->replies->reduce(
+            fn (int $carry, self $reply): int => $carry + 1 + $reply->repliesCount(),
+            0,
+        );
+    }
+
     public function toggleReaction(string $reaction): void
     {
         ToggleCommentReaction::run($this, $reaction, Config::resolveAuthenticatedUser());

src/Comment.php

@@ -17,6 +17,13 @@ class Comment extends Component
 {
     use HasMentions;
 
+    /**
+     * Deepest level that still receives added horizontal indent. Beyond this
+     * the thread line still renders, but no extra padding is added so deep
+     * threads don't compound horizontally on small screens.
+     */
+    public const INDENT_CAP_DEPTH = 2;
+
     public CommentModel|RenderableComment $comment;
 
     public string $commentBody = '';
@@ -189,6 +196,15 @@ public function canReply(): bool
             && (bool) Config::resolveAuthenticatedUser()?->can('create', Config::getCommentModel());
     }
 
+    /**
+     * Whether the replies wrapper rendered by this comment should add
+     * horizontal indent. Past the cap the thread line still renders.
+     */
+    public function shouldIndentReplies(): bool
+    {
+        return $this->depth < self::INDENT_CAP_DEPTH;
+    }
+
     protected function maxReplyDepth(): int
     {
         return max(0, (int) config('commentions.threading.max_depth', 3));

src/Livewire/Comment.php

@@ -143,3 +143,102 @@
     test()->assertDatabaseMissing('comments', ['id' => $reply->id]);
     test()->assertDatabaseMissing('comments', ['id' => $nested->id]);
 });
+
+test('a top-level comment renders as a bordered card', function () {
+    $user = User::factory()->create();
+    actingAs($user);
+
+    $post = Post::factory()->create();
+    $comment = Comment::factory()->author($user)->commentable($post)->create();
+
+    livewire(CommentComponent::class, ['comment' => $comment, 'depth' => 0])
+        ->assertSeeHtml('comm:rounded-lg')
+        ->assertSeeHtml('comm:shadow-sm')
+        ->assertDontSeeHtml('commentions-thread');
+});
+
+test('a reply renders as a flat row with a thread connector', function () {
+    $user = User::factory()->create();
+    actingAs($user);
+
+    $post = Post::factory()->create();
+    $parent = Comment::factory()->author($user)->commentable($post)->create();
+    $reply = Comment::factory()->author($user)->commentable($post)->create(['parent_id' => $parent->id]);
+
+    livewire(CommentComponent::class, ['comment' => $reply, 'depth' => 1])
+        ->assertDontSeeHtml('comm:shadow-sm')
+        ->assertSeeHtml('comm:py-2')
+        ->assertSeeHtml('comm:w-7')
+        ->assertSeeHtml('class="commentions-thread"');
+});
+
+test('a comment with replies renders an accessible collapse toggle', function () {
+    $user = User::factory()->create();
+    actingAs($user);
+
+    $post = Post::factory()->create();
+    $parent = Comment::factory()->author($user)->commentable($post)->create();
+    Comment::factory()->author($user)->commentable($post)->create(['parent_id' => $parent->id]);
+
+    livewire(CommentComponent::class, ['comment' => $parent, 'depth' => 0])
+        ->assertSeeHtml(':aria-expanded')
+        ->assertSeeHtml('aria-controls="comment-replies-' . $parent->id . '"')
+        ->assertSeeHtml('id="comment-replies-' . $parent->id . '"')
+        ->assertSeeHtml('role="group"');
+});
+
+test('the collapse toggle shows the total descendant reply count', function () {
+    $user = User::factory()->create();
+    actingAs($user);
+
+    $post = Post::factory()->create();
+    $parent = Comment::factory()->author($user)->commentable($post)->create();
+    $child = Comment::factory()->author($user)->commentable($post)->create(['parent_id' => $parent->id]);
+    Comment::factory()->author($user)->commentable($post)->create(['parent_id' => $child->id]);
+
+    livewire(CommentComponent::class, ['comment' => $parent, 'depth' => 0])
+        ->assertSee('2 replies');
+});
+
+test('a comment with no replies renders no collapse toggle', function () {
+    $user = User::factory()->create();
+    actingAs($user);
+
+    $post = Post::factory()->create();
+    $comment = Comment::factory()->author($user)->commentable($post)->create();
+
+    livewire(CommentComponent::class, ['comment' => $comment, 'depth' => 0])
+        ->assertDontSeeHtml('aria-controls="comment-replies-');
+});
+
+test('replies indent for the first levels then stop', function () {
+    config(['commentions.threading.max_depth' => 5]);
+
+    $user = User::factory()->create();
+    actingAs($user);
+
+    $post = Post::factory()->create();
+    $c0 = Comment::factory()->author($user)->commentable($post)->create();
+    $c1 = Comment::factory()->author($user)->commentable($post)->create(['parent_id' => $c0->id]);
+    Comment::factory()->author($user)->commentable($post)->create(['parent_id' => $c1->id]);
+
+    // A depth-0 wrapper indents the replies it renders.
+    livewire(CommentComponent::class, ['comment' => $c0, 'depth' => 0])
+        ->assertSeeHtml('comm:pl-3');
+
+    // A wrapper at INDENT_CAP_DEPTH stops adding indent.
+    livewire(CommentComponent::class, ['comment' => $c1, 'depth' => CommentComponent::INDENT_CAP_DEPTH])
+        ->assertDontSeeHtml('comm:pl-3');
+});
+
+test('repliesCount counts every descendant comment', function () {
+    $user = User::factory()->create();
+    $post = Post::factory()->create();
+
+    $root = Comment::factory()->author($user)->commentable($post)->create();
+    $a = Comment::factory()->author($user)->commentable($post)->create(['parent_id' => $root->id]);
+    Comment::factory()->author($user)->commentable($post)->create(['parent_id' => $a->id]);
+    Comment::factory()->author($user)->commentable($post)->create(['parent_id' => $root->id]);
+
+    expect($root->fresh()->repliesCount())->toBe(3);
+});