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

Limit audio rooms to Twitter Spaces features and fix live toolbar UX.
Deploy Ladill Meet / deploy (push) Successful in 1m3s
Details

Browse Source 
Block breakouts, chat, Q&A, and other meeting-only tools in spaces, hide video controls for audio-only rooms, and stabilize mobile nav and toolbar layout.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
isaacclad
2026-07-04 00:25:40 +00:00
co-authored by Cursor
parent b087b7e95a
commit c51e59945e
10 changed files with 310 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/app.css
+23 -1
View File
@@ -26,6 +26,20 @@ html.app-shell {
color-scheme: light;
}
@media (max-width: 1023px) {
html.app-shell {
--ladill-mobile-nav-height: calc(4rem + env(safe-area-inset-bottom, 0px));
}
html.app-shell .ladill-mobile-main {
padding-bottom: calc(var(--ladill-mobile-nav-height) + 1rem);
}
html.app-shell .ladill-mobile-bottom-nav__bar {
min-height: var(--ladill-mobile-nav-height);
}
}
html.app-shell :is(input, select, textarea) {
color-scheme: light;
}
@@ -365,14 +379,22 @@ html.meet-room-page {
}
/* Meeting room footer */
.meet-room-page .meet-room-footer {
min-height: 4.75rem;
}
@media (max-width: 639px) {
.meet-room-page .meet-room-footer {
min-height: calc(3.75rem + env(safe-area-inset-bottom, 0px));
padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
}
.meet-room-page .meet-toolbar__track {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding-inline: 1rem;
padding-bottom: max(0.25rem, env(safe-area-inset-bottom, 0px));
}
.meet-room-page .meet-toolbar__primary {
resources/js/meet-room.js
+41 -5
View File
@@ -221,6 +221,10 @@ function meetRoom() {
this.pollTimer = setInterval(() => this.poll(), 3000);
this.applyStageLayout();
this.$nextTick(() => {
document.querySelector('.meet-toolbar__track')?.classList.add('is-ready');
});
},
connectionErrorMessage(error) {
@@ -1687,6 +1691,10 @@ function meetRoom() {
},
async submitQuestion() {
if (this.isSpace) {
return;
}
const question = this.qaInput.trim();
if (!question || !this.config.qaUrl) return;
this.qaInput = '';
@@ -1698,14 +1706,14 @@ function meetRoom() {
},
async createBreakouts() {
if (!this.isHost || !this.config.breakoutsCreateUrl) return;
if (this.isSpace || !this.isHost || !this.config.breakoutsCreateUrl) return;
this.breakoutCount = '4';
this.breakoutModalOpen = true;
this.closeSidebar();
},
async submitBreakouts() {
if (!this.isHost || !this.config.breakoutsCreateUrl) return;
if (this.isSpace || !this.isHost || !this.config.breakoutsCreateUrl) return;
const count = parseInt(this.breakoutCount, 10);
if (!count || count < 1) return;
@@ -1725,7 +1733,7 @@ function meetRoom() {
},
async closeBreakouts() {
if (!this.isHost || !this.config.breakoutsCloseUrl) return;
if (this.isSpace || !this.isHost || !this.config.breakoutsCloseUrl) return;
await fetch(this.config.breakoutsCloseUrl, { method: 'POST', headers: this.headers() });
this.closeSidebar();
@@ -1734,6 +1742,10 @@ function meetRoom() {
},
async broadcastToBreakouts() {
if (this.isSpace) {
return;
}
const message = this.breakoutBroadcastInput.trim();
if (!this.isHost || !message || !this.config.breakoutsBroadcastUrl) {
return;
@@ -1855,10 +1867,18 @@ function meetRoom() {
},
toggleProgramme() {
if (this.isSpace) {
return;
}
this.toggleSidebarPanel('programme');
},
openUploadPicker() {
if (this.isSpace) {
return;
}
document.getElementById('meet-file-input')?.click();
this.closeSidebar();
},
@@ -1869,6 +1889,10 @@ function meetRoom() {
},
async toggleLockFromMenu() {
if (this.isSpace) {
return;
}
await this.toggleLock();
this.closeSidebar();
},
@@ -2112,10 +2136,14 @@ function meetRoom() {
},
showVideoControl() {
return this.canPublish && !this.audioOnlyPublish;
return this.canPublish && !this.audioOnly && !this.audioOnlyPublish;
},
showAudienceControls() {
if (this.isSpace) {
return !this.canPublish;
}
if (!this.usesSpeakAccess) {
return this.canPublish;
}
@@ -2123,8 +2151,12 @@ function meetRoom() {
return !this.canPublish || this.audioOnlyPublish;
},
/** Mobile primary toolbar — webinars/conferences only; meetings use More for extras. */
/** Mobile primary toolbar — webinars/conferences and audio room listeners. */
showPrimaryToolbarAudienceControls() {
if (this.isSpace) {
return !this.canPublish;
}
if (!this.usesSpeakAccess) {
return false;
}
@@ -2335,6 +2367,10 @@ function meetRoom() {
},
toggleChat() {
if (this.isSpace) {
return;
}
this.toggleSidebarPanel('chat');
},
resources/views/components/app-layout.blade.php
+1 -1
View File
@@ -22,7 +22,7 @@
</aside>
<div class="flex min-h-screen flex-col min-w-0 lg:pl-64">
@include('partials.topbar', ['heading' => $heading ?? $title])
<main class="flex-1 p-4 pb-24 sm:p-6 lg:pb-6">
<main class="flex-1 p-4 ladill-mobile-main sm:p-6 lg:pb-6">
@include('partials.flash')
{{ $slot }}
</main>
resources/views/meet/room/show.blade.php
+69 -24
View File
@@ -6,7 +6,10 @@
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ $room->title }} · Ladill Meet</title>
@include('partials.favicon')
<style>[x-cloak]{display:none!important}</style>
<style>
[x-cloak] { display: none !important; }
.meet-toolbar__track:not(.is-ready) [data-toolbar-conditional] { display: none !important; }
</style>
@vite(['resources/css/app.css', 'resources/js/meet-room.js'])
</head>
<body class="h-full overflow-hidden bg-slate-950 font-sans text-white" x-data="meetRoom()" x-init="init()">
@@ -28,6 +31,7 @@
$isConferenceSession = $isConference ?? false;
$sessionNoun = match (true) {
$isConferenceSession => 'conference',
($isSpace ?? false) => 'room',
$room->isWebinar() => 'webinar',
default => 'meeting',
};
@@ -70,7 +74,7 @@
data-is-host="{{ ($canManageConference ?? $participant->isHost()) ? '1' : '0' }}"
data-poll-url="{{ route('meet.room.poll', $session) }}"
data-ended-url="{{ route('meet.ended', $session) }}"
data-chat-url="{{ route('meet.room.chat', $session) }}"
data-chat-url="{{ ($isSpace ?? false) ? '' : route('meet.room.chat', $session) }}"
data-reaction-url="{{ route('meet.room.reaction', $session) }}"
data-raise-hand-url="{{ route('meet.room.raise-hand', $session) }}"
data-speak-request-url="{{ ($usesSpeakAccess ?? false) ? route('meet.room.speak.request', $session) : '' }}"
@@ -84,8 +88,8 @@
data-end-url="{{ route('meet.room.end', $session) }}"
data-recording-start-url="{{ route('meet.room.recording.start', $session) }}"
data-recording-stop-url="{{ route('meet.room.recording.stop', $session) }}"
data-lock-url="{{ route('meet.room.lock', $session) }}"
data-unlock-url="{{ route('meet.room.unlock', $session) }}"
data-lock-url="{{ ($isSpace ?? false) ? '' : route('meet.room.lock', $session) }}"
data-unlock-url="{{ ($isSpace ?? false) ? '' : route('meet.room.unlock', $session) }}"
data-caption-url="{{ route('meet.room.caption', $session) }}"
data-live-captions="{{ $room->setting('live_captions') ? '1' : '0' }}"
data-mute-on-join="{{ $room->setting('mute_on_join', true) ? '1' : '0' }}"
@@ -116,16 +120,16 @@
data-speak-granted="{{ ($speakGranted ?? false) ? '1' : '0' }}"
data-speak-requested="{{ ($speakRequested ?? false) ? '1' : '0' }}"
data-in-breakout="{{ ($inBreakout ?? false) ? '1' : '0' }}"
data-qa-url="{{ route('meet.room.qa.submit', $session) }}"
data-polls-create-url="{{ route('meet.room.polls.create', $session) }}"
data-breakouts-create-url="{{ route('meet.room.breakouts.create', $session) }}"
data-breakouts-close-url="{{ route('meet.room.breakouts.close', $session) }}"
data-breakouts-return-url="{{ route('meet.room.breakouts.return', $session) }}"
data-breakouts-broadcast-url="{{ route('meet.room.breakouts.broadcast', $session) }}"
data-qa-url="{{ ($isSpace ?? false) ? '' : route('meet.room.qa.submit', $session) }}"
data-polls-create-url="{{ ($isSpace ?? false) ? '' : route('meet.room.polls.create', $session) }}"
data-breakouts-create-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.create', $session) }}"
data-breakouts-close-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.close', $session) }}"
data-breakouts-return-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.return', $session) }}"
data-breakouts-broadcast-url="{{ ($isSpace ?? false) ? '' : route('meet.room.breakouts.broadcast', $session) }}"
data-media-token-url="{{ route('meet.room.media-token', $session) }}"
data-files-upload-url="{{ route('meet.room.files.upload', $session) }}"
data-whiteboard-url="{{ route('meet.room.whiteboard.show', $session) }}"
data-whiteboard-save-url="{{ route('meet.room.whiteboard.save', $session) }}"
data-files-upload-url="{{ ($isSpace ?? false) ? '' : route('meet.room.files.upload', $session) }}"
data-whiteboard-url="{{ ($isSpace ?? false) ? '' : route('meet.room.whiteboard.show', $session) }}"
data-whiteboard-save-url="{{ ($isSpace ?? false) ? '' : route('meet.room.whiteboard.save', $session) }}"
data-join-url="{{ $room->joinUrl() }}"
data-room-title="{{ $room->title }}"
data-passcode="{{ $room->passcode ?? '' }}"
@@ -224,7 +228,7 @@
</div>
</div>
<div x-show="inBreakout" x-cloak
<div x-show="inBreakout && !isSpace" x-cloak
class="flex shrink-0 flex-col gap-1 border-b border-amber-500/30 bg-amber-500/10 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between">
<div class="min-w-0">
<p class="text-sm font-semibold text-amber-100">Breakout session</p>
@@ -233,7 +237,7 @@
<p x-show="breakoutTimeRemaining()" class="shrink-0 text-xs font-medium text-amber-200/90" x-text="breakoutTimeRemaining()"></p>
</div>
<div x-show="isHost && breakoutsActive && !inBreakout" x-cloak
<div x-show="isHost && breakoutsActive && !inBreakout && !isSpace" x-cloak
class="flex shrink-0 flex-col gap-2 border-b border-amber-500/25 bg-amber-500/10 px-4 py-2.5 sm:flex-row sm:items-center sm:justify-between">
<div class="min-w-0 text-sm text-amber-100">
<p class="font-medium">Breakouts are active</p>
@@ -341,7 +345,21 @@
</div>
</main>
<footer class="relative shrink-0 bg-slate-950 py-4 sm:px-4">
<footer class="relative shrink-0 bg-slate-950 py-4 sm:px-4 meet-room-footer">
@php
$toolbarShowMic = ($canPublish ?? true) && ((! ($audioOnlyPublish ?? false)) || ($speakGranted ?? false));
$toolbarShowVideo = ($canPublish ?? true) && ! ($isAudioOnly ?? false) && ! ($audioOnlyPublish ?? false);
$toolbarShowAudiencePrimary = ($isSpace ?? false)
? ! ($canPublish ?? true)
: (($usesSpeakAccess ?? false) && ((! ($canPublish ?? true)) || ($audioOnlyPublish ?? false)));
$toolbarShowAudienceDesktop = ($isSpace ?? false)
? ! ($canPublish ?? true)
: (($usesSpeakAccess ?? false)
? ((! ($canPublish ?? true)) || ($audioOnlyPublish ?? false))
: ($canPublish ?? true));
$toolbarShowReactPrimary = $toolbarShowAudiencePrimary
&& ! (($usesSpeakAccess ?? false) && ($speakGranted ?? false) && ($audioOnlyPublish ?? false));
@endphp
<div x-show="speakGranted && audioOnlyPublish" x-cloak
class="pointer-events-none absolute inset-x-0 -top-10 flex justify-center px-4 sm:-top-11">
<p class="rounded-full bg-emerald-500/15 px-4 py-1.5 text-xs font-medium text-emerald-300 ring-1 ring-emerald-500/30">
@@ -353,6 +371,8 @@
<div class="meet-toolbar__primary sm:contents">
<button @click="toggleMute()" type="button"
x-show="showMicrophoneControl()"
data-toolbar-conditional
@unless($toolbarShowMic) hidden @endunless
class="rounded-full p-3 transition-colors"
:class="isMuted ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
:title="isMuted ? 'Unmute' : 'Mute'">
@@ -361,6 +381,8 @@
</button>
<button @click="toggleVideo()" type="button"
x-show="showVideoControl()"
data-toolbar-conditional
@unless($toolbarShowVideo) hidden @endunless
class="rounded-full p-3 transition-colors"
:class="isVideoOff ? 'bg-red-600 hover:bg-red-500' : 'bg-slate-700 hover:bg-slate-600'"
:title="isVideoOff ? 'Turn camera on' : 'Turn camera off'">
@@ -369,6 +391,8 @@
</button>
<button @click="toggleScreenShare()" type="button"
x-show="showVideoControl()"
data-toolbar-conditional
@unless($toolbarShowVideo) hidden @endunless
class="rounded-full p-3 transition-colors"
:class="isScreenSharing ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
title="Share screen">
@@ -376,18 +400,24 @@
</button>
<button @click="raiseHand()" type="button"
x-show="showPrimaryToolbarAudienceControls()"
data-toolbar-conditional
@unless($toolbarShowAudiencePrimary) hidden @endunless
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>
<button @click="sendReaction('thumbs')" type="button"
x-show="showPrimaryToolbarAudienceControls()"
data-toolbar-conditional
@unless($toolbarShowAudiencePrimary) hidden @endunless
class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
title="Applause — sound plays when others join in">
@include('meet.room.partials.meet-icon', ['icon' => 'applause'])
</button>
<button @click="sendReaction('heart')" type="button"
x-show="showPrimaryToolbarAudienceControls() && !(usesSpeakAccess && speakGranted && audioOnlyPublish)"
data-toolbar-conditional
@unless($toolbarShowReactPrimary) hidden @endunless
class="rounded-full bg-slate-700 p-3 hover:bg-slate-600"
title="React">
@include('meet.room.partials.meet-icon', ['icon' => 'react'])
@@ -400,22 +430,25 @@
</button>
</div>
<button @click="raiseHand()" type="button" x-show="showAudienceControls()" class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="Raise hand">
<button @click="raiseHand()" type="button" x-show="showAudienceControls()" data-toolbar-conditional @unless($toolbarShowAudienceDesktop) hidden @endunless class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="Raise hand">
@include('meet.room.partials.meet-icon', ['icon' => 'raise-hand'])
</button>
<button @click="sendReaction('thumbs')" type="button" x-show="showAudienceControls()" class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="Applause — sound plays when others join in">
<button @click="sendReaction('thumbs')" type="button" x-show="showAudienceControls()" data-toolbar-conditional @unless($toolbarShowAudienceDesktop) hidden @endunless class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="Applause — sound plays when others join in">
@include('meet.room.partials.meet-icon', ['icon' => 'applause'])
</button>
<button @click="sendReaction('heart')" type="button" x-show="showAudienceControls()" class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="React">
<button @click="sendReaction('heart')" type="button" x-show="showAudienceControls()" data-toolbar-conditional @unless($toolbarShowAudienceDesktop) hidden @endunless class="hidden rounded-full bg-slate-700 p-3 hover:bg-slate-600 sm:inline-flex" title="React">
@include('meet.room.partials.meet-icon', ['icon' => 'react'])
</button>
<button @click="toggleChat()" type="button"
x-show="!isSpace"
class="hidden rounded-full p-3 transition-colors sm:inline-flex"
:class="sidebarPanel === 'chat' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
title="Chat">
@include('meet.room.partials.meet-icon', ['icon' => 'chat'])
</button>
@unless ($isSpace ?? false)
<input type="file" id="meet-file-input" class="hidden" @change="uploadFile">
@endunless
<button @click="toggleFeatures()" type="button"
class="hidden items-center gap-1.5 rounded-full px-3.5 py-3 text-xs font-medium transition-colors sm:inline-flex"
:class="sidebarPanel === 'features' ? 'bg-indigo-600 hover:bg-indigo-500' : 'bg-slate-700 hover:bg-slate-600'"
@@ -458,6 +491,7 @@
</div>
</footer>
@unless ($isSpace ?? false)
<div x-show="breakoutModalOpen" x-cloak
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
@keydown.escape.window="breakoutModalOpen = false">
@@ -479,6 +513,7 @@
</form>
</div>
</div>
@endunless
<div x-show="endMeetingConfirmOpen" x-cloak
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4 backdrop-blur-sm"
@@ -503,6 +538,7 @@
@click="closeSidebar()"
aria-hidden="true"></div>
@unless ($isSpace ?? false)
<x-meet.room.panel show="sidebarPanel === 'chat'" title="{{ $sessionNounTitle }} chat">
<x-slot:subtitle>
<p>Messages are visible to everyone in the call</p>
@@ -534,7 +570,9 @@
</form>
</div>
</x-meet.room.panel>
@endunless
@unless ($isSpace ?? false)
<x-meet.room.panel show="sidebarPanel === 'programme'" title="Programme">
<x-slot:subtitle>
<p>Lineup from Events when linked to this {{ $sessionNoun }}</p>
@@ -548,6 +586,7 @@
])
</div>
</x-meet.room.panel>
@endunless
<x-meet.room.panel show="sidebarPanel === 'participants'" :title="null">
<x-slot:subtitle>
@@ -792,22 +831,23 @@
<x-meet.room.panel show="sidebarPanel === 'features'" title="More options">
<x-slot:subtitle>
<p>{{ $sessionNounTitle }} tools and extras</p>
<p>{{ ($isSpace ?? false) ? 'Audio room controls' : $sessionNounTitle.' tools and extras' }}</p>
</x-slot:subtitle>
<div class="flex min-h-0 flex-1 flex-col overflow-y-auto">
<div class="space-y-1">
<div class="space-y-1 sm:hidden" x-show="showAudienceControls()">
<x-meet.room.menu-item icon="chat" title="Chat" subtitle="Open the {{ $sessionNoun }} chat"
x-show="!isSpace"
@click="toggleChat()" />
<x-meet.room.menu-item icon="raise-hand" title="Raise hand" subtitle="Signal that you have something to share"
x-show="!usesSpeakAccess"
x-show="!usesSpeakAccess || isSpace"
@click="raiseHand(); closeSidebar()" />
<x-meet.room.menu-item icon="applause" title="Applause" subtitle="Send applause — sound plays when others join in"
x-show="!usesSpeakAccess"
x-show="!usesSpeakAccess || isSpace"
@click="sendReaction('thumbs'); closeSidebar()" />
<x-meet.room.menu-item icon="react" title="React" subtitle="Send a heart to the room"
x-show="!usesSpeakAccess || (usesSpeakAccess && speakGranted && audioOnlyPublish)"
x-show="isSpace || !usesSpeakAccess || (usesSpeakAccess && speakGranted && audioOnlyPublish)"
@click="sendReaction('heart'); closeSidebar()" />
<div class="my-1 border-t border-slate-800"></div>
</div>
@@ -846,10 +886,12 @@
</div>
<div class="space-y-1 sm:hidden" x-show="showStagePublisherControls()">
<x-meet.room.menu-item icon="chat" title="Chat" subtitle="Open the {{ $sessionNoun }} chat"
x-show="!isSpace"
@click="toggleChat()" />
<div class="my-1 border-t border-slate-800"></div>
</div>
@unless ($isSpace ?? false)
<x-meet.room.menu-item icon="programme" title="Programme" :subtitle="'View the '.$sessionNoun.' lineup from Events'"
@click="toggleProgramme()" />
@@ -863,6 +905,7 @@
<span class="block text-xs text-slate-400">Upload a file for everyone in the call</span>
</span>
</button>
@endunless
@if ($participant->isHost())
<button @click="toggleRecordingFromMenu()" type="button"
@@ -876,6 +919,7 @@
</span>
</button>
@unless ($isSpace ?? false)
<button @click="toggleLockFromMenu()" 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">
@@ -901,6 +945,7 @@
<button type="submit" class="rounded-lg bg-indigo-600 px-3 py-2 text-xs font-medium text-white hover:bg-indigo-500">Send</button>
</form>
</div>
@endunless
@endif
</div>
@@ -924,7 +969,7 @@
</div>
@endif
<p x-show="breakoutBroadcast" class="mt-3 rounded-xl bg-amber-950/40 px-3 py-3 text-sm text-amber-100" x-text="breakoutBroadcast"></p>
<p x-show="breakoutBroadcast && !isSpace" class="mt-3 rounded-xl bg-amber-950/40 px-3 py-3 text-sm text-amber-100" x-text="breakoutBroadcast"></p>
</div>
</x-meet.room.panel>
</div>
resources/views/partials/mobile-bottom-nav.blade.php
+3 -3
View File
@@ -17,8 +17,8 @@
}
$navActive = fn (bool $active) => $active ? 'text-indigo-600' : 'text-slate-600';
@endphp
<div x-data="{ profileOpen: false }" class="lg:hidden">
<nav class="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white"
<div x-data="{ profileOpen: false }" class="lg:hidden ladill-mobile-bottom-nav">
<nav class="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white ladill-mobile-bottom-nav__bar"
style="padding-bottom: env(safe-area-inset-bottom, 0px)">
<div class="grid h-16 {{ $gridCols }}">
<a href="{{ $homeUrl }}"
@@ -62,7 +62,7 @@
<svg class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14.857 17.082a23.848 23.848 0 0 0 5.454-1.31A8.967 8.967 0 0 1 18 9.75V9a6 6 0 1 0-12 0v.75a8.967 8.967 0 0 1-2.312 6.022c1.733.64 3.56 1.08 5.455 1.31m5.714 0a24.255 24.255 0 0 1-5.714 0m5.714 0a3 3 0 1 1-5.714 0"/></svg>
@if ($unreadUrl)
<span x-show="unread > 0" x-cloak x-text="unread > 9 ? '9+' : unread"
class="absolute -right-1 -top-1 inline-flex min-w-5 items-center justify-center rounded-full bg-rose-500 px-1.5 py-0.5 text-[10px] font-semibold text-white"></span>
class="pointer-events-none absolute -right-1 -top-1 inline-flex min-h-5 min-w-5 items-center justify-center rounded-full bg-rose-500 px-1.5 py-0.5 text-[10px] font-semibold text-white"></span>
@endif
</span>
<span class="text-[10px] font-medium">Notifications</span>