feat: add import filters tab

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

@@ -1,11 +1,12 @@
-import { Tab, Tabs as BPTabs } from '@blueprintjs/core';
+import { Classes, Tab, Tabs as BPTabs } from '@blueprintjs/core';
 import styled from '@emotion/styled';
 import { withForm } from 'react-science/ui';
 
 import { StyledDialogBody } from '../../../elements/StyledDialogBody.tsx';
 
 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 { defaultGeneralSettingsFormValues } from './validation.ts';
 
@@ -16,7 +17,11 @@ const Tabs = styled(BPTabs)`
     gap: 0;
   }
 
-  div[role='tabpanel'] {
+  &.${Classes.TABS}.${Classes.VERTICAL} > .${Classes.TAB_PANEL} {
+    /* Remove top margin of first form.Section */
+    margin-top: -15px;
+
+    /* Configure positioning and sizing */
     max-height: 100%;
     overflow: auto;
     padding: 0 0.8rem 0.8rem;
@@ -46,6 +51,12 @@ export const GeneralSettingsDialogBody = withForm({
 
             <Tab title="Nuclei" id="nuclei" panel={<NucleiTab form={form} />} />
 
+            <Tab
+              id="import-filters"
+              title="Import filters"
+              panel={<ImportFiltersTab form={form} />}
+            />
+
             <Tab id="export" title="Export" panel={<ExportTab form={form} />} />
           </Tabs>
         </Div>

src/component/modal/setting/tanstack_general_settings/tabs/export_tab.fields.tsx

@@ -117,13 +117,14 @@ export const ExportFields = withFieldGroup({
       });
     }
 
+    const { AppField, Subscribe } = group;
     return (
       <>
-        <group.AppField name="mode" listeners={{ onChange: onModeChange }}>
-          {(field) => <field.RadioGroup label="Mode" options={modeItems} />}
-        </group.AppField>
+        <AppField name="mode" listeners={{ onChange: onModeChange }}>
+          {({ RadioGroup }) => <RadioGroup label="Mode" options={modeItems} />}
+        </AppField>
         <DescriptionPreview {...outputValues} />
-        <group.Subscribe
+        <Subscribe
           selector={(state) => {
             const mode = state.values.mode;
             switch (state.values.mode) {
@@ -141,35 +142,29 @@ export const ExportFields = withFieldGroup({
               case 'basic':
                 return (
                   <>
-                    <group.AppField name="size">
-                      {(field) => (
-                        <field.Select
-                          label="Size"
-                          items={pageSizeItems[layout]}
-                        />
+                    <AppField name="size">
+                      {({ Select }) => (
+                        <Select label="Size" items={pageSizeItems[layout]} />
                       )}
-                    </group.AppField>
-                    <group.AppField name="layout">
-                      {(field) => (
-                        <field.RadioGroup
-                          label="Layout"
-                          options={layoutItems}
-                        />
+                    </AppField>
+                    <AppField name="layout">
+                      {({ RadioGroup }) => (
+                        <RadioGroup label="Layout" options={layoutItems} />
                       )}
-                    </group.AppField>
+                    </AppField>
                   </>
                 );
               case 'advance':
                 return (
                   <>
-                    <group.AppField
+                    <AppField
                       name="unit"
                       listeners={{ onChange: onChangeUnit }}
                     >
-                      {(field) => (
-                        <field.Select label="Unit" items={unitItems} />
+                      {({ Select }) => (
+                        <Select label="Unit" items={unitItems} />
                       )}
-                    </group.AppField>
+                    </AppField>
                     <Checkbox
                       label="Keep ratio"
                       checked={advancedTransforms.isAspectRatioEnabled}
@@ -179,43 +174,43 @@ export const ExportFields = withFieldGroup({
                         );
                       }}
                     />
-                    <group.AppField
+                    <AppField
                       name="width"
                       listeners={{ onChange: onWidthChange }}
                     >
-                      {(field) => (
-                        <field.NumericInput
+                      {({ NumericInput }) => (
+                        <NumericInput
                           label="Width"
                           rightElement={<Tag>{unit}</Tag>}
                         />
                       )}
-                    </group.AppField>
-                    <group.AppField
+                    </AppField>
+                    <AppField
                       name="height"
                       listeners={{ onChange: onHeightChange }}
                     >
-                      {(field) => (
-                        <field.NumericInput
+                      {({ NumericInput }) => (
+                        <NumericInput
                           label="Height"
                           rightElement={<Tag>{unit}</Tag>}
                         />
                       )}
-                    </group.AppField>
+                    </AppField>
                   </>
                 );
               default:
                 assertUnreachable(mode);
             }
           }}
-        </group.Subscribe>
-        <group.AppField name="dpi" listeners={{ onChange: onDPIChange }}>
-          {(field) => <field.NumericInput label="DPI" />}
-        </group.AppField>
-        <group.AppField name="useDefaultSettings">
-          {(field) => (
-            <field.Checkbox label="Don't show the options dialog during export and use current settings" />
+        </Subscribe>
+        <AppField name="dpi" listeners={{ onChange: onDPIChange }}>
+          {({ NumericInput }) => <NumericInput label="DPI" />}
+        </AppField>
+        <AppField name="useDefaultSettings">
+          {({ Checkbox }) => (
+            <Checkbox label="Don't show the options dialog during export and use current settings" />
           )}
-        </group.AppField>
+        </AppField>
       </>
     );
   },

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

@@ -9,11 +9,9 @@ export const ExportTab = withForm({
   render: ({ form }) => {
     return (
       <>
-        <div style={{ marginTop: '-15px' }}>
-          <form.Section title="Export SVG to file options">
-            <ExportFields form={form} fields="export.svg" />
-          </form.Section>
-        </div>
+        <form.Section title="Export SVG to file options">
+          <ExportFields form={form} fields="export.svg" />
+        </form.Section>
         <form.Section title="Export PNG to file options">
           <ExportFields form={form} fields="export.png" />
         </form.Section>

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

@@ -0,0 +1,74 @@
+import { withFieldGroup, withForm } from 'react-science/ui';
+
+import {
+  defaultGeneralSettingsFormValues,
+  nmrLoadersGeneralDataSelection,
+} from '../validation.ts';
+
+export const ImportFiltersTab = withForm({
+  defaultValues: defaultGeneralSettingsFormValues,
+  render: ({ form }) => {
+    const { Section } = form;
+
+    return (
+      <>
+        <Section title="General">
+          <General form={form} fields="nmrLoaders.general" />
+        </Section>
+        <Section title="Bruker">
+          <Bruker form={form} fields="nmrLoaders.bruker" />
+        </Section>
+      </>
+    );
+  },
+});
+
+const General = withFieldGroup({
+  defaultValues: defaultGeneralSettingsFormValues.nmrLoaders.general,
+  render: ({ group }) => {
+    const { AppField } = group;
+
+    return (
+      <>
+        <AppField name="keep1D">
+          {({ Checkbox }) => <Checkbox label="Keep 1D" />}
+        </AppField>
+        <AppField name="keep2D">
+          {({ Checkbox }) => <Checkbox label="Keep 2D" />}
+        </AppField>
+        <AppField name="onlyReal">
+          {({ Checkbox }) => <Checkbox label="Only real" />}
+        </AppField>
+        <AppField name="dataSelection">
+          {({ Select }) => (
+            <Select
+              label="Data selection"
+              items={nmrLoadersGeneralDataSelection}
+            />
+          )}
+        </AppField>
+      </>
+    );
+  },
+});
+
+const Bruker = withFieldGroup({
+  defaultValues: defaultGeneralSettingsFormValues.nmrLoaders.bruker,
+  render: ({ group }) => {
+    const { AppField } = group;
+
+    return (
+      <>
+        <AppField name="processingNumbers">
+          {({ Input }) => <Input label="Processing numbers" />}
+        </AppField>
+        <AppField name="experimentNumbers">
+          {({ Input }) => <Input label="Experiment numbers" />}
+        </AppField>
+        <AppField name="onlyFirstProcessedData">
+          {({ Checkbox }) => <Checkbox label="Only first processed data" />}
+        </AppField>
+      </>
+    );
+  },
+});

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

@@ -122,11 +122,38 @@ const nucleiValidation = z
     });
   });
 
+export const nmrLoadersGeneralDataSelection = [
+  { label: 'FT', value: 'ft' } as const,
+  { label: 'FID', value: 'fid' } as const,
+  { label: 'Both', value: 'both' } as const,
+  { label: 'Prefer FT', value: 'preferFT' } as const,
+  { label: 'Prefer FID', value: 'preferFID' } as const,
+];
+
+const nmrLoadersGeneralValidation = z.object({
+  dataSelection: z
+    .enum(nmrLoadersGeneralDataSelection.map(({ value }) => value))
+    .optional(),
+  keep1D: z.boolean().optional(),
+  keep2D: z.boolean().optional(),
+  onlyReal: z.boolean().optional(),
+});
+const nmrLoadersBrukerValidation = z.object({
+  processingNumbers: z.string().optional(),
+  experimentNumbers: z.string().optional(),
+  onlyFirstProcessedData: z.boolean().optional(),
+});
+const nmrLoadersValidation = z.object({
+  general: nmrLoadersGeneralValidation,
+  bruker: nmrLoadersBrukerValidation,
+});
+
 export const workspaceValidation = z.object({
   nuclei: nucleiValidation,
   peaksLabel: peaksLabelValidation,
   general: generalValidation,
   display: displayValidation,
+  nmrLoaders: nmrLoadersValidation,
   export: exportPreferencesValidation,
 });
 
@@ -153,5 +180,8 @@ export const defaultGeneralSettingsFormValues: z.input<
       },
     },
   },
+  nmrLoaders: nmrLoadersValidation.encode(
+    workspaceDefaultProperties.nmrLoaders,
+  ),
   export: exportPreferencesValidation.encode(workspaceDefaultProperties.export),
 };