18574558796

Committed 16 Oct 2025 08:56PM UTC coverage: 21.131% (+0.2%) from 20.966%

Build # 18574558796

Build Type

push

github

Committed by

jcubic

Commit Message

add confirmation dialog

Run Details

59 of 85 branches covered (69.41%)

Branch coverage included in aggregate %.

423 of 2196 relevant lines covered (19.26%)

2.41 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

81.11

/src/components/notes/LeftPanel.tsx

'use client';

import { useState, useMemo } from 'react';
import { Box, Button, Input, Stack, Text } from '@chakra-ui/react';
import type { NoteTreeNode, TreeNode } from '@/types/tree';

import TreeView from '@/components/TreeView';
import { ConfirmationDialog } from '@/components/ui/confirmation-dialog';
import { useNotesContext } from './NotesContext';

interface LeftPanelProps {
  notes: NoteTreeNode[];
  selectedNoteId: number | null;
  onNoteSelect: (id: number) => void;
  onNewNote: () => void;
  onDeleteNote: (id: number) => void;
  onRenameNote: (id: number, name: string) => Promise<void>;
}

export default function LeftPanel({
  notes,
  selectedNoteId,
  onNoteSelect,
  onNewNote,
  onDeleteNote,
  onRenameNote
}: LeftPanelProps) {
  const { getSelectedNote } = useNotesContext();
  const [filter, setFilter] = useState('');
  const [deleteDialog, setDeleteDialog] = useState<{
    isOpen: boolean;
    note: NoteTreeNode | null;
  }>({ isOpen: false, note: null });

  // Get unsaved changes status for the selected note
  const selectedNote = getSelectedNote();
  const hasUnsavedChanges = selectedNote?.data?.dirty || false;

  // Filter and prepare notes for TreeView
  const treeData = useMemo<NoteTreeNode[]>(() => {
    return notes
      .filter((note) => note.name.toLowerCase().includes(filter.toLowerCase()))
      .sort((a, b) => a.id - b.id);
  }, [notes, filter]);

  // Handle TreeNode selection
  const handleTreeNodeSelect = (node: TreeNode) => {
    onNoteSelect((node as NoteTreeNode).id);
  };

  // Handle TreeNode rename
  const handleTreeNodeRename = async (node: TreeNode, newName: string) => {
    await onRenameNote?.((node as NoteTreeNode).id, newName);
  };

  // Handle TreeNode delete
  const handleTreeNodeDelete = (node: TreeNode) => {
    setDeleteDialog({ isOpen: true, note: node as NoteTreeNode });
  };

  const handleConfirmDelete = async () => {
    if (deleteDialog.note) {
      await onDeleteNote?.(deleteDialog.note.id);
    }
  };

  const handleCloseDeleteDialog = () => {
    setDeleteDialog({ isOpen: false, note: null });
  };

  return (
    <Box as="aside" h="100%" display="flex" flexDirection="column" p={6} bg="bg.subtle">
      <Stack gap={4} align="stretch">
        <Button colorPalette="blue" variant="solid" onClick={onNewNote}>
          New Note
        </Button>

        <Input
          p={3}
          placeholder="Filter notes..."
          value={filter}
          onChange={(e) => setFilter(e.target.value)}
          size="sm"
        />
      </Stack>

      <Box flex={1} mt={4} overflow="auto">
        {treeData.length === 0 ? (
          <Text textAlign="center" color="fg.muted" fontSize="sm" mt={4}>
            {notes.length === 0 ? 'No notes yet' : 'No matching notes'}
          </Text>
        ) : (
          <TreeView
            data={treeData}
            onNodeSelect={handleTreeNodeSelect}
            onNodeRename={handleTreeNodeRename}
            onNodeDelete={handleTreeNodeDelete}
            selectedNodeId={selectedNoteId?.toString()}
            hasUnsavedChanges={hasUnsavedChanges}
            title=""
          />
        )}
      </Box>

      <ConfirmationDialog
        isOpen={deleteDialog.isOpen}
        onClose={handleCloseDeleteDialog}
        onConfirm={handleConfirmDelete}
        title="Delete Note"
        message={`Are you sure you want to delete "${deleteDialog.note?.name}"? This action cannot be undone.`}
        confirmText="Delete"
        cancelText="Cancel"
        variant="danger"
      />
    </Box>
  );
}

1	'use client';
2
3	import { useState, useMemo } from 'react';	1✔
4	import { Box, Button, Input, Stack, Text } from '@chakra-ui/react';	1✔
5	import type { NoteTreeNode, TreeNode } from '@/types/tree';
6
7	import TreeView from '@/components/TreeView';	1✔
8	import { ConfirmationDialog } from '@/components/ui/confirmation-dialog';	1✔
9	import { useNotesContext } from './NotesContext';	1✔
10
11	interface LeftPanelProps {
12	notes: NoteTreeNode[];
13	selectedNoteId: number \| null;
14	onNoteSelect: (id: number) => void;
15	onNewNote: () => void;
16	onDeleteNote: (id: number) => void;
17	onRenameNote: (id: number, name: string) => Promise<void>;
18	}
19
20	export default function LeftPanel({	6✔
21	notes,	6✔
22	selectedNoteId,	6✔
23	onNoteSelect,	6✔
24	onNewNote,	6✔
25	onDeleteNote,	6✔
26	onRenameNote	6✔
27	}: LeftPanelProps) {	6✔
28	const { getSelectedNote } = useNotesContext();	6✔
29	const [filter, setFilter] = useState('');	6✔
30	const [deleteDialog, setDeleteDialog] = useState<{	6✔
31	isOpen: boolean;
32	note: NoteTreeNode \| null;
33	}>({ isOpen: false, note: null });	6✔
34
35	// Get unsaved changes status for the selected note
36	const selectedNote = getSelectedNote();	6✔
37	const hasUnsavedChanges = selectedNote?.data?.dirty \|\| false;	6!
38
39	// Filter and prepare notes for TreeView
40	const treeData = useMemo<NoteTreeNode[]>(() => {	6✔
41	return notes	6✔
42	.filter((note) => note.name.toLowerCase().includes(filter.toLowerCase()))	6✔
43	.sort((a, b) => a.id - b.id);	6✔
44	}, [notes, filter]);	6✔
45
46	// Handle TreeNode selection
47	const handleTreeNodeSelect = (node: TreeNode) => {	6✔
48	onNoteSelect((node as NoteTreeNode).id);	×
49	};	×
50
51	// Handle TreeNode rename
52	const handleTreeNodeRename = async (node: TreeNode, newName: string) => {	6✔
53	await onRenameNote?.((node as NoteTreeNode).id, newName);	1✔
54	};	1✔
55
56	// Handle TreeNode delete
57	const handleTreeNodeDelete = (node: TreeNode) => {	6✔
58	setDeleteDialog({ isOpen: true, note: node as NoteTreeNode });	×
59	};	×
60
61	const handleConfirmDelete = async () => {	6✔
62	if (deleteDialog.note) {	×
63	await onDeleteNote?.(deleteDialog.note.id);	×
64	}	×
65	};	×
66
67	const handleCloseDeleteDialog = () => {	6✔
68	setDeleteDialog({ isOpen: false, note: null });	×
69	};	×
70
71	return (	6✔
72	<Box as="aside" h="100%" display="flex" flexDirection="column" p={6} bg="bg.subtle">	6✔
73	<Stack gap={4} align="stretch">	6✔
74	<Button colorPalette="blue" variant="solid" onClick={onNewNote}>	6✔
75	New Note
76	</Button>	6✔
77
78	<Input	6✔
79	p={3}	6✔
80	placeholder="Filter notes..."	6✔
81	value={filter}	6✔
82	onChange={(e) => setFilter(e.target.value)}	6✔
83	size="sm"	6✔
84	/>	6✔
85	</Stack>	6✔
86
87	<Box flex={1} mt={4} overflow="auto">	6✔
88	{treeData.length === 0 ? (	6!
89	<Text textAlign="center" color="fg.muted" fontSize="sm" mt={4}>	×
90	{notes.length === 0 ? 'No notes yet' : 'No matching notes'}	×
91	</Text>	×
92	) : (
93	<TreeView	6✔
94	data={treeData}	6✔
95	onNodeSelect={handleTreeNodeSelect}	6✔
96	onNodeRename={handleTreeNodeRename}	6✔
97	onNodeDelete={handleTreeNodeDelete}	6✔
98	selectedNodeId={selectedNoteId?.toString()}	6!
99	hasUnsavedChanges={hasUnsavedChanges}	6✔
100	title=""	6✔
101	/>	6✔
102	)}
103	</Box>	6✔
104
105	<ConfirmationDialog	6✔
106	isOpen={deleteDialog.isOpen}	6✔
107	onClose={handleCloseDeleteDialog}	6✔
108	onConfirm={handleConfirmDelete}	6✔
109	title="Delete Note"	6✔
110	message={`Are you sure you want to delete "${deleteDialog.note?.name}"? This action cannot be undone.`}	6!
111	confirmText="Delete"	6✔
112	cancelText="Cancel"	6✔
113	variant="danger"	6✔
114	/>	6✔
115	</Box>	6✔
116	);
117	}	6✔

jcubic / 10xDevs / 18574558796

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous