fix(logs): preserve manual follow state and hide filtered lines

resources/css/app.css

@@ -3209,6 +3209,10 @@ html[data-theme="custom"] .logs-viewer-timestamp {
     padding-block: 0.125rem;
 }
 
+.logs-viewer-line.hidden {
+    display: none;
+}
+
 .logs-viewer-timestamp {
     flex-shrink: 0;
     font-size: 0.625rem;

resources/views/livewire/project/application/deployment/show.blade.php

@@ -17,6 +17,7 @@
                     <div x-data="{
         fullscreen: @entangle('fullscreen'),
         alwaysScroll: {{ $isKeepAliveOn ? 'true' : 'false' }},
+        followManuallyDisabled: false,
         rafId: null,
         scrollTimeout: null,
         scrollDebounce: null,
@@ -90,7 +91,7 @@
             this.scrollDebounce = setTimeout(() => {
                 if (this.destroyed) return;
                 const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-                if (!this.alwaysScroll && distanceFromBottom <= 10) {
+                if (!this.alwaysScroll && !this.followManuallyDisabled && distanceFromBottom <= 10) {
                     this.alwaysScroll = true;
                     this.scheduleScroll();
                 }
@@ -109,8 +110,10 @@
         toggleScroll() {
             this.alwaysScroll = !this.alwaysScroll;
             if (this.alwaysScroll) {
+                this.followManuallyDisabled = false;
                 this.scheduleScroll();
             } else {
+                this.followManuallyDisabled = true;
                 this.cancelScrollLoop();
             }
         },

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

@@ -5,6 +5,7 @@
         logsLoaded: false,
         fullscreen: false,
         alwaysScroll: false,
+        followManuallyDisabled: false,
         rafId: null,
         scrollDebounce: null,
         colorLogs: localStorage.getItem('coolify-color-logs') === 'true',
@@ -80,8 +81,10 @@
         toggleScroll() {
             this.alwaysScroll = !this.alwaysScroll;
             if (this.alwaysScroll) {
+                this.followManuallyDisabled = false;
                 this.scheduleScroll();
             } else {
+                this.followManuallyDisabled = true;
                 if (this.rafId) {
                     cancelAnimationFrame(this.rafId);
                     this.rafId = null;
@@ -94,7 +97,7 @@
             this.scrollDebounce = setTimeout(() => {
                 const el = event.target;
                 const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-                if (!this.alwaysScroll && distanceFromBottom <= 10) {
+                if (!this.alwaysScroll && !this.followManuallyDisabled && distanceFromBottom <= 10) {
                     this.alwaysScroll = true;
                     this.scheduleScroll();
                 }