adds new default state images

web/src/lib/components/empty_states/empty_state_search.svelte

@@ -7,7 +7,7 @@
     <img
         style="width: {width}px"
         class="rounded-full aspect-square"
-        src="/imgs/empty_state.webp"
+        src="/imgs/empty_state.png"
         alt="Empty State showing a wanderer going into the distance"
     />
 

web/src/lib/components/nav_bar.svelte

@@ -78,7 +78,7 @@
     function handleDropdownClick(item: { text: string; value: any }) {
         if (item.value == "logout") {
             logout();
-            goto("/");
+            window.location.href = "/";
         } else if (item.value == "profile") {
             goto("/profile");
         }
@@ -117,7 +117,7 @@
     <hr class="my-6 border-input-border" />
     <div class="flex flex-col basis-full">
         <a class="btn-primary btn-large text-center mx-4" href="/trail/edit/new"
-            ><i class="fa fa-plus mr-2"></i>{$_('new-trail')}</a
+            ><i class="fa fa-plus mr-2"></i>{$_("new-trail")}</a
         >
         {#if $currentUser}
             <div class="basis-full"></div>
@@ -180,7 +180,7 @@
                 on:click={() => toggleTheme()}
             ></button>
             <a class="btn-primary btn-large" href="/trail/edit/new"
-                ><i class="fa fa-plus mr-2"></i>{$_('new-trail')}</a
+                ><i class="fa fa-plus mr-2"></i>{$_("new-trail")}</a
             >
             <Dropdown
                 items={dropdownItems}
@@ -208,7 +208,7 @@
                     : 'moon'}"
                 on:click={() => toggleTheme()}
             ></button>
-            <a class="btn-primary btn-large" href="/login">{$_('login')}</a>
+            <a class="btn-primary btn-large" href="/login">{$_("login")}</a>
         </div>
     {/if}
     <button

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>