From 6a26396f0de2a977adb9928731cc9c3bb1b39e83 Mon Sep 17 00:00:00 2001
From: manukminasyan <manuk.minasyan1@gmail.com>
Date: Fri, 27 Mar 2026 21:32:05 +0400
Subject: [PATCH] refactor: polish comment form layout - inline attach and
 comment button

Move Comment/Reply button to same row as Attach link using
justify-between flex layout. Shorten "Attach files" to "Attach".
Place Cancel on left side, action buttons on right for edit/reply forms.
Cleaner, more compact footer area.
---
 .../views/livewire/comment-item.blade.php     | 47 +++++++++----------
 resources/views/livewire/comments.blade.php   | 42 ++++++++---------
 tests/Feature/AttachmentUploadTest.php        |  4 +-
 3 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/resources/views/livewire/comment-item.blade.php b/resources/views/livewire/comment-item.blade.php
index 4609be1..9a6c1d8 100644
--- a/resources/views/livewire/comment-item.blade.php
+++ b/resources/views/livewire/comment-item.blade.php
@@ -34,9 +34,9 @@
             @if ($isEditing)
                 <div class="mt-1">
                     {{ $this->editForm }}
-                    <div class="mt-2 flex gap-2">
+                    <div class="mt-2 flex items-center justify-between">
+                        <button type="button" wire:click="cancelEdit" class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400">Cancel</button>
                         <button type="button" wire:click="saveEdit" class="text-sm font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400">Save</button>
-                        <button type="button" wire:click="cancelEdit" class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400">Cancel</button>
                     </div>
                 </div>
             @else
@@ -107,36 +107,35 @@
             <div class="mt-3">
                 {{ $this->replyForm }}
 
-                @if (\Relaticle\Comments\CommentsConfig::areAttachmentsEnabled())
-                    <div class="mt-2">
-                        <label class="flex cursor-pointer items-center gap-2 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
-                            <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
-                            </svg>
-                            Attach files
-                            <input type="file" wire:model="replyAttachments" multiple class="hidden" accept="{{ implode(',', \Relaticle\Comments\CommentsConfig::getAttachmentAllowedTypes()) }}" />
-                        </label>
+                @if (!empty($replyAttachments))
+                    <div class="mt-2 flex flex-wrap gap-2">
+                        @foreach ($replyAttachments as $index => $file)
+                            <div class="flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                                <span>{{ $file->getClientOriginalName() }}</span>
+                                <button type="button" wire:click="removeReplyAttachment({{ $index }})" class="text-gray-400 hover:text-danger-500 dark:text-gray-500 dark:hover:text-danger-400">&times;</button>
+                            </div>
+                        @endforeach
                     </div>
 
-                    @if (!empty($replyAttachments))
-                        <div class="mt-2 flex flex-wrap gap-2">
-                            @foreach ($replyAttachments as $index => $file)
-                                <div class="flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-300">
-                                    <span>{{ $file->getClientOriginalName() }}</span>
-                                    <button type="button" wire:click="removeReplyAttachment({{ $index }})" class="text-gray-400 hover:text-danger-500 dark:text-gray-500 dark:hover:text-danger-400">&times;</button>
-                                </div>
-                            @endforeach
-                        </div>
-                    @endif
-
                     @error('replyAttachments.*')
                         <p class="mt-1 text-sm text-danger-600 dark:text-danger-400">{{ $message }}</p>
                     @enderror
                 @endif
 
-                <div class="mt-2 flex gap-2">
+                <div class="mt-2 flex items-center justify-between">
+                    <div class="flex items-center gap-3">
+                        @if (\Relaticle\Comments\CommentsConfig::areAttachmentsEnabled())
+                            <label class="flex cursor-pointer items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                                <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
+                                </svg>
+                                Attach
+                                <input type="file" wire:model="replyAttachments" multiple class="hidden" accept="{{ implode(',', \Relaticle\Comments\CommentsConfig::getAttachmentAllowedTypes()) }}" />
+                            </label>
+                        @endif
+                        <button type="button" wire:click="cancelReply" class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400">Cancel</button>
+                    </div>
                     <button type="button" wire:click="addReply" class="text-sm font-medium text-primary-600 hover:text-primary-500 dark:text-primary-400">Reply</button>
-                    <button type="button" wire:click="cancelReply" class="text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400">Cancel</button>
                 </div>
             </div>
         @endif
diff --git a/resources/views/livewire/comments.blade.php b/resources/views/livewire/comments.blade.php
index 2cb22e7..3764b17 100644
--- a/resources/views/livewire/comments.blade.php
+++ b/resources/views/livewire/comments.blade.php
@@ -63,34 +63,34 @@
             <div class="sticky bottom-0 z-10 -mx-4 -mb-4 border-t border-gray-200 bg-white px-4 pb-4 pt-3 dark:border-gray-700 dark:bg-gray-900">
                 {{ $this->commentForm }}
 
-                @if (\Relaticle\Comments\CommentsConfig::areAttachmentsEnabled())
-                    <div class="mt-2">
-                        <label class="flex cursor-pointer items-center gap-2 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
-                            <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
-                            </svg>
-                            Attach files
-                            <input type="file" wire:model="attachments" multiple class="hidden" accept="{{ implode(',', \Relaticle\Comments\CommentsConfig::getAttachmentAllowedTypes()) }}" />
-                        </label>
+                @if (!empty($attachments))
+                    <div class="mt-2 flex flex-wrap gap-2">
+                        @foreach ($attachments as $index => $file)
+                            <div class="flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-300">
+                                <span>{{ $file->getClientOriginalName() }}</span>
+                                <button type="button" wire:click="removeAttachment({{ $index }})" class="text-gray-400 hover:text-danger-500 dark:text-gray-500 dark:hover:text-danger-400">&times;</button>
+                            </div>
+                        @endforeach
                     </div>
 
-                    @if (!empty($attachments))
-                        <div class="mt-2 flex flex-wrap gap-2">
-                            @foreach ($attachments as $index => $file)
-                                <div class="flex items-center gap-1 rounded bg-gray-100 px-2 py-1 text-xs text-gray-600 dark:bg-gray-700 dark:text-gray-300">
-                                    <span>{{ $file->getClientOriginalName() }}</span>
-                                    <button type="button" wire:click="removeAttachment({{ $index }})" class="text-gray-400 hover:text-danger-500 dark:text-gray-500 dark:hover:text-danger-400">&times;</button>
-                                </div>
-                            @endforeach
-                        </div>
-                    @endif
-
                     @error('attachments.*')
                         <p class="mt-1 text-sm text-danger-600 dark:text-danger-400">{{ $message }}</p>
                     @enderror
                 @endif
 
-                <div class="mt-2 flex justify-end">
+                <div class="mt-2 flex items-center justify-between">
+                    @if (\Relaticle\Comments\CommentsConfig::areAttachmentsEnabled())
+                        <label class="flex cursor-pointer items-center gap-1.5 text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                            <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
+                            </svg>
+                            Attach
+                            <input type="file" wire:model="attachments" multiple class="hidden" accept="{{ implode(',', \Relaticle\Comments\CommentsConfig::getAttachmentAllowedTypes()) }}" />
+                        </label>
+                    @else
+                        <div></div>
+                    @endif
+
                     <button type="button" wire:click="addComment"
                         class="inline-flex items-center rounded-lg bg-primary-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:bg-primary-500 dark:hover:bg-primary-400 dark:focus:ring-offset-gray-800"
                         wire:loading.attr="disabled" wire:target="addComment">
diff --git a/tests/Feature/AttachmentUploadTest.php b/tests/Feature/AttachmentUploadTest.php
index 904a701..1f1e393 100644
--- a/tests/Feature/AttachmentUploadTest.php
+++ b/tests/Feature/AttachmentUploadTest.php
@@ -217,7 +217,7 @@ it('hides upload UI when attachments disabled', function () {
     $this->actingAs($user);
 
     Livewire::test(Comments::class, ['model' => $post])
-        ->assertDontSeeHtml('Attach files');
+        ->assertDontSeeHtml('wire:model="attachments"');
 });
 
 it('shows upload UI when attachments enabled', function () {
@@ -227,7 +227,7 @@ it('shows upload UI when attachments enabled', function () {
     $this->actingAs($user);
 
     Livewire::test(Comments::class, ['model' => $post])
-        ->assertSeeHtml('Attach files');
+        ->assertSeeHtml('wire:model="attachments"');
 });
 
 it('creates comment with multiple file attachments', function () {