From 762aba02466644e7226c53717628234869dbe6a0 Mon Sep 17 00:00:00 2001
From: isaacclad <sense.corporate@gmail.com>
Date: Sat, 4 Jul 2026 22:44:45 +0000
Subject: [PATCH] Redesign meeting programme as single-column Figtree layout.

Stack time, title, and details vertically in compact cards for the narrow live-room sidebar and agenda views.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../meet/partials/programme-agenda.blade.php  | 55 +++++++++---------
 .../room/partials/programme-panel.blade.php   | 57 +++++++++----------
 2 files changed, 53 insertions(+), 59 deletions(-)

diff --git a/resources/views/meet/partials/programme-agenda.blade.php b/resources/views/meet/partials/programme-agenda.blade.php
index b0b8533..26ac2fc 100644
--- a/resources/views/meet/partials/programme-agenda.blade.php
+++ b/resources/views/meet/partials/programme-agenda.blade.php
@@ -4,23 +4,23 @@
 @endphp
 
 @if(is_array($programme) && ! empty($programme['days']))
-    <div class="mt-6 rounded-2xl border border-slate-200 bg-white p-6">
+    <div class="programme-agenda mt-6 rounded-2xl border border-slate-200 bg-white p-6 font-sans">
         <h2 class="text-sm font-medium text-slate-700">Agenda</h2>
         @if(! empty($programme['title']))
             <p class="mt-1 text-xs text-slate-500">{{ $programme['title'] }}</p>
         @endif
 
         @if($linkedItems !== [])
-            <p class="mt-2 text-xs font-semibold uppercase tracking-wide text-violet-600">Linked to this session</p>
-            <ul class="mt-2 space-y-2 text-sm text-slate-700">
+            <p class="mt-3 text-[11px] font-semibold uppercase tracking-wide text-violet-600">Linked to this session</p>
+            <ul class="mt-2 space-y-2 text-sm">
                 @foreach($linkedItems as $item)
-                    <li class="rounded-lg border border-violet-100 bg-violet-50/50 px-3 py-2">
+                    <li class="rounded-xl border border-violet-100 bg-violet-50/50 px-3 py-2.5">
                         @if(! empty($item['time']))
-                            <span class="font-mono text-xs text-slate-500">{{ $item['time'] }}</span>
+                            <p class="text-[11px] font-medium text-indigo-600">{{ $item['time'] }}</p>
                         @endif
-                        <span class="font-medium">{{ $item['title'] ?? 'Item' }}</span>
+                        <p @class(['font-medium text-slate-800', ! empty($item['time']) ? 'mt-0.5' : ''])>{{ $item['title'] ?? 'Item' }}</p>
                         @if(! empty($item['host']))
-                            <span class="text-slate-500"> · {{ $item['host'] }}</span>
+                            <p class="mt-0.5 text-xs text-slate-500">{{ $item['host'] }}</p>
                         @endif
                     </li>
                 @endforeach
@@ -29,36 +29,33 @@
 
         <div class="mt-4 space-y-4">
             @foreach((array) ($programme['days'] ?? []) as $day)
-                <div>
+                <section>
                     @if(! empty($day['label']) || ! empty($day['date']))
-                        <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+                        <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                             {{ trim(($day['label'] ?? '').' '.($day['date'] ?? '')) }}
                         </h3>
                     @endif
-                    <ul class="mt-2 divide-y divide-slate-100 text-sm">
+                    <ul @class(['space-y-2 text-sm', ! empty($day['label']) || ! empty($day['date']) ? 'mt-2' : ''])>
                         @foreach((array) ($day['items'] ?? []) as $item)
-                            <li class="py-2">
-                                <div class="flex gap-3">
-                                    @if(! empty($item['time']))
-                                        <span class="w-14 shrink-0 font-mono text-xs text-slate-400">{{ $item['time'] }}</span>
-                                    @endif
-                                    <div>
-                                        <p class="font-medium text-slate-800">{{ $item['title'] ?? '' }}</p>
-                                        @if(! empty($item['description']))
-                                            <p class="mt-0.5 text-xs text-slate-500">{{ $item['description'] }}</p>
-                                        @endif
-                                        @if(! empty($item['location']) || ! empty($item['host']))
-                                            <p class="mt-0.5 text-xs text-slate-400">
-                                                @if(! empty($item['location'])){{ $item['location'] }}@endif
-                                                @if(! empty($item['host'])) · {{ $item['host'] }}@endif
-                                            </p>
-                                        @endif
-                                    </div>
-                                </div>
+                            <li class="rounded-xl border border-slate-100 bg-slate-50/80 px-3 py-2.5">
+                                @if(! empty($item['time']))
+                                    <p class="text-[11px] font-medium text-slate-500">{{ $item['time'] }}</p>
+                                @endif
+                                <p @class(['font-medium leading-snug text-slate-800', ! empty($item['time']) ? 'mt-0.5' : ''])>{{ $item['title'] ?? '' }}</p>
+                                @if(! empty($item['description']))
+                                    <p class="mt-1 text-xs leading-relaxed text-slate-500">{{ $item['description'] }}</p>
+                                @endif
+                                @if(! empty($item['location']) || ! empty($item['host']))
+                                    <p class="mt-1 text-xs text-slate-400">
+                                        @if(! empty($item['location'])){{ $item['location'] }}@endif
+                                        @if(! empty($item['location']) && ! empty($item['host'])) · @endif
+                                        @if(! empty($item['host'])){{ $item['host'] }}@endif
+                                    </p>
+                                @endif
                             </li>
                         @endforeach
                     </ul>
-                </div>
+                </section>
             @endforeach
         </div>
     </div>
diff --git a/resources/views/meet/room/partials/programme-panel.blade.php b/resources/views/meet/room/partials/programme-panel.blade.php
index 84de961..583610e 100644
--- a/resources/views/meet/room/partials/programme-panel.blade.php
+++ b/resources/views/meet/room/partials/programme-panel.blade.php
@@ -5,23 +5,23 @@
 @endphp
 
 @if(is_array($programme) && ! empty($programme['days']))
-    <div class="space-y-4 text-sm">
+    <div class="programme-panel font-sans space-y-5 text-sm">
         @if(! empty($programme['title']))
-            <p class="text-xs text-slate-400">{{ $programme['title'] }}</p>
+            <p class="text-xs font-medium text-slate-400">{{ $programme['title'] }}</p>
         @endif
 
         @if($linkedItems !== [])
             <div>
-                <p class="text-xs font-semibold uppercase tracking-wide text-violet-400">This session</p>
+                <p class="text-[11px] font-semibold uppercase tracking-wide text-violet-400">This session</p>
                 <ul class="mt-2 space-y-2">
                     @foreach($linkedItems as $item)
-                        <li class="rounded-lg border border-violet-500/30 bg-violet-500/10 px-3 py-2 text-slate-100">
+                        <li class="rounded-xl border border-violet-500/30 bg-violet-500/10 px-3 py-2.5">
                             @if(! empty($item['time']))
-                                <span class="font-mono text-xs text-violet-200/80">{{ $item['time'] }}</span>
+                                <p class="text-[11px] font-medium text-violet-200/90">{{ $item['time'] }}</p>
                             @endif
-                            <span class="font-medium">{{ $item['title'] ?? 'Item' }}</span>
+                            <p @class(['font-medium text-slate-100', ! empty($item['time']) ? 'mt-0.5' : ''])>{{ $item['title'] ?? 'Item' }}</p>
                             @if(! empty($item['host']))
-                                <span class="text-slate-400"> · {{ $item['host'] }}</span>
+                                <p class="mt-0.5 text-xs text-slate-400">{{ $item['host'] }}</p>
                             @endif
                         </li>
                     @endforeach
@@ -30,38 +30,35 @@
         @endif
 
         @foreach((array) ($programme['days'] ?? []) as $day)
-            <div>
+            <section>
                 @if(! empty($day['label']) || ! empty($day['date']))
-                    <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-500">
+                    <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-500">
                         {{ trim(($day['label'] ?? '').' '.($day['date'] ?? '')) }}
                     </h3>
                 @endif
-                <ul class="mt-2 divide-y divide-slate-800">
+                <ul @class(['space-y-2', ! empty($day['label']) || ! empty($day['date']) ? 'mt-2' : ''])>
                     @foreach((array) ($day['items'] ?? []) as $item)
-                        <li class="py-2.5">
-                            <div class="flex gap-3">
-                                @if(! empty($item['time']))
-                                    <span class="w-14 shrink-0 font-mono text-xs text-slate-500">{{ $item['time'] }}</span>
-                                @endif
-                                <div class="min-w-0">
-                                    <p class="font-medium text-slate-100">{{ $item['title'] ?? '' }}</p>
-                                    @if(! empty($item['description']))
-                                        <p class="mt-0.5 text-xs text-slate-400">{{ $item['description'] }}</p>
-                                    @endif
-                                    @if(! empty($item['location']) || ! empty($item['host']))
-                                        <p class="mt-0.5 text-xs text-slate-500">
-                                            @if(! empty($item['location'])){{ $item['location'] }}@endif
-                                            @if(! empty($item['host'])) · {{ $item['host'] }}@endif
-                                        </p>
-                                    @endif
-                                </div>
-                            </div>
+                        <li class="rounded-xl border border-slate-800/80 bg-slate-900/40 px-3 py-2.5">
+                            @if(! empty($item['time']))
+                                <p class="text-[11px] font-medium text-slate-400">{{ $item['time'] }}</p>
+                            @endif
+                            <p @class(['font-medium leading-snug text-slate-100', ! empty($item['time']) ? 'mt-0.5' : ''])>{{ $item['title'] ?? '' }}</p>
+                            @if(! empty($item['description']))
+                                <p class="mt-1 text-xs leading-relaxed text-slate-400">{{ $item['description'] }}</p>
+                            @endif
+                            @if(! empty($item['location']) || ! empty($item['host']))
+                                <p class="mt-1 text-xs text-slate-500">
+                                    @if(! empty($item['location'])){{ $item['location'] }}@endif
+                                    @if(! empty($item['location']) && ! empty($item['host'])) · @endif
+                                    @if(! empty($item['host'])){{ $item['host'] }}@endif
+                                </p>
+                            @endif
                         </li>
                     @endforeach
                 </ul>
-            </div>
+            </section>
         @endforeach
     </div>
 @else
-    <p class="px-2 py-4 text-center text-xs text-slate-500">No programme linked to this {{ $sessionNoun }} yet.</p>
+    <p class="px-2 py-4 text-center font-sans text-xs text-slate-500">No programme linked to this {{ $sessionNoun }} yet.</p>
 @endif