adds profile timeline and follows

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

@@ -11,6 +11,7 @@
     import { pb } from "$lib/pocketbase";
 
     export let trail: Trail;
+    export let fullWidth: boolean = false;
 
     $: thumbnail = trail.photos.length
         ? getFileURL(trail, trail.photos[trail.thumbnail])
@@ -20,7 +21,9 @@
 </script>
 
 <div
-    class="trail-card relative rounded-2xl border border-input-border min-w-72 cursor-pointer"
+    class="trail-card relative rounded-2xl border border-input-border {fullWidth
+        ? 'min-w-72'
+        : 'w-72'} cursor-pointer"
     on:mouseenter
     on:mouseleave
     role="listitem"
@@ -65,7 +68,8 @@
             {/if}
             {#if trail.expand.author}
                 <p class="text-xs text-gray-500 mb-3">
-                    {$_("by")} <img
+                    {$_("by")}
+                    <img
                         class="rounded-full w-5 aspect-square mx-1 inline"
                         src={getFileURL(
                             trail.expand.author,

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

@@ -17,8 +17,8 @@
         page: 1,
         totalPages: 1,
     };
-
     export let loading: boolean = false;
+    export let fullWidthCards: boolean = false;
 
     const displayOptions: SelectItem[] = [
         { text: $_("card", { values: { n: 2 } }), value: "cards" },
@@ -180,7 +180,7 @@
                         data-sveltekit-preload-data="off"
                     >
                         {#if selectedDisplayOption === "cards"}
-                            <TrailCard {trail}></TrailCard>
+                            <TrailCard fullWidth={fullWidthCards} {trail}></TrailCard>
                         {:else}
                             <TrailListItem {trail}></TrailListItem>
                         {/if}