Use icon buttons for mobile leave/end and dashboard meeting actions.
Deploy Ladill Meet / deploy (push) Successful in 43s

Add meet-icons for leave, end, personal, and schedule; dashboard quick actions sit inline with the Meetings heading on small screens.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-01 16:18:21 +00:00
co-authored by Cursor
parent 8b43b01dfa
commit 13a251250c
7 changed files with 62 additions and 8 deletions
+2
View File
@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M12,24C5.383,24,0,18.617,0,12S5.383,0,12,0s12,5.383,12,12-5.383,12-12,12Zm0-22C6.486,2,2,6.486,2,12s4.486,10,10,10,10-4.486,10-10S17.514,2,12,2Zm-3,12v-2.593c1.022-.458,1.997-.692,3-.686,.953,.006,1.932,.23,3,.686v2.593h4v-2.023c0-.768-.323-1.456-.827-1.96-1.38-1.38-3.783-2.028-6.173-2.017-2.44,.011-4.865,.709-6.173,2.017-.504,.504-.828,1.192-.827,1.96v2.023h4Z"/></svg>

After

Width:  |  Height:  |  Size: 539 B

+4
View File
@@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
<path d="m2.951,13l4.759,4.796-1.42,1.408L.613,13.483c-.816-.816-.816-2.15.002-2.97l5.675-5.718,1.42,1.408-4.759,4.796h14.049v2H2.951ZM12,0v2c5.514,0,10,4.486,10,10s-4.486,10-10,10v2c6.617,0,12-5.383,12-12S18.617,0,12,0Z"/>
</svg>

After

Width:  |  Height:  |  Size: 366 B

+2
View File
@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><path d="M12,12A6,6,0,1,0,6,6,6.006,6.006,0,0,0,12,12ZM12,2A4,4,0,1,1,8,6,4,4,0,0,1,12,2Z"/><path d="M12,14a9.01,9.01,0,0,0-9,9,1,1,0,0,0,2,0,7,7,0,0,1,14,0,1,1,0,0,0,2,0A9.01,9.01,0,0,0,12,14Z"/></svg>

After

Width:  |  Height:  |  Size: 340 B

+2
View File
@@ -0,0 +1,2 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M17,10.039c-3.859,0-7,3.14-7,7,0,3.838,3.141,6.961,7,6.961s7-3.14,7-7c0-3.838-3.141-6.961-7-6.961Zm0,11.961c-2.757,0-5-2.226-5-4.961,0-2.757,2.243-5,5-5s5,2.226,5,4.961c0,2.757-2.243,5-5,5Zm1.707-4.707c.391,.391,.391,1.023,0,1.414-.195,.195-.451,.293-.707,.293s-.512-.098-.707-.293l-1-1c-.188-.188-.293-.442-.293-.707v-2c0-.552,.447-1,1-1s1,.448,1,1v1.586l.707,.707Zm5.293-10.293v2c0,.552-.447,1-1,1s-1-.448-1-1v-2c0-1.654-1.346-3-3-3H5c-1.654,0-3,1.346-3,3v1H11c.552,0,1,.448,1,1s-.448,1-1,1H2v9c0,1.654,1.346,3,3,3h4c.552,0,1,.448,1,1s-.448,1-1,1H5c-2.757,0-5-2.243-5-5V7C0,4.243,2.243,2,5,2h1V1c0-.552,.448-1,1-1s1,.448,1,1v1h8V1c0-.552,.447-1,1-1s1,.448,1,1v1h1c2.757,0,5,2.243,5,5Z"/></svg>

After

Width:  |  Height:  |  Size: 862 B

+28 -4
View File
@@ -1,10 +1,34 @@
<x-app-layout title="Dashboard">
<div class="flex flex-wrap items-center justify-between gap-4">
<div>
<h1 class="text-2xl font-semibold text-slate-900">Meetings</h1>
<div class="flex flex-wrap items-start justify-between gap-4">
<div class="min-w-0 flex-1">
<div class="flex items-center justify-between gap-3 sm:justify-start">
<h1 class="text-2xl font-semibold text-slate-900">Meetings</h1>
<div class="flex shrink-0 items-center gap-1.5 sm:hidden">
<a href="{{ route('meet.instant') }}"
class="btn-fab h-10 w-10"
title="Start instant meeting"
aria-label="Start instant meeting">
<svg class="h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
</svg>
</a>
<a href="{{ route('meet.personal') }}"
class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white text-slate-700 shadow-sm transition hover:bg-slate-50"
title="Personal room"
aria-label="Personal room">
@include('meet.room.partials.meet-icon', ['icon' => 'personal', 'inverted' => false])
</a>
<a href="{{ route('meet.rooms.create') }}"
class="inline-flex h-10 w-10 items-center justify-center rounded-full border border-slate-300 bg-white text-slate-700 shadow-sm transition hover:bg-slate-50"
title="Schedule meeting"
aria-label="Schedule meeting">
@include('meet.room.partials.meet-icon', ['icon' => 'schedule', 'inverted' => false])
</a>
</div>
</div>
<p class="mt-1 text-sm text-slate-600">{{ $organization->name }}</p>
</div>
<div class="flex gap-2">
<div class="hidden gap-2 sm:flex">
<a href="{{ route('meet.instant') }}" class="btn-primary">Start instant meeting</a>
<a href="{{ route('meet.personal') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Personal room</a>
<a href="{{ route('meet.rooms.create') }}" class="rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Schedule</a>
@@ -1,13 +1,17 @@
@props(['icon', 'class' => 'h-5 w-5'])
@props(['icon', 'class' => 'h-5 w-5', 'inverted' => true])
@php
$allowed = [
'applause',
'chat',
'close-breakout',
'end',
'leave',
'lock',
'personal',
'raise-hand',
'react',
'schedule',
'screen-share',
'share',
'start-breakout',
@@ -16,8 +20,9 @@
$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';
$iconClass = trim(($inverted ? 'meet-toolbar-icon ' : '').$class);
@endphp
@if ($iconName)
<img src="{{ asset('images/meet-icons/'.$iconName.'.svg') }}?v={{ $iconVer }}" alt="" {{ $attributes->merge(['class' => 'meet-toolbar-icon '.$class]) }}>
<img src="{{ asset('images/meet-icons/'.$iconName.'.svg') }}?v={{ $iconVer }}" alt="" {{ $attributes->merge(['class' => $iconClass]) }}>
@endif
+17 -2
View File
@@ -241,11 +241,26 @@
<div class="meet-toolbar__actions sm:contents">
<form method="POST" action="{{ route('meet.room.leave', $session) }}" class="inline">
@csrf
<button type="submit" class="rounded-full bg-red-600 px-5 py-3 text-sm font-medium hover:bg-red-500">Leave</button>
<button type="submit"
class="rounded-full bg-red-600 p-3 font-medium hover:bg-red-500 sm:px-5 sm:py-3 sm:text-sm"
title="Leave meeting"
aria-label="Leave meeting">
<span class="sm:hidden">
@include('meet.room.partials.meet-icon', ['icon' => 'leave'])
</span>
<span class="hidden sm:inline">Leave</span>
</button>
</form>
@if ($participant->isHost())
<button @click="openEndMeetingConfirm()" type="button"
class="rounded-full bg-red-950 px-4 py-3 text-sm text-red-400 hover:bg-red-900">End</button>
class="rounded-full bg-red-950 p-3 text-red-400 hover:bg-red-900 sm:px-4 sm:py-3 sm:text-sm"
title="End meeting for everyone"
aria-label="End meeting for everyone">
<span class="sm:hidden">
@include('meet.room.partials.meet-icon', ['icon' => 'end'])
</span>
<span class="hidden sm:inline">End</span>
</button>
<form id="meet-end-form" method="POST" action="{{ route('meet.room.end', $session) }}" class="hidden">
@csrf
</form>