improvement(frontend): enhance secret diff view and commit handling

backend/src/ee/services/pit/pit-service.ts

@@ -680,6 +680,27 @@ export const pitServiceFactory = ({
       }
 
       if (policy) {
+        // When a policy exists, secret changes go through approval workflow
+        // but folder changes should still be committed immediately since they're not affected by approval policies
+        let commitId: string | undefined;
+        if (commitChanges.length > 0) {
+          const commit = await folderCommitService.createCommit(
+            {
+              actor: {
+                type: actor || ActorType.PLATFORM,
+                metadata: {
+                  id: actorId
+                }
+              },
+              message,
+              folderId: targetFolder.id,
+              changes: commitChanges
+            },
+            trx
+          );
+          commitId = commit?.id;
+        }
+
         if (
           (changes.secrets?.create?.length ?? 0) > 0 ||
           (changes.secrets?.update?.length ?? 0) > 0 ||
@@ -724,11 +745,13 @@ export const pitServiceFactory = ({
           });
           return {
             approvalId: approval.id,
+            commitId,
             folderChanges,
             secretMutationEvents
           };
         }
         return {
+          commitId,
           folderChanges,
           secretMutationEvents
         };

frontend/src/components/secrets/diff/DiffContainer.tsx

@@ -0,0 +1,56 @@
+import { twMerge } from "tailwind-merge";
+
+export interface DiffContainerProps {
+  variant?: "added" | "removed";
+  children: React.ReactNode;
+  containerRef?: React.RefObject<HTMLDivElement>;
+  className?: string;
+  isSingleLine?: boolean;
+}
+
+/**
+ * Styled container with consistent backgrounds for diff views
+ */
+export const DiffContainer = ({
+  variant,
+  children,
+  containerRef,
+  className,
+  isSingleLine = false
+}: DiffContainerProps) => {
+  const getBackgroundColor = () => {
+    if (!variant) return undefined;
+    return variant === "removed" ? "#120808" : "#081208";
+  };
+
+  const backgroundColor = getBackgroundColor();
+
+  if (isSingleLine) {
+    return (
+      <div
+        className={twMerge(
+          "relative rounded-lg border border-mineshaft-600 p-2",
+          !variant && "bg-bunker-800",
+          className
+        )}
+        style={backgroundColor ? { backgroundColor } : undefined}
+      >
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      ref={containerRef}
+      className={twMerge(
+        "relative max-h-96 thin-scrollbar overflow-x-auto overflow-y-auto rounded-lg border border-mineshaft-600 p-2",
+        !variant && "bg-bunker-800",
+        className
+      )}
+      style={backgroundColor ? { backgroundColor } : undefined}
+    >
+      <div className="w-max min-w-full">{children}</div>
+    </div>
+  );
+};