adds new empty states

web/src/routes/lists/+page.svelte

@@ -9,6 +9,7 @@
     import Select from "$lib/components/base/select.svelte";
     import SkeletonCard from "$lib/components/base/skeleton_card.svelte";
     import ConfirmModal from "$lib/components/confirm_modal.svelte";
+    import EmptyStateSearch from "$lib/components/empty_states/empty_state_search.svelte";
     import ListCard from "$lib/components/list/list_card.svelte";
     import ListPanel from "$lib/components/list/list_panel.svelte";
     import ListShareModal from "$lib/components/list/list_share_modal.svelte";
@@ -104,8 +105,8 @@
         ) {
             for (const trail of item.expand.trails) {
                 const gpxData: string = await fetchGPX(trail);
-                if(!trail.expand) {
-                    (trail as any).expand = {}
+                if (!trail.expand) {
+                    (trail as any).expand = {};
                 }
                 trail.expand!.gpx_data = gpxData;
             }
@@ -321,6 +322,8 @@
                         {#each { length: 3 } as _, index}
                             <SkeletonCard></SkeletonCard>
                         {/each}
+                    {:else if data.lists.items.length == 0}
+                        <EmptyStateSearch width={356}></EmptyStateSearch>
                     {:else}
                         {#each data.lists.items as item, i}
                             <div

web/src/routes/lists/edit/[id]/+page.svelte

@@ -3,6 +3,8 @@
     import { _ } from "svelte-i18n";
 
     import { page } from "$app/stores";
+    import emptyStateTrailDark from "$lib/assets/svgs/empty_states/empty_state_trail_dark.svg";
+    import emptyStateTrailLight from "$lib/assets/svgs/empty_states/empty_state_trail_light.svg";
     import Button from "$lib/components/base/button.svelte";
     import Search, {
         type SearchItem,
@@ -18,6 +20,7 @@
     import type { Trail } from "$lib/models/trail.js";
     import { TrailShare } from "$lib/models/trail_share.js";
     import { lists_create, lists_update } from "$lib/stores/list_store.js";
+    import { theme } from "$lib/stores/theme_store.js";
     import { show_toast } from "$lib/stores/toast_store.js";
     import {
         trail_share_create,
@@ -338,7 +341,9 @@
                                       trail,
                                       trail.photos[trail.thumbnail ?? 0],
                                   )
-                                : "/imgs/default_thumbnail.webp"}
+                                : $theme === "light"
+                                  ? emptyStateTrailLight
+                                  : emptyStateTrailDark}
                             alt=""
                         />
                     </div>