MeghdadFadaee/fluent-chat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement sending Emoji, pin or mute conversation

Browse Source
This commit is contained in:
Meghdad Fadaee
2026-05-01 11:30:14 +03:30
parent 1121939c25
commit 7b2541dd35
11 changed files with 359 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
resources/views/livewire/chat/conversation-details-panel.blade.php
View File

@@ -43,12 +43,36 @@
<flux:heading size="sm">{{ __('Quick actions') }}</flux:heading>
<div class="mt-3 grid grid-cols-3 gap-2">
<flux:tooltip :content="__('Mute')" position="top">
<flux:button type="button" variant="filled" icon="bell-slash" aria-label="{{ __('Mute') }}" />
<flux:tooltip :content="$this->isMuted() ? __('Unmute') : __('Mute')" position="top">
<flux:button
type="button"
:variant="$this->isMuted() ? 'primary' : 'filled'"
icon="bell-slash"
wire:click="toggleMute"
wire:loading.attr="disabled"
wire:target="toggleMute"
aria-pressed="{{ $this->isMuted() ? 'true' : 'false' }}"
aria-label="{{ $this->isMuted() ? __('Unmute conversation') : __('Mute conversation') }}"
class="w-full"
>
{{ $this->isMuted() ? __('Muted') : __('Mute') }}
</flux:button>
</flux:tooltip>
<flux:tooltip :content="__('Pin')" position="top">
<flux:button type="button" variant="filled" icon="bookmark" aria-label="{{ __('Pin') }}" />
<flux:tooltip :content="$this->isPinned() ? __('Unpin') : __('Pin')" position="top">
<flux:button
type="button"
:variant="$this->isPinned() ? 'primary' : 'filled'"
icon="bookmark"
wire:click="togglePin"
wire:loading.attr="disabled"
wire:target="togglePin"
aria-pressed="{{ $this->isPinned() ? 'true' : 'false' }}"
aria-label="{{ $this->isPinned() ? __('Unpin conversation') : __('Pin conversation') }}"
class="w-full"
>
{{ $this->isPinned() ? __('Pinned') : __('Pin') }}
</flux:button>
</flux:tooltip>
<flux:tooltip :content="__('Files')" position="top">
@@ -62,7 +86,9 @@
wire:target="openFiles"
aria-label="{{ __('Files') }}"
class="w-full"
/>
>
{{ __('Files') }}
</flux:button>
@if ((int) $this->conversation->files_count > 0)
<span class="absolute -end-1 -top-1 flex min-w-5 items-center justify-center rounded-full bg-zinc-900 px-1 text-[10px] font-semibold text-white shadow-sm dark:bg-white dark:text-zinc-950">

24
resources/views/livewire/chat/conversation-list.blade.php
View File

@@ -48,6 +48,8 @@
@php
$selected = $selectedConversationId === $conversation->id;
$unreadCount = (int) ($conversation->unread_messages_count ?? 0);
$isPinned = $this->isPinnedFor($conversation);
$isMuted = $this->isMutedFor($conversation);
@endphp
<button
@@ -111,6 +113,28 @@
'bg-sky-50 text-sky-700 dark:bg-sky-400/10 dark:text-sky-300' => ! $selected,
])>{{ __('Group') }}</span>
@endif
@if ($isPinned)
<span @class([
'inline-flex shrink-0 items-center',
'text-amber-300 dark:text-amber-600' => $selected,
'text-amber-500 dark:text-amber-400' => ! $selected,
])>
<span class="sr-only">{{ __('Pinned') }}</span>
<flux:icon.bookmark class="size-3.5" />
</span>
@endif
@if ($isMuted)
<span @class([
'inline-flex shrink-0 items-center',
'text-white/60 dark:text-zinc-600' => $selected,
'text-zinc-400 dark:text-zinc-500' => ! $selected,
])>
<span class="sr-only">{{ __('Muted') }}</span>
<flux:icon.bell-slash class="size-3.5" />
</span>
@endif
</div>
<p @class([

30
resources/views/livewire/chat/message-composer.blade.php
View File

@@ -79,6 +79,27 @@
@enderror
</div>
@if ($emojiPickerOpen)
<div
wire:key="emoji-picker"
class="mb-2 rounded-lg border border-zinc-200 bg-white p-2 shadow-sm dark:border-zinc-800 dark:bg-zinc-900"
>
<div class="grid grid-cols-9 gap-1 sm:grid-cols-12">
@foreach ($this->emojiOptions() as $emoji)
<button
type="button"
wire:key="emoji-option-{{ $emoji['code'] }}"
wire:click="appendEmoji('{{ $emoji['code'] }}')"
class="flex aspect-square min-h-9 items-center justify-center rounded-md text-xl transition hover:bg-zinc-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent dark:hover:bg-zinc-800"
aria-label="{{ __('Add :emoji emoji', ['emoji' => $emoji['label']]) }}"
>
{{ html_entity_decode('&#x'.$emoji['code'].';', ENT_QUOTES, 'UTF-8') }}
</button>
@endforeach
</div>
</div>
@endif
<div class="flex items-end gap-2 rounded-lg border border-zinc-200 bg-white p-2 shadow-sm transition focus-within:border-zinc-300 focus-within:ring-2 focus-within:ring-accent focus-within:ring-offset-2 focus-within:ring-offset-white dark:border-zinc-800 dark:bg-zinc-900 dark:focus-within:border-zinc-700 dark:focus-within:ring-offset-zinc-950">
<flux:tooltip :content="__('Attach file')" position="top">
<flux:button
@@ -101,7 +122,14 @@
/>
<flux:tooltip :content="__('Emoji')" position="top">
<flux:button type="button" variant="ghost" icon="face-smile" aria-label="{{ __('Emoji') }}" />
<flux:button
type="button"
variant="ghost"
icon="face-smile"
wire:click="toggleEmojiPicker"
aria-label="{{ __('Emoji') }}"
aria-expanded="{{ $emojiPickerOpen ? 'true' : 'false' }}"
/>
</flux:tooltip>
<flux:button