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,34 +83,52 @@ export default function TripsPage() {
         </button>
       </form>
 
-      {trips.map(trip => (
+      {trips.map(trip => {
-        <Link
+        const isPast = trip.start_date < today;
-          to={`/trips/${trip.id}`}
+        const isNext = trip.id === nextTripId;
-          key={trip.id}
+        return (
-          className="block border rounded p-2 mb-4 hover:bg-blue-50 transition"
+          <Link
-          style={{ textDecoration: "none", color: "inherit" }}
+            to={`/trips/${trip.id}`}
-        >
+            key={trip.id}
-          <div className="flex justify-between items-center">
+            className={
-            <div>
+              "block border rounded p-2 mb-4 transition " +
-              <h2 className="font-bold">{trip.name}</h2>
+              (isPast
-              <p>
+                ? "bg-gray-100 text-gray-400"
-                {trip.start_date} – {trip.end_date}
+                : isNext
-              </p>
+                ? "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}
+                  {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>
+              </div>
+              <div className="flex gap-2">
+                <button
+                  className="text-sm text-red-500 underline"
+                  onClick={e => {
+                    e.preventDefault();
+                    handleDeleteTrip(trip.id);
+                  }}
+                >
+                  Löschen
+                </button>
+              </div>
             </div>
-            <div className="flex gap-2">
+          </Link>
-              <button
+        );
-                className="text-sm text-red-500 underline"
+      })}
-                onClick={e => {
-                  e.preventDefault();
-                  handleDeleteTrip(trip.id);
-                }}
-              >
-                Löschen
-              </button>
-            </div>
-          </div>
-        </Link>
-      ))}
     </div>
   );
 }