File transfer

resources/scripts/addons/advanced-admin/revisions/DiffViewer.tsx

@@ -0,0 +1,66 @@
+/**
+ * Diff Viewer — unified diff with syntax coloring
+ * Ball Studios <https://git.balls.studio>
+ */
+
+import React, { useEffect, useState } from 'react';
+import http from '@/api/http';
+
+interface DiffLine {
+    type: 'context' | 'added' | 'removed' | 'header';
+    content: string;
+    line_old?: number;
+    line_new?: number;
+}
+
+interface Props {
+    serverUuid: string;
+    revision: { id: number; revision_number: number };
+    onClose: () => void;
+}
+
+export default function DiffViewer({ serverUuid, revision, onClose }: Props) {
+    const [lines, setLines]     = useState<DiffLine[]>([]);
+    const [binary, setBinary]   = useState(false);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        http.get(`/api/client/servers/${serverUuid}/addons/files/revisions/${revision.id}/diff`)
+            .then(({ data }) => {
+                setBinary(data.binary);
+                setLines(data.lines ?? []);
+            })
+            .finally(() => setLoading(false));
+    }, [serverUuid, revision.id]);
+
+    return (
+        <div className='addon-modal-overlay' onClick={onClose} role='dialog' aria-modal='true'>
+            <div className='addon-modal addon-modal-wide' onClick={e => e.stopPropagation()}>
+                <div className='addon-modal-header'>
+                    <span>Diff — Revision #{revision.revision_number}</span>
+                    <button className='addon-modal-close' onClick={onClose} aria-label='Close'>✕</button>
+                </div>
+                {loading && <div className='addon-loading'>Loading diff…</div>}
+                {!loading && binary && <div className='addon-empty'>Binary file — diff not available.</div>}
+                {!loading && !binary && (
+                    <pre className='addon-diff'>
+                        {lines.map((line, i) => (
+                            <div
+                                key={i}
+                                className={`addon-diff-line addon-diff-${line.type}`}
+                            >
+                                <span className='addon-diff-lnum'>
+                                    {line.line_old ?? ' '} {line.line_new ?? ' '}
+                                </span>
+                                <span className='addon-diff-sign'>
+                                    {line.type === 'added' ? '+' : line.type === 'removed' ? '−' : ' '}
+                                </span>
+                                {line.content}
+                            </div>
+                        ))}
+                    </pre>
+                )}
+            </div>
+        </div>
+    );
+}