chore(admin): remove useless config diff (#12545)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Added a GraphQL mutation to validate multiple app configuration updates, returning detailed validation results for each item.
  - Extended the API schema to support validation feedback, enabling client-side checks before applying changes.
  - Introduced a detailed, parameterized error message system for configuration validation errors.
  - Enabled validation of configuration inputs via the admin UI with clear, descriptive error messages.

- **Improvements**
  - Enhanced error reporting with specific, context-rich messages for invalid app configurations.
  - Simplified admin settings UI by removing the confirmation dialog and streamlining save actions.
  - Improved clarity and maintainability of validation logic and error handling components.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/frontend/admin/src/modules/settings/config-input-row.tsx

@@ -7,16 +7,16 @@ import {
   SelectValue,
 } from '@affine/admin/components/ui/select';
 import { Switch } from '@affine/admin/components/ui/switch';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 
 import { Textarea } from '../../components/ui/textarea';
-import { isEqual } from './utils';
 
 export type ConfigInputProps = {
   field: string;
   desc: string;
   defaultValue: any;
-  onChange: (key: string, value: any) => void;
+  onChange: (field: string, value: any) => void;
+  error?: string;
 } & (
   | {
       type: 'String' | 'Number' | 'Boolean' | 'JSON';
@@ -33,6 +33,7 @@ const Inputs: Record<
     defaultValue: any;
     onChange: (value?: any) => void;
     options?: string[];
+    error?: string;
   }>
 > = {
   Boolean: function SwitchInput({ defaultValue, onChange }) {
@@ -114,22 +115,18 @@ export const ConfigRow = ({
   type,
   defaultValue,
   onChange,
+  error,
   ...props
 }: ConfigInputProps) => {
-  const [value, setValue] = useState(defaultValue);
-
-  const isValueChanged = !isEqual(value, defaultValue);
+  const Input = Inputs[type] ?? Inputs.JSON;
 
   const onValueChange = useCallback(
     (value?: any) => {
       onChange(field, value);
-      setValue(value);
     },
     [field, onChange]
   );
 
-  const Input = Inputs[type] ?? Inputs.JSON;
-
   return (
     <div
       className={`flex justify-between flex-grow space-y-[10px]
@@ -140,28 +137,12 @@ export const ConfigRow = ({
         <Input
           defaultValue={defaultValue}
           onChange={onValueChange}
+          error={error}
           {...props}
         />
-        {isValueChanged && (
-          <div className="absolute bottom-[-25px] text-sm right-0 break-words">
-            <span
-              className="line-through"
-              style={{
-                color: 'rgba(198, 34, 34, 1)',
-                backgroundColor: 'rgba(254, 213, 213, 1)',
-              }}
-            >
-              {JSON.stringify(defaultValue)}
-            </span>{' '}
-            =&gt;{' '}
-            <span
-              style={{
-                color: 'rgba(20, 147, 67, 1)',
-                backgroundColor: 'rgba(225, 250, 177, 1)',
-              }}
-            >
-              {JSON.stringify(value)}
-            </span>
+        {error && (
+          <div className="absolute bottom-[-25px] text-sm right-0 break-words text-red-500">
+            {error}
           </div>
         )}
       </div>