Improve Schedule layout

Author: jbrooksuk

resources/views/components/badge.blade.php

@@ -0,0 +1,21 @@
+@props([
+    'color',
+    'icon',
+    'label',
+])
+<div {{ $attributes->style([
+    Illuminate\Support\Arr::toCssStyles([
+        \Filament\Support\get_color_css_variables(
+            $color,
+            shades: [400, 900],
+        ),
+    ]),
+]) }}>
+    <div {{ $attributes->class([
+        'flex items-center gap-1 rounded-full px-2 py-1 text-xs font-semibold leading-tight shadow bg-custom-400 text-custom-900',
+    ]) }}>
+        @svg($icon, 'h-5 w-5')
+
+        <span>{{ $label }}</span>
+    </div>
+</div>

resources/views/components/schedule-badge.blade.php

@@ -0,0 +1 @@
+<x-cachet::badge :color="$color" :label="$label" :icon="$icon" />

resources/views/components/schedule.blade.php

@@ -1,13 +1,19 @@
 <li class="p-4" x-data="{ timestamp: new Date(@js($schedule->scheduled_at)) }">
     <div class="flex flex-col-reverse items-start justify-between gap-4 md:flex-row md:items-center">
-        <div class="flex items-start gap-2.5">
+        <div class="flex items-start gap-2.5 w-full">
             <span class="mt-1.5 h-3 w-3 shrink-0 rounded-full bg-orange-200 animate-pulse"></span>
-            <div>
-                <div class="flex flex-col sm:flex-row gap-x-2 gap-y">
-                    <h3 class="font-semibold leading-6">{{ $schedule->name }}</h3>
-                    <div class="flex grow text-sm sm:text-xs gap-2 text-zinc-500 dark:text-zinc-400 items-center">
-                        @svg('cachet-clock', 'size-4 hidden sm:block')
-                        <span x-text="timestamp.toLocaleString()"></span>
+            <div class="flex-1">
+                <div class="flex flex-col sm:flex-row justify-between gap-2 flex-col-reverse items-center">
+                    <div class="flex flex-col flex-1">
+                        <h3 class="max-w-full text-base font-semibold break-words sm:text-xl">
+                            {{ $schedule->name}}
+                        </h3>
+                        <span class="text-xs text-zinc-500 dark:text-zinc-400">
+                        {{ $schedule->scheduled_at->diffForHumans() }} — <span x-text="timestamp.toLocaleString()"></span>
+                    </span>
+                    </div>
+                    <div class="flex justify-start sm:justify-end">
+                        <x-cachet::schedule-badge :schedule="$schedule" />
                     </div>
                 </div>
                 <div class="prose-sm md:prose md:prose-zinc dark:text-zinc-100">

src/View/Components/ScheduleBadge.php

@@ -0,0 +1,32 @@
+<?php
+
+namespace Cachet\View\Components;
+
+use Cachet\Enums\ScheduleStatusEnum;
+use Cachet\Models\Schedule;
+use Closure;
+use Illuminate\Contracts\View\View;
+use Illuminate\View\Component;
+
+class ScheduleBadge extends Component
+{
+    /**
+     * Create a new component instance.
+     */
+    public function __construct(public readonly Schedule $schedule)
+    {
+        //
+    }
+
+    /**
+     * Get the view / contents that represent the component.
+     */
+    public function render(): View|Closure|string
+    {
+        return view('cachet::components.schedule-badge', [
+            'label' => $this->schedule->status->getLabel(),
+            'color' => $this->schedule->status->getColor(),
+            'icon' => $this->schedule->status->getIcon(),
+        ]);
+    }
+}