From 74600185ba33af69d3775cfec9c04f69b5545413 Mon Sep 17 00:00:00 2001
From: boban <boban.blaskovic@gmail.com>
Date: Mon, 27 Apr 2026 03:14:28 +0200
Subject: [PATCH] Redesign: Update-Modal mit CluBird-Icon, Progress-Bar und
 besserem Log-Bereich

---
 .../ui/system/modal/update-modal.blade.php    | 111 ++++++++++++------
 1 file changed, 76 insertions(+), 35 deletions(-)

diff --git a/resources/views/livewire/ui/system/modal/update-modal.blade.php b/resources/views/livewire/ui/system/modal/update-modal.blade.php
index 617ca79..7a3b9ce 100644
--- a/resources/views/livewire/ui/system/modal/update-modal.blade.php
+++ b/resources/views/livewire/ui/system/modal/update-modal.blade.php
@@ -1,53 +1,94 @@
-<div wire:poll.2s="refresh" class="p-4">
-    <div class="flex items-center gap-3 mb-3">
-        <div class="shrink-0 w-10 h-10 rounded-full bg-emerald-500/15 border border-emerald-400/30
-                    flex items-center justify-center">
-            <i class="ph ph-arrows-clockwise text-xl {{ $state==='done' ? '' : 'animate-spin' }}"></i>
+<div wire:poll.2s="refresh">
+
+    {{-- Header --}}
+    <div class="flex items-center gap-3 p-5 border-b border-white/8">
+        <div class="relative shrink-0 flex items-center justify-center w-10 h-10 rounded-xl"
+             style="background:linear-gradient(135deg,#6366f1,#4338ca);box-shadow:0 0 16px rgba(99,102,241,.35)">
+            <svg viewBox="0 0 28 28" width="18" height="18" fill="none">
+                <path d="M5 19 C5 19 8 10 15 9 C19 8 23 11 24 15" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+                <path d="M5 19 C6.5 22 9 23.5 12 23.5 C15 23.5 18 22 19.5 19" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
+                <circle cx="19" cy="8" r="2" fill="white"/>
+            </svg>
+            @if($state !== 'done')
+                <div class="absolute inset-0 rounded-xl border-2 border-indigo-400/50 animate-ping" style="animation-duration:1.8s"></div>
+            @endif
         </div>
-        <div>
-            <div class="text-white/90 font-semibold">
-                {{ $state==='done'
-                    ? ($rc===0 ? 'Update abgeschlossen' : 'Update fehlgeschlagen')
-                    : 'Update läuft …' }}
+        <div class="flex-1 min-w-0">
+            <div class="text-[13px] font-semibold" style="color:var(--mw-t1)">
+                @if($state === 'done' && $rc === 0)
+                    Update abgeschlossen
+                @elseif($state === 'done' && $rc !== 0)
+                    Update fehlgeschlagen
+                @else
+                    Update wird durchgeführt …
+                @endif
             </div>
-            <div class="text-xs text-white/60">
-                {{ $line ?? '–' }}
+            <div class="text-[11px] mt-0.5 truncate" style="color:var(--mw-t4)">
+                {{ $line ?: 'Bitte warten …' }}
             </div>
         </div>
+        @if($state === 'done')
+            <span class="shrink-0 inline-flex items-center gap-1 rounded-full text-[10px] border px-2.5 py-0.5
+                {{ $rc === 0
+                    ? 'text-emerald-200 bg-emerald-500/10 border-emerald-400/30'
+                    : 'text-rose-200 bg-rose-500/10 border-rose-400/30' }}">
+                <i class="ph {{ $rc === 0 ? 'ph-check-circle' : 'ph-warning-circle' }} text-[11px]"></i>
+                {{ $rc === 0 ? 'Erfolgreich' : 'Fehler (rc='.$rc.')' }}
+            </span>
+        @else
+            <span class="shrink-0 inline-flex items-center gap-1 rounded-full text-[10px] border px-2.5 py-0.5 text-sky-200 bg-sky-500/10 border-sky-400/30">
+                <i class="ph ph-arrows-clockwise text-[11px] animate-spin"></i>
+                {{ $percent }}%
+            </span>
+        @endif
     </div>
 
+    {{-- Progress Bar --}}
+    <div class="h-0.5 w-full" style="background:var(--mw-b1)">
+        <div class="h-full transition-all duration-500
+            {{ $state === 'done' && $rc !== 0 ? 'bg-rose-400/70' : 'bg-indigo-400/70' }}
+            {{ $state !== 'done' ? 'animate-[mwprogress_1.4s_ease-in-out_infinite]' : '' }}"
+             style="{{ $state === 'done' ? 'width:100%' : 'width:40%' }}"></div>
+    </div>
+    <style>
+        @keyframes mwprogress {
+            0%   { transform: translateX(-150%) }
+            100% { transform: translateX(350%) }
+        }
+    </style>
 
-    {{-- Progress --}}
-    <div class="mb-3">
-        <div class="h-2 bg-white/10 rounded overflow-hidden">
-            <div class="h-full bg-emerald-400 transition-all"
-                 style="width: {{ $percent }}%"></div>
+    {{-- Log --}}
+    <div class="p-4">
+        <div class="rounded-lg text-[11px] font-mono leading-relaxed overflow-auto max-h-60 p-3"
+             style="background:var(--mw-bg3);border:1px solid var(--mw-b1);color:var(--mw-t4)"
+             x-data x-init="$el.scrollTop = $el.scrollHeight" x-effect="$el.scrollTop = $el.scrollHeight">
+            @forelse($tail as $l)
+                <div>{{ $l }}</div>
+            @empty
+                <div style="color:var(--mw-t5)">Warte auf Log-Ausgabe …</div>
+            @endforelse
         </div>
-        <div class="text-[11px] text-white/50 mt-1">{{ $percent }}%</div>
     </div>
 
-    {{-- Log Tail --}}
-    <div class="rounded-lg bg-black/40 border border-white/10 p-2 max-h-64 overflow-auto text-[12px] font-mono text-white/80">
-        @foreach($tail as $l)
-            {{ $l }}
-        @endforeach
-    </div>
-
-    <div class="mt-4 flex justify-end gap-2">
-        @if($state==='done' && $rc===0)
-            <button wire:click="$dispatch('closeModal')" class="px-3 py-1 rounded-md
-                    bg-emerald-500/10 border border-emerald-400/30 text-emerald-200">
-                Schließen
-            </button>
-        @elseif($state==='done' && $rc!==0)
-            <button wire:click="$dispatch('closeModal')" class="px-3 py-1 rounded-md
-                    bg-rose-500/10 border border-rose-400/30 text-rose-200">
+    {{-- Footer --}}
+    <div class="flex justify-end px-4 pb-4">
+        @if($state === 'done')
+            <button wire:click="$dispatch('closeModal')"
+                    class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] font-medium border transition-colors
+                        {{ $rc === 0
+                            ? 'text-emerald-200 bg-emerald-500/10 border-emerald-400/30 hover:bg-emerald-500/20'
+                            : 'text-rose-200 bg-rose-500/10 border-rose-400/30 hover:bg-rose-500/20' }}">
+                <i class="ph {{ $rc === 0 ? 'ph-check' : 'ph-x' }} text-[12px]"></i>
                 Schließen
             </button>
         @else
-            <button class="px-3 py-1 rounded-md bg-white/10 border border-white/15 text-white/50 cursor-not-allowed" disabled>
+            <button disabled
+                    class="inline-flex items-center gap-1.5 rounded-lg px-3 py-1.5 text-[12px] border opacity-40 cursor-not-allowed"
+                    style="color:var(--mw-t4);border-color:var(--mw-b2)">
+                <i class="ph ph-hourglass text-[12px]"></i>
                 Bitte warten …
             </button>
         @endif
     </div>
+
 </div>