18543522652

Committed 15 Oct 2025 09:43PM UTC coverage: 23.472% (+1.5%) from 21.938%

Build # 18543522652

Build Type

push

github

Committed by

jcubic

Commit Message

Base UI

Run Details

64 of 98 branches covered (65.31%)

Branch coverage included in aggregate %.

228 of 853 new or added lines in 12 files covered. (26.73%)

2 existing lines in 2 files now uncovered.

439 of 2045 relevant lines covered (21.47%)

2.66 hits per line

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

1.56

/src/components/notes/MiddlePanel.tsx

'use client';

import { Box, Text, Flex } from '@chakra-ui/react';
import type { Note } from '@prisma/client';
import type { SaveStatus } from '@/types/notes';
import type { EditorRef } from '@/types/editor';
import Editor from '@/components/Editor';

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

export default function MiddlePanel({
  note,
  content,
  saveStatus,
  onContentChange,
  onEditorReady
}: MiddlePanelProps) {
  const getSaveStatusText = () => {
    switch (saveStatus) {
      case 'saving':
        return 'Saving...';
      case 'saved':
        return 'Saved';
      case 'error':
        return 'Save failed';
      default:
        return '';
    }
  };

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

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

      {/* Editor area */}
      <Box flex={1}>
        {note ? (
          <Editor
            value={content}
            onChange={(value) => onContentChange(value || '')}
            onEditorReady={onEditorReady}
            placeholder={
              note.content === null
                ? '# Welcome to SNApp\n\nThis is your example note. You can:\n\n- Edit this content with **Markdown** syntax\n- Save with Ctrl+S\n- Create new notes with Ctrl+N\n- Double-click note names to rename them\n\nStart typing to replace this content!'
                : 'Start writing your note...'
            }
            height="100%"
            theme="light" // TODO: Add theme context for dark/light mode
          />
        ) : (
          <Flex h="100%" align="center" justify="center">
            <Text color="fg.muted">Select or create a note to start editing</Text>
          </Flex>
        )}
      </Box>
    </Box>
  );
}

1	'use client';	1✔
2
NEW 3	import { Box, Text, Flex } from '@chakra-ui/react';	×
4	import type { Note } from '@prisma/client';
5	import type { SaveStatus } from '@/types/notes';
6	import type { EditorRef } from '@/types/editor';
NEW 7	import Editor from '@/components/Editor';	×
8
9	interface MiddlePanelProps {
10	note: Note \| null;
11	content: string;
12	saveStatus: SaveStatus;
13	onContentChange: (content: string) => void;
14	onSave: () => void;
15	onEditorReady?: (editorRef: EditorRef) => void;
16	}
17
NEW 18	export default function MiddlePanel({	×
NEW 19	note,	×
NEW 20	content,	×
NEW 21	saveStatus,	×
NEW 22	onContentChange,	×
NEW 23	onEditorReady	×
NEW 24	}: MiddlePanelProps) {	×
NEW 25	const getSaveStatusText = () => {	×
NEW 26	switch (saveStatus) {	×
NEW 27	case 'saving':	×
NEW 28	return 'Saving...';	×
NEW 29	case 'saved':	×
NEW 30	return 'Saved';	×
NEW 31	case 'error':	×
NEW 32	return 'Save failed';	×
NEW 33	default:	×
NEW 34	return '';	×
NEW 35	}	×
NEW 36	};	×
37
NEW 38	const getSaveStatusColor = () => {	×
NEW 39	switch (saveStatus) {	×
NEW 40	case 'saving':	×
NEW 41	return 'blue.500';	×
NEW 42	case 'saved':	×
NEW 43	return 'green.500';	×
NEW 44	case 'error':	×
NEW 45	return 'red.500';	×
NEW 46	default:	×
NEW 47	return 'gray.500';	×
NEW 48	}	×
NEW 49	};	×
50
NEW 51	return (	×
NEW 52	<Box as="main" h="100%" display="flex" flexDirection="column" p={4}>	×
53	{/* Save status bar */}
NEW 54	<Flex justify="space-between" align="center" mb={2}>	×
NEW 55	<Text fontSize="lg" fontWeight="semibold">	×
NEW 56	{note?.name \|\| 'Select a note'}	×
NEW 57	</Text>	×
NEW 58	{saveStatus !== 'idle' && (	×
NEW 59	<Text fontSize="sm" color={getSaveStatusColor()}>	×
NEW 60	{getSaveStatusText()}	×
NEW 61	</Text>	×
62	)}
NEW 63	</Flex>	×
64
65	{/* Editor area */}
NEW 66	<Box flex={1}>	×
NEW 67	{note ? (	×
NEW 68	<Editor	×
NEW 69	value={content}	×
NEW 70	onChange={(value) => onContentChange(value \|\| '')}	×
NEW 71	onEditorReady={onEditorReady}	×
NEW 72	placeholder={	×
NEW 73	note.content === null	×
NEW 74	? '# Welcome to SNApp\n\nThis is your example note. You can:\n\n- Edit this content with Markdown syntax\n- Save with Ctrl+S\n- Create new notes with Ctrl+N\n- Double-click note names to rename them\n\nStart typing to replace this content!'	×
NEW 75	: 'Start writing your note...'	×
76	}
NEW 77	height="100%"	×
NEW 78	theme="light" // TODO: Add theme context for dark/light mode	×
NEW 79	/>	×
80	) : (
NEW 81	<Flex h="100%" align="center" justify="center">	×
NEW 82	<Text color="fg.muted">Select or create a note to start editing</Text>	×
NEW 83	</Flex>	×
84	)}
NEW 85	</Box>	×
NEW 86	</Box>	×
87	);
NEW 88	}	×

jcubic / 10xDevs / 18543522652

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