feat: side-by-side script diff with before/after tabs

This commit is contained in:
Ahmed Darrazi 2026-01-01 21:50:57 +01:00
parent 75a87a77ae
commit 1ff4b2c8ff

View File

@ -256,13 +256,28 @@
@if ($isScriptContent) @if ($isScriptContent)
<div class="text-sm text-gray-600 dark:text-gray-300 sm:col-span-2"> <div class="text-sm text-gray-600 dark:text-gray-300 sm:col-span-2">
<span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Diff</span> <span class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Script</span>
<details class="mt-1"> <details class="mt-1">
<summary class="cursor-pointer text-sm text-gray-700 dark:text-gray-200"> <summary class="cursor-pointer text-sm text-gray-700 dark:text-gray-200">
View View
</summary> </summary>
<pre class="mt-2 max-h-96 overflow-auto font-mono text-xs text-gray-800 dark:text-gray-200 whitespace-pre">@php <div x-data="{ tab: 'diff' }" class="mt-2 space-y-3">
<div class="flex flex-wrap items-center gap-2">
<x-filament::button size="xs" color="gray" type="button" x-on:click="tab = 'diff'" x-bind:class="tab === 'diff' ? 'ring-1 ring-gray-300 dark:ring-white/20' : ''">
Diff
</x-filament::button>
<x-filament::button size="xs" color="gray" type="button" x-on:click="tab = 'before'" x-bind:class="tab === 'before' ? 'ring-1 ring-gray-300 dark:ring-white/20' : ''">
Vorher
</x-filament::button>
<x-filament::button size="xs" color="gray" type="button" x-on:click="tab = 'after'" x-bind:class="tab === 'after' ? 'ring-1 ring-gray-300 dark:ring-white/20' : ''">
Nachher
</x-filament::button>
</div>
<div x-show="tab === 'diff'" x-cloak>
@php
$rows = [];
$count = count($ops); $count = count($ops);
for ($i = 0; $i < $count; $i++) { for ($i = 0; $i < $count; $i++) {
@ -272,28 +287,99 @@
$line = (string) ($op['line'] ?? ''); $line = (string) ($op['line'] ?? '');
if ($type === 'equal') { if ($type === 'equal') {
echo e($line)."\n"; $rows[] = [
'left' => ['type' => 'equal', 'line' => $line],
'right' => ['type' => 'equal', 'line' => $line],
];
continue; continue;
} }
if ($type === 'delete' && is_array($next) && ($next['type'] ?? null) === 'insert') { if ($type === 'delete' && is_array($next) && ($next['type'] ?? null) === 'insert') {
echo '<span class="block bg-danger-50 text-danger-700 dark:bg-danger-950/40 dark:text-danger-200">- '.e($line)."</span>\n"; $rows[] = [
echo '<span class="block bg-success-50 text-success-700 dark:bg-success-950/40 dark:text-success-200">+ '.e((string) ($next['line'] ?? ''))."</span>\n"; 'left' => ['type' => 'delete', 'line' => $line],
'right' => ['type' => 'insert', 'line' => (string) ($next['line'] ?? '')],
];
$i++; $i++;
continue; continue;
} }
if ($type === 'delete') { if ($type === 'delete') {
echo '<span class="block bg-danger-50 text-danger-700 dark:bg-danger-950/40 dark:text-danger-200">- '.e($line)."</span>\n"; $rows[] = [
'left' => ['type' => 'delete', 'line' => $line],
'right' => ['type' => 'blank', 'line' => ''],
];
continue; continue;
} }
if ($type === 'insert') { if ($type === 'insert') {
echo '<span class="block bg-success-50 text-success-700 dark:bg-success-950/40 dark:text-success-200">+ '.e($line)."</span>\n"; $rows[] = [
'left' => ['type' => 'blank', 'line' => ''],
'right' => ['type' => 'insert', 'line' => $line],
];
continue; continue;
} }
} }
@endphp
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
<div>
<div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Alt</div>
<pre class="mt-1 max-h-96 overflow-auto font-mono text-xs text-gray-800 dark:text-gray-200 whitespace-pre">@php
foreach ($rows as $row) {
$left = $row['left'];
$leftType = $left['type'];
$leftLine = (string) ($left['line'] ?? '');
if ($leftType === 'equal') {
echo e($leftLine)."\n";
continue;
}
if ($leftType === 'delete') {
echo '<span class="block bg-danger-50 text-danger-700 dark:bg-danger-950/40 dark:text-danger-200">- '.e($leftLine)."</span>\n";
continue;
}
echo "\n";
}
@endphp</pre> @endphp</pre>
</div>
<div>
<div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Neu</div>
<pre class="mt-1 max-h-96 overflow-auto font-mono text-xs text-gray-800 dark:text-gray-200 whitespace-pre">@php
foreach ($rows as $row) {
$right = $row['right'];
$rightType = $right['type'];
$rightLine = (string) ($right['line'] ?? '');
if ($rightType === 'equal') {
echo e($rightLine)."\n";
continue;
}
if ($rightType === 'insert') {
echo '<span class="block bg-success-50 text-success-700 dark:bg-success-950/40 dark:text-success-200">+ '.e($rightLine)."</span>\n";
continue;
}
echo "\n";
}
@endphp</pre>
</div>
</div>
</div>
<div x-show="tab === 'before'" x-cloak>
<div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Vorher</div>
<pre class="mt-1 max-h-96 overflow-auto font-mono text-xs text-gray-800 dark:text-gray-200 whitespace-pre">{{ (string) $fromText }}</pre>
</div>
<div x-show="tab === 'after'" x-cloak>
<div class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Nachher</div>
<pre class="mt-1 max-h-96 overflow-auto font-mono text-xs text-gray-800 dark:text-gray-200 whitespace-pre">{{ (string) $toText }}</pre>
</div>
</div>
</details> </details>
</div> </div>
@else @else