From 07c69271f44f7f45b8c0ffdf95a5f73e348f59b9 Mon Sep 17 00:00:00 2001
From: briannelson95 <71141646+briannelson95@users.noreply.github.com>
Date: Wed, 30 Apr 2025 09:10:59 -0400
Subject: [PATCH] Updated trail card to show first 2 tags and made tags smaller

---
 web/src/lib/components/base/chip.svelte       |  2 +-
 .../lib/components/trail/trail_card.svelte    | 26 +++++++++++++++++--
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/web/src/lib/components/base/chip.svelte b/web/src/lib/components/base/chip.svelte
index 2fdd3f30..70a98454 100644
--- a/web/src/lib/components/base/chip.svelte
+++ b/web/src/lib/components/base/chip.svelte
@@ -16,7 +16,7 @@
         ? 'bg-primary text-white'
         : 'border border-input-border bg-menu-item-background-hover'} px-2 py-1 rounded-full flex items-center gap-1"
 >
-    <span class="text-sm">{text}</span>
+    <span class="text-xs">{text}</span>
     {#if closable}
         <button
             type="button"
diff --git a/web/src/lib/components/trail/trail_card.svelte b/web/src/lib/components/trail/trail_card.svelte
index a8efac03..64b50bd5 100644
--- a/web/src/lib/components/trail/trail_card.svelte
+++ b/web/src/lib/components/trail/trail_card.svelte
@@ -39,6 +39,15 @@
     let trailIsShared = $derived(
         (trail.expand?.trail_share_via_trail?.length ?? 0) > 0,
     );
+
+    // expand and collapse the tags
+    let tags = trail.expand?.tags ?? [];
+    // svelte-ignore non_reactive_update
+    let expandedTags = false;
+
+    function toggleExpandTags() {
+        expandedTags = !expandedTags;
+    }
 </script>
 
 <div
@@ -122,10 +131,23 @@
                 </p>
             {/if}
             {#if trail.expand?.tags?.length}
-                <div class="flex flex-wrap gap-1 mb-3">
-                    {#each trail.expand?.tags ?? [] as t}
+                <div class="flex flex-wrap gap-1 mb-3 items-center">
+                    {#each (expandedTags ? tags : tags.slice(0, 2)) as t}
                         <Chip text={t.name} closable={false} primary={false}></Chip>
                     {/each}
+
+                    {#if tags.length > 2}
+                        <button
+                            onclick={toggleExpandTags}
+                            class="text-sm text-blue-600 hover:underline focus:outline-none"
+                        >
+                            {#if expandedTags}
+                                Show less
+                            {:else}
+                                +{tags.length - 2} more
+                            {/if}
+                        </button>
+                    {/if}
                 </div>
             {:else if trail.tags?.length}
                 <div class="flex flex-wrap gap-1 mb-3">