Add "no notes" item

src/frontend/src/components/editors/NotesEditor.tsx

@@ -18,6 +18,7 @@ import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
 import { useCreateBlockNote } from '@blocknote/react';
 import {
+  Alert,
   Box,
   Button,
   Flex,
@@ -27,7 +28,7 @@ import {
   Tabs,
   Text
 } from '@mantine/core';
-import { IconCirclePlus } from '@tabler/icons-react';
+import { IconCirclePlus, IconInfoCircle } from '@tabler/icons-react';
 import { useNoteFields } from '../../forms/CommonForms';
 import { useCreateApiFormModal } from '../../hooks/UseForm';
 import { useUserState } from '../../states/UserState';
@@ -88,10 +89,15 @@ export default function NotesEditor({
     () =>
       user.hasChangePermission(modelType) &&
       notesQuery.isFetched &&
-      notesQuery.isSuccess,
+      notesQuery.isSuccess &&
+      !!notesQuery.data,
     [user, modelType, notesQuery]
   );
 
+  const hasNotes = useMemo(() => {
+    return notesQuery.data && notesQuery.data.length > 0;
+  }, [notesQuery.data]);
+
   const editor = useCreateBlockNote();
 
   const noteFields = useNoteFields({ modelType: modelType, modelId: modelId });
@@ -115,15 +121,24 @@ export default function NotesEditor({
       {createNote.modal}
       <Flex align='left'>
         <Box style={{ flex: 1 }}>
-          <Paper p='md' shadow='sm' withBorder>
+          <Paper p='sm' shadow='sm' withBorder>
+            {hasNotes ? (
+              <Stack gap='xs'>
                 <BlockNoteView
                   editor={editor}
                   content={''}
                   editable={canEdit}
                   style={{ minHeight: '400px' }}
                 />
+              </Stack>
+            ) : (
+              <Alert title={t`Notes`} icon={<IconInfoCircle />}>
+                {t`There are no notes yet for this item.`}
+              </Alert>
+            )}
           </Paper>
         </Box>
+        <Paper p='sm' shadow='sm' withBorder ml='md' style={{ width: '200px' }}>
           <Stack gap='xs'>
             <Button leftSection={<IconCirclePlus />} onClick={createNote.open}>
               {t`Add Note`}
@@ -133,7 +148,7 @@ export default function NotesEditor({
               placement='right'
               value={selectedNote?.toString()}
             >
-            <Tabs.List style={{ minWidth: '200px' }}>
+              <Tabs.List style={{ width: '100%' }}>
                 {notesQuery.data?.map((note: any) => (
                   <Tabs.Tab
                     key={note.pk}
@@ -148,6 +163,7 @@ export default function NotesEditor({
               </Tabs.List>
             </Tabs>
           </Stack>
+        </Paper>
       </Flex>
     </>
   );