From a018b6fd46c176bfa881816c9b300213b3480841 Mon Sep 17 00:00:00 2001
From: itskovacs <itskovacs@proton.me>
Date: Sun, 12 Oct 2025 16:19:01 +0200
Subject: [PATCH] :lipstick: Update shared trip

---
 .../shared-trip/shared-trip.component.html    | 20 +++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/src/app/components/shared-trip/shared-trip.component.html b/src/src/app/components/shared-trip/shared-trip.component.html
index 24bd3e6..0c57016 100644
--- a/src/src/app/components/shared-trip/shared-trip.component.html
+++ b/src/src/app/components/shared-trip/shared-trip.component.html
@@ -695,7 +695,7 @@
 <p-dialog header="Checklist" [draggable]="false" [dismissableMask]="true" [modal]="true"
   [(visible)]="checklistDialogVisible" styleClass="w-[95%] md:w-[50%] lg:w-[30%]">
   <section class="p-4 max-w-full max-h-[80%] md:max-h-[600px]">
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-4 pb-4">
+    <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-2 mt-2 pb-4">
       @for (item of checklistItems; track item.id) {
       <div class="relative group flex items-center gap-3 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-white/5">
         <label [for]="item.id" [class.line-through]="item.checked"
@@ -709,9 +709,21 @@
       }
     </div>
 
-    <div class="grid grid-cols-2 md:grid-cols-3 gap-2 mt-4 pb-4">
+    <div class="flex items-center justify-center flex-wrap xl:justify-between gap-1 mt-4">
+      <div class="font-semibold tracking-tight text-md">Items with status</div>
+      <div class="flex justify-center md:justify-end gap-1">
+        @for (status of statuses; track status.label) {
+        <div class="relative">
+          <div class="z-50 block absolute top-0.5 left-1 size-2.5 rounded-full" [style.background]="status.color"></div>
+          <span [style.background]="status.color+'1A'" [style.color]="status.color"
+            class="text-xs md:text-sm font-medium me-2 px-2.5 py-1 rounded">{{ status.label }}</span>
+        </div>
+        }
+      </div>
+    </div>
+    <div class="grid md:grid-cols-2 xl:grid-cols-3 gap-2 mt-2 pb-4">
       @for (item of getWatchlistData; track item.id) {
-      <div class="flex items-center gap-3 rounded-md p-2 hover:bg-gray-100 dark:hover:bg-white/5">
+      <div class="rounded-md py-1 min-w-0 hover:bg-gray-100 dark:hover:bg-white/5">
         <label [for]="item.id" class="flex items-center gap-2 w-full">
           <div class="relative">
             @if (item.status) {
@@ -720,7 +732,7 @@
             }
             <p-checkbox disabled />
           </div>
-          <div class="pr-6 md:pr-0 truncate select-none flex-1">
+          <div class="truncate select-none">
             <span>{{ item.text }}</span>
           </div>
         </label>