refac

src/lib/components/notes/NoteEditor.svelte

@@ -35,7 +35,8 @@
 		showSidebar,
 		socket,
 		user,
-		WEBUI_NAME
+		WEBUI_NAME,
+		pinnedNotes
 	} from '$lib/stores';
 
 	import { downloadPdf } from './utils';
@@ -64,7 +65,9 @@
 		deleteNoteById,
 		getNoteById,
 		updateNoteById,
-		updateNoteAccessGrants
+		updateNoteAccessGrants,
+		toggleNotePinnedStatusById,
+		getPinnedNoteList
 	} from '$lib/apis/notes';
 
 	import RichTextInput from '../common/RichTextInput.svelte';
@@ -1088,6 +1091,12 @@ Provide the enhanced notes in markdown format. Use markdown syntax for headings,
 									onDelete={() => {
 										showDeleteConfirm = true;
 									}}
+									isPinned={note.is_pinned ?? false}
+									onPin={async () => {
+										await toggleNotePinnedStatusById(localStorage.token, note.id);
+										note = await getNoteById(localStorage.token, note.id);
+										pinnedNotes.set(await getPinnedNoteList(localStorage.token).catch(() => []));
+									}}
 								>
 									<div class="p-1 bg-transparent hover:bg-white/5 transition rounded-lg">
 										<EllipsisHorizontal className="size-5" />

src/lib/components/notes/Notes.svelte

@@ -30,13 +30,15 @@
 	$: loadLocale($i18n.languages);
 
 	import { goto } from '$app/navigation';
-	import { WEBUI_NAME, config, user } from '$lib/stores';
+	import { WEBUI_NAME, config, user, pinnedNotes } from '$lib/stores';
 	import {
 		createNewNote,
 		deleteNoteById,
 		getNoteById,
 		getNoteList,
-		searchNotes
+		searchNotes,
+		toggleNotePinnedStatusById,
+		getPinnedNoteList
 	} from '$lib/apis/notes';
 	import { capitalizeFirstLetter, copyToClipboard, getTimeRange } from '$lib/utils';
 	import { downloadPdf, createNoteHandler } from './utils';
@@ -540,6 +542,12 @@
 																			selectedNote = note;
 																			showDeleteConfirm = true;
 																		}}
+																		isPinned={note.is_pinned ?? false}
+																		onPin={async () => {
+																			await toggleNotePinnedStatusById(localStorage.token, note.id);
+																			pinnedNotes.set(await getPinnedNoteList(localStorage.token).catch(() => []));
+																			init();
+																		}}
 																	>
 																		<button
 																			class="self-center w-fit text-sm p-1 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"
@@ -602,6 +610,12 @@
 																			selectedNote = note;
 																			showDeleteConfirm = true;
 																		}}
+																		isPinned={note.is_pinned ?? false}
+																		onPin={async () => {
+																			await toggleNotePinnedStatusById(localStorage.token, note.id);
+																			pinnedNotes.set(await getPinnedNoteList(localStorage.token).catch(() => []));
+																			init();
+																		}}
 																	>
 																		<button
 																			class="self-center w-fit text-sm p-1 dark:text-gray-300 dark:hover:text-white hover:bg-black/5 dark:hover:bg-white/5 rounded-xl"

src/lib/components/notes/Notes/NoteMenu.svelte

@@ -8,6 +8,8 @@
 	import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
 	import Share from '$lib/components/icons/Share.svelte';
 	import Link from '$lib/components/icons/Link.svelte';
+	import Pin from '$lib/components/icons/Pin.svelte';
+	import PinSlash from '$lib/components/icons/PinSlash.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -16,6 +18,8 @@
 
 	export let onDownload = (type) => {};
 	export let onDelete = () => {};
+	export let onPin = null;
+	export let isPinned = false;
 
 	export let onCopyLink = null;
 	export let onCopyToClipboard = null;
@@ -110,7 +114,25 @@
 				</DropdownSub>
 			{/if}
 
+			{#if onPin}
 			<button
+				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				on:click={() => {
+					onPin();
+					show = false;
+				}}
+			>
+				{#if isPinned}
+					<PinSlash />
+					<div class="flex items-center">{$i18n.t('Unpin')}</div>
+				{:else}
+					<Pin />
+					<div class="flex items-center">{$i18n.t('Pin to Sidebar')}</div>
+				{/if}
+			</button>
+		{/if}
+
+		<button
 				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 				on:click={() => {
 					onDelete();