From 44a260b5b64add3adce2ef6715daf230864ea7d0 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Tue, 15 Apr 2025 01:05:02 +0200
Subject: [PATCH] Show Note preview on Card

Often, you end up having short notes or even just a simple link and it
is somewhat tedious to go into the details to retrieve the additional
information.

This patch displays a preview of the note content and a maximum of three
links on the notes card directly. This makes accessing information much
faster.

This fixes #562.
---
 frontend/src/lib/components/NoteCard.svelte | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/frontend/src/lib/components/NoteCard.svelte b/frontend/src/lib/components/NoteCard.svelte
index 9b6ba62..c973084 100644
--- a/frontend/src/lib/components/NoteCard.svelte
+++ b/frontend/src/lib/components/NoteCard.svelte
@@ -71,11 +71,28 @@
 		{#if unlinked}
 			<div class="badge badge-error">{$t('adventures.out_of_range')}</div>
 		{/if}
+		{#if note.content && note.content.length > 0}
+			<p class="line-clamp-6">
+				{note.content}
+			</p>
+		{/if}
 		{#if note.links && note.links.length > 0}
 			<p>
 				{note.links.length}
 				{note.links.length > 1 ? $t('adventures.links') : $t('adventures.link')}
 			</p>
+			<ul class="list-disc pl-6">
+				{#each note.links.slice(0, 3) as link}
+					<li>
+						<a class="link link-primary" href={link}>
+							{link.split('//')[1].split('/', 1)[0]}
+						</a>
+					</li>
+				{/each}
+				{#if note.links.length > 3}
+					<li>…</li>
+				{/if}
+			</ul>
 		{/if}
 		{#if note.date && note.date !== ''}
 			<div class="inline-flex items-center">