From cbba7f0a672eb982e2455c0582c90e0714cdecf9 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Thu, 4 Dec 2025 15:37:14 +0100
Subject: [PATCH] Add collapsible option to GetLogs component and improve
 toolbar layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added a new `collapsible` property to GetLogs component that allows disabling the expandable header, useful for log viewers in dedicated pages and slide-overs. Applied this to Sentinel logs, Proxy logs, and Coolify Proxy log pages. Also improved the toolbar by moving the lines counter to the left side with an inline prefix label and repositioning the match counter next to it for better organization.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/Livewire/Project/Shared/GetLogs.php       |  2 +
 .../database/clickhouse/general.blade.php     |  2 +-
 .../database/dragonfly/general.blade.php      |  2 +-
 .../project/database/keydb/general.blade.php  |  2 +-
 .../database/mariadb/general.blade.php        |  2 +-
 .../database/mongodb/general.blade.php        |  2 +-
 .../project/database/mysql/general.blade.php  |  2 +-
 .../database/postgresql/general.blade.php     |  2 +-
 .../project/database/redis/general.blade.php  |  2 +-
 .../project/shared/get-logs.blade.php         | 66 ++++++++++---------
 .../livewire/server/proxy/logs.blade.php      |  2 +-
 .../views/livewire/server/show.blade.php      |  6 +-
 12 files changed, 51 insertions(+), 41 deletions(-)

diff --git a/app/Livewire/Project/Shared/GetLogs.php b/app/Livewire/Project/Shared/GetLogs.php
index f86d882085..16cabfd6bb 100644
--- a/app/Livewire/Project/Shared/GetLogs.php
+++ b/app/Livewire/Project/Shared/GetLogs.php
@@ -45,6 +45,8 @@ class GetLogs extends Component
 
     public bool $expandByDefault = false;
 
+    public bool $collapsible = true;
+
     public function mount()
     {
         if (! is_null($this->resource)) {
diff --git a/resources/views/livewire/project/database/clickhouse/general.blade.php b/resources/views/livewire/project/database/clickhouse/general.blade.php
index 9017f7c097..2010e0afcd 100644
--- a/resources/views/livewire/project/database/clickhouse/general.blade.php
+++ b/resources/views/livewire/project/database/clickhouse/general.blade.php
@@ -66,7 +66,7 @@
                             <x-slot:title>Proxy Logs</x-slot:title>
                             <x-slot:content>
                                 <livewire:project.shared.get-logs :server="$server" :resource="$database"
-                                    container="{{ data_get($database, 'uuid') }}-proxy" lazy />
+                                    container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
                             </x-slot:content>
                             <x-forms.button disabled="{{ !$isPublic }}"
                                 @click="slideOverOpen=true">Logs</x-forms.button>
diff --git a/resources/views/livewire/project/database/dragonfly/general.blade.php b/resources/views/livewire/project/database/dragonfly/general.blade.php
index 855a2ecdc0..2b2e5d3550 100644
--- a/resources/views/livewire/project/database/dragonfly/general.blade.php
+++ b/resources/views/livewire/project/database/dragonfly/general.blade.php
@@ -103,7 +103,7 @@
                             <x-slot:title>Proxy Logs</x-slot:title>
                             <x-slot:content>
                                 <livewire:project.shared.get-logs :server="$server" :resource="$database"
-                                    container="{{ data_get($database, 'uuid') }}-proxy" lazy />
+                                    container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
                             </x-slot:content>
                             <x-forms.button disabled="{{ !$isPublic }}"
                                 @click="slideOverOpen=true">Logs</x-forms.button>
diff --git a/resources/views/livewire/project/database/keydb/general.blade.php b/resources/views/livewire/project/database/keydb/general.blade.php
index a4b0eb4711..e1a121b4e0 100644
--- a/resources/views/livewire/project/database/keydb/general.blade.php
+++ b/resources/views/livewire/project/database/keydb/general.blade.php
@@ -103,7 +103,7 @@
                             <x-slot:title>Proxy Logs</x-slot:title>
                             <x-slot:content>
                                 <livewire:project.shared.get-logs :server="$server" :resource="$database"
-                                    container="{{ data_get($database, 'uuid') }}-proxy" lazy />
+                                    container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
                             </x-slot:content>
                             <x-forms.button disabled="{{ !$isPublic }}"
                                 @click="slideOverOpen=true">Logs</x-forms.button>
diff --git a/resources/views/livewire/project/database/mariadb/general.blade.php b/resources/views/livewire/project/database/mariadb/general.blade.php
index b428c31444..eba0deafa5 100644
--- a/resources/views/livewire/project/database/mariadb/general.blade.php
+++ b/resources/views/livewire/project/database/mariadb/general.blade.php
@@ -127,7 +127,7 @@
                             <x-slot:title>Proxy Logs</x-slot:title>
                             <x-slot:content>
                                 <livewire:project.shared.get-logs :server="$server" :resource="$database"
-                                    container="{{ data_get($database, 'uuid') }}-proxy" lazy />
+                                    container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
                             </x-slot:content>
                             <x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
                                 @click="slideOverOpen=true">Logs</x-forms.button>
diff --git a/resources/views/livewire/project/database/mongodb/general.blade.php b/resources/views/livewire/project/database/mongodb/general.blade.php
index 871ac55c4e..6cdd7b81ff 100644
--- a/resources/views/livewire/project/database/mongodb/general.blade.php
+++ b/resources/views/livewire/project/database/mongodb/general.blade.php
@@ -141,7 +141,7 @@
                                 <x-slot:title>Proxy Logs</x-slot:title>
                                 <x-slot:content>
                                     <livewire:project.shared.get-logs :server="$server" :resource="$database"
-                                        container="{{ data_get($database, 'uuid') }}-proxy" lazy />
+                                        container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
                                 </x-slot:content>
                                 <x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
                                     @click="slideOverOpen=true">Logs</x-forms.button>
diff --git a/resources/views/livewire/project/database/mysql/general.blade.php b/resources/views/livewire/project/database/mysql/general.blade.php
index 512a3eb1be..04af62d274 100644
--- a/resources/views/livewire/project/database/mysql/general.blade.php
+++ b/resources/views/livewire/project/database/mysql/general.blade.php
@@ -144,7 +144,7 @@
                             <x-slot:title>Proxy Logs</x-slot:title>
                             <x-slot:content>
                                 <livewire:project.shared.get-logs :server="$server" :resource="$database"
-                                    container="{{ data_get($database, 'uuid') }}-proxy" lazy />
+                                    container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
                             </x-slot:content>
                             <x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
                                 @click="slideOverOpen=true">Logs</x-forms.button>
diff --git a/resources/views/livewire/project/database/postgresql/general.blade.php b/resources/views/livewire/project/database/postgresql/general.blade.php
index 9c378a33f8..509efe9935 100644
--- a/resources/views/livewire/project/database/postgresql/general.blade.php
+++ b/resources/views/livewire/project/database/postgresql/general.blade.php
@@ -152,7 +152,7 @@
                                 <x-slot:title>Proxy Logs</x-slot:title>
                                 <x-slot:content>
                                     <livewire:project.shared.get-logs :server="$server" :resource="$database"
-                                        container="{{ data_get($database, 'uuid') }}-proxy" lazy />
+                                        container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
                                 </x-slot:content>
                                 <x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
                                     @click="slideOverOpen=true">Logs</x-forms.button>
diff --git a/resources/views/livewire/project/database/redis/general.blade.php b/resources/views/livewire/project/database/redis/general.blade.php
index 7ffc8f218a..39af4709e3 100644
--- a/resources/views/livewire/project/database/redis/general.blade.php
+++ b/resources/views/livewire/project/database/redis/general.blade.php
@@ -122,7 +122,7 @@
                             <x-slot:title>Proxy Logs</x-slot:title>
                             <x-slot:content>
                                 <livewire:project.shared.get-logs :server="$server" :resource="$database"
-                                    container="{{ data_get($database, 'uuid') }}-proxy" lazy />
+                                    container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
                             </x-slot:content>
                             <x-forms.button disabled="{{ !$isPublic }}"
                                 @click="slideOverOpen=true">Logs</x-forms.button>
diff --git a/resources/views/livewire/project/shared/get-logs.blade.php b/resources/views/livewire/project/shared/get-logs.blade.php
index bc95d5b970..129bf81359 100644
--- a/resources/views/livewire/project/shared/get-logs.blade.php
+++ b/resources/views/livewire/project/shared/get-logs.blade.php
@@ -1,7 +1,8 @@
-<div class="my-4 border dark:border-coolgray-200 border-neutral-200">
+<div class="{{ $collapsible ? 'my-4 border dark:border-coolgray-200 border-neutral-200' : '' }}">
     <div id="screen" x-data="{
-        expanded: {{ $expandByDefault ? 'true' : 'false' }},
-        logsLoaded: {{ $expandByDefault ? 'true' : 'false' }},
+        collapsible: {{ $collapsible ? 'true' : 'false' }},
+        expanded: {{ ($expandByDefault || !$collapsible) ? 'true' : 'false' }},
+        logsLoaded: {{ ($expandByDefault || !$collapsible) ? 'true' : 'false' }},
         fullscreen: false,
         alwaysScroll: false,
         intervalId: null,
@@ -139,41 +140,46 @@
             });
         }
     }">
-        <div class="flex gap-2 items-center p-4 cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-coolgray-200"
-            x-on:click="expanded = !expanded; if (expanded && !logsLoaded) { $wire.getLogs(); logsLoaded = true; }">
-            <svg class="w-4 h-4 transition-transform" :class="expanded ? 'rotate-90' : ''" viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
-            </svg>
-            @if ($displayName)
-                <h4>{{ $displayName }}</h4>
-            @elseif ($resource?->type() === 'application' || str($resource?->type())->startsWith('standalone'))
-                <h4>{{ $container }}</h4>
-            @else
-                <h4>{{ str($container)->beforeLast('-')->headline() }}</h4>
-            @endif
-            @if ($pull_request)
-                <div>({{ $pull_request }})</div>
-            @endif
-            @if ($streamLogs)
-                <x-loading wire:poll.2000ms='getLogs(true)' />
-            @endif
-        </div>
-        <div x-show="expanded" x-collapse
-            :class="fullscreen ? 'fullscreen flex flex-col' : 'relative w-full py-4 mx-auto'">
+        @if ($collapsible)
+            <div class="flex gap-2 items-center p-4 cursor-pointer select-none hover:bg-gray-50 dark:hover:bg-coolgray-200"
+                x-on:click="expanded = !expanded; if (expanded && !logsLoaded) { $wire.getLogs(); logsLoaded = true; }">
+                <svg class="w-4 h-4 transition-transform" :class="expanded ? 'rotate-90' : ''" viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path fill="currentColor" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
+                </svg>
+                @if ($displayName)
+                    <h4>{{ $displayName }}</h4>
+                @elseif ($resource?->type() === 'application' || str($resource?->type())->startsWith('standalone'))
+                    <h4>{{ $container }}</h4>
+                @else
+                    <h4>{{ str($container)->beforeLast('-')->headline() }}</h4>
+                @endif
+                @if ($pull_request)
+                    <div>({{ $pull_request }})</div>
+                @endif
+                @if ($streamLogs)
+                    <x-loading wire:poll.2000ms='getLogs(true)' />
+                @endif
+            </div>
+        @endif
+        <div x-show="expanded" {{ $collapsible ? 'x-collapse' : '' }}
+            :class="fullscreen ? 'fullscreen flex flex-col' : 'relative w-full {{ $collapsible ? 'py-4' : '' }} mx-auto'">
             <div class="flex flex-col bg-white dark:text-white dark:bg-coolgray-100 dark:border-coolgray-300 border-neutral-200"
                 :class="fullscreen ? 'h-full' : 'border border-solid rounded-sm'">
                 <div
                     class="flex items-center justify-between gap-2 px-4 py-2 border-b dark:border-coolgray-300 border-neutral-200 shrink-0">
-                    <span x-show="searchQuery.trim()" x-text="getMatchCount() + ' matches'"
-                        class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span>
-                    <span x-show="!searchQuery.trim()"></span>
                     <div class="flex items-center gap-2">
-                        <form wire:submit="getLogs(true)" class="flex items-center">
+                        <form wire:submit="getLogs(true)" class="relative flex items-center">
+                            <span
+                                class="absolute left-2 top-1/2 -translate-y-1/2 text-xs text-gray-400 pointer-events-none">Lines:</span>
                             <input type="number" wire:model="numberOfLines" placeholder="100" min="1"
                                 title="Number of Lines" {{ $streamLogs ? 'readonly' : '' }}
-                                class="input input-sm w-20 text-center dark:bg-coolgray-300" />
+                                class="input input-sm w-24 pl-11 text-center dark:bg-coolgray-300" />
                         </form>
+                        <span x-show="searchQuery.trim()" x-text="getMatchCount() + ' matches'"
+                            class="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap"></span>
+                    </div>
+                    <div class="flex items-center gap-2">
                         <div class="relative">
                             <svg class="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
                                 xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
diff --git a/resources/views/livewire/server/proxy/logs.blade.php b/resources/views/livewire/server/proxy/logs.blade.php
index 17fe65f4c8..8b72d78f12 100644
--- a/resources/views/livewire/server/proxy/logs.blade.php
+++ b/resources/views/livewire/server/proxy/logs.blade.php
@@ -7,7 +7,7 @@
         <x-server.sidebar-proxy :server="$server" :parameters="$parameters" />
         <div class="w-full">
             <h2 class="pb-4">Logs</h2>
-            <livewire:project.shared.get-logs :server="$server" container="coolify-proxy" displayName="Coolify Proxy" />
+            <livewire:project.shared.get-logs :server="$server" container="coolify-proxy" displayName="Coolify Proxy" :collapsible="false" />
         </div>
     </div>
 </div>
diff --git a/resources/views/livewire/server/show.blade.php b/resources/views/livewire/server/show.blade.php
index b3284ab514..f9311bb836 100644
--- a/resources/views/livewire/server/show.blade.php
+++ b/resources/views/livewire/server/show.blade.php
@@ -337,7 +337,8 @@
                                         <x-slot:title>Sentinel Logs</x-slot:title>
                                         <x-slot:content>
                                             <livewire:project.shared.get-logs :server="$server"
-                                                container="coolify-sentinel" displayName="Sentinel" lazy />
+                                                container="coolify-sentinel" displayName="Sentinel" :collapsible="false"
+                                                lazy />
                                         </x-slot:content>
                                         <x-forms.button @click="slideOverOpen=true"
                                             :disabled="$isValidating">Logs</x-forms.button>
@@ -353,7 +354,8 @@
                                         <x-slot:title>Sentinel Logs</x-slot:title>
                                         <x-slot:content>
                                             <livewire:project.shared.get-logs :server="$server"
-                                                container="coolify-sentinel" displayName="Sentinel" lazy />
+                                                container="coolify-sentinel" displayName="Sentinel" :collapsible="false"
+                                                lazy />
                                         </x-slot:content>
                                         <x-forms.button @click="slideOverOpen=true"
                                             :disabled="$isValidating">Logs</x-forms.button>