adds strava integration

web/src/lib/components/base/toggle.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-
     interface Props {
         name?: string;
         value?: boolean;
         label?: string;
         error?: string;
-        onchange?: (value: boolean) => void
+        disabled?: boolean;
+        onchange?: (value: boolean) => void;
     }
 
     let {
@@ -13,30 +13,35 @@
         value = $bindable(false),
         label = "",
         error = "",
-        onchange
+        disabled = false,
+        onchange,
     }: Props = $props();
 
-
     function handleToggleChange() {
         onchange?.(value);
     }
 </script>
 
-<label class="relative my-2 inline-flex items-center cursor-pointer">
-    <input
-        {name}
-        bind:checked={value}
-        type="checkbox"
-        class="sr-only peer"
-        value="1"
-        onchange={handleToggleChange}
-    />
-    <div
-        class="w-11 h-6 bg-input-background border border-input-border peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-input-ring rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"
-    ></div>
-    <span class="ms-3 text-sm font-medium">{label}</span>
-</label>
+<div>
+    <label class="relative my-2 inline-flex items-center" class:cursor-pointer={!disabled}>
+        <input
+            {name}
+            bind:checked={value}
+            type="checkbox"
+            class="sr-only peer"
+            value="1"
+            {disabled}
+            onchange={handleToggleChange}
+        />
+        <div
+            class="w-11 h-6 bg-input-background border border-input-border peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-input-ring rounded-full peer peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-primary"
+        ></div>
+        {#if label}
+            <span class="ms-3 text-sm font-medium">{label}</span>
+        {/if}
+    </label>
 
-<span class="toggle-error text-xs text-red-400">
-    {error}
-</span>
+    <p class="toggle-error text-xs text-red-400">
+        {error}
+    </p>
+</div>

web/src/lib/components/trail/trail_info_panel.svelte

@@ -362,7 +362,7 @@
                 {:else}
                     <EmptyStateDescription></EmptyStateDescription>
                 {/if}
-                <h4 class="text-2xl font-semibold mb-6 mt-12">{$_("route")}</h4>
+                <h4 class="text-2xl font-semibold mb-6 mt-12">{$_("route", { values: { n: 2 } })}</h4>
                 {#if mode === "overview"}
                     <div
                         class="relative border border-input-border rounded-xl p-2 mb-6 text-xs"