fixes ux and adds i18n

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

@@ -13,6 +13,7 @@
     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;
@@ -33,7 +34,7 @@
             ? getFileURL(
                   trail,
                   trail.photos.at(trail.thumbnail ?? 0) ?? trail.photos[0],
-                  "600x0"
+                  "600x0",
               )
             : $theme === "light"
               ? emptyStateTrailLight
@@ -45,11 +46,11 @@
     );
 
     // expand and collapse the tags
-    let tags = trail.expand?.tags ?? [];
+    let expandedTags = $state(false);
-    // svelte-ignore non_reactive_update
-    let expandedTags = false;
 
-    function toggleExpandTags() {
+    function toggleExpandTags(e: MouseEvent) {
+        e.preventDefault();
+        e.stopPropagation();
         expandedTags = !expandedTags;
     }
 </script>
@@ -142,36 +143,32 @@
                             `https://api.dicebear.com/7.x/initials/svg?seed=${trail.expand.author.preferred_username}&backgroundType=gradientLinear`}
                         alt="avatar"
                     />
-                    {trail.expand.author.preferred_username}{trail.expand.author.isLocal
+                    {trail.expand.author.preferred_username}{trail.expand.author
+                        .isLocal
                         ? ""
                         : "@" + trail.expand.author.domain}
                 </p>
             {/if}
-            {#if trail.expand?.tags?.length}
+            {#if trail.tags.length}
                 <div class="flex flex-wrap gap-1 mb-3 items-center">
-                    {#each (expandedTags ? tags : tags.slice(0, 2)) as t}
+                    {#each expandedTags ? trail.tags : trail.tags.slice(0, 2) as t}
-                        <Chip text={t.name} closable={false} primary={false}></Chip>
+                        <Chip text={t} closable={false} primary={false}></Chip>
                     {/each}
 
-                    {#if tags.length > 2}
+                    {#if trail.tags.length > 2}
                         <button
                             onclick={toggleExpandTags}
-                            class="text-sm text-blue-600 hover:underline focus:outline-none"
+                            class="text-sm text-gray-500 hover:underline focus:outline-none"
+                            type="button"
                         >
                             {#if expandedTags}
-                                Show less
+                                {$_('show-less')}
                             {:else}
-                                +{tags.length - 2} more
+                                +{trail.tags.length - 2} {$_('more')}
                             {/if}
                         </button>
                     {/if}
                 </div>
-            {:else if trail.tags?.length}
-                <div class="flex flex-wrap gap-1 mb-3">
-                    {#each trail.tags ?? [] as t}
-                        <Chip text={t} closable={false} primary={false}></Chip>
-                    {/each}
-                </div>
             {/if}
             <div class="flex gap-x-4">
                 {#if trail.location}

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

@@ -14,6 +14,7 @@
     import { _ } from "svelte-i18n";
     import ShareInfo from "../share_info.svelte";
     import { handleFromRecordWithIRI } from "$lib/util/activitypub_util";
+    import Chip from "../base/chip.svelte";
 
     interface Props {
         trail: Trail;
@@ -33,6 +34,14 @@
               ? emptyStateTrailLight
               : emptyStateTrailDark,
     );
+
+    let expandedTags = $state(false);
+
+    function toggleExpandTags(e: MouseEvent) {
+        e.preventDefault();
+        e.stopPropagation();
+        expandedTags = !expandedTags;
+    }
 </script>
 
 <li
@@ -105,6 +114,27 @@
                 {handleFromRecordWithIRI(trail)}
             </p>
         {/if}
+        {#if trail.tags.length}
+            <div class="flex flex-wrap gap-1 mb-3 items-center">
+                {#each expandedTags ? trail.tags : trail.tags.slice(0, 2) as t}
+                    <Chip text={t} closable={false} primary={false}></Chip>
+                {/each}
+
+                {#if trail.tags.length > 2}
+                    <button
+                        onclick={toggleExpandTags}
+                        class="text-sm text-gray-500 hover:underline focus:outline-none"
+                        type="button"
+                    >
+                        {#if expandedTags}
+                            Show less
+                        {:else}
+                            +{trail.tags.length - 2} more
+                        {/if}
+                    </button>
+                {/if}
+            </div>
+        {/if}
         <div class="flex flex-wrap gap-x-8">
             {#if trail.location}
                 <h5><i class="fa fa-location-dot mr-3"></i>{trail.location}</h5>

web/src/lib/i18n/locales/de.json

@@ -199,6 +199,7 @@
   "max-hiking-difficulty": "Max. Schwierigkeit der Wanderung",
   "metric": "Metrisch",
   "moderate": "Mittel",
+  "more": "weitere",
   "mountain": "Berg",
   "must-be-at-least-n-characters-long": "Muss mindestens {n} Zeichen lang sein",
   "must-be-at-most-n-characters-long": "Darf höchstens {n} Zeichen lang sein",
@@ -316,6 +317,7 @@
   "shared-with": "Geteilt mit",
   "shortest": "",
   "show-in-overview": "In der Übersicht anzeigen",
+  "show-less": "Weniger anzeigen",
   "show-on-map": "Auf der Karte anzeigen",
   "slogan": "Speichere deine Abenteuer!",
   "slope": "Steigung",

web/src/lib/i18n/locales/en.json

@@ -199,6 +199,7 @@
   "max-hiking-difficulty": "Max. Hiking Difficulty",
   "metric": "Metric",
   "moderate": "Moderate",
+  "more": "",
   "mountain": "Mountain",
   "must-be-at-least-n-characters-long": "Must be at least {n} characters long",
   "must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
   "shared-with": "Shared with",
   "shortest": "",
   "show-in-overview": "Show in overview",
+  "show-less": "",
   "show-on-map": "Show on map",
   "slogan": "Save your adventures!",
   "slope": "Slope",

web/src/lib/i18n/locales/es.json

@@ -199,6 +199,7 @@
   "max-hiking-difficulty": "Max. Hiking Difficulty",
   "metric": "Métrica",
   "moderate": "Medio",
+  "more": "",
   "mountain": "Montaña",
   "must-be-at-least-n-characters-long": "Tiene que tener por lo menos {n} caracteres",
   "must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
   "shared-with": "Compartido con",
   "shortest": "",
   "show-in-overview": "Mostrar en la panorámica",
+  "show-less": "",
   "show-on-map": "Mostrar en mapa",
   "slogan": "¡Guarda tus aventuras!",
   "slope": "Pendiente",

web/src/lib/i18n/locales/fr.json

@@ -199,6 +199,7 @@
   "max-hiking-difficulty": "Max. Hiking Difficulty",
   "metric": "Métrique",
   "moderate": "Moyenne",
+  "more": "",
   "mountain": "Mountain",
   "must-be-at-least-n-characters-long": "Doit être composé d'au moins {n} caractères",
   "must-be-at-most-n-characters-long": "Doit être au maximum de {n} caractères",
@@ -316,6 +317,7 @@
   "shared-with": "Partagé avec",
   "shortest": "",
   "show-in-overview": "Voir dans l'aperçu",
+  "show-less": "",
   "show-on-map": "Voir sur la carte",
   "slogan": "Sauvegarder vos aventures !",
   "slope": "Pente",

web/src/lib/i18n/locales/hu.json

@@ -199,6 +199,7 @@
   "max-hiking-difficulty": "Max. Hiking Difficulty",
   "metric": "Metrikus",
   "moderate": "Mérsékelt",
+  "more": "",
   "mountain": "Mountain",
   "must-be-at-least-n-characters-long": "Legalább {n} karakter hosszúnak kell lennie",
   "must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
   "shared-with": "Shared with",
   "shortest": "",
   "show-in-overview": "Áttekintés",
+  "show-less": "",
   "show-on-map": "Mutatás térképen",
   "slogan": "Mentse el a kalandjait!",
   "slope": "Slope",

web/src/lib/i18n/locales/it.json

@@ -199,6 +199,7 @@
   "max-hiking-difficulty": "Max. Hiking Difficulty",
   "metric": "Metrico",
   "moderate": "Moderato",
+  "more": "",
   "mountain": "Mountain",
   "must-be-at-least-n-characters-long": "Deve essere lungo almeno {n} caratteri",
   "must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
   "shared-with": "Condiviso con",
   "shortest": "",
   "show-in-overview": "Mostra nella panoramica",
+  "show-less": "",
   "show-on-map": "Mostra sulla mappa",
   "slogan": "Salva le tue avventure!",
   "slope": "Pendenza",

web/src/lib/i18n/locales/nl.json

@@ -199,6 +199,7 @@
   "max-hiking-difficulty": "Max. Hiking Moeilijkheid",
   "metric": "Metrisch",
   "moderate": "Gemiddeld",
+  "more": "",
   "mountain": "Berg",
   "must-be-at-least-n-characters-long": "Minimaal {n} tekens",
   "must-be-at-most-n-characters-long": "Mag maximaal {n} tekens lang zijn.",
@@ -316,6 +317,7 @@
   "shared-with": "Gedeeld met",
   "shortest": "",
   "show-in-overview": "Tonen op overzicht",
+  "show-less": "",
   "show-on-map": "Tonen op kaart",
   "slogan": "Bewaar je avonturen!",
   "slope": "helling",

web/src/lib/i18n/locales/pl.json

@@ -199,6 +199,7 @@
   "max-hiking-difficulty": "Max. Hiking Difficulty",
   "metric": "Metryczne",
   "moderate": "Średni",
+  "more": "",
   "mountain": "Mountain",
   "must-be-at-least-n-characters-long": "Długość musi wynosić przynajmniej {n} znaków",
   "must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
   "shared-with": "Udostępniony dla",
   "shortest": "",
   "show-in-overview": "Pokaż w przeglądzie",
+  "show-less": "",
   "show-on-map": "Pokaż na mapie",
   "slogan": "Zapisz swoją wyprawę!",
   "slope": "Nachylenie",

web/src/lib/i18n/locales/pt.json

@@ -199,6 +199,7 @@
   "max-hiking-difficulty": "Max. Hiking Difficulty",
   "metric": "Métrica",
   "moderate": "Moderado",
+  "more": "",
   "mountain": "Mountain",
   "must-be-at-least-n-characters-long": "Deve ter pelo menos {n} caracteres",
   "must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
   "shared-with": "Partilhado com",
   "shortest": "",
   "show-in-overview": "Mostrar na vista geral",
+  "show-less": "",
   "show-on-map": "Mostrar no mapa",
   "slogan": "Guarde as suas aventuras!",
   "slope": "Inclinação",

web/src/lib/i18n/locales/zh.json

@@ -199,6 +199,7 @@
   "max-hiking-difficulty": "Max. Hiking Difficulty",
   "metric": "公制",
   "moderate": "中等",
+  "more": "",
   "mountain": "Mountain",
   "must-be-at-least-n-characters-long": "长度至少 {n} 字符",
   "must-be-at-most-n-characters-long": "Must be at most {n} characters long",
@@ -316,6 +317,7 @@
   "shared-with": "分享给",
   "shortest": "",
   "show-in-overview": "详情中展示",
+  "show-less": "",
   "show-on-map": "地图中展示",
   "slogan": "保存你的冒险！",
   "slope": "坡度",