adds lists search and filter

web/src/lib/components/base/skeleton_card.svelte

@@ -1,5 +1,10 @@
+<script lang="ts">
+    export let fullWidth: boolean = false;
+</script>
+
+
 <div
-    class="skeleton-card relative rounded-2xl sm:w-72 animate-pulse flex flex-col w-80 p-4 bg-menu-background border border-input-border"
+    class="skeleton-card relative rounded-2xl animate-pulse flex flex-col {fullWidth ? "w-full" : "sm:w-72 w-80"} p-4 bg-menu-background border border-input-border"
     aria-hidden="true"
 >
     <!-- Image placeholder -->

web/src/lib/components/confirm_modal.svelte

@@ -25,7 +25,7 @@
         <button class="btn-secondary" on:click={closeModal}
             >{$_("cancel")}</button
         >
-        <button class={action === "delete" ? "btn-delete" : "btn-primary"} type="button" on:click={confirm} name="delete"
+        <button class={action === "delete" ? "btn-danger" : "btn-primary"} type="button" on:click={confirm} name="delete"
             >{$_(action)}</button
         >
     </div></Modal

web/src/lib/components/list/list_card.svelte

@@ -51,18 +51,15 @@
             <i class="fa fa-table-list text-5xl"></i>
         </div>
     {/if}
-    <div class="self-start min-w-0 w-full transition-transform">
+    <div class="self-start min-w-0 basis-full transition-transform">
         <div class="flex items-center gap-3">
             <h5
-                class="text-xl font-semibold overflow-hidden overflow-ellipsis basis-full"
+                class="text-xl font-semibold overflow-hidden overflow-ellipsis"
             >
                 {list.name}
             </h5>
             {#if list.public}
-                <span
-                    class="tooltip"
-                    data-title={$_("public")}
-                >
+                <span class="tooltip" data-title={$_("public")}>
                     <i class="fa fa-globe"></i>
                 </span>
             {/if}
@@ -70,6 +67,21 @@
                 <ShareInfo type="list" subject={list}></ShareInfo>
             {/if}
         </div>
+        {#if list.expand?.author}
+            <p class="text-xs text-gray-500 my-2">
+                {$_("by")}
+                <img
+                    class="rounded-full w-5 aspect-square mx-1 inline"
+                    src={getFileURL(
+                        list.expand.author,
+                        list.expand.author.avatar,
+                    ) ||
+                        `https://api.dicebear.com/7.x/initials/svg?seed=${list.expand.author.username}&backgroundType=gradientLinear`}
+                    alt="avatar"
+                />
+                {list.expand?.author.username}
+            </p>
+        {/if}
         <div
             class="grid grid-cols-2 mt-1 mb-2 gap-x-4 gap-y-1 text-sm text-gray-500 whitespace-nowrap flex-wrap"
         >

web/src/lib/components/list/list_panel.svelte

@@ -42,8 +42,12 @@
         list.author == $currentUser?.id ||
         list.expand?.list_share_via_list?.some((s) => s.permission == "edit");
 
+    $: allowShare =
+        list.author == $currentUser?.id &&
+        !list.expand?.trails?.some((t) => t.author !== $currentUser?.id);
+
     $: dropdownItems = [
-        ...(list.author == $currentUser?.id
+        ...(allowShare
             ? [{ text: $_("share"), value: "share", icon: "share" }]
             : []),
         ...(allowEdit
@@ -122,7 +126,23 @@
 
 <div class="p-4 md:p-6">
     <h4 class="text-2xl font-semibold mb-4">{list.name}</h4>
-
+    {#if list.expand?.author}
+        <p class="my-3 text-gray-500 text-sm">
+            {$_("by")}
+            <img
+                class="rounded-full w-8 aspect-square mx-1 inline"
+                src={getFileURL(
+                    list.expand.author,
+                    list.expand.author.avatar,
+                ) ||
+                    `https://api.dicebear.com/7.x/initials/svg?seed=${list.expand.author.username}&backgroundType=gradientLinear`}
+                alt="avatar"
+            />
+            <a class="underline" href="/profile/{list.expand.author.id}"
+                >{list.expand.author.username}</a
+            >
+        </p>
+    {/if}
     <hr />
     <div
         class="grid grid-cols-2 my-4 gap-4 font-semibold whitespace-nowrap flex-wrap justify-around"

web/src/lib/components/list/list_select_modal.svelte

@@ -2,11 +2,12 @@
     import { createEventDispatcher } from "svelte";
 
     import type { List } from "$lib/models/list";
-    import { lists } from "$lib/stores/list_store";
     import { trail } from "$lib/stores/trail_store";
+    import { getFileURL } from "$lib/util/file_util";
     import { _ } from "svelte-i18n";
     import Modal from "../base/modal.svelte";
-    import { getFileURL } from "$lib/util/file_util";
+    
+    export let lists: List[];
 
     export let openModal: (() => void) | undefined = undefined;
     export let closeModal: (() => void) | undefined = undefined;
@@ -34,7 +35,7 @@
     <slot {openModal} />
 
     <ul slot="content">
-        {#each $lists as list}
+        {#each lists as list}
             <li
                 class="flex gap-4 items-center p-4 hover:bg-menu-item-background-hover rounded-xl transition-colors cursor-pointer"
                 on:click={() => handleSelect(list)}

web/src/lib/components/list/list_share_modal.svelte

@@ -3,7 +3,6 @@
     import type { List } from "$lib/models/list";
     import { ListShare } from "$lib/models/list_share";
     import { TrailShare } from "$lib/models/trail_share";
-    import type { User } from "$lib/models/user";
     import {
         list_share_create,
         list_share_delete,
@@ -11,19 +10,15 @@
         list_share_update,
         shares,
     } from "$lib/stores/list_share_store";
-    import { lists } from "$lib/stores/list_store";
-    import { show_toast } from "$lib/stores/toast_store";
     import {
         trail_share_create,
         trail_share_delete,
         trail_share_index,
     } from "$lib/stores/trail_share_store";
-    import { users_search } from "$lib/stores/user_store";
     import { getFileURL } from "$lib/util/file_util";
     import { createEventDispatcher } from "svelte";
     import { _ } from "svelte-i18n";
     import Button from "../base/button.svelte";
-    import Search, { type SearchItem } from "../base/search.svelte";
     import type { SelectItem } from "../base/select.svelte";
     import Select from "../base/select.svelte";
     import UserSearch from "../user_search.svelte";
@@ -116,8 +111,8 @@
             trails: list.expand?.trails ?? [],
             list_share_via_list: fetchedShares,
         };
-        lists.set($lists);
-        sharesLoading = false;
+        sharesLoading = false;        
+        dispatch("update", list)
     }
 </script>
 

web/src/lib/components/share_info.svelte

@@ -52,7 +52,7 @@
     ></i>
     {#if showInfo}
         <ul
-            class="menu absolute z-10 top-8 bg-menu-background border border-input-border rounded-xl shadow-md overflow-hidden p-3 space-y-3 text-content"
+            class="menu absolute z-10 top-8 bg-menu-background border border-input-border rounded-xl shadow-md overflow-hidden p-3 space-y-3 text-content -translate-x-3/4"
             in:fly={{y: -10, duration: 150}} out:fly={{y: -10, duration: 150}}
             >
             {#if loading}

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

@@ -30,6 +30,8 @@
     let openExportModal: () => void;
     let openShareModal: () => void;
 
+    let lists: List[] = [];
+
     const allowEdit =
         trail.author == $currentUser?.id ||
         trail.expand.trail_share_via_trail?.some((s) => s.permission == "edit");
@@ -76,6 +78,13 @@
                     : `/trail/view/${trail.id!}`,
             );
         } else if (item.value == "list") {
+            lists = (
+                await lists_index(
+                    { q: "", author: $currentUser?.id ?? "" },
+                    1,
+                    -1,
+                )
+            ).items;
             openListSelectModal();
         } else if (item.value == "direction") {
             window
@@ -175,7 +184,6 @@
                     text: `${$_("added-trail-to")} "${list.name}"`,
                 });
             }
-            await lists_index();
         } catch (e) {
             console.error(e);
 
@@ -206,6 +214,7 @@
     on:confirm={deleteTrail}
 ></ConfirmModal>
 <ListSelectModal
+    {lists}
     bind:openModal={openListSelectModal}
     on:change={(e) => handleListSelection(e.detail)}
 ></ListSelectModal>