adds new default state images

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

@@ -8,6 +8,10 @@
     } from "$lib/util/format_util";
 
     export let trail: Trail;
+
+    $: thumbnail = trail.photos.length
+        ? getFileURL(trail, trail.photos[trail.thumbnail])
+        : "/imgs/default_thumbnail.webp";
 </script>
 
 <div
@@ -17,7 +21,7 @@
     role="listitem"
 >
     <div class="w-full min-h-40 max-h-48 overflow-hidden rounded-t-2xl">
-        <img src={getFileURL(trail, trail.photos[trail.thumbnail])} alt="" />
+        <img src={thumbnail} alt="" />
     </div>
     <div class="p-4">
         <div>

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

@@ -97,7 +97,7 @@
     <div id="trails" class="flex items-start flex-wrap gap-8 py-8 max-w-full">
         {#if trails.length == 0}
             <div class="flex flex-col basis-full items-center">
-                <EmptyStateSearch></EmptyStateSearch>
+                <EmptyStateSearch width={356}></EmptyStateSearch>
             </div>
         {/if}
         {#each trails as trail}

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

@@ -1,20 +1,24 @@
 <script lang="ts">
     import type { Trail } from "$lib/models/trail";
     import { getFileURL } from "$lib/util/file_util";
-    import { formatDistance, formatElevation, formatTimeHHMM } from "$lib/util/format_util";
+    import {
+        formatDistance,
+        formatElevation,
+        formatTimeHHMM,
+    } from "$lib/util/format_util";
 
     export let trail: Trail;
+
+    $: thumbnail = trail.photos.length
+        ? getFileURL(trail, trail.photos[trail.thumbnail])
+        : "/imgs/default_thumbnail.webp";
 </script>
 
 <li
     class="flex gap-8 p-4 rounded-xl border border-input-border cursor-pointer hover:bg-secondary-hover transition-colors"
 >
     <div class="shrink-0">
-        <img
-            class="h-28 w-28 object-cover rounded-xl"
-            src={getFileURL(trail, trail.photos[trail.thumbnail])}
-            alt=""
-        />
+        <img class="h-28 w-28 object-cover rounded-xl" src={thumbnail} alt="" />
     </div>
     <div class="min-w-0 basis-full">
         <h4 class="font-semibold text-lg">{trail.name}</h4>