adds category to trail card/item/feed

db/main.go

@@ -931,7 +931,14 @@ func listFeedHandler() func(e *core.RecordsListRequestEvent) error {
 
 			errs := e.App.ExpandRecord(item, []string{"author"}, nil)
 			if len(errs) > 0 {
-				return fmt.Errorf("failed to expand: %v", errs)
+				return fmt.Errorf("failed to expand author: %v", errs)
+			}
+
+			if typ == string(util.TrailFeed) {
+				errs := e.App.ExpandRecord(item, []string{"category"}, nil)
+				if len(errs) > 0 {
+					return fmt.Errorf("failed to expand category: %v", errs)
+				}
 			}
 
 			r.MergeExpand(map[string]any{"item": item})

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

@@ -20,10 +20,13 @@
 
     let fullDescription = $state(false);
 
-    const timeSince = $derived(formatTimeSince(new Date(feedItem.created ?? "")));
+    const timeSince = $derived(
+        formatTimeSince(new Date(feedItem.created ?? "")),
+    );
 
     const photos = $derived((feedItem.expand.item as Trail).photos);
     const location = $derived((feedItem.expand.item as Trail).location);
+    const category = $derived((feedItem.expand.item as Trail).expand?.category?.name);
 
     const trails = $derived((feedItem.expand.item as List).trails);
 
@@ -69,14 +72,21 @@
             `@${author?.preferred_username}@${author?.domain}/${feedItem.item}`}
     >
         <div class="feed-card-body">
-            <h3 class="text-2xl font-semibold !mt-2">
+            <h3 class="text-2xl font-semibold mb-2">
                 {feedItem.expand.item.name}
             </h3>
-            {#if location}
+            <div class="flex flex-wrap gap-x-8 gap-y-1">
-                <h5 class="my-1">
+                {#if category}
-                    <i class="fa fa-location-dot mr-3"></i>{location}
+                    <p>
-                </h5>
+                        <i class="fa fa-shapes mr-3"> </i>{$_(category)}
-            {/if}
+                    </p>
+                {/if}
+                {#if location}
+                    <p>
+                        <i class="fa fa-location-dot mr-3"></i>{location}
+                    </p>
+                {/if}
+            </div>
             <div
                 class="flex flex-wrap mt-1 gap-x-4 gap-y-2 text-sm text-gray-500 mb-2"
             >

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

@@ -13,7 +13,6 @@
     import { _ } from "svelte-i18n";
     import type { MouseEventHandler } from "svelte/elements";
     import Chip from "../base/chip.svelte";
-    import { fade, slide } from "svelte/transition";
 
     interface Props {
         trail: Trail;
@@ -70,6 +69,7 @@
     class="trail-card relative rounded-2xl border border-input-border min-w-72 h-[386px] {fullWidth
         ? ''
         : 'lg:w-72'} cursor-pointer flex flex-col"
+    class:bg-secondary-hover={selected}
     {onmouseenter}
     {onmouseleave}
     role="listitem"
@@ -133,7 +133,10 @@
     {/if}
     {#if $currentUser && trail.like_count > 0}
         <div
-            class="flex absolute items-center justify-center {trailIsShared || trail.public ? 'top-14': 'top-4'} right-4 bg-background w-8 h-8 rounded-full"
+            class="flex absolute items-center justify-center {trailIsShared ||
+            trail.public
+                ? 'top-14'
+                : 'top-4'} right-4 bg-background w-8 h-8 rounded-full"
         >
             <span class="tooltip" data-title={$_("likes")}>
                 <i class="fa fa-heart"></i>
@@ -194,17 +197,23 @@
                     {/if}
                 </div>
             {/if}
-            <div class="flex gap-x-4">
+
-                {#if trail.location}
+            <div class="flex gap-x-4 gap-y-1 text-base flex-wrap">
-                    <h5>
+                {#if trail.category}
-                        <i class="fa fa-location-dot mr-3"></i>{trail.location}
+                    <p>
-                    </h5>
+                        <i class="fa fa-shapes mr-3"> </i>{$_(trail.category)}
+                    </p>
                 {/if}
-                <h5>
+                {#if trail.location}
+                    <p>
+                        <i class="fa fa-location-dot mr-3"></i>{trail.location}
+                    </p>
+                {/if}
+                <p class="whitespace-nowrap">
                     <i class="fa fa-gauge mr-3"></i>{$_(
                         trail.difficulty ?? "?",
                     )}
-                </h5>
+                </p>
             </div>
         </div>
         <div

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

@@ -61,6 +61,7 @@
 
 <li
     class="flex gap-8 p-4 rounded-xl border border-input-border cursor-pointer hover:bg-secondary-hover transition-colors items-center"
+    class:bg-secondary-hover={selected}
 >
     <div class="shrink-0">
         {#if isVideoURL(thumbnail)}
@@ -150,10 +151,20 @@
                 {/if}
             </div>
         {/if}
-        <div class="flex flex-wrap gap-x-8">
+        <div class="flex flex-wrap gap-x-8 gap-y-1">
-            {#if trail.location}
+            {#if trail.category}
-                <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>
+                <p>
+                    <i class="fa fa-shapes mr-3"> </i>{$_(trail.category)}
+                </p>
             {/if}
+            {#if trail.location}
+                <p>
+                    <i class="fa fa-location-dot mr-3"></i>{trail.location}
+                </p>
+            {/if}
+            <p class="whitespace-nowrap">
+                <i class="fa fa-gauge mr-3"></i>{$_(trail.difficulty ?? "?")}
+            </p>
         </div>
 
         <div class="flex flex-wrap mt-1 gap-x-4 gap-y-2 text-sm text-gray-500">