refactor note service interaction

src/routes/(app)/notes/+page.svelte

@@ -1,22 +1,25 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
-	import { getNoteService } from '$lib/context/notes.svelte';
+	import { pushState } from '$app/navigation';
+	import { page } from '$app/state';
+	import { setNoteService } from '$lib/context/notes.svelte';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import * as Tabs from '$lib/components/ui/tabs/index.js';
+	import * as Dialog from '$lib/components/ui/dialog/index.js';
 	import { Separator } from '$lib/components/ui/separator/index.js';
 	import { Plus, LayoutGrid, List } from '@lucide/svelte';
 	import NotesGrid from './NotesGrid.svelte';
 	import NoteSearchBar from './NoteSearchBar.svelte';
+	import NoteEditor from './NoteEditor.svelte';
 
-	// Get note service from context
-	const noteService = getNoteService();
+	// Get note service from layout context
+	const noteService = setNoteService('default-user');
 
 	let searchQuery = $state('');
 	let currentFilter = $state<'all' | 'pinned' | 'archived' | 'trash'>('all');
 	let view = $state<'grid' | 'list'>('grid');
 
 	// Get filtered notes based on current tab
-	const filteredNotes = $derived(() => {
+	const filteredNotes = $derived.by(() => {
 		let notes = noteService.activeNotes;
 
 		switch (currentFilter) {
@@ -49,12 +52,18 @@
 		// Wait a bit for the subscription to update
 		await new Promise((resolve) => setTimeout(resolve, 100));
 
-		goto(`/notes/${note.id}`);
+		pushState(`/notes/${note.id}`, { selectedNoteId: note.id });
 	}
 
 	function openNote(noteId: string) {
-		goto(`/notes/${noteId}`);
+		pushState(`/notes/${noteId}`, { selectedNoteId: noteId });
 	}
+
+	function closeNote() {
+		history.back();
+	}
+
+	const selectedNoteId = $derived(page.state.selectedNoteId as string | undefined);
 </script>
 
 <div class="w-full container mx-auto p-6 space-y-6">
@@ -140,7 +149,7 @@
 
 	<!-- Notes Grid -->
 	<NotesGrid
-		notes={filteredNotes()}
+		notes={filteredNotes}
 		{view}
 		loading={noteService.loading}
 		emptyMessage={searchQuery
@@ -155,3 +164,12 @@
 		onNoteClick={(note) => openNote(note.id)}
 	/>
 </div>
+
+<!-- Note Editor Modal -->
+<Dialog.Root open={!!selectedNoteId} onOpenChange={(open) => !open && closeNote()}>
+	<Dialog.Content class="w-[90vw]! max-w-6xl! h-[90vh] flex flex-col overflow-hidden">
+		{#if selectedNoteId}
+			<NoteEditor noteId={selectedNoteId} {noteService} />
+		{/if}
+	</Dialog.Content>
+</Dialog.Root>