Add trainservice details (currently raw JSON)

package.json

@@ -41,7 +41,7 @@
 		"vitest-browser-svelte": "^2.0.2"
 	},
 	"dependencies": {
-		"@owlboard/owlboard-ts": "^3.0.0-dev.20260428T2753",
+		"@owlboard/owlboard-ts": "^3.0.0-dev.20260503T0051",
 		"@tabler/icons-svelte": "^3.40.0"
 	}
 }

src/lib/components/ui/TrainService.svelte

@@ -1,15 +1,51 @@
 <script lang="ts">
     import type { ApiTrainsTrainByHeadcode } from '@owlboard/owlboard-ts';
-    import { slide } from 'svelte/transition';
+    	import { OwlClient, ApiError, ValidationError } from '$lib/owlClient';
+import { slide } from 'svelte/transition';
+import { quintOut} from 'svelte/easing';
 import { formatUkTime } from '$lib/utils/time';
     import TocStyle from '$lib/components/ui/TocStyle.svelte';
     
     let { service }: { service: ApiTrainsTrainByHeadcode.TrainByHeadcodeResponse} = $props();
     let isExpanded = $state(false);
+    let loadingDetails = $state(false)
+    let details = $state(null);
+
+    const toggleExpand = async (rid: string) => {
+        if (isExpanded) {
+            isExpanded = false;
+            return;
+        }
+
+        if (details) {
+            isExpanded = true;
+            return;
+        }
+
+        loadingDetails = true;
+        try {
+            const result = await OwlClient.trains.getByRid(service.r)
+            details = result.data;
+            isExpanded = true;
+        } catch (e) {
+            console.Error("Failde to load train details")
+        } finally {
+            loading = false;
+        }
+
+    }
 
-    const toggleExpand = () => isExpanded = !isExpanded;
 
     let OriginDepartureSummary = $derived(formatUkTime(service.od));
+
+    async function loadDetails(rid: string) {
+        if (details) return;
+        loadingDetails = true;
+
+        const result = await OwlClient.trains.getByRid(service.r)
+        details = result.data;
+        loadingDetails = false;
+    }
 </script>
 
 <div class="train-service">
@@ -31,8 +67,15 @@ import { formatUkTime } from '$lib/utils/time';
             {service.dt}    
         </div>
         <!-- Add arrow icon to signify drop-down -->
+         <!-- ADD LOADING STATE -->
     </div>
     </button>
+            {#if isExpanded && details}
+            <div  transition:slide={{duration: 800, easing: quintOut}} class="detauls-content">
+                <!-- Here goes the data formatting! -->
+                {JSON.stringify(details)}
+            </div>
+        {/if}
 </div>
 
 <style>

src/routes/trains/+page.svelte

@@ -24,6 +24,7 @@
         width: 95%;
         margin: auto;
         padding-top: 1rem;
+        padding-bottom: 1rem;
         display: flex;
         align-items: center;
         justify-content: center;