feat: add pin notes

packages/app/src/api/events/workspace/index.tsx

@@ -5,6 +5,7 @@ export enum WorkspaceEvents {
 	NOTE_UPDATED = 'noteUpdated',
 	NOTE_EDITED = 'noteChanged',
 	NOTE_HISTORY_UPDATED = 'noteHistoryUpdated',
+	NOTE_META_UPDATED = 'noteMetaChanged',
 }
 
 /**
@@ -24,6 +25,13 @@ export type WorkspaceEventsPayloadMap = {
 	 */
 	[WorkspaceEvents.NOTE_UPDATED]: NoteId;
 
+	/**
+	 * Fired when specific note metadata has been updated and change is committed in DB
+	 *
+	 * Metadata includes all note properties except the title and content
+	 */
+	[WorkspaceEvents.NOTE_META_UPDATED]: NoteId;
+
 	/**
 	 * Fired when note has been edited by user and change is committed in DB
 	 */

packages/app/src/components/NotePreview/NotePreview.theme.ts

@@ -1,7 +1,7 @@
 import { defineSlotRecipe } from '@chakra-ui/react';
 
 export const notePreviewRecipe = defineSlotRecipe({
-	slots: ['root', 'body', 'title', 'text', 'meta'],
+	slots: ['root', 'body', 'title', 'text', 'meta', 'header', 'icon'],
 	base: {
 		root: {
 			cursor: 'pointer',
@@ -16,11 +16,20 @@ export const notePreviewRecipe = defineSlotRecipe({
 			gap: '0.2rem',
 			alignItems: 'normal',
 			maxWidth: '100%',
+			width: '100%',
+		},
+		header: {
+			width: '100%',
+			justifyContent: 'space-between',
 		},
 		title: {
 			fontWeight: 'bold',
 			fontSize: '18px',
 		},
+		icon: {
+			color: 'typography.secondary',
+			fontSize: '12px',
+		},
 		text: {
 			fontSize: '14px',
 			maxWidth: '100%',

packages/app/src/components/NotePreview/NotePreview.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, memo, useMemo } from 'react';
+import { FaThumbtack } from 'react-icons/fa6';
 import { isEqual } from 'lodash';
-import { Box, Stack, StackProps, Text, useSlotRecipe } from '@chakra-ui/react';
+import { Box, HStack, Stack, StackProps, Text, useSlotRecipe } from '@chakra-ui/react';
 import { useLocalizedDate } from '@hooks/useLocalizedDate';
 
 import { TextSample } from './TextSample';
@@ -15,11 +16,13 @@ export const NotePreviewContent = memo(
 		text,
 		textToHighlight,
 		meta,
+		isPinned,
 	}: {
 		title: string;
 		text: string;
 		meta?: NotePreviewMeta;
 		textToHighlight?: string;
+		isPinned?: boolean;
 	}) => {
 		const recipe = useSlotRecipe({ key: 'notePreview' });
 		const styles = recipe();
@@ -28,13 +31,23 @@ export const NotePreviewContent = memo(
 		return (
 			<>
 				<Stack css={styles.body}>
-					<Text as="h3" css={styles.title}>
-						<TextSample
-							text={title}
-							highlightText={textToHighlight}
-							lengthLimit={50}
-						/>
-					</Text>
+					<HStack css={styles.header}>
+						<Text as="h3" css={styles.title}>
+							<TextSample
+								text={title}
+								highlightText={textToHighlight}
+								lengthLimit={50}
+							/>
+						</Text>
+
+						{isPinned && (
+							<Box
+								as={FaThumbtack}
+								css={styles.icon}
+								transform="rotate(45deg)"
+							/>
+						)}
+					</HStack>
 
 					{text.length > 0 ? (
 						<Text css={styles.text}>
@@ -68,8 +81,9 @@ export const NotePreview = forwardRef<
 		meta?: NotePreviewMeta;
 		isSelected?: boolean;
 		textToHighlight?: string;
+		isPinned?: boolean;
 	} & StackProps
->(({ title, text, textToHighlight, meta, isSelected, ...props }, ref) => {
+>(({ title, text, textToHighlight, meta, isSelected, isPinned, ...props }, ref) => {
 	const recipe = useSlotRecipe({ key: 'notePreview' });
 	const styles = recipe();
 
@@ -82,7 +96,7 @@ export const NotePreview = forwardRef<
 
 	return (
 		<Stack ref={ref} aria-selected={isSelected} {...props} css={style}>
-			<NotePreviewContent {...{ title, text, textToHighlight, meta }} />
+			<NotePreviewContent {...{ title, text, textToHighlight, meta, isPinned }} />
 		</Stack>
 	);
 });

packages/app/src/core/database/sqlite/migrations/index.ts

@@ -33,4 +33,8 @@ export async function convertSQLToMigrationObject(
 export const getMigrationsList = async (): Promise<SQLiteMigration[]> =>
 	Promise.all([
 		convertSQLToMigrationObject('1_init_db', import('./sql/1_init_db.sql')),
+		convertSQLToMigrationObject(
+			'2_add_pinned_to_notes',
+			import('./sql/2_add_pinned_to_notes.sql'),
+		),
 	]);

packages/app/src/core/database/sqlite/migrations/sql/2_add_pinned_to_notes.sql

@@ -0,0 +1,7 @@
+ALTER TABLE notes
+ADD COLUMN pinned_at INTEGER;
+
+DROP INDEX idx_notes_workspace_status;
+
+CREATE INDEX idx_notes_workspace_status
+  ON notes(workspace_id, deleted_at, archived, bookmarked, visible, pinned_at, updated_at DESC);

packages/app/src/core/features/notes/bin/DeletedNotesController.ts

@@ -113,10 +113,12 @@ export class DeletedNotesController {
 		return notes
 			.get({
 				meta: { isDeleted: true },
-				sort: {
-					by: considerModificationTime ? 'updatedAt' : 'deletedAt',
-					order: 'asc',
-				},
+				sort: [
+					{
+						by: considerModificationTime ? 'updatedAt' : 'deletedAt',
+						order: 'asc',
+					},
+				],
 				limit: 1,
 			})
 			.then((notes) => {

packages/app/src/core/features/notes/controller/NotesController.filters.test.ts

@@ -27,7 +27,7 @@ test('filter by update time', async () => {
 	await expect(
 		notes.get({
 			updatedAt: { from: new Date('01/01/2002 12:00') },
-			sort: { by: 'createdAt', order: 'asc' },
+			sort: [{ by: 'createdAt', order: 'asc' }],
 		}),
 	).resolves.toEqual([
 		expect.objectContaining({ content: expect.objectContaining({ title: '2002' }) }),
@@ -37,7 +37,7 @@ test('filter by update time', async () => {
 	await expect(
 		notes.get({
 			updatedAt: { to: new Date('01/01/2002 12:00') },
-			sort: { by: 'createdAt', order: 'asc' },
+			sort: [{ by: 'createdAt', order: 'asc' }],
 		}),
 	).resolves.toEqual([
 		expect.objectContaining({ content: expect.objectContaining({ title: '2001' }) }),
@@ -286,6 +286,23 @@ describe('data fetching', () => {
 		).resolves.toHaveLength(notesSample.length - 40);
 	});
 
+	test('filters notes by pinned status', async () => {
+		const { db, workspaceId } = getWorkspaceContext();
+		const registry = new NotesController(db, workspaceId);
+
+		const notesId = await registry
+			.get({ limit: 60 })
+			.then((notes) => notes.map((note) => note.id));
+
+		await registry.updateMeta(notesId, { isPinned: true });
+		await expect(registry.get({ meta: { isPinned: true } })).resolves.toHaveLength(
+			60,
+		);
+		await expect(registry.get({ meta: { isPinned: false } })).resolves.toHaveLength(
+			notesSample.length - 60,
+		);
+	});
+
 	test('method getLength consider filters', async () => {
 		const { db, workspaceId } = getWorkspaceContext();
 		const registry = new NotesController(db, workspaceId);

packages/app/src/core/features/notes/controller/NotesController.sort.test.ts

@@ -0,0 +1,79 @@
+import { openSQLite } from '@core/database/sqlite/openSQLite';
+import { createWorkspaceId } from '@tests/utils/vaultContext';
+import { createFileControllerMock } from '@utils/mocks/fileControllerMock';
+
+import { NotesController } from './NotesController';
+
+test('updating a pinned note does not affect the order of pinned notes', async () => {
+	const db = await openSQLite(createFileControllerMock());
+	onTestFinished(db.close);
+
+	const workspaceId = await createWorkspaceId(db.get());
+	const registry = new NotesController(db.get(), workspaceId);
+
+	const note1 = await registry.add({ title: '2001', text: 'Dummy text' });
+	const note2 = await registry.add({ title: '2002', text: 'Dummy text' });
+	const note3 = await registry.add({ title: '2003', text: 'Dummy text' });
+
+	// Pin
+	vi.setSystemTime('01/01/2010 12:00');
+	await registry.updateMeta([note1], { isPinned: true });
+	vi.setSystemTime('01/01/2011 12:00');
+	await registry.updateMeta([note3], { isPinned: true });
+
+	await expect(
+		registry.query({ sort: [{ by: 'pinnedAt', order: 'desc' }] }),
+	).resolves.toStrictEqual([note3, note1, note2]);
+
+	// Updating note content in a pinned note should not affect the order
+	vi.setSystemTime('01/01/2015 12:00');
+	await registry.update(note1, { title: '2015', text: 'Dummy text' });
+
+	await expect(
+		registry.query({ sort: [{ by: 'pinnedAt', order: 'desc' }] }),
+	).resolves.toStrictEqual([note3, note1, note2]);
+});
+
+test('updating an unpinned note does not affect the order of pinned notes', async () => {
+	const db = await openSQLite(createFileControllerMock());
+	onTestFinished(db.close);
+
+	const workspaceId = await createWorkspaceId(db.get());
+	const registry = new NotesController(db.get(), workspaceId);
+
+	vi.setSystemTime('01/01/2000 12:00');
+	const note1 = await registry.add({ title: '2001', text: 'Dummy text' });
+
+	vi.setSystemTime('01/01/2002 12:00');
+	const note2 = await registry.add({ title: '2002', text: 'Dummy text' });
+
+	vi.setSystemTime('01/01/2004 12:00');
+	const note3 = await registry.add({ title: '2004', text: 'Dummy text' });
+
+	// Pin note1
+	vi.setSystemTime('01/01/2010 12:00');
+	await registry.updateMeta([note1], { isPinned: true });
+
+	// Pinned notes come first, unpinned notes are sorted by update time
+	await expect(
+		registry.query({
+			sort: [
+				{ by: 'pinnedAt', order: 'desc' },
+				{ by: 'updatedAt', order: 'desc' },
+			],
+		}),
+	).resolves.toStrictEqual([note1, note3, note2]);
+
+	// Update an unpinned note2
+	vi.setSystemTime('01/01/2015 12:00');
+	await registry.update(note2, { title: '2015', text: 'Dummy text' });
+
+	await expect(
+		registry.query({
+			sort: [
+				{ by: 'pinnedAt', order: 'desc' },
+				{ by: 'updatedAt', order: 'desc' },
+			],
+		}),
+	).resolves.toStrictEqual([note1, note2, note3]);
+});

packages/app/src/core/features/notes/controller/NotesController.test.ts

@@ -194,14 +194,14 @@ test('Get notes by pages', async () => {
 	const page1 = await registry.get({
 		limit: 100,
 		page: 1,
-		sort: { by: 'createdAt', order: 'asc' },
+		sort: [{ by: 'createdAt', order: 'asc' }],
 	});
 	expect(page1[0].content).toMatchObject(notesSample[0]);
 
 	const page2 = await registry.get({
 		limit: 100,
 		page: 2,
-		sort: { by: 'createdAt', order: 'asc' },
+		sort: [{ by: 'createdAt', order: 'asc' }],
 	});
 	expect(page2[0].content).toMatchObject(notesSample[100]);
 });
@@ -408,6 +408,35 @@ describe('Meta data control', () => {
 			},
 		]);
 	});
+
+	test('toggle note pinned status', async () => {
+		const { db, workspaceId } = getWorkspaceContext();
+		const registry = new NotesController(db, workspaceId);
+
+		const noteId = await registry.add({ title: 'Title', text: 'Text' });
+		await expect(registry.getById([noteId])).resolves.toMatchObject([
+			{
+				id: noteId,
+				isPinned: false,
+			},
+		]);
+
+		await registry.updateMeta([noteId], { isPinned: true });
+		await expect(registry.getById([noteId])).resolves.toMatchObject([
+			{
+				id: noteId,
+				isPinned: true,
+			},
+		]);
+
+		await registry.updateMeta([noteId], { isPinned: false });
+		await expect(registry.getById([noteId])).resolves.toMatchObject([
+			{
+				id: noteId,
+				isPinned: false,
+			},
+		]);
+	});
 });
 
 const getWorkspaceContext = createWorkspaceContext();