Skip to content

Commit f8d12e1

Browse files
scottgraysonclaudehappy-otter
committed
Flatten post view: collapsible comment form, no card nesting
- Comment form hidden behind "Add a comment" button with expand/collapse toggle (Alpine x-show + x-collapse) - Form collapses after successful comment submit via 'comment-created' browser event dispatch - Remove label from comment RichEditor (hiddenLabel) - Set min-height 150px on comment input for better UX - ForumCommentsEntry defaults to columnSpanFull so comments span full width on desktop - All buttons use gray color for consistency (Add Comment, Cancel, Post Comment, Save edit, Edit page action) - Edit page action gets pencil icon - Empty state text uses light colors for dark backgrounds - Schema set to 1 column so form doesn't split on desktop Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
1 parent 7eb3084 commit f8d12e1

4 files changed

Lines changed: 99 additions & 65 deletions

File tree

‎resources/views/livewire/forum-comments.blade.php‎

Lines changed: 84 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,92 @@
11
<div class="space-y-6" @if($pollingInterval) wire:poll.{{ $pollingInterval }}="refreshComments" @endif>
2-
{{-- Comment Form --}}
3-
@auth
4-
<div class="bg-white dark:bg-gray-900 rounded-lg dark:border-gray-700 relative">
5-
<div x-load
6-
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('forum-mentions', 'tapp/filament-forum') }}"
7-
x-data="forumMentions({
8-
mentionables: @js($this->getMentionablesData())
9-
})">
10-
<form wire:submit="create" class="space-y-4">
11-
{{ $this->commentForm }}
12-
13-
<div class="flex justify-end">
14-
<x-filament::button type="submit" wire:loading.attr="disabled">
15-
<x-filament::loading-indicator wire:loading wire:target="create" class="h-4 w-4 mr-2" />
16-
{{ __('filament-forum::filament-forum.comments.post-comment') }}
17-
</x-filament::button>
18-
</div>
19-
</form>
2+
{{-- Comments Header + Collapsible Form --}}
3+
<div x-data="{ showCommentForm: false }" @comment-created.window="showCommentForm = false">
4+
<div class="flex items-center justify-between mb-4">
5+
<h3 class="text-base font-medium text-gray-100">
6+
{{ trans_choice('filament-forum::filament-forum.comments.count', $comments->count(), ['count' => $comments->count()]) }}
7+
</h3>
8+
@auth
9+
<x-filament::button
10+
x-on:click="showCommentForm = !showCommentForm"
11+
icon="heroicon-o-chat-bubble-left"
12+
size="sm"
13+
color="gray"
14+
x-show="!showCommentForm"
15+
>
16+
{{ __('filament-forum::filament-forum.comments.add-comment') }}
17+
</x-filament::button>
18+
<x-filament::button
19+
x-on:click="showCommentForm = false"
20+
size="sm"
21+
color="gray"
22+
x-show="showCommentForm"
23+
x-cloak
24+
>
25+
{{ __('filament-forum::filament-forum.comments.cancel') }}
26+
</x-filament::button>
27+
@endauth
28+
</div>
2029

21-
{{-- Mentions Dropdown --}}
22-
<div x-show="showDropdown"
23-
x-cloak
24-
class="mention-dropdown"
25-
style="position: absolute; z-index: 9999;"
26-
:style="`top: ${dropdownPosition.top}px; left: ${dropdownPosition.left}px;`">
27-
<template x-for="(user, index) in filteredMentionables" :key="user.id">
28-
<div class="mention-item"
29-
:class="{ 'bg-gray-100 dark:bg-gray-600': index === selectedIndex }"
30-
@click.stop="selectMention(user)">
31-
<div class="avatar">
32-
<template x-if="user.avatar">
33-
<img :src="user.avatar" :alt="user.name" class="w-full h-full rounded-full">
34-
</template>
35-
<template x-if="!user.avatar">
36-
<span x-text="user.name.charAt(0).toUpperCase()" class="text-gray-600 dark:text-gray-300"></span>
37-
</template>
38-
</div>
39-
<span class="name" x-html="highlightQuery(user.name, currentQuery || '')"></span>
40-
</div>
41-
</template>
42-
43-
<template x-if="filteredMentionables.length === 0">
44-
<div class="mention-item text-gray-500 dark:text-gray-400">
45-
No users found
30+
@auth
31+
<div x-show="showCommentForm" x-collapse x-cloak>
32+
<div class="relative mb-4"
33+
x-load
34+
x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('forum-mentions', 'tapp/filament-forum') }}"
35+
x-data="forumMentions({
36+
mentionables: @js($this->getMentionablesData())
37+
})">
38+
<form wire:submit="create" class="space-y-3">
39+
{{ $this->commentForm }}
40+
41+
<div class="flex justify-end">
42+
<x-filament::button type="submit" color="gray" wire:loading.attr="disabled">
43+
<x-filament::loading-indicator wire:loading wire:target="create" class="h-4 w-4 mr-2" />
44+
{{ __('filament-forum::filament-forum.comments.post-comment') }}
45+
</x-filament::button>
4646
</div>
47-
</template>
47+
</form>
48+
49+
{{-- Mentions Dropdown --}}
50+
<div x-show="showDropdown"
51+
x-cloak
52+
class="mention-dropdown"
53+
style="position: absolute; z-index: 9999;"
54+
:style="`top: ${dropdownPosition.top}px; left: ${dropdownPosition.left}px;`">
55+
<template x-for="(user, index) in filteredMentionables" :key="user.id">
56+
<div class="mention-item"
57+
:class="{ 'bg-gray-100 dark:bg-gray-600': index === selectedIndex }"
58+
@click.stop="selectMention(user)">
59+
<div class="avatar">
60+
<template x-if="user.avatar">
61+
<img :src="user.avatar" :alt="user.name" class="w-full h-full rounded-full">
62+
</template>
63+
<template x-if="!user.avatar">
64+
<span x-text="user.name.charAt(0).toUpperCase()" class="text-gray-600 dark:text-gray-300"></span>
65+
</template>
66+
</div>
67+
<span class="name" x-html="highlightQuery(user.name, currentQuery || '')"></span>
68+
</div>
69+
</template>
70+
71+
<template x-if="filteredMentionables.length === 0">
72+
<div class="mention-item text-gray-500 dark:text-gray-400">
73+
No users found
74+
</div>
75+
</template>
76+
</div>
4877
</div>
4978
</div>
50-
</div>
51-
@else
52-
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 text-center">
53-
<p class="text-gray-600 dark:text-gray-400">
54-
{{ __('filament-forum::filament-forum.comments.login-to-comment') }}
55-
</p>
56-
</div>
57-
@endauth
79+
@else
80+
<div class="bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4 text-center mb-4">
81+
<p class="text-gray-600 dark:text-gray-400">
82+
{{ __('filament-forum::filament-forum.comments.login-to-comment') }}
83+
</p>
84+
</div>
85+
@endauth
86+
</div>
5887

5988
{{-- Comments List --}}
6089
<div class="space-y-4">
61-
{{-- Comments Count --}}
62-
@if($comments->count() > 0)
63-
<div class="flex items-center justify-between mb-4">
64-
<h3 class="text-base font-medium text-gray-900 dark:text-gray-100">
65-
{{ trans_choice('filament-forum::filament-forum.comments.count', $comments->count(), ['count' => $comments->count()]) }}
66-
</h3>
67-
</div>
68-
@endif
6990

7091
@forelse($comments as $comment)
7192
<div class="bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 p-4" wire:key="comment-{{ $comment->id }}">
@@ -135,7 +156,7 @@ class="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition
135156
>
136157
{{ __('filament-forum::filament-forum.comments.cancel') }}
137158
</x-filament::button>
138-
<x-filament::button type="submit" wire:loading.attr="disabled">
159+
<x-filament::button type="submit" color="gray" wire:loading.attr="disabled">
139160
<x-filament::loading-indicator wire:loading wire:target="updateComment" class="h-4 w-4 mr-2" />
140161
{{ __('filament-forum::filament-forum.comments.save') }}
141162
</x-filament::button>
@@ -215,8 +236,8 @@ class="flex items-center space-x-2 p-2 bg-gray-50 dark:bg-gray-800 rounded borde
215236
</div>
216237
@empty
217238
<div class="text-center py-8">
218-
<x-heroicon-o-chat-bubble-left class="w-12 h-12 text-gray-400 mx-auto mb-3" />
219-
<p class="text-gray-500 dark:text-gray-400">
239+
<x-heroicon-o-chat-bubble-left class="w-12 h-12 text-gray-300 mx-auto mb-3" />
240+
<p class="text-gray-300">
220241
{{ __('filament-forum::filament-forum.comments.no-comments') }}
221242
</p>
222243
</div>

‎src/Filament/Infolists/Components/ForumCommentsEntry.php‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,13 @@ class ForumCommentsEntry extends Entry
1010
{
1111
protected string $view = 'filament-forum::filament.infolists.components.forum-comments-entry';
1212

13+
protected function setUp(): void
14+
{
15+
parent::setUp();
16+
17+
$this->columnSpanFull();
18+
}
19+
1320
protected array|Collection|Closure|null $mentionables = null;
1421

1522
protected bool|Closure $paginated = false;

‎src/Filament/Resources/ForumPosts/Pages/ViewForumPost.php‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ protected function getHeaderActions(): array
2020
{
2121
return [
2222
EditAction::make()
23+
->color('gray')
24+
->icon('heroicon-o-pencil-square')
2325
->visible(fn (): bool => Auth::check() && $this->getRecord()->user_id === Auth::id()),
2426
];
2527
}

‎src/Livewire/ForumComments.php‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,10 @@ public function commentForm(Schema $schema): Schema
6767
return $schema
6868
->components([
6969
RichEditor::make('content')
70-
->label(__('filament-forum::filament-forum.comments.add-comment'))
70+
->hiddenLabel()
7171
->placeholder(__('filament-forum::filament-forum.comments.placeholder'))
7272
->required()
73+
->extraInputAttributes(['style' => 'min-height: 150px'])
7374
->fileAttachmentsDisk('public')
7475
->fileAttachmentsDirectory('forum-comments')
7576
->fileAttachmentsVisibility('public')
@@ -91,7 +92,8 @@ public function commentForm(Schema $schema): Schema
9192
])
9293
->columnSpanFull(),
9394
])
94-
->statePath('data');
95+
->statePath('data')
96+
->columns(1);
9597
}
9698

9799
public function editCommentForm(Schema $schema): Schema
@@ -169,6 +171,8 @@ public function create(): void
169171
->title(__('filament-forum::filament-forum.comments.created'))
170172
->success()
171173
->send();
174+
175+
$this->dispatch('comment-created');
172176
}
173177

174178
#[On('comment-reaction-toggled')]

0 commit comments

Comments
 (0)