adds profile timeline and follows

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

@@ -23,12 +23,13 @@
     on:click
     {type}
 >
-    {#if !loading}
+    <div class:invisible={loading}>
         {#if icon}
             <i class="fa fa-{icon} mr-2"></i>
         {/if}
         <slot />
-    {:else}
-        <div class="spinner"></div>
+    </div>
+    {#if loading}
+        <div class="absolute aspect-square spinner"></div>
     {/if}
 </button>

web/src/lib/components/profile/activity_card.svelte

@@ -24,8 +24,7 @@
         />
         <div>
             <a class="underline" href="/profile/{user.id}"> {user.username} </a>
-            {activity.type === "trail" ? "planned" : "completed"}
-            a trail
+            {activity.type === "trail" ? $_("planned-a-trail") : $_("completed-a-trail")}
             <p class="text-xs text-gray-500 mb-3">
                 {new Date(activity.date).toLocaleDateString(undefined, {
                     month: "long",

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}