feat(ui): rework JourneyDetailScreen

lib/main.dart

@@ -5,6 +5,7 @@ import 'transport_helper.dart';
 import 'dart:async';
 import 'dart:io';
 import 'package:sqflite_common_ffi/sqflite_ffi.dart'; //for testing on desktop
+import 'utilities.dart';
 
 void main() async {
   await dotenv.load();
@@ -559,7 +560,16 @@ class _JourneyDetailPageState extends State<JourneyDetailPage> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text('Connection Details \n$duration')),
+      appBar: AppBar(
+        title: ListTile(
+          title: Text(
+            '${widget.singleJourney.startStation} → ${widget.singleJourney.endStation}',
+          ),
+          subtitle: Text(
+            '${widget.singleJourney.duration.toString().split(".")[0]}h',
+          ),
+        ),
+      ),
       body: Center(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
@@ -604,9 +614,39 @@ class SegmentList extends StatelessWidget {
     return ListView(
       children: [
         for (Segment seg in journey.segments)
-          ListTile(
+          Card(
-            title: Text(seg.start.direction),
+            child: Column(
-            subtitle: Text(seg.start.departureTime.toString()),
+              mainAxisSize: .min,
+              children: [
+                Container(
+                  padding: EdgeInsets.only(left: 10, top: 10),
+                  child: Row(
+                    children: [
+                      Text(
+                        seg.vehicle.name,
+                        textScaler: TextScaler.linear(1.1),
+                      ),
+                      Icon(Icons.arrow_right_alt),
+                      Text('${seg.start.direction}'),
+                    ],
+                  ),
+                ),
+                ListTile(
+                  leading: Text(
+                    timeOf(seg.start.departureTime),
+                    textScaler: TextScaler.linear(1.4),
+                  ),
+                  title: Text(seg.start.stationName),
+                ),
+                ListTile(
+                  leading: Text(
+                    timeOf(seg.end.arrivalTime),
+                    textScaler: TextScaler.linear(1.4),
+                  ),
+                  title: Text(seg.end.stationName),
+                ),
+              ],
+            ),
           ),
       ],
     );