diff --git a/web/src/lib/components/list/list_search_modal.svelte b/web/src/lib/components/list/list_search_modal.svelte index d8809042..2c421171 100644 --- a/web/src/lib/components/list/list_search_modal.svelte +++ b/web/src/lib/components/list/list_search_modal.svelte @@ -5,6 +5,7 @@ import type { Trail } from "$lib/models/trail"; import { trail } from "$lib/stores/trail_store"; import { getFileURL } from "$lib/util/file_util"; + import { formatHTMLAsText } from "$lib/util/format_util"; import { _ } from "svelte-i18n"; import Modal from "../base/modal.svelte"; import Search, { type SearchItem } from "../base/search.svelte"; @@ -25,6 +26,7 @@ let searchItems: SearchItem[] = $state([]); let query = $state(""); let listsVersion = $state(0); + const LIST_DESCRIPTION_PREVIEW_LENGTH = 100; export function openModal() { searchItems = []; @@ -145,7 +147,7 @@ }) .map((list) => ({ text: list.name, - description: list.description, + description: getListDescriptionPreview(list.description), value: list, icon: list.avatar ? getFileURL(list, list.avatar) @@ -155,6 +157,17 @@ })); } + function getListDescriptionPreview(description?: string) { + const text = formatHTMLAsText(description); + if (!text.length) { + return undefined; + } + + return text.length > LIST_DESCRIPTION_PREVIEW_LENGTH + ? `${text.substring(0, LIST_DESCRIPTION_PREVIEW_LENGTH)}...` + : text; + } + const children_render = $derived(children); diff --git a/web/src/lib/components/trail/trail_dropdown.svelte b/web/src/lib/components/trail/trail_dropdown.svelte index cb878423..e2bba09a 100644 --- a/web/src/lib/components/trail/trail_dropdown.svelte +++ b/web/src/lib/components/trail/trail_dropdown.svelte @@ -161,7 +161,7 @@ : [ { text: $_("add-to-list"), - value: "print", + value: "list", icon: "bookmark", }, ]),