18840571689

Committed 27 Oct 2025 12:14PM UTC coverage: 23.648% (-1.9%) from 25.594%

Build # 18840571689

Build Type

push

github

Committed by

jcubic

Commit Message

update workflow

Run Details

1783 of 8857 branches covered (20.13%)

Branch coverage included in aggregate %.

761 of 1901 relevant lines covered (40.03%)

1814.76 hits per line

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

0.0

/src/components/notes/MiddlePanel.tsx

'use client';

import { Box, Text, Flex } from '@chakra-ui/react';
import { useState, useEffect, 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 [welcomeContent, setWelcomeContent] = useState<string>('');

  // Load welcome content when component mounts
  useEffect(() => {
    const loadWelcomeContent = async () => {
      try {
        const response = await fetch('/samples/welcome.md');
        const text = await response.text();
        setWelcomeContent(text);
      } catch (error) {
        console.error('Failed to load welcome content:', error);
        setWelcomeContent('# Welcome to SNApp\n\nStart writing your note...');
      }
    };

    loadWelcomeContent();
  }, []);
  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={note.data?.content === null ? welcomeContent : 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 { useState, useEffect, 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({	×
21	note,
22	content,
23	saveStatus,
24	selectedLine,
25	onContentChange,
26	onSave,
27	onEditorReady
28	}: MiddlePanelProps) {
29	const [welcomeContent, setWelcomeContent] = useState<string>('');	×
30
31	// Load welcome content when component mounts
32	useEffect(() => {	×
33	const loadWelcomeContent = async () => {	×
34	try {	×
35	const response = await fetch('/samples/welcome.md');	×
36	const text = await response.text();	×
37	setWelcomeContent(text);	×
38	} catch (error) {
39	console.error('Failed to load welcome content:', error);	×
40	setWelcomeContent('# Welcome to SNApp\n\nStart writing your note...');	×
41	}
42	};
43
44	loadWelcomeContent();	×
45	}, []);
46	const saveStatusText = useMemo(() => {	×
47	switch (saveStatus) {	×
48	case 'saving':
49	return 'Saving...';	×
50	case 'saved':
51	return 'Saved';	×
52	case 'error':
53	return 'Save failed';	×
54	default:
55	return '';	×
56	}
57	}, [saveStatus]);
58
59	const saveStatusColor = useMemo(() => {	×
60	switch (saveStatus) {	×
61	case 'saving':
62	return 'blue.500';	×
63	case 'saved':
64	return 'green.500';	×
65	case 'error':
66	return 'red.500';	×
67	default:
68	return 'gray.500';	×
69	}
70	}, [saveStatus]);
71
72	const handleContentChange = useCallback(	×
73	(value: string \| undefined) => {
74	onContentChange(value \|\| '');	×
75	},
76	[onContentChange]
77	);
78
79	return (	×
80	<Box as="main" h="100%" display="flex" flexDirection="column">
81	{/* Save status bar */}
82	<Flex
83	justify="space-between"
84	align="center"
85	p={4}
86	borderBottom="1px solid"
87	borderColor="border"
88	>
89	<Text fontSize="lg" fontWeight="semibold">
90	{note?.name \|\| 'Select a note'}	×
91	</Text>
92	{saveStatus !== 'idle' && (	×
93	<Text fontSize="sm" color={saveStatusColor}>
94	{saveStatusText}
95	</Text>
96	)}
97	</Flex>
98
99	{/* Editor area */}
100	<Box flex={1} overflow="hidden" position="relative" minH={0}>
101	{note ? (	×
102	<Editor
103	value={note.data?.content === null ? welcomeContent : content}	×
104	onChange={handleContentChange}
105	selectedLine={selectedLine}
106	onEditorReady={onEditorReady}
107	onSave={onSave}
108	placeholder="Start writing your note..."
109	/>
110	) : (
111	<Flex h="100%" align="center" justify="center">
112	<Text color="fg.muted">Select or create a note to start editing</Text>
113	</Flex>
114	)}
115	</Box>
116	</Box>
117	);
118	});
119
120	export default MiddlePanel;

jcubic / 10xDevs / 18840571689

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