Improve "read only" mode

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

@@ -1,4 +1,5 @@
 import { t } from '@lingui/macro';
+import { ActionIcon, Group, Paper, Stack } from '@mantine/core';
 import { notifications } from '@mantine/notifications';
 import {
   AdmonitionDirectiveDescriptor,
@@ -29,7 +30,12 @@ import {
   toolbarPlugin
 } from '@mdxeditor/editor';
 import '@mdxeditor/editor/style.css';
-import { IconDeviceFloppy, IconEdit, IconEye } from '@tabler/icons-react';
+import {
+  IconDeviceFloppy,
+  IconEdit,
+  IconEye,
+  IconX
+} from '@tabler/icons-react';
 import { useQuery } from '@tanstack/react-query';
 import { ReactNode, useCallback, useEffect, useMemo, useState } from 'react';
 import React from 'react';
@@ -39,6 +45,7 @@ import { ApiEndpoints } from '../../enums/ApiEndpoints';
 import { ModelType } from '../../enums/ModelType';
 import { apiUrl } from '../../states/ApiState';
 import { useLocalState } from '../../states/LocalState';
+import { ActionButton } from '../buttons/ActionButton';
 import { ModelInformationDict } from '../render/ModelType';
 
 /*
@@ -186,28 +193,15 @@ export default function NotesEditor({
       linkPlugin(),
       linkDialogPlugin(),
       listsPlugin(),
-      markdownShortcutPlugin(),
       quotePlugin(),
       tablePlugin(),
-      thematicBreakPlugin()
+      thematicBreakPlugin(),
+      markdownShortcutPlugin()
     ];
 
     let toolbar: ReactNode[] = [];
-    if (editable) {
+    if (editable && editing) {
       toolbar = [
-        <ButtonWithTooltip
-          key="toggle-editing"
-          aria-label="toggle-notes-editing"
-          title={editing ? t`Preview Notes` : t`Edit Notes`}
-          onClick={() => setEditing(!editing)}
-        >
-          {editing ? <IconEye /> : <IconEdit />}
-        </ButtonWithTooltip>
-      ];
-
-      if (editing) {
-        toolbar = [
-          ...toolbar,
         <ButtonWithTooltip
           key="save-notes"
           aria-label="save-notes"
@@ -215,7 +209,16 @@ export default function NotesEditor({
           title={t`Save Notes`}
           disabled={false}
         >
-            <IconDeviceFloppy />
+          <IconDeviceFloppy color="green" />
+        </ButtonWithTooltip>,
+        <ButtonWithTooltip
+          key="close-notes"
+          aria-label="close-notes"
+          onClick={() => setEditing(false)}
+          title={t`Close Editor`}
+          disabled={false}
+        >
+          <IconX color="red" />
         </ButtonWithTooltip>,
         <Separator key="separator-1" />,
         <UndoRedo key="undo-redo" />,
@@ -232,7 +235,6 @@ export default function NotesEditor({
         <InsertThematicBreak key="insert-thematic-break" />
       ];
     }
-    }
 
     // If the user is allowed to edit, then add the toolbar
     if (editable) {
@@ -259,14 +261,29 @@ export default function NotesEditor({
   ]);
 
   return (
+    <Paper p="sm" shadow="xs">
+      <Stack gap="xs">
+        {editable && (
+          <Group justify="left">
+            {!editing && (
+              <ActionButton
+                tooltip={t`Edit`}
+                onClick={() => setEditing(true)}
+                icon={<IconEdit color="blue" />}
+              />
+            )}
+          </Group>
+        )}
         <MDXEditor
           ref={ref}
           markdown={''}
-      readOnly={!editable}
+          readOnly={!editing}
           plugins={plugins}
           toMarkdownOptions={{
             rule: '-' // Use dashes for thematic breaks
           }}
         />
+      </Stack>
+    </Paper>
   );
 }