From 7e8320cd6b5ef572890f2972dd1164f8bd8ef3b9 Mon Sep 17 00:00:00 2001
From: "Joseph.Rawlings" <root0091@gmail.com>
Date: Wed, 3 Dec 2025 22:57:04 -0500
Subject: [PATCH] refactor: optimize onboarding modal structure with improved
 transition effects and slide management for enhanced user experience

---
 .../resources/views/modal.blade.php           | 186 +++++++++---------
 1 file changed, 93 insertions(+), 93 deletions(-)

diff --git a/extensions/Others/Onboarding/resources/views/modal.blade.php b/extensions/Others/Onboarding/resources/views/modal.blade.php
index 0caa3a835..1d9d833aa 100644
--- a/extensions/Others/Onboarding/resources/views/modal.blade.php
+++ b/extensions/Others/Onboarding/resources/views/modal.blade.php
@@ -1,103 +1,103 @@
 @php use Illuminate\Support\Facades\Storage; @endphp
-<div>
 @if($showModal && count($slides) > 0)
-<div id="onboarding-modal-wrapper" 
-     style="opacity: 0; visibility: hidden;"
-     x-data="{ 
-         open: @entangle('showModal'), 
-         currentSlide: @entangle('currentSlide'),
-         ready: false,
-         init() {
-             setTimeout(() => {
-                 this.ready = true;
-                 this.$el.style.opacity = '1';
-                 this.$el.style.visibility = 'visible';
-             }, 50);
-             this.$watch('open', value => { 
-                 if(value) { 
-                     document.documentElement.style.overflow = 'hidden'; 
-                 } else { 
-                     document.documentElement.style.overflow = ''; 
-                 } 
-             });
-         }
-     }">
-    
-    {{-- Modal Container --}}
-    <div x-show="open"
-         style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;">
-        
-        {{-- Backdrop --}}
-        @if($this->showBackdrop)
-        <div class="bg-black/50"
-             style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: auto;"
-             wire:click="finish"></div>
-        @endif
-        
-        {{-- Modal Dialog --}}
-        <div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-hidden"
-             style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;">
+    <style>
+        .onboarding-modal[x-cloak],
+        .onboarding-modal [x-cloak] {
+            display: none !important;
+        }
+    </style>
 
-            {{-- Single slide container that updates content --}}
-            @php $slide = $slides[$currentSlide] ?? $slides[0]; @endphp
-            <div style="display: flex; flex-direction: column;">
-                
-                {{-- Slide Image --}}
-                @if($slide['image'])
-                <div style="width: 100%; height: 14rem; flex-shrink: 0; overflow: hidden; border-radius: 0.75rem 0.75rem 0 0;">
-                    <img style="width: 100%; height: 100%; object-fit: cover;" 
-                         src="{{ Storage::url($slide['image']) }}" 
-                         alt="{{ $slide['title'] }}">
-                </div>
-                @endif
-                
-                {{-- Slide Content --}}
-                <div style="padding: 1.5rem;">
-                    <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;" class="text-primary-100">
-                        {{ $slide['title'] }}
-                    </h3>
-                    <p style="font-size: 0.875rem; line-height: 1.625;" class="text-base/80">
-                        {{ $slide['description'] }}
-                    </p>
-                </div>
+    <div class="onboarding-modal"
+         x-data="{ open: @entangle('showModal'), currentSlide: @entangle('currentSlide') }"
+         x-cloak>
+        <div x-show="open"
+             x-transition:enter="transition ease-out duration-300"
+             x-transition:enter-start="opacity-0"
+             x-transition:enter-end="opacity-100"
+             x-transition:leave="transition ease-in duration-200"
+             x-transition:leave-start="opacity-100"
+             x-transition:leave-end="opacity-0"
+             style="position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; pointer-events: none;">
 
-                {{-- Slide Indicators --}}
-                <div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem;">
-                    @foreach($slides as $dotIndex => $dot)
-                        <div style="height: 0.375rem; border-radius: 9999px; transition: all 0.3s; {{ $dotIndex === $currentSlide ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.375rem; background-color: var(--color-neutral, #525252);' }}"></div>
-                    @endforeach
-                </div>
+            @if($this->showBackdrop)
+                <div class="bg-black/50"
+                     style="position: absolute; inset: 0; pointer-events: auto;"
+                     wire:click="finish"></div>
+            @endif
 
-                {{-- Navigation Buttons --}}
-                <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 1.5rem 1.25rem 1.5rem;">
-                    <button wire:click="previousSlide" 
-                            @if($currentSlide === 0) disabled @endif
-                            style="padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500; transition: all 0.15s; border: none; background: transparent; cursor: pointer; {{ $currentSlide === 0 ? 'opacity: 0.5; cursor: not-allowed;' : '' }}"
-                            class="text-base/70 hover:text-primary-100">
-                        <span style="display: flex; align-items: center; gap: 0.375rem;">
-                            <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
-                            </svg>
-                            Back
-                        </span>
-                    </button>
+            <div class="bg-background-secondary border border-neutral rounded-xl shadow-2xl overflow-visible"
+                 style="position: relative; width: calc(100% - 2rem); max-width: 32rem; max-height: calc(100vh - 4rem); pointer-events: auto; z-index: 10;"
+                 x-transition:enter="transition ease-out duration-300"
+                 x-transition:enter-start="opacity-0 scale-90"
+                 x-transition:enter-end="opacity-100 scale-100"
+                 x-transition:leave="transition ease-in duration-200"
+                 x-transition:leave-start="opacity-100 scale-100"
+                 x-transition:leave-end="opacity-0 scale-90">
 
-                    <button wire:click="{{ $currentSlide === count($slides) - 1 ? 'finish' : 'nextSlide' }}" 
-                            style="padding: 0.375rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; transition: all 0.15s; border: none; cursor: pointer; color: white;"
-                            class="bg-primary hover:bg-primary/90">
-                        <span style="display: flex; align-items: center; gap: 0.375rem;">
-                            {{ $currentSlide === count($slides) - 1 ? 'Finish' : (($slide['is_guided'] ?? false) ? 'Continue' : 'Next') }}
-                            @if($currentSlide !== count($slides) - 1)
-                            <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
-                            </svg>
-                            @endif
-                        </span>
-                    </button>
-                </div>
+                @foreach($slides as $index => $slide)
+                    <div class="onboarding-slide"
+                         wire:key="slide-{{ $slide['id'] }}"
+                         x-show="currentSlide === {{ $index }}"
+                         x-cloak
+                         x-transition:enter="transition ease-out duration-150"
+                         x-transition:enter-start="opacity-0 translate-y-2"
+                         x-transition:enter-end="opacity-100 translate-y-0"
+                         x-transition:leave="transition ease-in duration-150"
+                         x-transition:leave-start="opacity-100 translate-y-0"
+                         x-transition:leave-end="opacity-0 translate-y-2"
+                         style="display: flex; flex-direction: column;">
+
+                        @if($slide['image'])
+                            <div style="width: 100%; height: 14rem; overflow: hidden; border-radius: 0.75rem 0.75rem 0 0;">
+                                <img style="width: 100%; height: 100%; object-fit: cover;"
+                                     src="{{ Storage::url($slide['image']) }}"
+                                     alt="{{ $slide['title'] }}">
+                            </div>
+                        @endif
+
+                        <div style="padding: 1.5rem;">
+                            <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 0.625rem;" class="text-primary-100">
+                                {{ $slide['title'] }}
+                            </h3>
+                            <p style="font-size: 0.875rem; line-height: 1.625;" class="text-base/80">
+                                {{ $slide['description'] }}
+                            </p>
+                        </div>
+
+                        <div style="display: flex; justify-content: center; gap: 0.5rem; padding: 0 1.5rem 1rem 1.5rem;">
+                            @foreach($slides as $dotIndex => $dot)
+                                <div style="height: 0.375rem; border-radius: 9999px; transition: all 0.3s;"
+                                     :style="currentSlide === {{ $dotIndex }} ? 'width: 1.5rem; background-color: var(--color-primary, #6366f1);' : 'width: 0.375rem; background-color: var(--color-neutral, #525252);'"></div>
+                            @endforeach
+                        </div>
+
+                        <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.25rem 1.5rem 1.25rem 1.5rem;">
+                            <button wire:click="previousSlide"
+                                    :disabled="currentSlide === 0"
+                                    style="padding: 0.375rem 1rem; font-size: 0.875rem; font-weight: 500; border: none; background: transparent; cursor: pointer;"
+                                    class="text-base/70 hover:text-primary-100 disabled:opacity-50 disabled:cursor-not-allowed">
+                                <span style="display: flex; align-items: center; gap: 0.375rem;">
+                                    <svg style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
+                                    </svg>
+                                    Back
+                                </span>
+                            </button>
+
+                            <button @click="currentSlide === {{ count($slides) - 1 }} ? $wire.finish() : $wire.nextSlide()"
+                                    style="padding: 0.375rem 1.25rem; font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem; border: none; cursor: pointer; color: white;"
+                                    class="bg-primary hover:bg-primary/90">
+                                <span style="display: flex; align-items: center; gap: 0.375rem;">
+                                    <span x-text="currentSlide === {{ count($slides) - 1 }} ? 'Finish' : (@js($slide['is_guided'] ?? false) ? 'Continue' : 'Next')"></span>
+                                    <svg x-show="currentSlide !== {{ count($slides) - 1 }}" style="width: 1rem; height: 1rem;" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+                                    </svg>
+                                </span>
+                            </button>
+                        </div>
+                    </div>
+                @endforeach
             </div>
         </div>
     </div>
-</div>
 @endif
-</div>