refactor: organize application components into dedicated subdirectories and update localization files.

Author: Michael-Obele

src/locales/de.po

@@ -20,7 +20,17 @@
 	import { Separator } from '$lib/components/ui/separator';
 	import CreateNoteDialog from './components/CreateNoteDialog.svelte';
 	import EditNoteDialog from './components/EditNoteDialog.svelte';
-	import { Plus, Trash2, RefreshCw, Pencil, Search, Calendar, StickyNote } from 'lucide-svelte';
+	import ViewNoteDialog from './components/ViewNoteDialog.svelte';
+	import {
+		Plus,
+		Trash2,
+		RefreshCw,
+		Pencil,
+		Search,
+		Calendar,
+		StickyNote,
+		Eye
+	} from 'lucide-svelte';
 	import { toast } from 'svelte-sonner';
 	import { fly, fade } from 'svelte/transition';
 
@@ -158,13 +168,19 @@
 	// Dialogs
 	let createDialogOpen = $state(false);
 	let editDialogOpen = $state(false);
+	let viewDialogOpen = $state(false);
 	let selectedNote = $state<Note | null>(null);
 
 	function openEditDialog(note: Note) {
 		selectedNote = note;
 		editDialogOpen = true;
 	}
 
+	function openViewDialog(note: Note) {
+		selectedNote = note;
+		viewDialogOpen = true;
+	}
+
 	function getRelativeTime(dateString: string): string {
 		const date = new Date(dateString);
 		const now = new Date();
@@ -273,6 +289,14 @@
 							<div class="flex items-start justify-between gap-2">
 								<CardTitle class="line-clamp-2 text-xl">{note.title}</CardTitle>
 								<div class="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+									<Button
+										variant="ghost"
+										size="icon"
+										class="size-8"
+										onclick={() => openViewDialog(note)}
+									>
+										<Eye class="size-4" />
+									</Button>
 									<Button
 										variant="ghost"
 										size="icon"
@@ -324,3 +348,9 @@
 	note={selectedNote}
 	{currentUser}
 />
+
+<ViewNoteDialog
+	open={viewDialogOpen}
+	onOpenChange={(open: boolean) => (viewDialogOpen = open)}
+	note={selectedNote}
+/>

src/locales/en.po

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import {
+		Dialog,
+		DialogContent,
+		DialogHeader,
+		DialogTitle,
+		DialogFooter,
+		DialogDescription
+	} from '$lib/components/ui/dialog';
+	import { Button } from '$lib/components/ui/button';
+	import { ScrollArea } from '$lib/components/ui/scroll-area';
+	import type { Note } from '../states.svelte';
+
+	let {
+		open = false,
+		onOpenChange: onOpenChangeProp = () => {},
+		note = null
+	} = $props<{
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+		note?: Note | null;
+	}>();
+
+	function onOpenChange(val: boolean) {
+		open = val;
+		onOpenChangeProp(val);
+	}
+</script>
+
+<Dialog {open} onOpenChange={(v) => onOpenChange(v)}>
+	<DialogContent class="sm:max-w-[600px]">
+		<DialogHeader>
+			<DialogTitle class="text-2xl">{note?.title || 'Note Details'}</DialogTitle>
+			{#if note?.updatedAt}
+				<DialogDescription>
+					Last updated: {new Date(note.updatedAt).toLocaleString()}
+				</DialogDescription>
+			{/if}
+		</DialogHeader>
+
+		{#if note}
+			<div class="py-4">
+				<ScrollArea class="h-[60vh] rounded-md border p-4">
+					<div class="text-base leading-relaxed whitespace-pre-wrap">
+						{note.content}
+					</div>
+				</ScrollArea>
+			</div>
+		{/if}
+
+		<DialogFooter>
+			<Button variant="outline" onclick={() => onOpenChange(false)}>Close</Button>
+		</DialogFooter>
+	</DialogContent>
+</Dialog>