From 4386e5abb896ba0ecf955a841df178b30aaa80c7 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 18 Nov 2025 18:37:57 -0500
Subject: [PATCH] refac/enh: create new note

---
 src/lib/components/notes/Notes.svelte    |  30 -----
 src/routes/(app)/notes/+page.svelte      | 165 +++++++++++++----------
 src/routes/(app)/notes/[id]/+page.svelte |  23 +++-
 src/routes/(app)/notes/new/+page.svelte  |  20 +++
 src/routes/(app)/notes/utils.ts          |  26 ++++
 5 files changed, 163 insertions(+), 101 deletions(-)
 create mode 100644 src/routes/(app)/notes/new/+page.svelte
 create mode 100644 src/routes/(app)/notes/utils.ts

diff --git a/src/lib/components/notes/Notes.svelte b/src/lib/components/notes/Notes.svelte
index 14f1392625..43d7bb6e36 100644
--- a/src/lib/components/notes/Notes.svelte
+++ b/src/lib/components/notes/Notes.svelte
@@ -101,30 +101,6 @@
 		});
 	};
 
-	const createNoteHandler = async (content?: string) => {
-		//  $i18n.t('New Note'),
-		const res = await createNewNote(localStorage.token, {
-			// YYYY-MM-DD
-			title: dayjs().format('YYYY-MM-DD'),
-			data: {
-				content: {
-					json: null,
-					html: content ?? '',
-					md: content ?? ''
-				}
-			},
-			meta: null,
-			access_control: {}
-		}).catch((error) => {
-			toast.error(`${error}`);
-			return null;
-		});
-
-		if (res) {
-			goto(`/notes/${res.id}`);
-		}
-	};
-
 	const downloadHandler = async (type) => {
 		if (type === 'txt') {
 			const blob = new Blob([selectedNote.data.content.md], { type: 'text/plain' });
@@ -241,12 +217,6 @@
 	});
 
 	onMount(async () => {
-		if ($page.url.searchParams.get('content') !== null) {
-			const content = $page.url.searchParams.get('content') ?? '';
-			createNoteHandler(content);
-			return;
-		}
-
 		await init();
 		loaded = true;
 
diff --git a/src/routes/(app)/notes/+page.svelte b/src/routes/(app)/notes/+page.svelte
index 8a57e18c16..759f16e018 100644
--- a/src/routes/(app)/notes/+page.svelte
+++ b/src/routes/(app)/notes/+page.svelte
@@ -1,87 +1,116 @@
 <script>
-	import { mobile, showArchivedChats, showSidebar, user } from '$lib/stores';
-	import { getContext } from 'svelte';
+	import { getContext, onMount } from 'svelte';
 
 	const i18n = getContext('i18n');
 
+	import dayjs from '$lib/dayjs';
+	import { mobile, showArchivedChats, showSidebar, user } from '$lib/stores';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	import { createNoteHandler } from './utils';
+
 	import UserMenu from '$lib/components/layout/Sidebar/UserMenu.svelte';
 	import Notes from '$lib/components/notes/Notes.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Sidebar from '$lib/components/icons/Sidebar.svelte';
+
+	let loaded = false;
+
+	onMount(async () => {
+		if (
+			$page.url.searchParams.get('content') !== null ||
+			$page.url.searchParams.get('title') !== null
+		) {
+			const title = $page.url.searchParams.get('title') ?? dayjs().format('YYYY-MM-DD');
+			const content = $page.url.searchParams.get('content') ?? '';
+
+			const res = await createNoteHandler(title, content);
+
+			if (res) {
+				goto(`/notes/${res.id}`);
+			}
+			return;
+		}
+
+		loaded = true;
+	});
 </script>
 
-<div
-	class=" flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
-		? 'md:max-w-[calc(100%-260px)]'
-		: ''} max-w-full"
->
-	<nav class="   px-2 pt-1.5 backdrop-blur-xl w-full drag-region">
-		<div class=" flex items-center">
-			{#if $mobile}
-				<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
-					<Tooltip
-						content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
-						interactive={true}
-					>
-						<button
-							id="sidebar-toggle-button"
-							class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
-							on:click={() => {
-								showSidebar.set(!$showSidebar);
-							}}
-						>
-							<div class=" self-center p-1.5">
-								<Sidebar />
-							</div>
-						</button>
-					</Tooltip>
-				</div>
-			{/if}
-
-			<div class="ml-2 py-0.5 self-center flex items-center justify-between w-full">
-				<div class="">
-					<div
-						class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium bg-transparent py-1 touch-auto pointer-events-auto"
-					>
-						<a class="min-w-fit transition" href="/notes">
-							{$i18n.t('Notes')}
-						</a>
-					</div>
-				</div>
-
-				<div class=" self-center flex items-center gap-1">
-					{#if $user !== undefined && $user !== null}
-						<UserMenu
-							className="max-w-[240px]"
-							role={$user?.role}
-							help={true}
-							on:show={(e) => {
-								if (e.detail === 'archived-chat') {
-									showArchivedChats.set(true);
-								}
-							}}
+{#if loaded}
+	<div
+		class=" flex flex-col w-full h-screen max-h-[100dvh] transition-width duration-200 ease-in-out {$showSidebar
+			? 'md:max-w-[calc(100%-260px)]'
+			: ''} max-w-full"
+	>
+		<nav class="   px-2 pt-1.5 backdrop-blur-xl w-full drag-region">
+			<div class=" flex items-center">
+				{#if $mobile}
+					<div class="{$showSidebar ? 'md:hidden' : ''} flex flex-none items-center">
+						<Tooltip
+							content={$showSidebar ? $i18n.t('Close Sidebar') : $i18n.t('Open Sidebar')}
+							interactive={true}
 						>
 							<button
-								class="select-none flex rounded-xl p-1.5 w-full hover:bg-gray-50 dark:hover:bg-gray-850 transition"
-								aria-label="User Menu"
+								id="sidebar-toggle-button"
+								class=" cursor-pointer flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-850 transition cursor-"
+								on:click={() => {
+									showSidebar.set(!$showSidebar);
+								}}
 							>
-								<div class=" self-center">
-									<img
-										src={$user?.profile_image_url}
-										class="size-6 object-cover rounded-full"
-										alt="User profile"
-										draggable="false"
-									/>
+								<div class=" self-center p-1.5">
+									<Sidebar />
 								</div>
 							</button>
-						</UserMenu>
-					{/if}
+						</Tooltip>
+					</div>
+				{/if}
+
+				<div class="ml-2 py-0.5 self-center flex items-center justify-between w-full">
+					<div class="">
+						<div
+							class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium bg-transparent py-1 touch-auto pointer-events-auto"
+						>
+							<a class="min-w-fit transition" href="/notes">
+								{$i18n.t('Notes')}
+							</a>
+						</div>
+					</div>
+
+					<div class=" self-center flex items-center gap-1">
+						{#if $user !== undefined && $user !== null}
+							<UserMenu
+								className="max-w-[240px]"
+								role={$user?.role}
+								help={true}
+								on:show={(e) => {
+									if (e.detail === 'archived-chat') {
+										showArchivedChats.set(true);
+									}
+								}}
+							>
+								<button
+									class="select-none flex rounded-xl p-1.5 w-full hover:bg-gray-50 dark:hover:bg-gray-850 transition"
+									aria-label="User Menu"
+								>
+									<div class=" self-center">
+										<img
+											src={$user?.profile_image_url}
+											class="size-6 object-cover rounded-full"
+											alt="User profile"
+											draggable="false"
+										/>
+									</div>
+								</button>
+							</UserMenu>
+						{/if}
+					</div>
 				</div>
 			</div>
-		</div>
-	</nav>
+		</nav>
 
-	<div class=" pb-1 flex-1 max-h-full overflow-y-auto @container">
-		<Notes />
+		<div class=" pb-1 flex-1 max-h-full overflow-y-auto @container">
+			<Notes />
+		</div>
 	</div>
-</div>
+{/if}
diff --git a/src/routes/(app)/notes/[id]/+page.svelte b/src/routes/(app)/notes/[id]/+page.svelte
index 390c1de313..76e3497f6c 100644
--- a/src/routes/(app)/notes/[id]/+page.svelte
+++ b/src/routes/(app)/notes/[id]/+page.svelte
@@ -1,10 +1,27 @@
 <script lang="ts">
+	import { onMount } from 'svelte';
+
+	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { showSidebar } from '$lib/stores';
 
+	import dayjs from '$lib/dayjs';
+	import { createNoteHandler } from '../utils';
+
 	import NoteEditor from '$lib/components/notes/NoteEditor.svelte';
+
+	let loaded = false;
+
+	onMount(async () => {
+		loaded = true;
+	});
 </script>
 
-<div id="note-container" class="w-full h-full {$showSidebar ? 'md:max-w-[calc(100%-260px)]' : ''}">
-	<NoteEditor id={$page.params.id} />
-</div>
+{#if loaded}
+	<div
+		id="note-container"
+		class="w-full h-full {$showSidebar ? 'md:max-w-[calc(100%-260px)]' : ''}"
+	>
+		<NoteEditor id={$page.params.id} />
+	</div>
+{/if}
diff --git a/src/routes/(app)/notes/new/+page.svelte b/src/routes/(app)/notes/new/+page.svelte
new file mode 100644
index 0000000000..94e8042295
--- /dev/null
+++ b/src/routes/(app)/notes/new/+page.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+
+	import dayjs from '$lib/dayjs';
+	import { createNoteHandler } from '../utils';
+
+	onMount(async () => {
+		const title = $page.url.searchParams.get('title') ?? dayjs().format('YYYY-MM-DD');
+		const content = $page.url.searchParams.get('content') ?? '';
+
+		const res = await createNoteHandler(title, content);
+
+		if (res) {
+			goto(`/notes/${res.id}`);
+		}
+	});
+</script>
diff --git a/src/routes/(app)/notes/utils.ts b/src/routes/(app)/notes/utils.ts
new file mode 100644
index 0000000000..d963daf822
--- /dev/null
+++ b/src/routes/(app)/notes/utils.ts
@@ -0,0 +1,26 @@
+import { createNewNote } from '$lib/apis/notes';
+import { toast } from 'svelte-sonner';
+
+export const createNoteHandler = async (title: string, content?: string) => {
+	//  $i18n.t('New Note'),
+	const res = await createNewNote(localStorage.token, {
+		// YYYY-MM-DD
+		title: title,
+		data: {
+			content: {
+				json: null,
+				html: content ?? '',
+				md: content ?? ''
+			}
+		},
+		meta: null,
+		access_control: {}
+	}).catch((error) => {
+		toast.error(`${error}`);
+		return null;
+	});
+
+	if (res) {
+		return res;
+	}
+};