Move Custom Metadata into advanced

frontend/src/components/tools/changeMetadata/ChangeMetadataSingleStep.tsx

@@ -5,7 +5,6 @@ import { useMetadataExtraction } from "../../../hooks/tools/changeMetadata/useMe
 import DeleteAllStep from "./steps/DeleteAllStep";
 import StandardMetadataStep from "./steps/StandardMetadataStep";
 import DocumentDatesStep from "./steps/DocumentDatesStep";
-import CustomMetadataStep from "./steps/CustomMetadataStep";
 import AdvancedOptionsStep from "./steps/AdvancedOptionsStep";
 
 interface ChangeMetadataSingleStepProps {
@@ -86,23 +85,6 @@ const ChangeMetadataSingleStep = ({
 
       <Divider />
 
-      {/* Custom Metadata */}
-      <Stack gap="md">
-        <Text size="sm" fw={500}>
-          {t('changeMetadata.customFields.title', 'Custom Metadata')}
-        </Text>
-        <CustomMetadataStep
-          parameters={parameters}
-          onParameterChange={onParameterChange}
-          disabled={fieldsDisabled}
-          addCustomMetadata={addCustomMetadata}
-          removeCustomMetadata={removeCustomMetadata}
-          updateCustomMetadata={updateCustomMetadata}
-        />
-      </Stack>
-
-      <Divider />
-
       {/* Advanced Options */}
       <Stack gap="md">
         <Text size="sm" fw={500}>
@@ -112,6 +94,9 @@ const ChangeMetadataSingleStep = ({
           parameters={parameters}
           onParameterChange={onParameterChange}
           disabled={fieldsDisabled}
+          addCustomMetadata={addCustomMetadata}
+          removeCustomMetadata={removeCustomMetadata}
+          updateCustomMetadata={updateCustomMetadata}
         />
       </Stack>
     </Stack>

frontend/src/components/tools/changeMetadata/steps/AdvancedOptionsStep.tsx

@@ -1,22 +1,31 @@
-import { Select } from "@mantine/core";
+import { Stack, Select, Divider } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ChangeMetadataParameters } from "../../../../hooks/tools/changeMetadata/useChangeMetadataParameters";
 import { TrappedStatus } from "../../../../types/metadata";
+import CustomMetadataStep from "./CustomMetadataStep";
 
 interface AdvancedOptionsStepProps {
   parameters: ChangeMetadataParameters;
   onParameterChange: <K extends keyof ChangeMetadataParameters>(key: K, value: ChangeMetadataParameters[K]) => void;
   disabled?: boolean;
+  addCustomMetadata: (key?: string, value?: string) => void;
+  removeCustomMetadata: (id: string) => void;
+  updateCustomMetadata: (id: string, key: string, value: string) => void;
 }
 
 const AdvancedOptionsStep = ({
   parameters,
   onParameterChange,
-  disabled = false
+  disabled = false,
+  addCustomMetadata,
+  removeCustomMetadata,
+  updateCustomMetadata
 }: AdvancedOptionsStepProps) => {
   const { t } = useTranslation();
 
   return (
+    <Stack gap="md">
+      {/* Trapped Status */}
       <Select
         label={t('changeMetadata.trapped.label', 'Trapped Status')}
         description={t('changeMetadata.trapped.description', 'Indicates whether the document has been trapped for high-quality printing')}
@@ -33,6 +42,19 @@ const AdvancedOptionsStep = ({
           { value: TrappedStatus.FALSE, label: t('changeMetadata.trapped.false', 'False') }
         ]}
       />
+
+      <Divider />
+
+      {/* Custom Metadata */}
+      <CustomMetadataStep
+        parameters={parameters}
+        onParameterChange={onParameterChange}
+        disabled={disabled}
+        addCustomMetadata={addCustomMetadata}
+        removeCustomMetadata={removeCustomMetadata}
+        updateCustomMetadata={updateCustomMetadata}
+      />
+    </Stack>
   );
 };
 

frontend/src/components/tooltips/useChangeMetadataTips.ts

@@ -98,6 +98,15 @@ export const useAdvancedOptionsTips = (): TooltipContent => {
           t("changeMetadata.tooltip.advanced.trapped.bullet2", "False: Document has not been trapped"),
           t("changeMetadata.tooltip.advanced.trapped.bullet3", "Unknown: Trapped status is not specified")
         ]
+      },
+      {
+        title: t("changeMetadata.tooltip.customFields.title", "Custom Metadata"),
+        description: t("changeMetadata.tooltip.customFields.text", "Add your own custom key-value metadata pairs."),
+        bullets: [
+          t("changeMetadata.tooltip.customFields.bullet1", "Add any custom fields relevant to your document"),
+          t("changeMetadata.tooltip.customFields.bullet2", "Examples: Department, Project, Version, Status"),
+          t("changeMetadata.tooltip.customFields.bullet3", "Both key and value are required for each entry")
+        ]
       }
     ]
   };

frontend/src/tools/ChangeMetadata.tsx

@@ -1,10 +1,9 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { createToolFlow } from "../components/tools/shared/createToolFlow";
 import DeleteAllStep from "../components/tools/changeMetadata/steps/DeleteAllStep";
 import StandardMetadataStep from "../components/tools/changeMetadata/steps/StandardMetadataStep";
 import DocumentDatesStep from "../components/tools/changeMetadata/steps/DocumentDatesStep";
-import CustomMetadataStep from "../components/tools/changeMetadata/steps/CustomMetadataStep";
 import AdvancedOptionsStep from "../components/tools/changeMetadata/steps/AdvancedOptionsStep";
 import { useChangeMetadataParameters } from "../hooks/tools/changeMetadata/useChangeMetadataParameters";
 import { useChangeMetadataOperation } from "../hooks/tools/changeMetadata/useChangeMetadataOperation";
@@ -15,7 +14,6 @@ import {
   useDeleteAllTips,
   useStandardMetadataTips,
   useDocumentDatesTips,
-  useCustomMetadataTips,
   useAdvancedOptionsTips
 } from "../components/tooltips/useChangeMetadataTips";
 
@@ -26,14 +24,12 @@ const ChangeMetadata = (props: BaseToolProps) => {
   const deleteAllTips = useDeleteAllTips();
   const standardMetadataTips = useStandardMetadataTips();
   const documentDatesTips = useDocumentDatesTips();
-  const customMetadataTips = useCustomMetadataTips();
   const advancedOptionsTips = useAdvancedOptionsTips();
 
   // Individual step collapse states
   const [deleteAllCollapsed, setDeleteAllCollapsed] = useState(false);
   const [standardMetadataCollapsed, setStandardMetadataCollapsed] = useState(false);
   const [documentDatesCollapsed, setDocumentDatesCollapsed] = useState(true);
-  const [customMetadataCollapsed, setCustomMetadataCollapsed] = useState(true);
   const [advancedOptionsCollapsed, setAdvancedOptionsCollapsed] = useState(true);
 
   const base = useBaseTool(
@@ -102,24 +98,6 @@ const ChangeMetadata = (props: BaseToolProps) => {
           />
         ),
       },
-      {
-        title: t("changeMetadata.customFields.title", "Custom Metadata"),
-        isCollapsed: getActualCollapsedState(customMetadataCollapsed),
-        onCollapsedClick: base.hasResults
-          ? (base.settingsCollapsed ? base.handleSettingsReset : undefined)
-          : () => setCustomMetadataCollapsed(!customMetadataCollapsed),
-        tooltip: customMetadataTips,
-        content: (
-          <CustomMetadataStep
-            parameters={base.params.parameters}
-            onParameterChange={base.params.updateParameter}
-            disabled={base.endpointLoading || base.params.parameters.deleteAll || isExtractingMetadata}
-            addCustomMetadata={base.params.addCustomMetadata}
-            removeCustomMetadata={base.params.removeCustomMetadata}
-            updateCustomMetadata={base.params.updateCustomMetadata}
-          />
-        ),
-      },
       {
         title: t("changeMetadata.advanced.title", "Advanced Options"),
         isCollapsed: getActualCollapsedState(advancedOptionsCollapsed),
@@ -132,6 +110,9 @@ const ChangeMetadata = (props: BaseToolProps) => {
             parameters={base.params.parameters}
             onParameterChange={base.params.updateParameter}
             disabled={base.endpointLoading || isExtractingMetadata}
+            addCustomMetadata={base.params.addCustomMetadata}
+            removeCustomMetadata={base.params.removeCustomMetadata}
+            updateCustomMetadata={base.params.updateCustomMetadata}
           />
         ),
       },