feat: sort trips by start date and highlight the next upcoming trip in TripsPage

backend/routes/trips.py

@@ -17,6 +17,7 @@ def list_trips(db: Session = Depends(get_db)):
             joinedload(models.Trip.selected_tags),
             joinedload(models.Trip.marked_tags),
         )
+        .order_by(models.Trip.start_date.asc())
         .all()
     )
     return [

frontend/src/pages/TripsPage.tsx

@@ -41,6 +41,13 @@ export default function TripsPage() {
     loadTrips();
   }, []);
 
+  // Markiere nächsten anstehenden Trip
+  const today = new Date().toISOString().slice(0, 10);
+  const nextTripIdx = trips.findIndex(
+    (trip) => trip.start_date >= today
+  );
+  const nextTripId = nextTripIdx !== -1 ? trips[nextTripIdx].id : null;
+
   return (
     <div>
       <h1 className="text-2xl font-bold mb-4">Packlist</h1>
@@ -76,16 +83,33 @@ export default function TripsPage() {
         </button>
       </form>
 
-      {trips.map(trip => (
+      {trips.map(trip => {
+        const isPast = trip.start_date < today;
+        const isNext = trip.id === nextTripId;
+        return (
           <Link
             to={`/trips/${trip.id}`}
             key={trip.id}
-          className="block border rounded p-2 mb-4 hover:bg-blue-50 transition"
+            className={
+              "block border rounded p-2 mb-4 transition " +
+              (isPast
+                ? "bg-gray-100 text-gray-400"
+                : isNext
+                ? "border-yellow-400 bg-yellow-50"
+                : "hover:bg-blue-50")
+            }
             style={{ textDecoration: "none", color: "inherit" }}
           >
             <div className="flex justify-between items-center">
               <div>
-              <h2 className="font-bold">{trip.name}</h2>
+                <h2 className="font-bold">
+                  {trip.name}
+                  {isNext && (
+                    <span className="ml-2 text-xs bg-yellow-300 text-yellow-900 px-2 py-0.5 rounded">
+                      Nächster Trip
+                    </span>
+                  )}
+                </h2>
                 <p>
                   {trip.start_date} – {trip.end_date}
                 </p>
@@ -103,7 +127,8 @@ export default function TripsPage() {
               </div>
             </div>
           </Link>
-      ))}
+        );
+      })}
     </div>
   );
 }