feat: implement panels tab

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

@@ -8,6 +8,7 @@ import { ExportTab } from './tabs/export_tab.tsx';
 import { GeneralTab } from './tabs/general_tab.tsx';
 import { ImportFiltersTab } from './tabs/import_filters_tab.tsx';
 import { NucleiTab } from './tabs/nuclei_tab.tsx';
+import { PanelsTab } from './tabs/panels_tab.tsx';
 import { defaultGeneralSettingsFormValues } from './validation.ts';
 
 const Tabs = styled(BPTabs)`
@@ -51,6 +52,8 @@ export const GeneralSettingsDialogBody = withForm({
 
             <Tab title="Nuclei" id="nuclei" panel={<NucleiTab form={form} />} />
 
+            <Tab id="panels" title="Panels" panel={<PanelsTab form={form} />} />
+
             <Tab
               id="import-filters"
               title="Import filters"

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

@@ -0,0 +1,152 @@
+import { withFieldGroup, withForm } from 'react-science/ui';
+
+import {
+  defaultGeneralSettingsFormValues,
+  displayPanelsStatus,
+} from '../validation.ts';
+
+export const PanelsTab = withForm({
+  defaultValues: defaultGeneralSettingsFormValues,
+  render: ({ form }) => {
+    const { Section, AppField } = form;
+    return (
+      <>
+        <Section title="Panels bar">
+          <AppField name="display.general.hidePanelsBar">
+            {({ Checkbox }) => <Checkbox label="Hide panels bar" />}
+          </AppField>
+        </Section>
+
+        <SpectraSettings form={form} fields="display.panels" />
+        <Spectra1dSettings form={form} fields="display.panels" />
+        <Spectra2dSettings form={form} fields="display.panels" />
+        <ChemicalSettings form={form} fields="display.panels" />
+      </>
+    );
+  },
+});
+
+const SpectraSettings = withFieldGroup({
+  defaultValues: defaultGeneralSettingsFormValues.display.panels,
+  render: ({ group }) => {
+    const { Section, AppField } = group;
+
+    return (
+      <Section title="Spectra">
+        <AppField name="spectraPanel">
+          {({ Select }) => (
+            <Select label="Spectra selection" items={displayPanelsStatus} />
+          )}
+        </AppField>
+        <AppField name="informationPanel">
+          {({ Select }) => (
+            <Select label="Information" items={displayPanelsStatus} />
+          )}
+        </AppField>
+        <AppField name="processingsPanel">
+          {({ Select }) => (
+            <Select label="Processing" items={displayPanelsStatus} />
+          )}
+        </AppField>
+        <AppField name="multipleSpectraAnalysisPanel">
+          {({ Select }) => (
+            <Select
+              label="Multiple spectra analysis"
+              items={displayPanelsStatus}
+            />
+          )}
+        </AppField>
+      </Section>
+    );
+  },
+});
+
+const Spectra1dSettings = withFieldGroup({
+  defaultValues: defaultGeneralSettingsFormValues.display.panels,
+  render: ({ group }) => {
+    const { Section, AppField } = group;
+
+    return (
+      <Section title="Spectra 1D">
+        <AppField name="peaksPanel">
+          {({ Select }) => <Select label="Peaks" items={displayPanelsStatus} />}
+        </AppField>
+        <AppField name="integralsPanel">
+          {({ Select }) => (
+            <Select label="Integrals" items={displayPanelsStatus} />
+          )}
+        </AppField>
+        <AppField name="rangesPanel">
+          {({ Select }) => (
+            <Select
+              label="Ranges / Multiplet analysis"
+              items={displayPanelsStatus}
+            />
+          )}
+        </AppField>
+        <AppField name="matrixGenerationPanel">
+          {({ Select }) => (
+            <Select label="Matrix generation" items={displayPanelsStatus} />
+          )}
+        </AppField>
+        <AppField name="simulationPanel">
+          {({ Select }) => (
+            <Select label="Spectrum simulation" items={displayPanelsStatus} />
+          )}
+        </AppField>
+      </Section>
+    );
+  },
+});
+
+const Spectra2dSettings = withFieldGroup({
+  defaultValues: defaultGeneralSettingsFormValues.display.panels,
+  render: ({ group }) => {
+    const { Section, AppField } = group;
+
+    return (
+      <Section title="Spectra 2D">
+        <AppField name="zonesPanel">
+          {({ Select }) => <Select label="Zones" items={displayPanelsStatus} />}
+        </AppField>
+      </Section>
+    );
+  },
+});
+
+const ChemicalSettings = withFieldGroup({
+  defaultValues: defaultGeneralSettingsFormValues.display.panels,
+  render: ({ group }) => {
+    const { Section, AppField } = group;
+
+    return (
+      <Section title="Chemicals">
+        <AppField name="structuresPanel">
+          {({ Select }) => (
+            <Select label="Chemical structures" items={displayPanelsStatus} />
+          )}
+        </AppField>
+        <AppField name="summaryPanel">
+          {({ Select }) => (
+            <Select label="Summary" items={displayPanelsStatus} />
+          )}
+        </AppField>
+        <AppField name="databasePanel">
+          {({ Select }) => (
+            <Select label="Databases" items={displayPanelsStatus} />
+          )}
+        </AppField>
+        <AppField name="predictionPanel">
+          {({ Select }) => (
+            <Select label="Prediction" items={displayPanelsStatus} />
+          )}
+        </AppField>
+        <AppField name="automaticAssignmentPanel">
+          {({ Select }) => (
+            <Select label="Automatic assignment" items={displayPanelsStatus} />
+          )}
+        </AppField>
+      </Section>
+    );
+  },
+});

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

@@ -50,12 +50,93 @@ const generalValidation = z.object({
   loggingLevel: z.enum(loggingLevel).optional(),
 });
 
-const displayValidation = z.object({
-  general: z.object({
-    experimentalFeatures: z.object({
-      display: z.boolean(),
-    }),
+const displayGeneralValidation = z.object({
+  experimentalFeatures: z.object({
+    display: z.boolean(),
   }),
+  hidePanelsBar: z.boolean().optional(),
+});
+
+export const displayPanelsStatus = [
+  { label: 'Hidden', value: 'hidden' } as const,
+  { label: 'Available', value: 'available' } as const,
+  { label: 'Active', value: 'active' } as const,
+  { label: 'Open', value: 'open' } as const,
+];
+type PanelStatus = (typeof displayPanelsStatus)[number]['value'];
+const panelStatusValidation = z.enum(displayPanelsStatus.map((s) => s.value));
+const panelCodec = z.codec(
+  panelStatusValidation,
+  z
+    .object({
+      display: z.boolean(),
+      visible: z.boolean(),
+      open: z.boolean().optional(),
+    })
+    .optional(),
+  {
+    encode: (status) => {
+      const { display = false, visible = false, open = false } = status ?? {};
+      let value: PanelStatus = 'hidden';
+      const isActive = visible && display;
+
+      if (isActive && open) {
+        value = 'open';
+      } else if (isActive) {
+        value = 'active';
+      } else if (visible) {
+        value = 'available';
+      }
+
+      return value;
+    },
+    decode: (status) => {
+      let visible = false;
+      let display = false;
+      let open = false;
+
+      if (status === 'available') {
+        visible = true;
+      }
+
+      if (status === 'active') {
+        visible = true;
+        display = true;
+      }
+      if (status === 'open') {
+        visible = true;
+        display = true;
+        open = true;
+      }
+
+      return { open, visible, display };
+    },
+  },
+);
+
+const displayPanelsValidation = z
+  .object({
+    spectraPanel: panelCodec,
+    informationPanel: panelCodec,
+    peaksPanel: panelCodec,
+    integralsPanel: panelCodec,
+    rangesPanel: panelCodec,
+    structuresPanel: panelCodec,
+    processingsPanel: panelCodec,
+    zonesPanel: panelCodec,
+    summaryPanel: panelCodec,
+    multipleSpectraAnalysisPanel: panelCodec,
+    databasePanel: panelCodec,
+    predictionPanel: panelCodec,
+    automaticAssignmentPanel: panelCodec,
+    matrixGenerationPanel: panelCodec,
+    simulationPanel: panelCodec,
+  })
+  .optional();
+
+const displayValidation = z.object({
+  general: displayGeneralValidation,
+  panels: displayPanelsValidation,
 });
 
 /**
@@ -179,6 +260,9 @@ export const defaultGeneralSettingsFormValues: z.input<
         display: false,
       },
     },
+    panels: displayPanelsValidation.encode(
+      workspaceDefaultProperties.display.panels,
+    ),
   },
   nmrLoaders: nmrLoadersValidation.encode(
     workspaceDefaultProperties.nmrLoaders,