feat: add tools bar panel

src/component/modal/setting/tanstack_general_settings/general_settings_dialog_body.tsx

@@ -15,6 +15,7 @@ import { NucleiTab } from './tabs/nuclei_tab.js';
 import { PanelsTab } from './tabs/panels_tab.js';
 import { SpectraColorsTab } from './tabs/spectra_colors_tab.tsx';
 import { TitleBlockTab } from './tabs/title_block_tab.js';
+import { ToolsTab } from './tabs/tools_tab.tsx';
 import { defaultGeneralSettingsFormValues } from './validation.js';
 
 const Tabs = styled(BPTabs)`
@@ -66,6 +67,8 @@ export const GeneralSettingsDialogBody = withForm({
 
             <Tab id="panels" title="Panels" panel={<PanelsTab form={form} />} />
 
+            <Tab id="tools" title="Tools" panel={<ToolsTab form={form} />} />
+
             <Tab
               title="Databases"
               id="databases"

src/component/modal/setting/tanstack_general_settings/tabs/panels_tab.tsx

@@ -46,14 +46,6 @@ const SpectraSettings = withFieldGroup({
             <Select label="Processing" items={displayPanelsStatus} />
           )}
         </AppField>
-        <AppField name="multipleSpectraAnalysisPanel">
-          {({ Select }) => (
-            <Select
-              label="Multiple spectra analysis"
-              items={displayPanelsStatus}
-            />
-          )}
-        </AppField>
       </Section>
     );
   },
@@ -65,7 +57,7 @@ const Spectra1dSettings = withFieldGroup({
     const { Section, AppField } = group;
 
     return (
-      <Section title="Spectra 1D">
+      <Section title="1D Spectra">
         <AppField name="peaksPanel">
           {({ Select }) => <Select label="Peaks" items={displayPanelsStatus} />}
         </AppField>
@@ -92,6 +84,14 @@ const Spectra1dSettings = withFieldGroup({
             <Select label="Spectrum simulation" items={displayPanelsStatus} />
           )}
         </AppField>
+        <AppField name="multipleSpectraAnalysisPanel">
+          {({ Select }) => (
+            <Select
+              label="Multiple spectra analysis"
+              items={displayPanelsStatus}
+            />
+          )}
+        </AppField>
       </Section>
     );
   },
@@ -103,7 +103,7 @@ const Spectra2dSettings = withFieldGroup({
     const { Section, AppField } = group;
 
     return (
-      <Section title="Spectra 2D">
+      <Section title="2D Spectra">
         <AppField name="zonesPanel">
           {({ Select }) => <Select label="Zones" items={displayPanelsStatus} />}
         </AppField>

src/component/modal/setting/tanstack_general_settings/tabs/tools_tab.tsx

@@ -0,0 +1,155 @@
+import { withFieldGroup, withForm } from 'react-science/ui';
+
+import { defaultGeneralSettingsFormValues } from '../validation.ts';
+
+export const ToolsTab = withForm({
+  defaultValues: defaultGeneralSettingsFormValues,
+  render: ({ form }) => {
+    return (
+      <>
+        <ChartTools form={form} fields="display.toolBarButtons" />
+        <ImportExportTools form={form} fields="display.toolBarButtons" />
+        <Spectra1DManipulationTools
+          form={form}
+          fields="display.toolBarButtons"
+        />
+        <Spectra2DManipulationTools
+          form={form}
+          fields="display.toolBarButtons"
+        />
+      </>
+    );
+  },
+});
+
+const ChartTools = withFieldGroup({
+  defaultValues: defaultGeneralSettingsFormValues.display.toolBarButtons,
+  render: ({ group }) => {
+    const { Section, AppField } = group;
+
+    return (
+      <Section title="Chart">
+        <AppField name="zoom">
+          {({ Checkbox }) => <Checkbox label="Zoom in" />}
+        </AppField>
+        <AppField name="zoomOut">
+          {({ Checkbox }) => <Checkbox label="Zoom out" />}
+        </AppField>
+        <AppField name="inset">
+          {({ Checkbox }) => <Checkbox label="Inset" />}
+        </AppField>
+        <AppField name="spectraStackAlignments">
+          {({ Checkbox }) => <Checkbox label="Stack alignments" />}
+        </AppField>
+        <AppField name="spectraCenterAlignments">
+          {({ Checkbox }) => <Checkbox label="Center alignments" />}
+        </AppField>
+        <AppField name="realImaginary">
+          {({ Checkbox }) => <Checkbox label="Real / Imaginary" />}
+        </AppField>
+      </Section>
+    );
+  },
+});
+
+const ImportExportTools = withFieldGroup({
+  defaultValues: defaultGeneralSettingsFormValues.display.toolBarButtons,
+  render: ({ group }) => {
+    const { Section, AppField } = group;
+
+    return (
+      <Section title="Import / Export">
+        <AppField name="import">
+          {({ Checkbox }) => <Checkbox label="Import" />}
+        </AppField>
+        <AppField name="exportAs">
+          {({ Checkbox }) => <Checkbox label="Export as" />}
+        </AppField>
+      </Section>
+    );
+  },
+});
+
+const Spectra1DManipulationTools = withFieldGroup({
+  defaultValues: defaultGeneralSettingsFormValues.display.toolBarButtons,
+  render: ({ group }) => {
+    const { Section, AppField } = group;
+
+    return (
+      <Section title="1D Spectra">
+        <AppField name="peakPicking">
+          {({ Checkbox }) => <Checkbox label="Peak picking" />}
+        </AppField>
+        <AppField name="integral">
+          {({ Checkbox }) => <Checkbox label="Integrals" />}
+        </AppField>
+        <AppField name="zonePicking">
+          {({ Checkbox }) => <Checkbox label="Zone picking" />}
+        </AppField>
+        <AppField name="rangePicking">
+          {({ Checkbox }) => <Checkbox label="Range picking" />}
+        </AppField>
+        <AppField name="zeroFilling">
+          {({ Checkbox }) => <Checkbox label="Zero filling" />}
+        </AppField>
+        <AppField name="slicing">
+          {({ Checkbox }) => <Checkbox label="Slicing" />}
+        </AppField>
+        <AppField name="apodization">
+          {({ Checkbox }) => <Checkbox label="Apodization" />}
+        </AppField>
+        <AppField name="phaseCorrection">
+          {({ Checkbox }) => <Checkbox label="Phase correction" />}
+        </AppField>
+        <AppField name="baselineCorrection">
+          {({ Checkbox }) => <Checkbox label="Baseline correction" />}
+        </AppField>
+        <AppField name="fft">
+          {({ Checkbox }) => <Checkbox label="Fourier transform" />}
+        </AppField>
+        <AppField name="exclusionZones">
+          {({ Checkbox }) => <Checkbox label="Exclusion zones" />}
+        </AppField>
+        <AppField name="autoRangeAndZonePicking">
+          {({ Checkbox }) => <Checkbox label="Auto range and zone picking" />}
+        </AppField>
+        <AppField name="multipleSpectraAnalysis">
+          {({ Checkbox }) => <Checkbox label="Multiple spectra integration" />}
+        </AppField>
+      </Section>
+    );
+  },
+});
+
+const Spectra2DManipulationTools = withFieldGroup({
+  defaultValues: defaultGeneralSettingsFormValues.display.toolBarButtons,
+  render: ({ group }) => {
+    const { Section, AppField } = group;
+
+    return (
+      <Section title="2D Spectra">
+        <AppField name="zeroFillingDimension1">
+          {({ Checkbox }) => <Checkbox label="Zero filling direct" />}
+        </AppField>
+        <AppField name="zeroFillingDimension2">
+          {({ Checkbox }) => <Checkbox label="Zero filling indirect" />}
+        </AppField>
+        <AppField name="apodizationDimension1">
+          {({ Checkbox }) => <Checkbox label="Apodization direct" />}
+        </AppField>
+        <AppField name="apodizationDimension2">
+          {({ Checkbox }) => <Checkbox label="Apodization indirect" />}
+        </AppField>
+        <AppField name="fftDimension1">
+          {({ Checkbox }) => <Checkbox label="Fourier transform direct" />}
+        </AppField>
+        <AppField name="fftDimension2">
+          {({ Checkbox }) => <Checkbox label="Fourier transform indirect" />}
+        </AppField>
+        <AppField name="phaseCorrectionTwoDimensions">
+          {({ Checkbox }) => <Checkbox label="Phase correction" />}
+        </AppField>
+      </Section>
+    );
+  },
+});

src/component/modal/setting/tanstack_general_settings/validation.ts

@@ -16,6 +16,7 @@ import { nucleiValidation } from './validation/nuclei_tab_validation.js';
 import { displayPanelsValidation } from './validation/panels_tab_validation.js';
 import { spectraColorsTabValidation } from './validation/spectra_colors_tab_validation.ts';
 import { infoBlockTabValidation } from './validation/title_block_tab_validation.js';
+import { toolBarButtonsValidation } from './validation/tools_tab_validation.ts';
 
 /**
  * The type for the workspace preferences is `WorkspaceWithSource`
@@ -27,6 +28,7 @@ import { infoBlockTabValidation } from './validation/title_block_tab_validation.
 const displayValidation = z.object({
   general: displayGeneralValidation,
   panels: displayPanelsValidation,
+  toolBarButtons: toolBarButtonsValidation,
 });
 
 export const workspaceValidation = z.object({

src/component/modal/setting/tanstack_general_settings/validation/tools_tab_validation.ts

@@ -0,0 +1,34 @@
+import { z } from 'zod';
+
+export const toolBarButtonsValidation = z
+  .object({
+    zoom: z.boolean().optional(),
+    zoomOut: z.boolean().optional(),
+    import: z.boolean().optional(),
+    exportAs: z.boolean().optional(),
+    spectraStackAlignments: z.boolean().optional(),
+    spectraCenterAlignments: z.boolean().optional(),
+    realImaginary: z.boolean().optional(),
+    peakPicking: z.boolean().optional(),
+    integral: z.boolean().optional(),
+    zonePicking: z.boolean().optional(),
+    slicing: z.boolean().optional(),
+    rangePicking: z.boolean().optional(),
+    zeroFilling: z.boolean().optional(),
+    zeroFillingDimension1: z.boolean().optional(),
+    zeroFillingDimension2: z.boolean().optional(),
+    apodization: z.boolean().optional(),
+    apodizationDimension1: z.boolean().optional(),
+    apodizationDimension2: z.boolean().optional(),
+    phaseCorrection: z.boolean().optional(),
+    phaseCorrectionTwoDimensions: z.boolean().optional(),
+    baselineCorrection: z.boolean().optional(),
+    fft: z.boolean().optional(),
+    fftDimension1: z.boolean().optional(),
+    fftDimension2: z.boolean().optional(),
+    multipleSpectraAnalysis: z.boolean().optional(),
+    exclusionZones: z.boolean().optional(),
+    autoRangeAndZonePicking: z.boolean().optional(),
+    inset: z.boolean().optional(),
+  })
+  .optional();