isaacclad/ladill-meet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Restyle meeting chat as a borderless rounded panel.
Deploy Ladill Meet / deploy (push) Successful in 1m54s
Details

Browse Source 
Remove divider lines from the chat sidebar and wrap messages plus the composer in a single rounded box.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-01 09:31:18 +00:00
co-authored by Cursor
parent 571d9d7a7c
commit e204a197a8
1 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/meet/room/show.blade.php
+25 -23
View File
@@ -298,8 +298,8 @@
</div>
<aside x-show="chatOpen" x-cloak
class="flex h-full w-80 shrink-0 flex-col overflow-hidden border-l border-slate-700/80 bg-slate-950">
<div class="flex items-center justify-between border-b border-slate-800 px-4 py-3">
class="flex h-full w-80 shrink-0 flex-col bg-slate-950 px-3 py-3">
<div class="flex shrink-0 items-center justify-between px-1 pb-3">
<div>
<h2 class="text-sm font-semibold text-white">Meeting chat</h2>
<p class="text-xs text-slate-400">Messages are visible to everyone in the call</p>
@@ -310,29 +310,31 @@
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg>
</button>
</div>
<div class="flex-1 space-y-3 overflow-y-auto px-4 py-4" id="chat-messages">
@foreach ($messages as $message)
@php $isOwn = $message->sender_name === $participant->display_name; @endphp
<div class="meet-chat-bubble {{ $isOwn ? 'meet-chat-bubble--own' : '' }}">
<div class="rounded-2xl px-3 py-2 {{ $isOwn ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-100' }}">
@unless ($isOwn)
<p class="mb-0.5 text-xs font-medium text-sky-300">{{ $message->sender_name }}</p>
@endunless
<p class="text-sm leading-relaxed">{{ $message->body }}</p>
<div class="flex min-h-0 flex-1 flex-col rounded-2xl bg-slate-900/90 p-3 ring-1 ring-slate-800/60">
<div class="flex-1 space-y-3 overflow-y-auto" id="chat-messages">
@foreach ($messages as $message)
@php $isOwn = $message->sender_name === $participant->display_name; @endphp
<div class="meet-chat-bubble {{ $isOwn ? 'meet-chat-bubble--own' : '' }}">
<div class="rounded-2xl px-3 py-2 {{ $isOwn ? 'bg-indigo-600 text-white' : 'bg-slate-800 text-slate-100' }}">
@unless ($isOwn)
<p class="mb-0.5 text-xs font-medium text-sky-300">{{ $message->sender_name }}</p>
@endunless
<p class="text-sm leading-relaxed">{{ $message->body }}</p>
</div>
<p class="mt-1 text-[10px] text-slate-500 {{ $isOwn ? 'text-right' : '' }}">{{ $message->created_at->format('g:i A') }}</p>
</div>
<p class="mt-1 text-[10px] text-slate-500 {{ $isOwn ? 'text-right' : '' }}">{{ $message->created_at->format('g:i A') }}</p>
</div>
@endforeach
</div>
<form @submit.prevent="sendChat" class="border-t border-slate-800 bg-slate-950/80 p-3">
<div class="flex items-end gap-2">
<input type="text" x-model="chatInput" placeholder="Write a message…"
class="flex-1 rounded-xl border-slate-700 bg-slate-900 px-3 py-2.5 text-sm text-white placeholder:text-slate-500 focus:border-indigo-500 focus:ring-indigo-500">
<button type="submit"
class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
:disabled="!chatInput.trim()">Send</button>
@endforeach
</div>
</form>
<form @submit.prevent="sendChat" class="mt-3 shrink-0">
<div class="flex items-end gap-2">
<input type="text" x-model="chatInput" placeholder="Write a message…"
class="flex-1 rounded-xl border-0 bg-slate-800 px-3 py-2.5 text-sm text-white placeholder:text-slate-500 ring-1 ring-slate-700/80 focus:ring-indigo-500">
<button type="submit"
class="rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white transition-colors hover:bg-indigo-500 disabled:opacity-50"
:disabled="!chatInput.trim()">Send</button>
</div>
</form>
</div>
</aside>
</div>
</body>