Revert "Add Simple View toggle for logs" (#7465)

resources/views/components/forms/checkbox-alpine.blade.php

@@ -1,23 +0,0 @@
-@props([
-    'label' => null,
-    'disabled' => false,
-    'defaultClass' => 'dark:border-neutral-700 text-coolgray-400 dark:bg-coolgray-100 rounded-sm cursor-pointer dark:disabled:bg-base dark:disabled:cursor-not-allowed focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base',
-])
-
-<div @class([
-    'flex flex-row items-center gap-4 pr-2 py-1 form-control min-w-fit',
-    'dark:hover:bg-coolgray-100 cursor-pointer' => !$disabled,
-])>
-    <label @class(['flex gap-4 items-center px-0 min-w-fit label w-full'])>
-        <span class="flex grow gap-2">
-            @if ($label)
-                @if ($disabled)
-                    <span class="opacity-60">{!! $label !!}</span>
-                @else
-                    {!! $label !!}
-                @endif
-            @endif
-        </span>
-        <input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }} />
-    </label>
-</div>

resources/views/livewire/project/shared/get-logs.blade.php

@@ -1,12 +1,36 @@
 <div class="p-4 my-4 border dark:border-coolgray-200 border-neutral-200">
     <div x-init="$wire.getLogs" id="screen" x-data="{
         fullscreen: false,
-        useSimpleView: localStorage.getItem('logView') === 'simple',
+        alwaysScroll: false,
+        intervalId: null,
         makeFullscreen() {
             this.fullscreen = !this.fullscreen;
+            if (this.fullscreen === false) {
+                this.alwaysScroll = false;
+                clearInterval(this.intervalId);
+            }
         },
-        toggleLogView() {
+        toggleScroll() {
-            localStorage.setItem('logView', this.useSimpleView ? 'simple' : 'enhanced');
+            this.alwaysScroll = !this.alwaysScroll;
+    
+            if (this.alwaysScroll) {
+                this.intervalId = setInterval(() => {
+                    const screen = document.getElementById('screen');
+                    const logs = document.getElementById('logs');
+                    if (screen.scrollTop !== logs.scrollHeight) {
+                        screen.scrollTop = logs.scrollHeight;
+                    }
+                }, 100);
+            } else {
+                clearInterval(this.intervalId);
+                this.intervalId = null;
+            }
+        },
+        goTop() {
+            this.alwaysScroll = false;
+            clearInterval(this.intervalId);
+            const screen = document.getElementById('screen');
+            screen.scrollTop = 0;
         }
     }">
         <div class="flex gap-2 items-center">
@@ -33,8 +57,6 @@
                 <x-forms.button type="submit">Refresh</x-forms.button>
                 <x-forms.checkbox instantSave label="Stream Logs" id="streamLogs"></x-forms.checkbox>
                 <x-forms.checkbox instantSave label="Include Timestamps" id="showTimeStamps"></x-forms.checkbox>
-                <x-forms.checkbox-alpine label="Simple View" x-model="useSimpleView"
-                    @click="$nextTick(() => toggleLogView())" />
             </div>
         </form>
         <div :class="fullscreen ? 'fullscreen' : 'relative w-full py-4 mx-auto'">
@@ -43,6 +65,21 @@
                 <div :class="fullscreen ? 'fixed top-4 right-4' : 'absolute top-6 right-0'">
                     <div class="flex justify-end gap-4" :class="fullscreen ? 'fixed' : ''"
                         style="transform: translateX(-100%)">
+                        {{-- <button title="Go Top" x-show="fullscreen" x-on:click="goTop">
+                            <svg class="w-5 h-5 opacity-30 hover:opacity-100" viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path fill="none" stroke="currentColor" stroke-linecap="round"
+                                    stroke-linejoin="round" stroke-width="2" d="M12 5v14m4-10l-4-4M8 9l4-4" />
+                            </svg>
+                        </button>
+                        <button title="Follow Logs" x-show="fullscreen" :class="alwaysScroll ? 'dark:text-warning' : ''"
+                            x-on:click="toggleScroll">
+                            <svg class="w-5 h-5 opacity-30 hover:opacity-100" viewBox="0 0 24 24"
+                                xmlns="http://www.w3.org/2000/svg">
+                                <path fill="none" stroke="currentColor" stroke-linecap="round"
+                                    stroke-linejoin="round" stroke-width="2" d="M12 5v14m4-4l-4 4m-4-4l4 4" />
+                            </svg>
+                        </button> --}}
                         <button title="Fullscreen" x-show="!fullscreen" x-on:click="makeFullscreen">
                             <svg class="w-5 h-5 opacity-30 hover:opacity-100" viewBox="0 0 24 24"
                                 xmlns="http://www.w3.org/2000/svg">
@@ -55,23 +92,17 @@
                             </svg>
                         </button>
                         <button title="Minimize" x-show="fullscreen" x-on:click="makeFullscreen">
-                            <svg class="w-5 h-5 opacity-30 hover:opacity-100" viewBox="0 0 24 24"
+                            <svg class="w-5 h-5 opacity-30 hover:opacity-100"
-                                xmlns="http://www.w3.org/2000/svg">
+                                viewBox="0 0 24 24"xmlns="http://www.w3.org/2000/svg">
-                                <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                <path fill="none" stroke="currentColor" stroke-linecap="round"
-                                    stroke-width="2" d="M6 14h4m0 0v4m0-4l-6 6m14-10h-4m0 0V6m0 4l6-6" />
+                                    stroke-linejoin="round" stroke-width="2"
+                                    d="M6 14h4m0 0v4m0-4l-6 6m14-10h-4m0 0V6m0 4l6-6" />
                             </svg>
                         </button>
                     </div>
                 </div>
                 @if ($outputs)
                     <div id="logs" class="font-mono text-sm">
-                        <!-- Simple View (Original) -->
-                        <div x-show="useSimpleView">
-                            <pre class="whitespace-pre-wrap break-all">{{ $outputs }}</pre>
-                        </div>
-
-                        <!-- Enhanced View (Current with color coding) -->
-                        <div x-show="!useSimpleView">
                         @foreach (explode("\n", trim($outputs)) as $line)
                             @if (!empty(trim($line)))
                                 @php
@@ -125,7 +156,6 @@ class="text-xs text-gray-500 dark:text-gray-400 font-mono mr-2">{{ $timestamp }}
                             @endif
                         @endforeach
                     </div>
-                    </div>
                 @else
                     <div id="logs" class="font-mono text-sm py-4 px-2 text-gray-500 dark:text-gray-400">
                         Refresh to get the logs...