Improve meeting room chat layout and enforce custom meet icons.

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>

resources/views/meet/room/partials/meet-icon.blade.php

@@ -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

@@ -95,8 +95,8 @@
             </p>
         </div>
 
-        <div class="relative min-h-0 flex-1">
+        <div class="flex min-h-0 min-w-0 flex-1">
-            <main class="relative h-full p-4">
+            <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 === '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') }}" 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"
+                   class="flex h-full w-80 shrink-0 flex-col overflow-hidden border-l border-slate-700/80 bg-slate-950">
-                   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">
                 <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"
+                    <button @click="openUploadPicker()" type="button"
-                                          @click="openUploadPicker()" />
+                            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"