Test
@@ -65,5 +105,190 @@ describe('Windows', () => {
expect(container).toMatchSnapshot();
expect(container.querySelector('.left-side')).toBeDefined();
+
+ // Verify it changed to MAX
+ const appState = processStore.getState().ActiveApp.apps[ProgramType.FINDER];
+ expect(appState?.size).toBe(WindowSize.MAX);
+ });
+
+ it('should toggle maximize on double click on title bar', () => {
+ const { container } = render(
+ Test
+ Test
+ Test
+ Test
+ Test
;
+ const { rerender } = render(
+ Different
+ Test Undefined
+ Test Default
+ Test Max
+ Test Class
+ Test Class
+
-
- - x -
-
-
+ + x +
+
- -
-
-
-
-
+ + - +
+
+
+ + o +
+
- o
-
+
+ Top bar
+
+
-
- Test
+ class="css-1qx9vnh"
+ >
+
+ Test
+
-
+ - x -
++ x +
+
+
+ + - +
+
+
+
+ o +
+
-
+ - - -
+
+ Test
+
+
`;
@@ -129,60 +190,60 @@ exports[`Windows should render with top bar component values 1`] = `
exports[`Windows should trigger close on close button press 1`] = `
+
-
+
-
-
+ - o -
++ x +
+
+
+ + - +
+
+
+
+ o +
+
- Top bar
+ Test
-
- Test
-
-
-
- - x -
-
-
+ + x +
+
- -
-
-
-
-
+ + - +
+
- o
-
+
+
+ o +
+
-
- Test
+ class="css-1qx9vnh"
+ >
+
+ Test
+
-
- - x -
-
-
+ + x +
+
- -
-
-
-
-
+ + - +
+
- o
-
+
+
+ o +
+
-
- Test
+ class="css-1qx9vnh"
+ >
+
+ Test
+
-
- - x -
-
-
+ + x +
+
- -
-
-
-
-
+ + - +
+
- o
-
+
+
+ o +
+
-
- Test
+ class="css-1qx9vnh"
+ >
+
+ Test
+
props.onStop({}, { x: 150, y: 250 })}
+ >
+ {props.children}
+
+ );
+ };
+ MockDraggable.displayName = 'MockDraggable';
+ return MockDraggable;
+ });
+
+ // Re-import after mocking
+ const DraggableProviderMocked = require('../DraggableProvider').default;
+
+ render(
+ {props.children}
;
+ };
+ MockDraggableProps.displayName = 'MockDraggableProps';
+ return MockDraggableProps;
});
- expect(container).toMatchSnapshot();
+ const DraggableProviderMocked = require('../DraggableProvider').default;
+
+ render(
+
-
-`;
-
-exports[`Draggable provider should render correctly on dragging 1`] = `
+exports[`Draggable provider should render correctly to match snapshot 1`] = `
- test
-
- {
it('should render correctly', () => {
const { result } = renderHook(() => uiStore());
- result.current.Modal.resetModalState();
+ act(() => {
+ result.current.Modal.resetModalState();
+ });
const { container } = render(App );
- jest.runAllTimersAsync();
-
expect(container).toMatchSnapshot();
expect(screen.getByText('App')).toBeDefined();
});
@@ -19,16 +21,84 @@ describe('ModalProvider', () => {
it('should render correctly with children', () => {
const { result } = renderHook(() => uiStore());
- result.current.Modal.resetModalState();
+ act(() => {
+ result.current.Modal.resetModalState();
+ });
const { container } = render(
,
);
- jest.runAllTimersAsync();
-
expect(container).toMatchSnapshot();
expect(screen.getByText('App')).toBeDefined();
});
+
+ it('should handle modal open state', () => {
+ const { result } = renderHook(() => uiStore());
+
+ render(App );
+
+ act(() => {
+ result.current.Modal.openModal(ModalID.SEARCH, jest.fn());
+ });
+
+ // The effect should trigger onOpen()
+ expect(screen.getByText('App')).toBeDefined();
+ });
+
+ describe('Branch Coverage', () => {
+ it('should call onModalClose when closing modal', () => {
+ const { result } = renderHook(() => uiStore());
+ const mockOnClose = jest.fn();
+
+ render(App );
+
+ // 1. Open modal
+ act(() => {
+ result.current.Modal.openModal(ModalID.SEARCH, mockOnClose);
+ });
+
+ // 2. Close modal (transition from OPEN to CLOSE)
+ act(() => {
+ uiStore.setState((state) => {
+ state.Modal.modalOpenState = ModalOpenState.CLOSE;
+ });
+ });
+
+ // Verify callback was called
+ expect(mockOnClose).toHaveBeenCalled();
+ });
+
+ it('should handle transition to CLOSE when onModalClose is not provided', () => {
+ act(() => {
+ uiStore.setState((state) => {
+ state.Modal.modalOpenState = ModalOpenState.CLOSE;
+ state.Modal.modalID = ModalID.NONE;
+ state.Modal.modalData = undefined;
+ });
+ });
+
+ render(App );
+
+ // 1. Open modal without callback
+ act(() => {
+ uiStore.setState((state) => {
+ state.Modal.modalOpenState = ModalOpenState.OPEN;
+ state.Modal.modalID = ModalID.SEARCH;
+ state.Modal.modalData = undefined;
+ });
+ });
+
+ // 2. Close modal
+ act(() => {
+ uiStore.setState((state) => {
+ state.Modal.modalOpenState = ModalOpenState.CLOSE;
+ });
+ });
+
+ // Should not throw
+ expect(screen.getByText('App')).toBeDefined();
+ });
+ });
});
diff --git a/src/router/lazyRouting/lazy_screen/private/program/__tests__/__snapshots__/LazyNotesScreen.test.tsx.snap b/src/router/lazyRouting/lazy_screen/private/program/__tests__/__snapshots__/LazyNotesScreen.test.tsx.snap
index 24fcf83..e6b15be 100644
--- a/src/router/lazyRouting/lazy_screen/private/program/__tests__/__snapshots__/LazyNotesScreen.test.tsx.snap
+++ b/src/router/lazyRouting/lazy_screen/private/program/__tests__/__snapshots__/LazyNotesScreen.test.tsx.snap
@@ -4,50 +4,253 @@ exports[`LazyNotesComponent should render correctly to match snapshot 1`] = `
,
);
- fireEvent.click(screen.getByLabelText('program-button-launchPad'));
- await jest.advanceTimersByTimeAsync(1000);
+ fireEvent.click(screen.getAllByLabelText('program-button-launchPad')[0]);
+ await act(async () => {
+ jest.advanceTimersByTime(1000);
+ });
expect(setLaunchpad).toHaveBeenCalled();
});
@@ -37,7 +79,9 @@ describe('BottomBar', () => {
render(
+ ,
+ );
+
+ act(() => {
+ processStore.setState((state: any) => {
+ state.ActiveApp.activeApp = ProgramType.NOTES;
+ });
+ });
+
+ rerender(
+
+ ,
+ );
+
+ expect(setLaunchpad).toHaveBeenCalledWith(false);
+ });
+ });
});
diff --git a/src/screens/private/Home/BottomBar/__tests__/__snapshots__/BottomBar.test.tsx.snap b/src/screens/private/Home/BottomBar/__tests__/__snapshots__/BottomBar.test.tsx.snap
index f5ba425..21bd460 100644
--- a/src/screens/private/Home/BottomBar/__tests__/__snapshots__/BottomBar.test.tsx.snap
+++ b/src/screens/private/Home/BottomBar/__tests__/__snapshots__/BottomBar.test.tsx.snap
@@ -77,232 +77,128 @@ exports[`BottomBar should render correctly to match snapshot 1`] = `
class="css-9xph1p"
>
-
-
-
diff --git a/src/screens/private/program/Notes/Notes.tsx b/src/screens/private/program/Notes/Notes.tsx
index 4c21646..c3b8b92 100644
--- a/src/screens/private/program/Notes/Notes.tsx
+++ b/src/screens/private/program/Notes/Notes.tsx
@@ -1,160 +1,138 @@
-import { ContentState, Editor, EditorState } from 'draft-js';
-// import 'draft-js/dist/Draft.css';
-import { Box, Card, IconButton, Text } from '@chakra-ui/react';
-
-import { NotesProps } from './type';
+import { Box } from '@chakra-ui/react';
import { appStore, notesSelector, useShallow } from '@appStore';
-import { useEffect, useRef, useState } from 'react';
-import { getAllStringExceptFirstLine, getFirstLineFromString } from './utils';
-
-const color = '#cc99009f';
-const Notes = (props: NotesProps) => {
- const editorRef = useRefApp
-
-
+
+
+
+ + All iCloud +
++ 0 + + notes +
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ style="overflow: hidden; height: 100%; width: 260px; opacity: 1;"
+ >
+
+
+
+
+
+
+ + ποΈ +
++ No notes yet +
+
-
diff --git a/src/screens/private/Home/BottomBar/__tests__/BottomBar.test.tsx b/src/screens/private/Home/BottomBar/__tests__/BottomBar.test.tsx
index d2873aa..29bcc14 100644
--- a/src/screens/private/Home/BottomBar/__tests__/BottomBar.test.tsx
+++ b/src/screens/private/Home/BottomBar/__tests__/BottomBar.test.tsx
@@ -1,16 +1,56 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, act } from '@testing-library/react';
import BottomBar from '../BottomBar';
import { renderHook } from '@testing-library/react-hooks';
-import { ProgramType, processStore } from '@processStore';
+import { ProgramType, processStore, WindowSize } from '@processStore';
import { BottomBarProgramType } from '../components';
import { LaunchpadContext } from '../../../Mac';
+import React from 'react';
+
+// Mock react-beautiful-dnd to capture onDragEnd
+jest.mock('react-beautiful-dnd', () => ({
+ DragDropContext: ({ children, onDragEnd }: any) => {
+ (global as any).triggerDragEnd = onDragEnd;
+ return
- Editor
+
+
+ ποΈ +
++ Select or create a note +
{children}
;
+ },
+ Droppable: ({ children }: any) =>
+ children(
+ {
+ innerRef: jest.fn(),
+ droppableProps: {},
+ placeholder: ,
+ },
+ {},
+ ),
+ Draggable: ({ children }: any) =>
+ children(
+ {
+ innerRef: jest.fn(),
+ draggableProps: {},
+ dragHandleProps: {},
+ },
+ {},
+ ),
+}));
describe('BottomBar', () => {
beforeEach(() => {
const { result } = renderHook(() => processStore());
- result.current.ActiveApp.removeApp(ProgramType.FINDER);
- result.current.ActiveApp.removeApp(ProgramType.CHROME);
+ act(() => {
+ result.current.ActiveApp.removeApp(ProgramType.FINDER);
+ result.current.ActiveApp.removeApp(ProgramType.CHROME);
+ processStore.setState((state: any) => {
+ state.ActiveApp.apps = {};
+ });
+ });
+ jest.clearAllMocks();
+ delete (global as any).triggerDragEnd;
+ jest.useFakeTimers();
});
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
it('should render correctly to match snapshot', () => {
const { container } = render(
- 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
- -
-
+
+
+
New Note
',
+ pinned: false,
+ };
+ addNote(newNote);
+ setSelectedId(id);
+ }, [addNote]);
+
+ const handleDelete = useCallback(() => {
+ if (!selectedId) return;
+ deleteNote(selectedId);
+ // Select the next available note
+ const remaining = notesList.filter((n) => n.id !== selectedId);
+ setSelectedId(remaining.length > 0 ? remaining[0].id : null);
+ }, [deleteNote, notesList, selectedId]);
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [selectedNoteId]);
+ const handlePin = useCallback(() => {
+ if (!selectedId) return;
+ pinNote(selectedId);
+ }, [pinNote, selectedId]);
+
+ const handleUpdate = useCallback(
+ (updatedNote: Note) => {
+ editNote(updatedNote);
+ },
+ [editNote],
+ );
+
+ const toggleSidebar = useCallback(() => {
+ setIsSidebarVisible((prev) => !prev);
+ }, []);
+
+ // Keyboard shortcut: βN for new note
+ useEffect(() => {
+ const onKeyDown = (e: KeyboardEvent) => {
+ if ((e.metaKey || e.ctrlKey) && e.key === 'n') {
+ e.preventDefault();
+ handleNewNote();
+ }
+ };
+ window.addEventListener('keydown', onKeyDown);
+ return () => window.removeEventListener('keydown', onKeyDown);
+ }, [handleNewNote]);
+
+ // βββ Render ββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
return (
Grocery List π
',
+ date: '2025-04-19T15:30:00Z',
+ updatedAt: '2025-04-19T15:30:00Z',
+ pinned: true,
+ });
+ });
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
+ });
+
it('should render correctly to match snapshot', () => {
const { container } = render(
-
-
-
-
+
- Title + All iCloud
- 14/05/2020 -
- -> - Description -
+ 3 + + notes
-
-
- Editor
-
+
+
+
+
+
+
+
+
-
`;
-exports[`Notes should render correctly to match snapshot 1`] = `
+exports[`Notes should invoke delete note on clicking delete note button 1`] = `
-
-
-
+
+
+
+
+
+
+
+
+
+
+ style="overflow: hidden; height: 100%; width: 260px; opacity: 1;"
+ >
+
+
+
+
+
+
+ + Pinned +
+
+
+
+
+
+
+ + Grocery List π +
+
+
+ + 4/19/25 +
++ Milk, Eggs, Bread... +
+
+
+
+
+
+ + April +
+
+
+
+
+
+
+ + New Note +
+
+
+ + 4/20/25 +
+
+
+
+
+
+
+
+
+
+ + Teaching Holistic Health π§ββοΈ +
+
+
+ + 4/20/25 +
++ Brainstorm for first in-class session... +
+
+
+
+
-
@@ -132,54 +438,389 @@ exports[`Notes should invoke delete note on clicking delete note button 1`] = `
- Editor
+
+
+
+
+
+
+ New Note
+
+
+
+
+ 4/20/2025 + + at + + 10:00 AM +
++ 2 + + words +
+
-
+
-
-
-
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+ style="overflow: hidden; height: 100%; width: 260px; opacity: 1;"
+ >
+
+
+
+
+
+
+ + Pinned +
+
+
+
+
+
+
+ + Grocery List π +
+
+
+ + 4/19/25 +
++ Milk, Eggs, Bread... +
+
+
+
+
+
+ + April +
+
+
+
+
+
+
+ + Teaching Holistic Health π§ββοΈ +
+
+
+ + 4/20/25 +
++ Brainstorm for first in-class session... +
+
+
+
+
-
@@ -187,76 +828,389 @@ exports[`Notes should render correctly to match snapshot 1`] = `
- Editor
+
+
+
+
+
+
+ Grocery List π
+
+
+
+ 4/19/2025 + + at + + 03:30 PM +
++ 3 + + words +
+
-
+
-
-
-
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
-
@@ -268,93 +1222,690 @@ exports[`Notes should select and deselect on clicking on card 1`] = `
- Editor
+
+
+
+
+
+
+ Grocery List π
+
+
+
+ 4/19/2025 + + at + + 03:30 PM +
++ 3 + + words +
+
-
-
-
-
+
+
+ - Title + All iCloud
- 14/05/2020 -
- -> - Description -
+ 2 + + notes
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
e.key === 'Enter' && onClick()}
+ px={3}
+ py={2}
+ cursor="pointer"
+ position="relative"
+ borderRadius="10px"
+ bg={isSelected ? selectionBg : 'transparent'}
+ transition="background 0.15s ease"
+ _hover={{
+ bg: isSelected ? selectionBg : hoverBg,
+ }}
+ display="flex"
+ justifyContent="space-between"
+ alignItems="center"
+ >
+
+
+ {title}
+
+
+
+
+ {formattedDate}
+
+ {preview && (
+
+ {preview}
+
+ )}
+
+
+
+ {/* Folder Icon */}
+
+
+
+
+ );
+};
+
+export default NoteCard;
diff --git a/src/screens/private/program/Notes/component/NoteEditor.tsx b/src/screens/private/program/Notes/component/NoteEditor.tsx
new file mode 100644
index 0000000..f82cb5a
--- /dev/null
+++ b/src/screens/private/program/Notes/component/NoteEditor.tsx
@@ -0,0 +1,303 @@
+import { Box, Text } from '@chakra-ui/react';
+import { Note } from '@appStore';
+import { countWords, getTitleFromContent } from '../utils';
+import { useEffect, useRef } from 'react';
+import {
+ darkModeColorSelector,
+ settingsStore,
+ useShallow,
+} from '@settingsStore';
+
+// βββ Props βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+interface NoteEditorProps {
+ note: Note | undefined;
+ onUpdate: (note: Note) => void;
+}
+
+// βββ Component βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+const NoteEditor = ({ note, onUpdate }: NoteEditorProps) => {
+ const editorRef = useRef(null);
+ const saveTimer = useRef>();
+ const currentNoteId = useRef();
+
+ const { mainColor, textColor } = settingsStore(
+ useShallow(darkModeColorSelector),
+ );
+ const isDark = settingsStore((state) => state.Display.darkMode);
+
+ // Dynamic Editor CSS
+ const editorCss = `
+ .notes-editor {
+ outline: none;
+ font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", system-ui, sans-serif;
+ font-size: 15px;
+ line-height: 1.5;
+ color: ${textColor};
+ caret-color: #fbbf24;
+ word-break: break-word;
+ height: 100%;
+ }
+ .notes-editor:empty:before {
+ content: attr(data-placeholder);
+ color: ${isDark ? 'rgba(255,255,255,0.3)' : '#c7c7cc'};
+ pointer-events: none;
+ }
+ .notes-editor > div:first-child,
+ .notes-editor > p:first-child {
+ font-size: 26px;
+ font-weight: 700;
+ color: ${textColor};
+ line-height: 1.2;
+ margin-bottom: 4px;
+ letter-spacing: -0.02em;
+ }
+ .notes-editor h2 {
+ font-size: 18px;
+ font-weight: 600;
+ color: ${textColor};
+ margin: 12px 0 4px;
+ }
+ .notes-editor input[type="checkbox"] {
+ margin-right: 6px;
+ accent-color: #fbbf24;
+ }
+ .notes-editor ::selection { background: rgba(251,191,36,0.35); }
+
+ .hashtag {
+ color: #ff9500;
+ font-weight: 500;
+ }
+ .highlight-cyan {
+ background-color: rgba(0, 255, 255, ${isDark ? '0.3' : '0.2'});
+ border-radius: 4px;
+ padding: 0 2px;
+ }
+ .highlight-pink {
+ background-color: rgba(255, 105, 180, ${isDark ? '0.3' : '0.2'});
+ border-radius: 4px;
+ padding: 0 2px;
+ }
+ .highlight-orange {
+ background-color: rgba(255, 165, 0, ${isDark ? '0.3' : '0.2'});
+ border-radius: 4px;
+ padding: 0 2px;
+ }
+ `;
+
+ useEffect(() => {
+ let style = document.getElementById(
+ 'notes-editor-styles',
+ ) as HTMLStyleElement;
+ if (!style) {
+ style = document.createElement('style');
+ style.id = 'notes-editor-styles';
+ document.head.appendChild(style);
+ }
+ style.textContent = editorCss;
+ }, [editorCss]);
+
+ // Mock HTML Data (dynamic colors)
+ const mockSvg = `
+
+ `;
+
+ const mockHtml = `
+
+) => {
+ const mod = e.metaKey || e.ctrlKey;
+ if (!mod) return;
+ switch (e.key) {
+ case 'b':
+ e.preventDefault();
+ document.execCommand('bold');
+ break;
+ case 'i':
+ e.preventDefault();
+ document.execCommand('italic');
+ break;
+ case 'u':
+ e.preventDefault();
+ document.execCommand('underline');
+ break;
+ }
+ };
+
+ const wordCount = note?.content ? countWords(note.content) : 0;
+
+ if (!note) {
+ return (
+
+ ποΈ
+
+ Select or create a note
+
+
+ );
+ }
+
+ return (
+
+ {/* Editor area */}
+ editorRef.current?.focus()}
+ css={{
+ scrollbarWidth: 'thin',
+ scrollbarColor: isDark
+ ? 'rgba(255,255,255,0.1) transparent'
+ : '#e5e5e5 transparent',
+ }}
+ >
+
+
+ {/* Status bar */}
+
+
+ {note.updatedAt ? new Date(note.updatedAt).toLocaleDateString() : ''}{' '}
+ at{' '}
+ {note.updatedAt
+ ? new Date(note.updatedAt).toLocaleTimeString([], {
+ hour: '2-digit',
+ minute: '2-digit',
+ })
+ : ''}
+
+
+ {wordCount} {wordCount === 1 ? 'word' : 'words'}
+
+
+
+ );
+};
+
+export default NoteEditor;
diff --git a/src/screens/private/program/Notes/component/NoteFormatBar.tsx b/src/screens/private/program/Notes/component/NoteFormatBar.tsx
new file mode 100644
index 0000000..9d39829
--- /dev/null
+++ b/src/screens/private/program/Notes/component/NoteFormatBar.tsx
@@ -0,0 +1,168 @@
+import { Box } from '@chakra-ui/react';
+import { RefObject, useEffect, useState } from 'react';
+
+// βββ Constants βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+const ACCENT = '#fbbf24';
+
+// βββ Format button βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+const FmtBtn = ({
+ label,
+ icon,
+ active,
+ onClick,
+}: {
+ label: string;
+ icon: string;
+ active?: boolean;
+ onClick: () => void;
+}) => (
+ {
+ e.preventDefault();
+ onClick();
+ }}
+ display="flex"
+ alignItems="center"
+ justifyContent="center"
+ boxSize="26px"
+ borderRadius={5}
+ fontSize="12px"
+ fontWeight={700}
+ cursor="pointer"
+ background="none"
+ border="none"
+ color={active ? ACCENT : '#d1d1d1'}
+ bg={active ? 'rgba(251,191,36,0.15)' : 'transparent'}
+ transition="background 0.12s ease, color 0.12s ease"
+ _hover={{ bg: 'rgba(255,255,255,0.12)', color: 'white' }}
+ >
+ {icon}
+
+);
+
+const Divider = () => (
+ ;
+}
+
+// βββ Component βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+const NoteFormatBar = ({ editorRef }: NoteFormatBarProps) => {
+ const [pos, setPos] = useState<{ top: number; left: number } | null>(null);
+ const [active, setActive] = useState({
+ bold: false,
+ italic: false,
+ underline: false,
+ });
+
+ useEffect(() => {
+ const onSelectionChange = () => {
+ const sel = window.getSelection();
+ if (!sel || sel.isCollapsed || sel.rangeCount === 0) {
+ setPos(null);
+ return;
+ }
+ const range = sel.getRangeAt(0);
+ if (!editorRef.current?.contains(range.commonAncestorContainer)) {
+ setPos(null);
+ return;
+ }
+ const rect = range.getBoundingClientRect();
+ setPos({
+ top: rect.top - 48,
+ left: rect.left + rect.width / 2,
+ });
+ setActive({
+ bold: document.queryCommandState('bold'),
+ italic: document.queryCommandState('italic'),
+ underline: document.queryCommandState('underline'),
+ });
+ };
+
+ document.addEventListener('selectionchange', onSelectionChange);
+ return () =>
+ document.removeEventListener('selectionchange', onSelectionChange);
+ }, [editorRef]);
+
+ const exec = (cmd: string, value?: string) => {
+ document.execCommand(cmd, false, value);
+ editorRef.current?.focus();
+ };
+
+ if (!pos) return null;
+
+ return (
+ e.preventDefault()} // don't steal focus
+ >
+ exec('bold')}
+ />
+ exec('italic')}
+ />
+ exec('underline')}
+ />
+ exec('formatBlock', 'h2')}
+ />
+ exec('formatBlock', 'div')}
+ />
+ exec('insertUnorderedList')}
+ />
+ exec('insertOrderedList')}
+ />
+
+ );
+};
+
+export default NoteFormatBar;
diff --git a/src/screens/private/program/Notes/component/NoteList.tsx b/src/screens/private/program/Notes/component/NoteList.tsx
new file mode 100644
index 0000000..90cd3c0
--- /dev/null
+++ b/src/screens/private/program/Notes/component/NoteList.tsx
@@ -0,0 +1,151 @@
+import { Box, Text } from '@chakra-ui/react';
+import { Note } from '@appStore';
+import NoteCard from './NoteCard';
+import moment from 'moment';
+import {
+ darkModeColorSelector,
+ settingsStore,
+ useShallow,
+} from '@settingsStore';
+
+// βββ Props βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+interface NoteListProps {
+ notesList: Note[];
+ selectedId: string;
+ searchQuery: string;
+ onSelect: (id: string) => void;
+}
+
+// βββ Component βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+const NoteList = ({
+ notesList,
+ selectedId,
+ searchQuery,
+ onSelect,
+}: NoteListProps) => {
+ const { mainColor, textColor } = settingsStore(
+ useShallow(darkModeColorSelector),
+ );
+ const isDark = settingsStore((state) => state.Display.darkMode);
+
+ const filtered = searchQuery.trim()
+ ? notesList.filter(
+ (n) =>
+ n.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ n.description.toLowerCase().includes(searchQuery.toLowerCase()),
+ )
+ : notesList;
+
+ // Split pinned and others
+ const pinnedNotes = filtered
+ .filter((n) => n.pinned)
+ .sort(
+ (a, b) =>
+ new Date(b.updatedAt || b.date).getTime() -
+ new Date(a.updatedAt || a.date).getTime(),
+ );
+
+ const otherNotes = filtered
+ .filter((n) => !n.pinned)
+ .sort(
+ (a, b) =>
+ new Date(b.updatedAt || b.date).getTime() -
+ new Date(a.updatedAt || a.date).getTime(),
+ );
+
+ // Group other notes by month
+ const groupedNotes: Record = {};
+ otherNotes.forEach((note) => {
+ const month = moment(note.updatedAt || note.date).format('MMMM');
+ if (!groupedNotes[month]) {
+ groupedNotes[month] = [];
+ }
+ groupedNotes[month].push(note);
+ });
+
+ const SectionHeader = ({ children }: { children: React.ReactNode }) => (
+
+ {children}
+
+ );
+
+ return (
+
+ {/* Note list */}
+
+ {filtered.length === 0 && (
+
+ ποΈ
+
+ {searchQuery ? 'No results' : 'No notes yet'}
+
+
+ )}
+
+ {/* Pinned Section */}
+ {pinnedNotes.length > 0 && (
+
+ Pinned
+ {pinnedNotes.map((note) => (
+
+ onSelect(note.id)}
+ />
+
+ ))}
+
+ )}
+
+ {/* Other Sections (Monthly) */}
+ {Object.entries(groupedNotes).map(([month, notesInMonth]) => (
+ 0 ? 4 : 2}>
+ {month}
+ {notesInMonth.map((note) => (
+
+ onSelect(note.id)}
+ />
+
+ ))}
+
+ ))}
+
+
+ );
+};
+
+export default NoteList;
diff --git a/src/screens/private/program/Notes/component/NoteToolbar.tsx b/src/screens/private/program/Notes/component/NoteToolbar.tsx
new file mode 100644
index 0000000..f9f7859
--- /dev/null
+++ b/src/screens/private/program/Notes/component/NoteToolbar.tsx
@@ -0,0 +1,293 @@
+import { Box, Tooltip, Input, Text } from '@chakra-ui/react';
+import {
+ darkModeColorSelector,
+ settingsStore,
+ useShallow,
+} from '@settingsStore';
+
+// βββ Constants βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+const ACCENT = '#fbbf24';
+
+// βββ Props βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+interface NoteToolbarProps {
+ hasSelection: boolean;
+ isPinned: boolean;
+ onNew: () => void;
+ onDelete: () => void;
+ onPin: () => void;
+ searchQuery: string;
+ onSearchChange: (val: string) => void;
+ onToggleSidebar: () => void;
+ notesCount: number;
+}
+
+// βββ Icon button βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+const ToolbarBtn = ({
+ label,
+ icon,
+ onClick,
+ danger,
+ active,
+ disabled,
+}: {
+ label: string;
+ icon: string | React.ReactNode;
+ onClick: () => void;
+ danger?: boolean;
+ active?: boolean;
+ disabled?: boolean;
+}) => {
+ const { iconColor } = settingsStore(useShallow(darkModeColorSelector));
+
+ return (
+
+
+ {icon}
+
+
+ );
+};
+
+// βββ SVG Icons βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+const SidebarIcon = () => (
+
+);
+
+const ComposeIcon = () => (
+
+);
+
+const SearchIcon = () => (
+
+);
+
+const PinIcon = ({ active }: { active: boolean }) => (
+
+);
+
+// βββ Component βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+const NoteToolbar = ({
+ hasSelection,
+ isPinned,
+ onNew,
+ onDelete,
+ onPin,
+ searchQuery,
+ onSearchChange,
+ onToggleSidebar,
+ notesCount,
+}: NoteToolbarProps) => {
+ const { menuColor, textColor } = settingsStore(
+ useShallow(darkModeColorSelector),
+ );
+ const isDark = settingsStore((state) => state.Display.darkMode);
+
+ return (
+
+ {/* Left Area */}
+
+
+
+ All iCloud
+
+
+ {notesCount} {notesCount === 1 ? 'note' : 'notes'}
+
+
+
+
+ {/* Center Area (Formatting Pill) */}
+
+ {}} />
+
+ Aa
+
+ }
+ onClick={() => {}}
+ />
+ {}} />
+ {}} />
+ {}} />
+ {}} />
+
+
+ {/* Right Area */}
+
+ {}} />
+
+
+
+ onSearchChange(e.target.value)}
+ variant="unstyled"
+ fontSize="13px"
+ h="auto"
+ color={textColor}
+ _placeholder={{
+ color: isDark ? 'rgba(255,255,255,0.4)' : '#8e8e93',
+ }}
+ />
+
+
+
+ );
+};
+
+export default NoteToolbar;
diff --git a/src/screens/private/program/Notes/component/__tests__/NoteEditor.test.tsx b/src/screens/private/program/Notes/component/__tests__/NoteEditor.test.tsx
new file mode 100644
index 0000000..2477685
--- /dev/null
+++ b/src/screens/private/program/Notes/component/__tests__/NoteEditor.test.tsx
@@ -0,0 +1,150 @@
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import NoteEditor from '../NoteEditor';
+import { Note } from '@appStore';
+import React from 'react';
+
+jest.useFakeTimers();
+
+describe('NoteEditor', () => {
+ const mockOnUpdate = jest.fn();
+ const mockNote: Note = {
+ id: '1',
+ title: 'Test Note',
+ description: 'Test description',
+ content: ' = (set) => ({
set((state) => {
state.Notes.notes[newNote.id] = newNote;
}),
+ pinNote: (id) =>
+ set((state) => {
+ if (state.Notes.notes[id]) {
+ state.Notes.notes[id].pinned = !state.Notes.notes[id].pinned;
+ }
+ }),
});
export default createNotesSlice;
diff --git a/src/store/appStore/slice/Notes/__tests__/Notes.slice.test.ts b/src/store/appStore/slice/Notes/__tests__/Notes.slice.test.ts
index d258ba1..52d35a4 100644
--- a/src/store/appStore/slice/Notes/__tests__/Notes.slice.test.ts
+++ b/src/store/appStore/slice/Notes/__tests__/Notes.slice.test.ts
@@ -1,68 +1,112 @@
import { renderHook } from '@testing-library/react-hooks';
import { appStore } from '../../../appStore';
+import { act } from '@testing-library/react';
describe('Notes slice', () => {
- it('should return default notes state', () => {
+ const setupNotes = (count = 6) => {
const { result } = renderHook(() => appStore());
+ act(() => {
+ for (let i = 1; i <= count; i++) {
+ result.current.Notes.addNote({
+ id: `note-${i}`,
+ title: `Note ${i}`,
+ description: `Description ${i}`,
+ content: `
-
diff --git a/src/screens/private/program/Notes/component/NoteCard.tsx b/src/screens/private/program/Notes/component/NoteCard.tsx
new file mode 100644
index 0000000..26db8d9
--- /dev/null
+++ b/src/screens/private/program/Notes/component/NoteCard.tsx
@@ -0,0 +1,110 @@
+import { Box, Text } from '@chakra-ui/react';
+import { Note } from '@appStore';
+import {
+ darkModeColorSelector,
+ settingsStore,
+ useShallow,
+} from '@settingsStore';
+
+// βββ Props βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+interface NoteCardProps {
+ note: Note;
+ isSelected: boolean;
+ onClick: () => void;
+}
+
+// βββ Component βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
+
+const NoteCard = ({ note, isSelected, onClick }: NoteCardProps) => {
+ const { textColor } = settingsStore(useShallow(darkModeColorSelector));
+ const isDark = settingsStore((state) => state.Display.darkMode);
+
+ const title = note.title || 'New Note';
+ const preview = note.description || '';
+
+ // Custom format: 3/6/25
+ const dateObj = new Date(note.updatedAt || note.date);
+ const formattedDate = `${dateObj.getMonth() + 1}/${dateObj.getDate()}/${dateObj.getFullYear().toString().slice(-2)}`;
+
+ const selectionBg = isDark ? 'rgba(255,255,255,0.15)' : '#e5e5e5';
+ const hoverBg = isDark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.04)';
+
+ return (
+
- Editor
+
+
+
+
+
+
+
+ + +
+
+ Teaching Holistic Health π§ββοΈ
+
+
+
+
+
+ Brainstorm for first in-class session
+
+
+
+
+
+
+ #school
+
+
+
+ #kine210
+
+
+
+ #practicum
+
+
+
+
+
+
+ Topic idea: Mind-Body Connection
+
+
+
+
+
+ Getting class assignments next week but we should expect third, fourth, or fifth-graders. "Mind-Body Connection" could be a cool angle;
+
+ lots of different ways to approach it,
+
+ it's
+
+ accessible to everyone,
+
+
+
+ doesn't require any special gear,
+
+
+
+ non-competitive,
+
+ etc. We could
+
+ start with a box breathing exercise
+
+ to demonstrate the
+
+ connection between thinking, doing, and feeling
+
+ and use it as a segue into a lesson about
+
+ thinking of ourselves as interconnected systems.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Box breathing is a technique used to center and destress. Studies show controlled breathing has myriad physiological benefitsβit soothes the autonomic nervous system, reduces cortisol, etc. This might be a little advanced but I think we should try to find a way to explain these systems in a way that will make sense to elementary school students.
+
+ + + +
+ I think it would be great to start off by having the whole class try box breathing together and then talking about how it made everyone feel. Starting with something calming that gets everyone on the same page seems like a good idea in case we get a class right after recess, too. This is effectively an introduction to
+
+
+
+
+
+ 4/20/2025 + + at + + 10:00 AM +
++ 219 + + words +
+Teaching Holistic Health π§ββοΈ
+ Brainstorm for first in-class session
+ #school #kine210 #practicum
+ Topic idea: Mind-Body Connection
+ Getting class assignments next week but we should expect third, fourth, or fifth-graders. "Mind-Body Connection" could be a cool angle; lots of different ways to approach it, it's accessible to everyone, doesn't require any special gear, non-competitive, etc. We could start with a box breathing exercise to demonstrate the connection between thinking, doing, and feeling and use it as a segue into a lesson about thinking of ourselves as interconnected systems.
+ ${mockSvg}
+ Box breathing is a technique used to center and destress. Studies show controlled breathing has myriad physiological benefitsβit soothes the autonomic nervous system, reduces cortisol, etc. This might be a little advanced but I think we should try to find a way to explain these systems in a way that will make sense to elementary school students.
+
I think it would be great to start off by having the whole class try box breathing together and then talking about how it made everyone feel. Starting with something calming that gets everyone on the same page seems like a good idea in case we get a class right after recess, too. This is effectively an introduction to
+ `;
+
+ // Sync content when selected note changes
+ useEffect(() => {
+ if (!editorRef.current || !note) return;
+ if (currentNoteId.current === note.id) return; // avoid overwriting mid-edit
+ currentNoteId.current = note.id;
+
+ const isMock = note.title === 'Teaching Holistic Health π§ββοΈ';
+ let html = '';
+
+ if (isMock && (!note.content || !note.content.includes('highlight-cyan'))) {
+ html = mockHtml;
+ onUpdate({ ...note, content: mockHtml });
+ } else {
+ html =
+ note.content ||
+ `${note.title || 'New Note'}
${note.description || ''}
`;
+ }
+
+ editorRef.current.innerHTML = html;
+ }, [note?.id]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ const handleInput = () => {
+ if (!editorRef.current || !note) return;
+ const html = editorRef.current.innerHTML;
+
+ clearTimeout(saveTimer.current);
+ saveTimer.current = setTimeout(() => {
+ const title = getTitleFromContent(html);
+ const div = document.createElement('div');
+ div.innerHTML = html;
+ const fullText = (div.innerText || div.textContent || '').trim();
+ const description = fullText
+ .split('\n')
+ .slice(1)
+ .join(' ')
+ .trim()
+ .slice(0, 120);
+
+ onUpdate({
+ ...note,
+ title,
+ description,
+ content: html,
+ updatedAt: new Date().toISOString(),
+ });
+ }, 500);
+ };
+
+ const handleKeyDown = (e: React.KeyboardEventTest Note
Test description
',
+ updatedAt: '2020-05-14T11:01:58.135Z',
+ pinned: false,
+ date: '14th May 2020',
+ };
+
+ beforeEach(() => {
+ mockOnUpdate.mockClear();
+ document.execCommand = jest.fn();
+ });
+
+ it('should render empty state when no note is provided', () => {
+ render(New Title
New content
';
+ fireEvent.input(editor);
+ });
+
+ // Should not have been called yet due to 500ms debounce
+ expect(mockOnUpdate).not.toHaveBeenCalled();
+
+ act(() => {
+ jest.advanceTimersByTime(500);
+ });
+
+ expect(mockOnUpdate).toHaveBeenCalled();
+ const updatedNote = mockOnUpdate.mock.calls[0][0];
+ // In JSDOM innerText might still be "New TitleNew content" depending on version
+ // but we can adjust expectation or use a simpler title for testing
+ expect(updatedNote.title).toMatch(/New Title/);
+ });
+
+ it('should handle multiple inputs and debounce correctly', () => {
+ render(Update 1
';
+ fireEvent.input(editor);
+ });
+
+ act(() => {
+ jest.advanceTimersByTime(200);
+ editor.innerHTML = 'Update 2
';
+ fireEvent.input(editor);
+ });
+
+ act(() => {
+ jest.advanceTimersByTime(200);
+ });
+
+ // Should still not have been called because the second input reset the timer
+ expect(mockOnUpdate).not.toHaveBeenCalled();
+
+ act(() => {
+ jest.advanceTimersByTime(300);
+ });
+
+ expect(mockOnUpdate).toHaveBeenCalledTimes(1);
+ expect(mockOnUpdate.mock.calls[0][0].title).toMatch(/Update 2/);
+ });
+
+ it('should handle keyboard shortcuts (metaKey and ctrlKey)', () => {
+ render(Note ${i}
`,
+ date: new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ pinned: false,
+ });
+ }
+ });
+ return result;
+ };
- expect(result.current.notes).toEqual({});
+ it('should return empty default notes state', () => {
+ const { result } = renderHook(() => appStore(notesSelector));
+ expect(Object.keys(result.current.notes).length).toBe(0);
});
- it('should return default current id', () => {
+ it('should return 0 for default current count', () => {
const { result } = renderHook(() => appStore(notesSelector));
-
expect(result.current.getCurrentId()).toBe(0);
});
it('should add note', () => {
const { result } = renderHook(() => appStore(notesSelector));
- result.current.addNote({
- id: '1',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
+ act(() => {
+ result.current.addNote({
+ id: 'test-1',
+ title: 'Title',
+ description: 'Description',
+ content: 'Content
',
+ date: '2021-09-01',
+ updatedAt: '2021-09-01',
+ pinned: false,
+ });
});
- expect(result.current.selectedNote('1')).toEqual({
- id: '1',
+ expect(result.current.selectedNote('test-1')).toMatchObject({
+ id: 'test-1',
title: 'Title',
- description: 'Description',
- date: '2021-09-01',
});
});
it('should delete note', () => {
- const { result } = renderHook(() => appStore(notesSelector));
+ const result = setupNotes(1);
- result.current.addNote({
- id: '1',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
+ act(() => {
+ result.current.deleteNote('note-1');
});
- result.current.deleteNote('1');
-
- expect(result.current.selectedNote('1')).toBeUndefined();
+ expect(result.current.selectedNote('note-1')).toBeUndefined();
});
it('should edit note', () => {
- const { result } = renderHook(() => appStore(notesSelector));
-
- result.current.addNote({
- id: '1',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
- });
-
- result.current.editNote({
- id: '1',
- title: 'New Title',
- description: 'New Description',
- date: '2021-09-02',
+ const result = setupNotes(1);
+
+ act(() => {
+ result.current.editNote({
+ id: 'note-1',
+ title: 'New Title',
+ description: 'New Description',
+ content: 'New Content
',
+ date: '2021-09-01',
+ updatedAt: '2021-09-02',
+ pinned: false,
+ });
});
- expect(result.current.selectedNote('1')).toEqual({
- id: '1',
- title: 'New Title',
- description: 'New Description',
- date: '2021-09-02',
- });
+ expect(result.current.selectedNote('note-1').title).toBe('New Title');
});
it('should return selected note', () => {
- const { result } = renderHook(() => appStore(notesSelector));
+ const result = setupNotes(1);
- result.current.addNote({
- id: '1',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
- });
-
- expect(result.current.selectedNote('1')).toEqual({
- id: '1',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
+ expect(result.current.selectedNote('note-1')).toMatchObject({
+ id: 'note-1',
+ title: 'Note 1',
});
});
it('should return all notes', () => {
- const { result } = renderHook(() => appStore(notesSelector));
-
- result.current.addNote({
- id: '1',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
- });
-
- result.current.addNote({
- id: '2',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
- });
+ const result = setupNotes(2);
- expect(result.current.notes).toEqual({
- '1': {
- id: '1',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
- },
- '2': {
- id: '2',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
- },
- });
+ expect(result.current.notes['note-1']).toBeDefined();
+ expect(result.current.notes['note-2']).toBeDefined();
+ expect(Object.keys(result.current.notes).length).toBe(2);
});
});
diff --git a/src/store/appStore/slice/Notes/Notes.slice.ts b/src/store/appStore/slice/Notes/Notes.slice.ts
index 51a4995..25f66f6 100644
--- a/src/store/appStore/slice/Notes/Notes.slice.ts
+++ b/src/store/appStore/slice/Notes/Notes.slice.ts
@@ -19,6 +19,12 @@ const createNotesSlice: AppStoreSliceNote ${i}
`,
+ date: new Date().toISOString(),
+ updatedAt: new Date().toISOString(),
+ pinned: false,
+ });
+ }
+ });
+ return result;
+ };
- expect(result.current.Notes.notes).toEqual({});
+ it('should return default notes state (empty)', () => {
+ const { result } = renderHook(() => appStore());
+ expect(Object.keys(result.current.Notes.notes).length).toBe(0);
});
it('should add note', () => {
const { result } = renderHook(() => appStore());
- result.current.Notes.addNote({
- id: '1',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
+ act(() => {
+ result.current.Notes.addNote({
+ id: 'test-1',
+ title: 'Title',
+ description: 'Description',
+ content: 'Content
',
+ date: '2021-09-01',
+ updatedAt: '2021-09-01',
+ pinned: false,
+ });
});
- expect(result.current.Notes.notes['1']).toEqual({
- id: '1',
+ expect(result.current.Notes.notes['test-1']).toMatchObject({
+ id: 'test-1',
title: 'Title',
- description: 'Description',
- date: '2021-09-01',
});
});
it('should delete note', () => {
- const { result } = renderHook(() => appStore());
+ const result = setupNotes(1);
- result.current.Notes.addNote({
- id: '1',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
+ act(() => {
+ result.current.Notes.deleteNote('note-1');
});
- result.current.Notes.deleteNote('1');
+ expect(result.current.Notes.notes['note-1']).toBeUndefined();
+ });
- expect(result.current.Notes.notes['1']).toBeUndefined();
+ it('should not throw when deleting non-existent note', () => {
+ const { result } = renderHook(() => appStore());
+ expect(() => {
+ act(() => {
+ result.current.Notes.deleteNote('non-existent');
+ });
+ }).not.toThrow();
});
it('should edit note', () => {
- const { result } = renderHook(() => appStore());
+ const result = setupNotes(1);
- result.current.Notes.addNote({
- id: '1',
- title: 'Title',
- description: 'Description',
- date: '2021-09-01',
+ act(() => {
+ result.current.Notes.editNote({
+ id: 'note-1',
+ title: 'New Title',
+ description: 'New Description',
+ content: 'New Content
',
+ date: '2021-09-01',
+ updatedAt: '2021-09-02',
+ pinned: false,
+ });
});
- result.current.Notes.editNote({
- id: '1',
- title: 'New Title',
- description: 'New Description',
- date: '2021-09-02',
+ expect(result.current.Notes.notes['note-1'].title).toBe('New Title');
+ });
+
+ it('should toggle pin note', () => {
+ const result = setupNotes(1);
+
+ // note-1 is initially not pinned
+ expect(result.current.Notes.notes['note-1'].pinned).toBe(false);
+
+ act(() => {
+ result.current.Notes.pinNote('note-1');
});
+ expect(result.current.Notes.notes['note-1'].pinned).toBe(true);
- expect(result.current.Notes.notes['1']).toEqual({
- id: '1',
- title: 'New Title',
- description: 'New Description',
- date: '2021-09-02',
+ act(() => {
+ result.current.Notes.pinNote('note-1');
});
+ expect(result.current.Notes.notes['note-1'].pinned).toBe(false);
+ });
+
+ it('should not throw when pinning non-existent note', () => {
+ const { result } = renderHook(() => appStore());
+ expect(() => {
+ act(() => {
+ result.current.Notes.pinNote('non-existent');
+ });
+ }).not.toThrow();
});
});
diff --git a/src/store/appStore/slice/Notes/types.ts b/src/store/appStore/slice/Notes/types.ts
index e4135e8..48e83b5 100644
--- a/src/store/appStore/slice/Notes/types.ts
+++ b/src/store/appStore/slice/Notes/types.ts
@@ -1,8 +1,11 @@
export type Note = {
id: string;
title: string;
- description: string;
- date: string;
+ description: string; // preview snippet (backward compat)
+ date: string; // creation date
+ updatedAt: string; // last modification ISO string
+ content: string; // HTML content of the editor
+ pinned: boolean;
};
export type NotesState = {
@@ -13,6 +16,7 @@ export interface NotesAppAction {
addNote: (note: Note) => void;
deleteNote: (id: string) => void;
editNote: (note: Note) => void;
+ pinNote: (id: string) => void;
}
export type NotesStateSlice = NotesState & NotesAppAction;