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 1/3] 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">

From e40ea028d0d1abf121c91ebd26b34c248204f166 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Sat, 26 Apr 2025 22:53:45 +0200
Subject: [PATCH 2/3] Collection view selection on mobile devices

The tab-based selection of views in a collection doesn't really work on
mobile devices since it needs too much horizontal space. This leads to
text overflowing buttons as well as half of the tab bar disappearing
behind the right edge of the phone screen.

This patch modifies the navigation by keeping the current tabs in
desktop mode, but switching to a very compact dropdown on mobile
devices.

The functionality of both elements is identical.
---
 .../src/routes/collections/[id]/+page.svelte     | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/collections/[id]/+page.svelte b/frontend/src/routes/collections/[id]/+page.svelte
index ab12175..b57af12 100644
--- a/frontend/src/routes/collections/[id]/+page.svelte
+++ b/frontend/src/routes/collections/[id]/+page.svelte
@@ -308,6 +308,10 @@
 		}
 	}
 
+	function changeHash(event) {
+		window.location.hash = '#' + event.target.value;
+	}
+
 	onMount(() => {
 		if (data.props.adventure) {
 			collection = data.props.adventure;
@@ -772,7 +776,17 @@
 	{/if}
 
 	{#if collection.id}
-		<div class="flex justify-center mx-auto">
+		<select class="select select-bordered border-primary md:hidden w-full"
+			value={currentView}
+			on:change={changeHash}
+		>
+			<option value="itinerary">📅 Itinerary</option>
+			<option value="all">🗒️ All Linked Items</option>
+			<option value="calendar">🗓️ Calendar</option>
+			<option value="map">🗺️ Map</option>
+			<option value="recommendations">👍️ Recommendations</option>
+		</select>
+		<div class="md:flex justify-center mx-auto hidden">
 			<!-- svelte-ignore a11y-missing-attribute -->
 			<div role="tablist" class="tabs tabs-boxed tabs-lg max-w-full">
 				<!-- svelte-ignore a11y-missing-attribute -->

From 5f7bf5275860448151e1828560dccd1710f989b6 Mon Sep 17 00:00:00 2001
From: Lars Kiesow <lkiesow@uos.de>
Date: Sun, 27 Apr 2025 16:08:03 +0200
Subject: [PATCH 3/3] Adjust main menu font size

This patch slightly adjusts the font size of list items in the main
menu. I probably wouldn't mind making it even a bit bigger, but that's
probably worth a separate discussion.

Reasons for this adjustment:

1. Don't use different font sizes in the same lement.
   While the buttons rendered at 14px, the search text rendered at 16px.
   They should have the same font-size.

2. The buttons were below the base text size controlled by Tailwind CSS.
   This means, it also puts the font size below the recommended
   font-size for mobile devices (Google/Apple guidelines). This patch
   puts them at the base level.
---
 frontend/src/lib/components/Navbar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/Navbar.svelte b/frontend/src/lib/components/Navbar.svelte
index 0e5e4f2..1d776df 100644
--- a/frontend/src/lib/components/Navbar.svelte
+++ b/frontend/src/lib/components/Navbar.svelte
@@ -116,7 +116,7 @@
 			<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
 			<ul
 				tabindex="0"
-				class="menu dropdown-content mt-3 z-[1] p-2 shadow bg-neutral text-neutral-content rounded-box gap-2 w-96"
+				class="menu dropdown-content mt-3 z-[1] p-2 shadow bg-neutral text-base text-neutral-content rounded-box gap-2 w-96"
 			>
 				{#if data.user}
 					<li>