Feature completed: Comments and Replies

resources/views/livewire/add-comment.blade.php

@@ -15,7 +15,7 @@
                 :inline-prefix="true"
                 prefix-icon="heroicon-o-chat-bubble-bottom-center-text">
             <x-filament::input
-                    placeholder="Add a comment..."
+                    :placeholder="$this->replyTo?->getKey() ? 'Add a reply' : 'Add a new comment'"
                     type="text"
                     wire:click.prevent.stop="showForm(true)"
                     :readonly="true"

resources/views/livewire/comment-card.blade.php

@@ -1,6 +1,33 @@
-<div class="my-4 p-4 bg-primary-50 rounded-lg ring-gray-100 dark:bg-primary-950 dark:text-white">
-    {{ $comment->commentator }}
-    <div class="prose max-w-none">
-        {!! e(new \Illuminate\Support\HtmlString($this->comment?->body)) !!}
+<div>
+    <div class="my-4 p-4 bg-primary-50 rounded-lg ring-gray-100 dark:bg-gray-950">
+        {{ $comment->commentator }}
+        <div class="prose max-w-none dark:prose-invert">
+            {!! e(new \Illuminate\Support\HtmlString($this->comment?->body)) !!}
+        </div>
+        <div class="flex flex-wrap items-center space-x-2">
+            <x-filament::link
+                    size="xs"
+                    class="cursor-pointer"
+                    icon="heroicon-o-arrow-uturn-left"
+                    wire:click.prevent="toggleReplies">
+                {{$this->comment->replies_count}} {{ str('Reply')->plural($this->comment->replies_count) }} {{$this->showReplies ? ' - Hide' : ' - Show'}}
+            </x-filament::link>
+        </div>
     </div>
+    @if($showReplies)
+        <div class="ms-8 border-r">
+            @foreach($this->comment->children as $reply)
+                <livewire:nested-comments::comment-card
+                        :key="$reply->getKey()"
+                        :comment="$reply" />
+            @endforeach
+            <livewire:nested-comments::add-comment
+                    :key="$comment->getKey()"
+                    :commentable="$comment->commentable"
+                    :reply-to="$comment"
+                    :adding-comment="false"
+                    wire:loading.attr="disabled"
+            />
+        </div>
+    @endif
 </div>

src/Livewire/CommentCard.php

@@ -10,6 +10,12 @@ class CommentCard extends Component
 {
     public ?Comment $comment = null;
 
+    public bool $showReplies = false;
+
+    protected $listeners = [
+        'refresh'=> 'refreshReplies'
+    ];
+
     public function mount(?Comment $comment = null): void
     {
         if (! $comment) {
@@ -24,4 +30,14 @@ public function render()
         $namespace = NestedCommentsServiceProvider::$viewNamespace;
         return view("$namespace::livewire.comment-card");
     }
+
+    public function refreshReplies(): void
+    {
+        $this->comment = $this->comment?->refresh();
+    }
+
+    public function toggleReplies(): void
+    {
+        $this->showReplies = !$this->showReplies;
+    }
 }

src/Models/Comment.php

@@ -32,4 +32,9 @@ public function getCommentatorAttribute()
         }
         return $this->getAttribute('guest_name');
     }
+
+    public function getRepliesCountAttribute(): int
+    {
+        return $this->children()->count();
+    }
 }