feat/openapi sync (#7279)

* feat: implement OpenAPI Sync

* feat: enhance focus styles and error handling across components

- Added focus-visible styles for buttons and tags in Swagger and Modal components to improve accessibility.
- Updated ConnectSpecForm to ensure source URL is set only if the file path is valid.
- Enhanced clipboard copy functionality in SpecInfoCard with error handling and success notifications.
- Improved ExpandableEndpointRow to handle loading state more robustly.
- Refined SyncReviewPage to ensure correct filtering of updated endpoints.
- Updated file handling in OpenAPI Sync IPC to support both .yml and .yaml extensions.

* fix: improve filename sanitization in OpenAPI Sync IPC

- Updated filename sanitization logic to ensure proper handling of both `name` and `filename` properties, enhancing compatibility with various file formats.
- Adjusted the logic to derive the base name from the filename when necessary, ensuring consistent output for generated files.

* feat: enhance OpenAPI Sync tab with new overview and header components

- Introduced OverviewSection to display summary of collection and spec status, including total endpoints, in-sync counts, and pending updates.
- Added OpenAPISyncHeader for improved navigation and actions related to the OpenAPI spec.
- Updated CollectionStatusSection to better handle and display collection drift information.
- Refined styling for status banners and added new visual elements for better user experience.
- Enhanced tooltip functionality in Help component for improved accessibility.

* refactor: remove VisualDiffViewer components and add diff package

- Deleted VisualDiffViewer components including VisualDiffMeta, VisualDiffDocs, VisualDiffVars, and others to streamline the codebase.
- Introduced the 'diff' package in package-lock.json to enhance diff functionality.
- Updated utility functions to improve diff status handling and maintainability.

packages/bruno-app/src/components/OpenAPISyncTab/SpecDiffModal/index.js

@@ -0,0 +1,75 @@
+import { useRef, useEffect } from 'react';
+import { useTheme } from 'providers/Theme/index';
+import Modal from 'components/Modal';
+import StatusBadge from 'ui/StatusBadge';
+
+const SpecDiffModal = ({ specDrift, onClose }) => {
+  const diffRef = useRef(null);
+  const { displayedTheme } = useTheme();
+
+  const addedCount = specDrift?.added?.length || 0;
+  const modifiedCount = specDrift?.modified?.length || 0;
+  const removedCount = specDrift?.removed?.length || 0;
+
+  const versionLabel = specDrift?.versionChanged
+    ? `v${specDrift.storedVersion || '?'} → v${specDrift.newVersion}`
+    : null;
+
+  useEffect(() => {
+    const { Diff2Html } = window;
+    if (!diffRef?.current || !Diff2Html || !specDrift?.unifiedDiff) return;
+    const diffHtml = Diff2Html.html(specDrift.unifiedDiff, {
+      drawFileList: false,
+      matching: 'lines',
+      outputFormat: 'side-by-side',
+      synchronisedScroll: true,
+      highlight: true,
+      renderNothingWhenEmpty: false,
+      colorScheme: displayedTheme
+    });
+    // Safe: Diff2Html is loaded from a local static bundle (public/static/diff2Html.js)
+    diffRef.current.innerHTML = diffHtml;
+  }, [displayedTheme, specDrift?.unifiedDiff]);
+
+  return (
+    <Modal
+      size="xl"
+      title="Spec Diff"
+      hideFooter
+      handleCancel={onClose}
+    >
+      <div className="spec-diff-modal">
+        <div className="spec-diff-badges">
+          {addedCount > 0 && <StatusBadge status="success">Added: {addedCount}</StatusBadge>}
+          {modifiedCount > 0 && <StatusBadge status="info">Updated: {modifiedCount}</StatusBadge>}
+          {removedCount > 0 && <StatusBadge status="danger">Removed: {removedCount}</StatusBadge>}
+          {versionLabel && <StatusBadge>{versionLabel}</StatusBadge>}
+        </div>
+
+        <p className="spec-diff-subtitle">
+          {specDrift?.storedSpecMissing
+            ? 'The current spec file is missing. The full remote spec is shown below.'
+            : 'Side-by-side diff of your current spec vs the updated spec from the spec URL.'}
+        </p>
+
+        <div className="spec-diff-body">
+          <div className="text-diff-container">
+            {specDrift?.unifiedDiff ? (
+              <>
+                <div className="diff-column-headers">
+                  <span className="diff-column-label">{specDrift?.storedSpecMissing ? 'Current Spec (missing)' : 'Current Spec'}</span>
+                  <span className="diff-column-label">Updated Spec</span>
+                </div>
+                <div ref={diffRef}></div>
+              </>
+            ) : (
+              <div className="text-diff-empty">No text diff available.</div>
+            )}
+          </div>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default SpecDiffModal;