18858339315

Committed 27 Oct 2025 10:58PM UTC coverage: 41.94% (+1.2%) from 40.715%

Build # 18858339315

Build Type

push

github

Committed by

jcubic

Commit Message

update E2E tests

Run Details

206 of 506 branches covered (40.71%)

Branch coverage included in aggregate %.

408 of 958 relevant lines covered (42.59%)

42.24 hits per line

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

72.73

/src/components/notes/MiddlePanel.tsx

'use client';

import { Box, Text, Flex } from '@chakra-ui/react';
import { memo, useMemo, useCallback } from 'react';
import type { NoteTreeNode } from '@/types/tree';
import type { SaveStatus } from '@/types/notes';
import type { EditorRef } from '@/types/editor';
import Editor from '@/components/Editor';

interface MiddlePanelProps {
  note: NoteTreeNode | null;
  content: string;
  saveStatus: SaveStatus;
  selectedLine?: number;
  onContentChange: (content: string) => void;
  onSave: () => void;
  onEditorReady?: (editorRef: EditorRef) => void;
}

const MiddlePanel = memo(function MiddlePanel({
  note,
  content,
  saveStatus,
  selectedLine,
  onContentChange,
  onSave,
  onEditorReady
}: MiddlePanelProps) {
  const saveStatusText = useMemo(() => {
    switch (saveStatus) {
      case 'saving':
        return 'Saving...';
      case 'saved':
        return 'Saved';
      case 'error':
        return 'Save failed';
      default:
        return '';
    }
  }, [saveStatus]);

  const saveStatusColor = useMemo(() => {
    switch (saveStatus) {
      case 'saving':
        return 'blue.500';
      case 'saved':
        return 'green.500';
      case 'error':
        return 'red.500';
      default:
        return 'gray.500';
    }
  }, [saveStatus]);

  const handleContentChange = useCallback(
    (value: string | undefined) => {
      onContentChange(value || '');
    },
    [onContentChange]
  );

  return (
    <Box as="main" h="100%" display="flex" flexDirection="column">
      {/* Save status bar */}
      <Flex
        justify="space-between"
        align="center"
        p={4}
        borderBottom="1px solid"
        borderColor="border"
      >
        <Text fontSize="lg" fontWeight="semibold">
          {note?.name || 'Select a note'}
        </Text>
        {saveStatus !== 'idle' && (
          <Text fontSize="sm" color={saveStatusColor}>
            {saveStatusText}
          </Text>
        )}
      </Flex>

      {/* Editor area */}
      <Box flex={1} overflow="hidden" position="relative" minH={0}>
        {note ? (
          <Editor
            value={content}
            onChange={handleContentChange}
            selectedLine={selectedLine}
            onEditorReady={onEditorReady}
            onSave={onSave}
            placeholder="Start writing your note..."
          />
        ) : (
          <Flex h="100%" align="center" justify="center">
            <Text color="fg.muted">Select or create a note to start editing</Text>
          </Flex>
        )}
      </Box>
    </Box>
  );
});

export default MiddlePanel;

1	'use client';
2
3	import { Box, Text, Flex } from '@chakra-ui/react';
4	import { memo, useMemo, useCallback } from 'react';
5	import type { NoteTreeNode } from '@/types/tree';
6	import type { SaveStatus } from '@/types/notes';
7	import type { EditorRef } from '@/types/editor';
8	import Editor from '@/components/Editor';
9
10	interface MiddlePanelProps {
11	note: NoteTreeNode \| null;
12	content: string;
13	saveStatus: SaveStatus;
14	selectedLine?: number;
15	onContentChange: (content: string) => void;
16	onSave: () => void;
17	onEditorReady?: (editorRef: EditorRef) => void;
18	}
19
20	const MiddlePanel = memo(function MiddlePanel({	27✔
21	note,
22	content,
23	saveStatus,
24	selectedLine,
25	onContentChange,
26	onSave,
27	onEditorReady
28	}: MiddlePanelProps) {
29	const saveStatusText = useMemo(() => {	192✔
30	switch (saveStatus) {	64!
31	case 'saving':
32	return 'Saving...';	2✔
33	case 'saved':
34	return 'Saved';	4✔
35	case 'error':
36	return 'Save failed';	×
37	default:
38	return '';	58✔
39	}
40	}, [saveStatus]);
41
42	const saveStatusColor = useMemo(() => {	192✔
43	switch (saveStatus) {	64!
44	case 'saving':
45	return 'blue.500';	2✔
46	case 'saved':
47	return 'green.500';	4✔
48	case 'error':
49	return 'red.500';	×
50	default:
51	return 'gray.500';	58✔
52	}
53	}, [saveStatus]);
54
55	const handleContentChange = useCallback(	192✔
56	(value: string \| undefined) => {
57	onContentChange(value \|\| '');	19!
58	},
59	[onContentChange]
60	);
61
62	return (	×
63	<Box as="main" h="100%" display="flex" flexDirection="column">
64	{/* Save status bar */}
65	<Flex
66	justify="space-between"
67	align="center"
68	p={4}
69	borderBottom="1px solid"
70	borderColor="border"
71	>
72	<Text fontSize="lg" fontWeight="semibold">
73	{note?.name \|\| 'Select a note'}	266✔
74	</Text>
75	{saveStatus !== 'idle' && (	192!
76	<Text fontSize="sm" color={saveStatusColor}>
77	{saveStatusText}
78	</Text>
79	)}
80	</Flex>
81
82	{/* Editor area */}
83	<Box flex={1} overflow="hidden" position="relative" minH={0}>
84	{note ? (	×
85	<Editor	118✔
86	value={content}
87	onChange={handleContentChange}
88	selectedLine={selectedLine}
89	onEditorReady={onEditorReady}
90	onSave={onSave}
91	placeholder="Start writing your note..."
92	/>
93	) : (
94	<Flex h="100%" align="center" justify="center">
95	<Text color="fg.muted">Select or create a note to start editing</Text>
96	</Flex>
97	)}
98	</Box>
99	</Box>
100	);
101	});
102
103	export default MiddlePanel;

jcubic / 10xDevs / 18858339315

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