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

Improve meeting room chat layout and enforce custom meet icons.
Deploy Ladill Meet / deploy (push) Successful in 1m36s
Details

Browse Source 
Keep share in the header only, make chat a full-height side panel that pushes video left, and load meet icons from an allowlisted set with cache busting.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-01 08:51:51 +00:00
co-authored by Cursor
parent 9c29325a56
commit 5197a163d1
2 changed files with 36 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/meet/room/partials/meet-icon.blade.php
+21 -1
View File
@@ -1,3 +1,23 @@
@props(['icon', 'class' => 'h-5 w-5'])
<img src="{{ asset('images/meet-icons/'.$icon.'.svg') }}" alt="" {{ $attributes->merge(['class' => 'meet-toolbar-icon '.$class]) }}>
@php
$allowed = [
'applause',
'chat',
'close-breakout',
'lock',
'raise-hand',
'react',
'screen-share',
'share',
'start-breakout',
'upload-file',
];
$iconName = in_array($icon, $allowed, true) ? $icon : null;
$iconPath = $iconName ? public_path('images/meet-icons/'.$iconName.'.svg') : null;
$iconVer = ($iconPath && is_file($iconPath)) ? (@filemtime($iconPath) ?: '1') : '1';
@endphp
@if ($iconName)
<img src="{{ asset('images/meet-icons/'.$iconName.'.svg') }}?v={{ $iconVer }}" alt="" {{ $attributes->merge(['class' => 'meet-toolbar-icon '.$class]) }}>
@endif
resources/views/meet/room/show.blade.php
+15 -19
View File
@@ -95,8 +95,8 @@
</p>
</div>
<div class="relative min-h-0 flex-1">
<main class="relative h-full p-4">
<div class="flex min-h-0 min-w-0 flex-1">
<main class="relative min-h-0 min-w-0 flex-1 p-4">
<div id="video-grid" class="grid h-full gap-2 sm:grid-cols-2 lg:grid-cols-3"></div>
<div id="screen-share" class="absolute inset-4 hidden rounded-xl bg-black"></div>
@@ -109,22 +109,15 @@
<div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center gap-2">
<template x-for="reaction in floatingReactions" :key="reaction.id">
<span class="flex h-10 w-10 animate-bounce items-center justify-center rounded-full bg-slate-800/90 ring-1 ring-white/20">
<img x-show="reaction.kind === 'thumbs'" src="{{ asset('images/meet-icons/applause.svg') }}" alt="" class="meet-toolbar-icon h-5 w-5">
<img x-show="reaction.kind === 'heart'" src="{{ asset('images/meet-icons/react.svg') }}" alt="" class="meet-toolbar-icon h-5 w-5">
<img x-show="reaction.kind === 'thumbs'" src="{{ asset('images/meet-icons/applause.svg') }}?v={{ @filemtime(public_path('images/meet-icons/applause.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5">
<img x-show="reaction.kind === 'heart'" src="{{ asset('images/meet-icons/react.svg') }}?v={{ @filemtime(public_path('images/meet-icons/react.svg')) ?: '1' }}" alt="" class="meet-toolbar-icon h-5 w-5">
</span>
</template>
</div>
</main>
<aside x-show="chatOpen" x-cloak
x-transition:enter="transition ease-out duration-200"
x-transition:enter-start="translate-x-full opacity-0"
x-transition:enter-end="translate-x-0 opacity-100"
x-transition:leave="transition ease-in duration-150"
x-transition:leave-start="translate-x-0 opacity-100"
x-transition:leave-end="translate-x-full opacity-0"
@click.outside="chatOpen = false"
class="absolute inset-y-0 right-0 z-30 flex w-full max-w-sm flex-col border-l border-slate-700/80 bg-slate-950/95 shadow-2xl backdrop-blur-md">
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">
<div>
<h2 class="text-sm font-semibold text-white">Meeting chat</h2>
@@ -184,11 +177,6 @@
title="Share screen">
@include('meet.room.partials.meet-icon', ['icon' => 'screen-share'])
</button>
<button @click="openShare()" type="button"
class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
title="Share meeting link">
@include('meet.room.partials.meet-icon', ['icon' => 'share'])
</button>
<button @click="raiseHand()" type="button" class="rounded-full bg-slate-700 p-3 hover:bg-slate-600" title="Raise hand">
@include('meet.room.partials.meet-icon', ['icon' => 'raise-hand'])
</button>
@@ -244,8 +232,16 @@
</div>
<div class="space-y-1 p-2">
<x-meet.room.menu-item icon="upload-file" title="Share files" subtitle="Upload a file for everyone in the call"
@click="openUploadPicker()" />
<button @click="openUploadPicker()" type="button"
class="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm text-slate-200 transition-colors hover:bg-slate-800">
<span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-slate-800/80">
@include('meet.room.partials.meet-icon', ['icon' => 'upload-file', 'class' => 'h-5 w-5'])
</span>
<span class="min-w-0">
<span class="block font-medium">Share files</span>
<span class="block text-xs text-slate-400">Upload a file for everyone in the call</span>
</span>
</button>
@if ($participant->isHost())
<button @click="toggleRecordingFromMenu()" type="button"