checklists ui beta

frontend/src/lib/components/NoteCard.svelte

@@ -7,6 +7,7 @@
 
 	import Launch from '~icons/mdi/launch';
 	import TrashCan from '~icons/mdi/trash-can';
+	import Calendar from '~icons/mdi/calendar';
 
 	export let note: Note;
 	export let user: User | null = null;
@@ -32,10 +33,21 @@
 	class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
 >
 	<div class="card-body">
-		<h2 class="card-title overflow-ellipsis">{note.name}</h2>
+		<div class="flex justify-between">
+			<h2 class="text-2xl font-semibold -mt-2 break-words text-wrap">
+				{note.name}
+			</h2>
+		</div>
+		<div class="badge badge-neutral">Note</div>
 		{#if note.links && note.links.length > 0}
 			<p>{note.links.length} links</p>
 		{/if}
+		{#if note.date && note.date !== ''}
+			<div class="inline-flex items-center">
+				<Calendar class="w-5 h-5 mr-1" />
+				<p>{new Date(note.date).toLocaleDateString('en-US', { timeZone: 'UTC' })}</p>
+			</div>
+		{/if}
 		<div class="card-actions justify-end">
 			<!-- <button class="btn btn-neutral mb-2" on:click={() => goto(`/notes/${note.id}`)}
 				><Launch class="w-6 h-6" />Open Details</button