feat: improve information panel header

- Move the "edit custom meta" option from the accordion header to the panel header
- Add a toggle button to show/hide the title box

Author: hamed-musallam

src/component/panels/Panels.tsx

@@ -1,19 +1,14 @@
 import styled from '@emotion/styled';
 import type { NMRiumPanelPreferences } from '@zakodium/nmrium-core';
 import { memo } from 'react';
-import { FaRegEdit } from 'react-icons/fa';
-import type { ToolbarItemProps } from 'react-science/ui';
 import { Accordion, Toolbar } from 'react-science/ui';
 
 import { usePreferences } from '../context/PreferencesContext.js';
-import { useActiveSpectrum } from '../hooks/useActiveSpectrum.js';
-import { useDialogToggle } from '../hooks/useDialogToggle.js';
 
 import type { AccordionItem } from './accordionItems.js';
 import { useAccordionItems } from './hooks/useAccordionItems.js';
 import { useGetPanelOptions } from './hooks/useGetPanelOptions.js';
 import { useTogglePanel } from './hooks/useTogglePanel.js';
-import { InformationEditionModal } from './informationPanel/InformationEditionModal.js';
 
 const Container = styled.div`
   flex: 1 1 0%;
@@ -23,9 +18,7 @@ const Container = styled.div`
 
 function PanelsInner() {
   const getPanelPreferences = useGetPanelOptions();
-  const { dialog, openDialog, closeDialog } = useDialogToggle({
-    informationModal: false,
-  });
+
   const { dispatch } = usePreferences();
   const items = useAccordionItems();
   function isOpened(item: AccordionItem) {
@@ -43,10 +36,6 @@ function PanelsInner() {
 
   return (
     <Container>
-      <InformationEditionModal
-        isOpen={dialog.informationModal}
-        onCloseDialog={closeDialog}
-      />
       <Accordion>
         {displayedPanels.map((item) => {
           const { title, component, id } = item;
@@ -63,15 +52,7 @@ function PanelsInner() {
                   payload: { id, options: { open: isOpened } },
                 });
               }}
-              renderToolbar={() => (
-                <RightButtons
-                  id={id}
-                  onEdit={(event) => {
-                    event.stopPropagation();
-                    openDialog('informationModal');
-                  }}
-                />
-              )}
+              renderToolbar={() => <RightButtons id={id} />}
             >
               {component}
             </Accordion.Item>
@@ -82,12 +63,8 @@ function PanelsInner() {
   );
 }
 
-function RightButtons(props: {
-  id: keyof NMRiumPanelPreferences;
-  onEdit: ToolbarItemProps['onClick'];
-}) {
-  const { onEdit, id } = props;
-  const activeSpectrum = useActiveSpectrum();
+function RightButtons(props: { id: keyof NMRiumPanelPreferences }) {
+  const { id } = props;
   const toggle = useTogglePanel();
   function handleClosePanel(event: any) {
     event?.stopPropagation();
@@ -96,19 +73,6 @@ function RightButtons(props: {
 
   return (
     <Toolbar>
-      {id === 'informationPanel' && (
-        <Toolbar.Item
-          disabled={!activeSpectrum}
-          tooltipProps={{ intent: !activeSpectrum ? 'danger' : 'none' }}
-          icon={<FaRegEdit />}
-          onClick={onEdit}
-          tooltip={
-            !activeSpectrum
-              ? 'Select a spectrum to edit its meta information'
-              : 'Edit spectrum meta information'
-          }
-        />
-      )}
       <Toolbar.Item
         icon="cross"
         tooltip="Close panel"

src/component/panels/informationPanel/InformationPanel.tsx

@@ -1,13 +1,48 @@
+import type { TooltipProps } from '@blueprintjs/core';
 import { useMemo } from 'react';
+import { FaRegEdit } from 'react-icons/fa';
+import { TbTableShortcut } from 'react-icons/tb';
 import type { InfoPanelData } from 'react-science/ui';
-import { InfoPanel } from 'react-science/ui';
+import { InfoPanel, Toolbar } from 'react-science/ui';
 
+import { usePreferences } from '../../context/PreferencesContext.tsx';
+import { useActiveSpectrum } from '../../hooks/useActiveSpectrum.ts';
+import { useDialogToggle } from '../../hooks/useDialogToggle.ts';
 import useSpectrum from '../../hooks/useSpectrum.js';
+import { booleanToString } from '../../utility/booleanToString.ts';
+
+import { InformationEditionModal } from './InformationEditionModal.tsx';
 
 const emptyData = { info: {}, meta: {} };
 
+function getToggleInformationBlock(
+  isVisible: boolean,
+  isSpectrumSelected: boolean,
+) {
+  if (!isSpectrumSelected) {
+    return 'Select a spectrum to display the information block';
+  }
+
+  return `${booleanToString(!isVisible, { trueLabel: 'Display' })} information block}`;
+}
+
+function getEditTooltip(isSpectrumSelected: boolean) {
+  if (!isSpectrumSelected) {
+    return 'Select a spectrum to edit its meta information';
+  }
+  return 'Edit spectrum meta information';
+}
+
 export function InformationPanel() {
   const { info, meta, customInfo } = useSpectrum(emptyData);
+  const activeSpectrum = useActiveSpectrum();
+  const {
+    dispatch,
+    current: { infoBlock },
+  } = usePreferences();
+  const { dialog, openDialog, closeDialog } = useDialogToggle({
+    informationModal: false,
+  });
   const data: InfoPanelData[] = useMemo(
     () => [
       { description: 'Custom information', data: customInfo || {} },
@@ -17,5 +52,51 @@ export function InformationPanel() {
     [customInfo, info, meta],
   );
 
-  return <InfoPanel data={data} title="" />;
+  const toolTipProps: Omit<TooltipProps, 'content'> = {
+    intent: !activeSpectrum ? 'danger' : 'none',
+  };
+
+  function handleToggleInformationBlock() {
+    dispatch({
+      type: 'TOGGLE_INFORMATION_BLOCK',
+      payload: {},
+    });
+  }
+
+  return (
+    <>
+      <InformationEditionModal
+        isOpen={dialog.informationModal}
+        onCloseDialog={closeDialog}
+      />
+      <InfoPanel
+        leftElement={
+          <Toolbar>
+            <Toolbar.Item
+              disabled={!activeSpectrum}
+              tooltipProps={toolTipProps}
+              icon={<TbTableShortcut />}
+              onClick={handleToggleInformationBlock}
+              active={infoBlock.visible}
+              tooltip={getToggleInformationBlock(
+                infoBlock.visible,
+                !!activeSpectrum,
+              )}
+            />
+            <Toolbar.Item
+              disabled={!activeSpectrum}
+              tooltipProps={toolTipProps}
+              icon={<FaRegEdit />}
+              onClick={() => {
+                openDialog('informationModal');
+              }}
+              tooltip={getEditTooltip(!!activeSpectrum)}
+            />
+          </Toolbar>
+        }
+        data={data}
+        title=""
+      />
+    </>
+  );
 }