Merge remote-tracking branch 'origin/next' into audit-policies

# Conflicts:
#	app/Http/Controllers/Api/SecurityController.php
#	app/Http/Controllers/Api/ServersController.php
#	app/Livewire/Admin/Index.php
#	app/Livewire/Destination/Show.php
#	app/Livewire/NavbarDeleteTeam.php
#	app/Livewire/Project/Application/Previews.php
#	app/Livewire/Project/DeleteProject.php
#	app/Livewire/Project/Shared/ResourceOperations.php
#	app/Livewire/Server/Resources.php
#	app/Livewire/Server/ValidateAndInstall.php
#	app/Livewire/Storage/Show.php
#	resources/views/livewire/dashboard.blade.php
#	resources/views/livewire/project/application/heading.blade.php
#	resources/views/livewire/project/database/heading.blade.php
#	resources/views/livewire/project/service/heading.blade.php
#	resources/views/livewire/project/shared/environment-variable/show.blade.php
#	resources/views/livewire/project/shared/scheduled-task/show.blade.php
#	tests/Feature/Security/TrustHostsMiddlewareTest.php

resources/css/app.css

@@ -14,7 +14,10 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
-    --font-sans: Inter, sans-serif;
+    --font-sans: 'Geist Sans', Inter, sans-serif;
+    --font-mono: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+    --font-geist-sans: 'Geist Sans', Inter, sans-serif;
+    --font-logs: 'Geist Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 
     --color-base: #101010;
     --color-warning: #fcd452;
@@ -96,7 +99,7 @@ body {
 }
 
 body {
-    @apply min-h-screen text-sm antialiased scrollbar overflow-x-hidden;
+    @apply min-h-screen text-sm font-sans antialiased scrollbar overflow-x-hidden;
 }
 
 .coolify-monaco-editor {
@@ -163,7 +166,7 @@ tbody {
 }
 
 tr {
-    @apply text-black dark:text-neutral-400 dark:hover:bg-black hover:bg-neutral-200;
+    @apply text-black dark:text-neutral-400 dark:hover:bg-coolgray-300 hover:bg-neutral-100;
 }
 
 tr th {

resources/css/fonts.css

@@ -70,3 +70,18 @@
   src: url('../fonts/inter-v13-cyrillic_cyrillic-ext_greek_greek-ext_latin_latin-ext_vietnamese-regular.woff2') format('woff2');
 }
 
+@font-face {
+  font-display: swap;
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('../fonts/geist-mono-variable.woff2') format('woff2');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Geist Sans';
+  font-style: normal;
+  font-weight: 100 900;
+  src: url('../fonts/geist-sans-variable.woff2') format('woff2');
+}

resources/css/utilities.css

@@ -149,6 +149,10 @@
     @apply flex relative gap-2 justify-start items-center py-1 pr-4 pl-2 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:bg-neutral-100 dark:focus-visible:bg-coollabs;
 }
 
+@utility dropdown-item-touch {
+    @apply min-h-10 px-3 py-2 text-sm;
+}
+
 @utility dropdown-item-no-padding {
     @apply flex relative gap-2 justify-start items-center py-1 w-full text-xs transition-colors cursor-pointer select-none dark:text-white hover:bg-neutral-100 dark:hover:bg-coollabs outline-none data-disabled:pointer-events-none data-disabled:opacity-50 focus-visible:bg-neutral-100 dark:focus-visible:bg-coollabs;
 }

resources/js/terminal.js

@@ -2,6 +2,16 @@ import { Terminal } from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
 import { FitAddon } from '@xterm/addon-fit';
 
+const terminalDebugEnabled = import.meta.env.DEV;
+
+function logTerminal(level, message, ...context) {
+    if (!terminalDebugEnabled) {
+        return;
+    }
+
+    console[level](message, ...context);
+}
+
 export function initializeTerminalComponent() {
     function terminalData() {
         return {
@@ -30,6 +40,8 @@ export function initializeTerminalComponent() {
             pingTimeoutId: null,
             heartbeatMissed: 0,
             maxHeartbeatMisses: 3,
+            // Command buffering for race condition prevention
+            pendingCommand: null,
             // Resize handling
             resizeObserver: null,
             resizeTimeout: null,
@@ -120,6 +132,7 @@ export function initializeTerminalComponent() {
                 this.checkIfProcessIsRunningAndKillIt();
                 this.clearAllTimers();
                 this.connectionState = 'disconnected';
+                this.pendingCommand = null;
                 if (this.socket) {
                     this.socket.close(1000, 'Client cleanup');
                 }
@@ -154,6 +167,7 @@ export function initializeTerminalComponent() {
                     this.pendingWrites = 0;
                     this.paused = false;
                     this.commandBuffer = '';
+                    this.pendingCommand = null;
 
                     // Notify parent component that terminal disconnected
                     this.$wire.dispatch('terminalDisconnected');
@@ -172,7 +186,7 @@ export function initializeTerminalComponent() {
                     this.term = new Terminal({
                         cols: 80,
                         rows: 30,
-                        fontFamily: '"Fira Code", courier-new, courier, monospace, "Powerline Extra Symbols"',
+                        fontFamily: '"Geist Mono", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace, "Powerline Extra Symbols"',
                         cursorBlink: true,
                         rendererType: 'canvas',
                         convertEol: true,
@@ -188,7 +202,7 @@ export function initializeTerminalComponent() {
 
             initializeWebSocket() {
                 if (this.socket && this.socket.readyState !== WebSocket.CLOSED) {
-                    console.log('[Terminal] WebSocket already connecting/connected, skipping');
+                    logTerminal('log', '[Terminal] WebSocket already connecting/connected, skipping');
                     return; // Already connecting or connected
                 }
 
@@ -197,7 +211,7 @@ export function initializeTerminalComponent() {
 
                 // Ensure terminal config is available
                 if (!window.terminalConfig) {
-                    console.warn('[Terminal] Terminal config not available, using defaults');
+                    logTerminal('warn', '[Terminal] Terminal config not available, using defaults');
                     window.terminalConfig = {};
                 }
 
@@ -223,7 +237,7 @@ export function initializeTerminalComponent() {
                 }
 
                 const url = `${connectionString.protocol}://${connectionString.host}${connectionString.port}${connectionString.path}`
-                console.log(`[Terminal] Attempting connection to: ${url}`);
+                logTerminal('log', `[Terminal] Attempting connection to: ${url}`);
 
                 try {
                     this.socket = new WebSocket(url);
@@ -232,7 +246,7 @@ export function initializeTerminalComponent() {
                     const timeoutMs = this.reconnectAttempts === 0 ? 15000 : this.connectionTimeout;
                     this.connectionTimeoutId = setTimeout(() => {
                         if (this.connectionState === 'connecting') {
-                            console.error(`[Terminal] Connection timeout after ${timeoutMs}ms`);
+                            logTerminal('error', `[Terminal] Connection timeout after ${timeoutMs}ms`);
                             this.socket.close();
                             this.handleConnectionError('Connection timeout');
                         }
@@ -244,13 +258,13 @@ export function initializeTerminalComponent() {
                     this.socket.onclose = this.handleSocketClose.bind(this);
 
                 } catch (error) {
-                    console.error('[Terminal] Failed to create WebSocket:', error);
+                    logTerminal('error', '[Terminal] Failed to create WebSocket:', error);
                     this.handleConnectionError(`Failed to create WebSocket connection: ${error.message}`);
                 }
             },
 
             handleSocketOpen() {
-                console.log('[Terminal] WebSocket connection established. Cool cool cool cool cool cool.');
+                logTerminal('log', '[Terminal] WebSocket connection established.');
                 this.connectionState = 'connected';
                 this.reconnectAttempts = 0;
                 this.heartbeatMissed = 0;
@@ -262,6 +276,12 @@ export function initializeTerminalComponent() {
                     this.connectionTimeoutId = null;
                 }
 
+                // Flush any buffered command from before WebSocket was ready
+                if (this.pendingCommand) {
+                    this.sendMessage(this.pendingCommand);
+                    this.pendingCommand = null;
+                }
+
                 // Start ping timeout monitoring
                 this.resetPingTimeout();
 
@@ -270,16 +290,16 @@ export function initializeTerminalComponent() {
             },
 
             handleSocketError(error) {
-                console.error('[Terminal] WebSocket error:', error);
-                console.error('[Terminal] WebSocket state:', this.socket ? this.socket.readyState : 'No socket');
-                console.error('[Terminal] Connection attempt:', this.reconnectAttempts + 1);
+                logTerminal('error', '[Terminal] WebSocket error:', error);
+                logTerminal('error', '[Terminal] WebSocket state:', this.socket ? this.socket.readyState : 'No socket');
+                logTerminal('error', '[Terminal] Connection attempt:', this.reconnectAttempts + 1);
                 this.handleConnectionError('WebSocket error occurred');
             },
 
             handleSocketClose(event) {
-                console.warn(`[Terminal] WebSocket connection closed. Code: ${event.code}, Reason: ${event.reason || 'No reason provided'}`);
-                console.log('[Terminal] Was clean close:', event.code === 1000);
-                console.log('[Terminal] Connection attempt:', this.reconnectAttempts + 1);
+                logTerminal('warn', `[Terminal] WebSocket connection closed. Code: ${event.code}, Reason: ${event.reason || 'No reason provided'}`);
+                logTerminal('log', '[Terminal] Was clean close:', event.code === 1000);
+                logTerminal('log', '[Terminal] Connection attempt:', this.reconnectAttempts + 1);
 
                 this.connectionState = 'disconnected';
                 this.clearAllTimers();
@@ -297,7 +317,7 @@ export function initializeTerminalComponent() {
             },
 
             handleConnectionError(reason) {
-                console.error(`[Terminal] Connection error: ${reason} (attempt ${this.reconnectAttempts + 1})`);
+                logTerminal('error', `[Terminal] Connection error: ${reason} (attempt ${this.reconnectAttempts + 1})`);
                 this.connectionState = 'disconnected';
 
                 // Only dispatch error to UI after a few failed attempts to avoid immediate error on page load
@@ -310,7 +330,7 @@ export function initializeTerminalComponent() {
 
             scheduleReconnect() {
                 if (this.reconnectAttempts >= this.maxReconnectAttempts) {
-                    console.error('[Terminal] Max reconnection attempts reached');
+                    logTerminal('error', '[Terminal] Max reconnection attempts reached');
                     this.message = '(connection failed - max retries exceeded)';
                     return;
                 }
@@ -323,7 +343,7 @@ export function initializeTerminalComponent() {
                     this.maxReconnectDelay
                 );
 
-                console.warn(`[Terminal] Scheduling reconnect attempt ${this.reconnectAttempts + 1} in ${delay}ms`);
+                logTerminal('warn', `[Terminal] Scheduling reconnect attempt ${this.reconnectAttempts + 1} in ${delay}ms`);
 
                 this.reconnectInterval = setTimeout(() => {
                     this.reconnectAttempts++;
@@ -335,17 +355,21 @@ export function initializeTerminalComponent() {
                 if (this.socket && this.socket.readyState === WebSocket.OPEN) {
                     this.socket.send(JSON.stringify(message));
                 } else {
-                    console.warn('[Terminal] WebSocket not ready, message not sent:', message);
+                    logTerminal('warn', '[Terminal] WebSocket not ready, message not sent:', message);
                 }
             },
 
             sendCommandWhenReady(message) {
                 if (this.isWebSocketReady()) {
                     this.sendMessage(message);
+                } else {
+                    this.pendingCommand = message;
                 }
             },
 
             handleSocketMessage(event) {
+                logTerminal('log', '[Terminal] Received WebSocket message:', event.data);
+
                 // Handle pong responses
                 if (event.data === 'pong') {
                     this.heartbeatMissed = 0;
@@ -354,6 +378,10 @@ export function initializeTerminalComponent() {
                     return;
                 }
 
+                if (!this.term?._initialized && event.data !== 'pty-ready') {
+                    logTerminal('warn', '[Terminal] Received message before PTY initialization:', event.data);
+                }
+
                 if (event.data === 'pty-ready') {
                     if (!this.term._initialized) {
                         this.term.open(document.getElementById('terminal'));
@@ -398,17 +426,24 @@ export function initializeTerminalComponent() {
 
                     // Notify parent component that terminal disconnected
                     this.$wire.dispatch('terminalDisconnected');
+                } else if (
+                    typeof event.data === 'string' &&
+                    (event.data.startsWith('Unauthorized:') || event.data.startsWith('Invalid SSH command:'))
+                ) {
+                    logTerminal('error', '[Terminal] Backend rejected terminal startup:', event.data);
+                    this.$wire.dispatch('error', event.data);
+                    this.terminalActive = false;
                 } else {
                     try {
                         this.pendingWrites++;
                         this.term.write(event.data, (err) => {
                             if (err) {
-                                console.error('[Terminal] Write error:', err);
+                                logTerminal('error', '[Terminal] Write error:', err);
                             }
                             this.flowControlCallback();
                         });
                     } catch (error) {
-                        console.error('[Terminal] Write operation failed:', error);
+                        logTerminal('error', '[Terminal] Write operation failed:', error);
                         this.pendingWrites = Math.max(0, this.pendingWrites - 1);
                     }
                 }
@@ -483,10 +518,10 @@ export function initializeTerminalComponent() {
                         clearTimeout(this.pingTimeoutId);
                         this.pingTimeoutId = null;
                     }
-                    console.log('[Terminal] Tab hidden, pausing heartbeat monitoring');
+                    logTerminal('log', '[Terminal] Tab hidden, pausing heartbeat monitoring');
                 } else if (wasVisible === false) {
                     // Tab is now visible again
-                    console.log('[Terminal] Tab visible, resuming connection management');
+                    logTerminal('log', '[Terminal] Tab visible, resuming connection management');
 
                     if (this.wasConnectedBeforeHidden && this.socket && this.socket.readyState === WebSocket.OPEN) {
                         // Send immediate ping to verify connection is still alive
@@ -508,10 +543,10 @@ export function initializeTerminalComponent() {
 
                 this.pingTimeoutId = setTimeout(() => {
                     this.heartbeatMissed++;
-                    console.warn(`[Terminal] Ping timeout - missed ${this.heartbeatMissed}/${this.maxHeartbeatMisses}`);
+                    logTerminal('warn', `[Terminal] Ping timeout - missed ${this.heartbeatMissed}/${this.maxHeartbeatMisses}`);
 
                     if (this.heartbeatMissed >= this.maxHeartbeatMisses) {
-                        console.error('[Terminal] Too many missed heartbeats, closing connection');
+                        logTerminal('error', '[Terminal] Too many missed heartbeats, closing connection');
                         this.socket.close(1001, 'Heartbeat timeout');
                     }
                 }, this.pingTimeout);
@@ -553,7 +588,7 @@ export function initializeTerminalComponent() {
 
                     // Check if dimensions are valid
                     if (height <= 0 || width <= 0) {
-                        console.warn('[Terminal] Invalid wrapper dimensions, retrying...', { height, width });
+                        logTerminal('warn', '[Terminal] Invalid wrapper dimensions, retrying...', { height, width });
                         setTimeout(() => this.resizeTerminal(), 100);
                         return;
                     }
@@ -562,7 +597,7 @@ export function initializeTerminalComponent() {
 
                     if (!charSize.height || !charSize.width) {
                         // Fallback values if char size not available yet
-                        console.warn('[Terminal] Character size not available, retrying...');
+                        logTerminal('warn', '[Terminal] Character size not available, retrying...');
                         setTimeout(() => this.resizeTerminal(), 100);
                         return;
                     }
@@ -583,10 +618,10 @@ export function initializeTerminalComponent() {
                             });
                         }
                     } else {
-                        console.warn('[Terminal] Invalid calculated dimensions:', { rows, cols, height, width, charSize });
+                        logTerminal('warn', '[Terminal] Invalid calculated dimensions:', { rows, cols, height, width, charSize });
                     }
                 } catch (error) {
-                    console.error('[Terminal] Resize error:', error);
+                    logTerminal('error', '[Terminal] Resize error:', error);
                 }
             },
 

resources/views/components/applications/links.blade.php

@@ -4,7 +4,7 @@
     </x-slot>
     @if (
         (data_get($application, 'fqdn') ||
-            collect(json_decode($this->application->docker_compose_domains))->count() > 0 ||
+            collect(json_decode($this->application->docker_compose_domains))->contains(fn($fqdn) => !empty(data_get($fqdn, 'domain'))) ||
             data_get($application, 'previews', collect([]))->count() > 0 ||
             data_get($application, 'ports_mappings_array')) &&
             data_get($application, 'settings.is_raw_compose_deployment_enabled') !== true)

resources/views/components/dropdown.blade.php

@@ -1,7 +1,44 @@
 <div x-data="{
-    dropdownOpen: false
-}" class="relative" @click.outside="dropdownOpen = false">
-    <button @click="dropdownOpen=true"
+    dropdownOpen: false,
+    panelStyles: '',
+    open() {
+        this.dropdownOpen = true;
+        this.updatePanelPosition();
+    },
+    close() {
+        this.dropdownOpen = false;
+    },
+    updatePanelPosition() {
+        if (window.innerWidth >= 768) {
+            this.panelStyles = '';
+
+            return;
+        }
+
+        this.$nextTick(() => {
+            const triggerRect = this.$refs.trigger.getBoundingClientRect();
+            const panelRect = this.$refs.panel.getBoundingClientRect();
+            const viewportPadding = 8;
+            let left = triggerRect.left;
+
+            if ((left + panelRect.width + viewportPadding) > window.innerWidth) {
+                left = window.innerWidth - panelRect.width - viewportPadding;
+            }
+
+            left = Math.max(viewportPadding, left);
+
+            let top = triggerRect.bottom + 4;
+            const maxTop = window.innerHeight - panelRect.height - viewportPadding;
+
+            if (top > maxTop) {
+                top = Math.max(viewportPadding, triggerRect.top - panelRect.height - viewportPadding);
+            }
+
+            this.panelStyles = `position: fixed; left: ${left}px; top: ${top}px;`;
+        });
+    }
+}" class="relative" @click.outside="close()" x-on:resize.window="if (dropdownOpen) updatePanelPosition()">
+    <button x-ref="trigger" @click="dropdownOpen ? close() : open()"
         class="inline-flex items-center justify-start pr-8 transition-colors focus:outline-hidden disabled:opacity-50 disabled:pointer-events-none">
         <span class="flex flex-col items-start h-full leading-none">
             {{ $title }}
@@ -13,11 +50,11 @@
         </svg>
     </button>
 
-    <div x-show="dropdownOpen" @click.away="dropdownOpen=false" x-transition:enter="ease-out duration-200"
+    <div x-ref="panel" x-show="dropdownOpen" @click.away="close()" x-transition:enter="ease-out duration-200"
         x-transition:enter-start="-translate-y-2" x-transition:enter-end="translate-y-0"
-        class="absolute top-0 z-50 mt-6 min-w-max" x-cloak>
+        :style="panelStyles" class="absolute top-full z-50 mt-1 min-w-max max-w-[calc(100vw-1rem)] md:top-0 md:mt-6" x-cloak>
         <div
-            class="p-1 mt-1 bg-white border rounded-sm shadow-sm dark:bg-coolgray-200 dark:border-coolgray-300 border-neutral-300">
+            class="border border-neutral-300 bg-white p-1 shadow-sm dark:border-coolgray-300 dark:bg-coolgray-200">
             {{ $slot }}
         </div>
     </div>

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

@@ -11,12 +11,12 @@
 ])
 
 <div @class([
-    'flex flex-row items-center gap-4 pr-2 py-1 form-control min-w-fit',
+    'form-control flex max-w-full flex-row items-center gap-4 py-1 pr-2',
     'w-full' => $fullWidth,
     '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">
+    <label @class(['label flex w-full max-w-full min-w-0 items-center gap-4 px-0'])>
+        <span class="flex min-w-0 grow gap-2 break-words">
             @if ($label)
                 @if ($disabled)
                     <span class="opacity-60">{!! $label !!}</span>
@@ -29,16 +29,16 @@
             @endif
         </span>
         @if ($instantSave)
-            <input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
+            <input type="checkbox" @disabled($disabled) {{ $attributes->class([$defaultClass, 'shrink-0']) }}
                 wire:loading.attr="disabled"
                 wire:click='{{ $instantSave === 'instantSave' || $instantSave == '1' ? 'instantSave' : $instantSave }}'
                 wire:model={{ $modelBinding }} id="{{ $htmlId }}" @if ($checked) checked @endif />
         @else
             @if ($domValue)
-                <input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
+                <input type="checkbox" @disabled($disabled) {{ $attributes->class([$defaultClass, 'shrink-0']) }}
                     value={{ $domValue }} id="{{ $htmlId }}" @if ($checked) checked @endif />
             @else
-                <input type="checkbox" @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
+                <input type="checkbox" @disabled($disabled) {{ $attributes->class([$defaultClass, 'shrink-0']) }}
                     wire:model={{ $value ?? $modelBinding }} id="{{ $htmlId }}" @if ($checked) checked @endif />
             @endif
         @endif

resources/views/components/forms/env-var-input.blade.php

@@ -10,15 +10,22 @@
         </label>
     @endif
 
-    <div class="relative" x-data="{
+    <div class="relative" @success.window="type = '{{ $type }}'" x-data="{
             type: '{{ $type }}',
             showDropdown: false,
             suggestions: [],
             selectedIndex: 0,
             cursorPosition: 0,
             currentScope: null,
-            availableScopes: ['team', 'project', 'environment'],
             availableVars: @js($availableVars),
+            get availableScopes() {
+                // Only include scopes that have at least one variable
+                const allScopes = ['team', 'project', 'environment', 'server'];
+                return allScopes.filter(scope => {
+                    const vars = this.availableVars[scope];
+                    return vars && vars.length > 0;
+                });
+            },
             scopeUrls: @js($scopeUrls),
 
             handleInput() {
@@ -54,6 +61,11 @@
 
                 if (content === '') {
                     this.currentScope = null;
+                    // Only show dropdown if there are available scopes with variables
+                    if (this.availableScopes.length === 0) {
+                        this.showDropdown = false;
+                        return;
+                    }
                     this.suggestions = this.availableScopes.map(scope => ({
                         type: 'scope',
                         value: scope,
@@ -185,15 +197,23 @@
         @click.outside="showDropdown = false">
 
         @if ($type === 'password' && $allowToPeak)
-            <div x-on:click="changePasswordFieldType"
-                class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white z-10">
-                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+            <button type="button" x-on:click="type = type === 'password' ? 'text' : 'password'"
+                class="flex absolute inset-y-0 right-0 z-10 items-center pr-2 cursor-pointer dark:hover:text-white"
+                aria-label="Toggle password visibility">
+                <svg x-show="type === 'password'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
                     stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                     <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                     <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                     <path d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                 </svg>
-            </div>
+                <svg x-cloak x-show="type === 'text'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+                    stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                    <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+                    <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
+                    <path d="M3 3l18 18" />
+                </svg>
+            </button>
         @endif
 
         <input
@@ -202,6 +222,8 @@
             @keydown="handleKeydown($event)"
             @click="handleInput()"
             autocomplete="{{ $autocomplete }}"
+            x-bind:type="type"
+            x-bind:class="{ 'truncate': type === 'text' && ! $el.disabled }"
             {{ $attributes->merge(['class' => $defaultClass]) }}
             @required($required)
             @readonly($readonly)
@@ -210,12 +232,10 @@
                 wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4"
             @endif
             wire:loading.attr="disabled"
-            @if ($type === 'password')
-                :type="type"
-            @else
+            @disabled($disabled)
+            @if ($type !== 'password')
                 type="{{ $type }}"
             @endif
-            @disabled($disabled)
             @if ($htmlId !== 'null') id="{{ $htmlId }}" @endif
             name="{{ $name }}"
             placeholder="{{ $attributes->get('placeholder') }}"

resources/views/components/forms/input.blade.php

@@ -13,10 +13,11 @@
         </label>
     @endif
     @if ($type === 'password')
-        <div class="relative" x-data="{ type: 'password' }">
+        <div class="relative" x-data="{ type: 'password' }" @success.window="type = 'password'">
             @if ($allowToPeak)
-                <div x-on:click="changePasswordFieldType; type = type === 'password' ? 'text' : 'password'"
-                    class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white">
+                <button type="button" x-on:click="type = type === 'password' ? 'text' : 'password'"
+                    class="flex absolute inset-y-0 right-0 items-center pr-2 cursor-pointer dark:hover:text-white"
+                    aria-label="Toggle password visibility">
                     {{-- Eye icon (shown when password is hidden) --}}
                     <svg x-show="type === 'password'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
                         stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
@@ -32,13 +33,15 @@
                         <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
                         <path d="M3 3l18 18" />
                     </svg>
-                </div>
+                </button>
             @endif
             <input autocomplete="{{ $autocomplete }}" value="{{ $value }}"
+                x-bind:type="type"
+                x-bind:class="{ 'truncate': type === 'text' && ! $el.disabled }"
                 {{ $attributes->merge(['class' => $defaultClass]) }} @required($required)
                 @if ($modelBinding !== 'null') wire:model={{ $modelBinding }} wire:dirty.class="[box-shadow:inset_4px_0_0_#6b16ed,inset_0_0_0_2px_#e5e5e5] dark:[box-shadow:inset_4px_0_0_#fcd452,inset_0_0_0_2px_#242424]" @endif
                 wire:loading.attr="disabled"
-                type="{{ $type }}" @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
+                @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
                 name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
                 aria-placeholder="{{ $attributes->get('placeholder') }}"
                 @if ($autofocus) x-ref="autofocusInput" @endif>

resources/views/components/forms/monaco-editor.blade.php

@@ -1,4 +1,4 @@
-<div wire:key="{{ rand() }}" class="coolify-monaco-editor flex-1">
+<div wire:key="{{ random_int(0, PHP_INT_MAX) }}" class="coolify-monaco-editor flex-1">
     <div x-ref="monacoRef" x-data="{
         monacoVersion: '0.52.2',
         monacoContent: @entangle($id),

resources/views/components/forms/textarea.blade.php

@@ -30,18 +30,26 @@
             readonly="{{ $readonly }}" label="dockerfile" autofocus="{{ $autofocus }}" />
     @else
         @if ($type === 'password')
-            <div class="relative" x-data="{ type: 'password' }">
+            <div class="relative" x-data="{ type: 'password' }" @success.window="type = 'password'">
                 @if ($allowToPeak)
-                    <div x-on:click="changePasswordFieldType"
-                        class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer dark:hover:text-white">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+                    <button type="button" x-on:click="type = type === 'password' ? 'text' : 'password'"
+                        class="absolute inset-y-0 right-0 flex items-center h-6 pt-2 pr-2 cursor-pointer dark:hover:text-white"
+                        aria-label="Toggle password visibility">
+                        <svg x-show="type === 'password'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
                             stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                             <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                             <path d="M10 12a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                             <path
                                 d="M21 12c-2.4 4 -5.4 6 -9 6c-3.6 0 -6.6 -2 -9 -6c2.4 -4 5.4 -6 9 -6c3.6 0 6.6 2 9 6" />
                         </svg>
-                    </div>
+                        <svg x-cloak x-show="type === 'text'" xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                            <path d="M10.585 10.587a2 2 0 0 0 2.829 2.828" />
+                            <path d="M16.681 16.673a8.717 8.717 0 0 1 -4.681 1.327c-3.6 0 -6.6 -2 -9 -6c1.272 -2.12 2.712 -3.678 4.32 -4.674m2.86 -1.146a9.055 9.055 0 0 1 1.82 -.18c3.6 0 6.6 2 9 6c-.666 1.11 -1.379 2.067 -2.138 2.87" />
+                            <path d="M3 3l18 18" />
+                        </svg>
+                    </button>
                 @endif
                 <input x-cloak x-show="type === 'password'" value="{{ $value }}"
                     {{ $attributes->merge(['class' => $defaultClassInput]) }} @required($required)

resources/views/components/modal-confirmation.blade.php

@@ -95,7 +95,7 @@
         }
         if (this.dispatchAction) {
             $wire.dispatch(this.submitAction);
-            return true;
+            return Promise.resolve(true);
         }
 
         const methodName = this.submitAction.split('(')[0];
@@ -130,7 +130,11 @@
 }"
     @keydown.escape.window="if (modalOpen) { modalOpen = false; resetModal(); }" :class="{ 'z-40': modalOpen }"
     class="relative w-auto h-auto">
-    @if ($customButton)
+    @if (isset($trigger))
+        <div @click="modalOpen=true">
+            {{ $trigger }}
+        </div>
+    @elseif ($customButton)
         @if ($buttonFullWidth)
             <x-forms.button @click="modalOpen=true" class="w-full">
                 {{ $customButton }}
@@ -191,7 +195,7 @@
     @endif
     <template x-teleport="body">
         <div x-show="modalOpen"
-            class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-4" x-cloak>
+            class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-0 sm:p-4" x-cloak>
             <div x-show="modalOpen" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs">
             </div>
             <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
@@ -200,7 +204,7 @@
                 x-transition:leave="ease-in duration-100"
                 x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                 x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                class="relative w-full border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] max-h-[calc(100vh-2rem)] bg-neutral-100 border-neutral-400 dark:bg-base dark:border-coolgray-300 flex flex-col">
+                class="relative w-full border rounded-none sm:rounded-sm min-w-full lg:min-w-[36rem] max-w-full sm:max-w-[48rem] h-screen sm:h-auto max-h-screen sm:max-h-[calc(100vh-2rem)] bg-neutral-100 border-neutral-400 dark:bg-base dark:border-coolgray-300 flex flex-col">
                 <div class="flex justify-between items-center py-6 px-7 shrink-0">
                     <h3 class="pr-8 text-2xl font-bold">{{ $title }}</h3>
                     <button @click="modalOpen = false; resetModal()"

resources/views/components/navbar.blade.php

@@ -79,7 +79,7 @@
     }">
     <div class="flex lg:pt-6 pt-4 pb-4 pl-2">
         <div class="flex flex-col w-full">
-            <a href="/" {{ wireNavigate() }} class="text-2xl font-bold tracking-wide dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
+            <a href="/" {{ wireNavigate() }} class="text-2xl font-bold tracking-tight dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
             <x-version />
         </div>
         <div>

resources/views/components/resources/breadcrumbs.blade.php

@@ -12,25 +12,64 @@
     $projects = $projects ?? Project::ownedByCurrentTeamCached();
     $environments = $environments ?? $resource->environment->project
         ->environments()
+        ->select('id', 'uuid', 'name', 'project_id')
         ->with([
-            'applications',
-            'services',
-            'postgresqls',
-            'redis',
-            'mongodbs',
-            'mysqls',
-            'mariadbs',
-            'keydbs',
-            'dragonflies',
-            'clickhouses',
+            'applications:id,uuid,name,environment_id',
+            'services:id,uuid,name,environment_id',
+            'postgresqls:id,uuid,name,environment_id',
+            'redis:id,uuid,name,environment_id',
+            'mongodbs:id,uuid,name,environment_id',
+            'mysqls:id,uuid,name,environment_id',
+            'mariadbs:id,uuid,name,environment_id',
+            'keydbs:id,uuid,name,environment_id',
+            'dragonflies:id,uuid,name,environment_id',
+            'clickhouses:id,uuid,name,environment_id',
         ])
         ->get();
     $currentProjectUuid = data_get($resource, 'environment.project.uuid');
     $currentEnvironmentUuid = data_get($resource, 'environment.uuid');
     $currentResourceUuid = data_get($resource, 'uuid');
+    $resourceUuid = data_get($resource, 'uuid');
+    $resourceType = $resource->getMorphClass();
+    $isApplication = $resourceType === 'App\Models\Application';
+    $isService = $resourceType === 'App\Models\Service';
+    $isDatabase = str_contains($resourceType, 'Database') || str_contains($resourceType, 'Standalone');
+    $hasMultipleServers = $isApplication && method_exists($resource, 'additional_servers') &&
+        ($resource->relationLoaded('additional_servers') ? $resource->additional_servers->count() > 0 : ($resource->additional_servers_count ?? 0) > 0);
+    $serverName = $hasMultipleServers ? null : data_get($resource, 'destination.server.name');
+    $routeParams = [
+        'project_uuid' => $currentProjectUuid,
+        'environment_uuid' => $currentEnvironmentUuid,
+    ];
+    if ($isApplication) {
+        $routeParams['application_uuid'] = $resourceUuid;
+    } elseif ($isService) {
+        $routeParams['service_uuid'] = $resourceUuid;
+    } else {
+        $routeParams['database_uuid'] = $resourceUuid;
+    }
 @endphp
-<nav class="flex pt-2 pb-10">
-    <ol class="flex flex-wrap items-center gap-y-1">
+<nav class="pt-2 pb-4 md:pb-10">
+    <div class="flex min-w-0 flex-col gap-1 md:hidden">
+        <div class="flex min-w-0 items-center text-xs text-neutral-400">
+            <a class="min-w-0 truncate text-neutral-300 hover:text-warning" {{ wireNavigate() }}
+                href="{{ $isApplication
+                    ? route('project.application.configuration', $routeParams)
+                    : ($isService
+                        ? route('project.service.configuration', $routeParams)
+                        : route('project.database.configuration', $routeParams)) }}"
+                title="{{ data_get($resource, 'name') }}{{ $serverName ? ' ('.$serverName.')' : '' }}">
+                {{ data_get($resource, 'name') }}
+            </a>
+        </div>
+        @if ($resource->getMorphClass() == 'App\Models\Service')
+            <x-status.services :service="$resource" />
+        @else
+            <x-status.index :resource="$resource" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
+        @endif
+    </div>
+
+    <ol class="hidden flex-wrap items-center gap-y-1 md:flex">
         <!-- Project Level -->
         <li class="inline-flex items-center" x-data="{ projectOpen: false, closeTimeout: null, toggle() { this.projectOpen = !this.projectOpen }, open() { clearTimeout(this.closeTimeout); this.projectOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.projectOpen = false }, 100) } }">
             <div class="flex items-center relative" @mouseenter="open()" @mouseleave="close()">
@@ -63,7 +102,7 @@
         </li>
 
         <!-- Environment Level -->
-        <li class="inline-flex items-center" x-data="{ envOpen: false, activeEnv: null, envPositions: {}, activeRes: null, resPositions: {}, activeMenuEnv: null, menuPositions: {}, closeTimeout: null, envTimeout: null, resTimeout: null, menuTimeout: null, toggle() { this.envOpen = !this.envOpen; if (!this.envOpen) { this.activeEnv = null; this.activeRes = null; this.activeMenuEnv = null; } }, open() { clearTimeout(this.closeTimeout); this.envOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.envOpen = false; this.activeEnv = null; this.activeRes = null; this.activeMenuEnv = null; }, 100) }, openEnv(id) { clearTimeout(this.closeTimeout); clearTimeout(this.envTimeout); this.activeEnv = id }, closeEnv() { this.envTimeout = setTimeout(() => { this.activeEnv = null; this.activeRes = null; this.activeMenuEnv = null; }, 100) }, openRes(id) { clearTimeout(this.envTimeout); clearTimeout(this.resTimeout); this.activeRes = id }, closeRes() { this.resTimeout = setTimeout(() => { this.activeRes = null; this.activeMenuEnv = null; }, 100) }, openMenu(id) { clearTimeout(this.resTimeout); clearTimeout(this.menuTimeout); this.activeMenuEnv = id }, closeMenu() { this.menuTimeout = setTimeout(() => { this.activeMenuEnv = null; }, 100) } }">
+        <li class="inline-flex items-center" x-data="{ envOpen: false, activeEnv: null, envPositions: {}, closeTimeout: null, envTimeout: null, toggle() { this.envOpen = !this.envOpen; if (!this.envOpen) { this.activeEnv = null; } }, open() { clearTimeout(this.closeTimeout); this.envOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.envOpen = false; this.activeEnv = null; }, 100) }, openEnv(id) { clearTimeout(this.closeTimeout); clearTimeout(this.envTimeout); this.activeEnv = id }, closeEnv() { this.envTimeout = setTimeout(() => { this.activeEnv = null; }, 100) } }">
             <div class="flex items-center relative" @mouseenter="open()"
                 @mouseleave="close()">
                 <a class="text-xs truncate lg:text-sm hover:text-warning" {{ wireNavigate() }}
@@ -80,17 +119,18 @@
                     </svg>
                 </button>
 
-                <!-- Environment Dropdown Container -->
+                <!-- Environment Dropdown -->
                 <div x-show="envOpen" @click.outside="close()" x-transition:enter="transition ease-out duration-200"
                     x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
                     x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100"
-                    x-transition:leave-end="opacity-0 scale-95" class="absolute z-20 top-full mt-1 left-0 sm:left-auto max-w-[calc(100vw-1rem)]" x-init="$nextTick(() => { const rect = $el.getBoundingClientRect(); if (rect.right > window.innerWidth) { $el.style.left = 'auto'; $el.style.right = '0'; } })">
+                    x-transition:leave-end="opacity-0 scale-95"
+                    class="absolute z-20 top-full mt-1 left-0 sm:left-auto max-w-[calc(100vw-1rem)]"
+                    x-init="$nextTick(() => { const rect = $el.getBoundingClientRect(); if (rect.right > window.innerWidth) { $el.style.left = 'auto'; $el.style.right = '0'; } })">
                     <!-- Environment List -->
                     <div
                         class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
                         @foreach ($environments as $environment)
                             @php
-                                // Use pre-loaded relations instead of databases() method to avoid N+1 queries
                                 $envDatabases = collect()
                                     ->merge($environment->postgresqls ?? collect())
                                     ->merge($environment->redis ?? collect())
@@ -101,26 +141,17 @@
                                     ->merge($environment->dragonflies ?? collect())
                                     ->merge($environment->clickhouses ?? collect());
                                 $envResources = collect()
-                                    ->merge(
-                                        $environment->applications->map(
-                                            fn($app) => ['type' => 'application', 'resource' => $app],
-                                        ),
-                                    )
-                                    ->merge(
-                                        $envDatabases->map(fn($db) => ['type' => 'database', 'resource' => $db]),
-                                    )
-                                    ->merge(
-                                        $environment->services->map(
-                                            fn($svc) => ['type' => 'service', 'resource' => $svc],
-                                        ),
-                                    );
+                                    ->merge($environment->applications->map(fn($app) => ['type' => 'application', 'resource' => $app]))
+                                    ->merge($envDatabases->map(fn($db) => ['type' => 'database', 'resource' => $db]))
+                                    ->merge($environment->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]))
+                                    ->sortBy(fn($item) => strtolower($item['resource']->name));
                             @endphp
                             <div @mouseenter="openEnv('{{ $environment->uuid }}'); envPositions['{{ $environment->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
                                 @mouseleave="closeEnv()">
                                 <a href="{{ route('project.resource.index', [
-                                    'environment_uuid' => $environment->uuid,
-                                    'project_uuid' => $currentProjectUuid,
-                                ]) }}" {{ wireNavigate() }}
+                                        'environment_uuid' => $environment->uuid,
+                                        'project_uuid' => $currentProjectUuid,
+                                    ]) }}" {{ wireNavigate() }}
                                     class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200 {{ $environment->uuid === $currentEnvironmentUuid ? 'dark:text-warning font-semibold' : '' }}"
                                     title="{{ $environment->name }}">
                                     <span class="truncate">{{ $environment->name }}</span>
@@ -150,31 +181,29 @@
                     <!-- Resources Sub-dropdown (2nd level) -->
                     @foreach ($environments as $environment)
                         @php
+                            $envDatabases = collect()
+                                ->merge($environment->postgresqls ?? collect())
+                                ->merge($environment->redis ?? collect())
+                                ->merge($environment->mongodbs ?? collect())
+                                ->merge($environment->mysqls ?? collect())
+                                ->merge($environment->mariadbs ?? collect())
+                                ->merge($environment->keydbs ?? collect())
+                                ->merge($environment->dragonflies ?? collect())
+                                ->merge($environment->clickhouses ?? collect());
                             $envResources = collect()
-                                ->merge(
-                                    $environment->applications->map(
-                                        fn($app) => ['type' => 'application', 'resource' => $app],
-                                    ),
-                                )
-                                ->merge(
-                                    $environment
-                                        ->databases()
-                                        ->map(fn($db) => ['type' => 'database', 'resource' => $db]),
-                                )
-                                ->merge(
-                                    $environment->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]),
-                                );
+                                ->merge($environment->applications->map(fn($app) => ['type' => 'application', 'resource' => $app]))
+                                ->merge($envDatabases->map(fn($db) => ['type' => 'database', 'resource' => $db]))
+                                ->merge($environment->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]));
                         @endphp
                         @if ($envResources->count() > 0)
                             <div x-show="activeEnv === '{{ $environment->uuid }}'" x-cloak
                                 x-transition:enter="transition ease-out duration-150"
                                 x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
-                                @mouseenter="openEnv('{{ $environment->uuid }}')"
-                                @mouseleave="closeEnv()"
+                                @mouseenter="openEnv('{{ $environment->uuid }}')" @mouseleave="closeEnv()"
                                 :style="'position: absolute; left: 100%; top: ' + (envPositions['{{ $environment->uuid }}'] || 0) + 'px; z-index: 30;'"
                                 class="flex flex-col sm:flex-row items-start pl-1">
                                 <div
-                                    class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
+                                    class="relative w-56 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
                                     @foreach ($envResources as $envResource)
                                         @php
                                             $resType = $envResource['type'];
@@ -197,226 +226,14 @@
                                                 ]),
                                             };
                                             $isCurrentResource = $res->uuid === $currentResourceUuid;
-                                            // Use loaded relation count if available, otherwise check additional_servers_count attribute
-                                            $resHasMultipleServers = $resType === 'application' && method_exists($res, 'additional_servers') &&
-                                                ($res->relationLoaded('additional_servers') ? $res->additional_servers->count() > 0 : ($res->additional_servers_count ?? 0) > 0);
-                                            $resServerName = $resHasMultipleServers ? null : data_get($res, 'destination.server.name');
                                         @endphp
-                                        <div @mouseenter="openRes('{{ $environment->uuid }}-{{ $res->uuid }}'); resPositions['{{ $environment->uuid }}-{{ $res->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                            @mouseleave="closeRes()">
-                                            <a href="{{ $resRoute }}" {{ wireNavigate() }}
-                                                class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200 {{ $isCurrentResource ? 'dark:text-warning font-semibold' : '' }}"
-                                                title="{{ $res->name }}{{ $resServerName ? ' ('.$resServerName.')' : '' }}">
-                                                <span class="truncate">{{ $res->name }}@if($resServerName) <span class="text-xs text-neutral-400">({{ $resServerName }})</span>@endif</span>
-                                                <svg class="w-3 h-3 shrink-0" fill="none" stroke="currentColor"
-                                                    viewBox="0 0 24 24">
-                                                    <path stroke-linecap="round" stroke-linejoin="round"
-                                                        stroke-width="4" d="M9 5l7 7-7 7"></path>
-                                                </svg>
-                                            </a>
-                                        </div>
+                                        <a href="{{ $resRoute }}" {{ wireNavigate() }}
+                                            class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 {{ $isCurrentResource ? 'dark:text-warning font-semibold' : '' }}"
+                                            title="{{ $res->name }}">
+                                            {{ $res->name }}
+                                        </a>
                                     @endforeach
                                 </div>
-
-                                <!-- Main Menu Sub-dropdown (3rd level) -->
-                                @foreach ($envResources as $envResource)
-                                    @php
-                                        $resType = $envResource['type'];
-                                        $res = $envResource['resource'];
-                                        $resParams = [
-                                            'project_uuid' => $currentProjectUuid,
-                                            'environment_uuid' => $environment->uuid,
-                                        ];
-                                        if ($resType === 'application') {
-                                            $resParams['application_uuid'] = $res->uuid;
-                                        } elseif ($resType === 'service') {
-                                            $resParams['service_uuid'] = $res->uuid;
-                                        } else {
-                                            $resParams['database_uuid'] = $res->uuid;
-                                        }
-                                        $resKey = $environment->uuid . '-' . $res->uuid;
-                                    @endphp
-                                    <div x-show="activeRes === '{{ $resKey }}'" x-cloak
-                                        x-transition:enter="transition ease-out duration-150"
-                                        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
-                                        @mouseenter="openRes('{{ $resKey }}')"
-                                        @mouseleave="closeRes()"
-                                        :style="'position: absolute; left: 100%; top: ' + (resPositions['{{ $resKey }}'] || 0) + 'px; z-index: 40;'"
-                                        class="flex flex-col sm:flex-row items-start pl-1">
-                                        <!-- Main Menu List -->
-                                        <div
-                                            class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200">
-                                            @if ($resType === 'application')
-                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                    @mouseleave="closeMenu()">
-                                                    <a href="{{ route('project.application.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                        class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                        <span>Configuration</span>
-                                                        <svg class="w-3 h-3 shrink-0" fill="none"
-                                                            stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                                stroke-width="4" d="M9 5l7 7-7 7"></path>
-                                                        </svg>
-                                                    </a>
-                                                </div>
-                                                <a href="{{ route('project.application.deployment.index', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Deployments</a>
-                                                <a href="{{ route('project.application.logs', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                @can('canAccessTerminal')
-                                                    <a href="{{ route('project.application.command', $resParams) }}"
-                                                        class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                @endcan
-                                            @elseif ($resType === 'service')
-                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                    @mouseleave="closeMenu()">
-                                                    <a href="{{ route('project.service.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                        class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                        <span>Configuration</span>
-                                                        <svg class="w-3 h-3 shrink-0" fill="none"
-                                                            stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                                stroke-width="4" d="M9 5l7 7-7 7"></path>
-                                                        </svg>
-                                                    </a>
-                                                </div>
-                                                <a href="{{ route('project.service.logs', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                @can('canAccessTerminal')
-                                                    <a href="{{ route('project.service.command', $resParams) }}"
-                                                        class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                @endcan
-                                            @else
-                                                <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                    @mouseleave="closeMenu()">
-                                                    <a href="{{ route('project.database.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                        class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                        <span>Configuration</span>
-                                                        <svg class="w-3 h-3 shrink-0" fill="none"
-                                                            stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                                stroke-width="4" d="M9 5l7 7-7 7"></path>
-                                                        </svg>
-                                                    </a>
-                                                </div>
-                                                <a href="{{ route('project.database.logs', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                @can('canAccessTerminal')
-                                                    <a href="{{ route('project.database.command', $resParams) }}"
-                                                        class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                @endcan
-                                                @if (
-                                                    $res->getMorphClass() === 'App\Models\StandalonePostgresql' ||
-                                                        $res->getMorphClass() === 'App\Models\StandaloneMongodb' ||
-                                                        $res->getMorphClass() === 'App\Models\StandaloneMysql' ||
-                                                        $res->getMorphClass() === 'App\Models\StandaloneMariadb')
-                                                    <a href="{{ route('project.database.backup.index', $resParams) }}" {{ wireNavigate() }}
-                                                        class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Backups</a>
-                                                @endif
-                                            @endif
-                                        </div>
-
-                                        <!-- Configuration Sub-menu (4th level) -->
-                                        <div x-show="activeMenuEnv === '{{ $resKey }}-config'" x-cloak
-                                            x-transition:enter="transition ease-out duration-150"
-                                            x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
-                                            @mouseenter="openMenu('{{ $resKey }}-config')"
-                                            @mouseleave="closeMenu()"
-                                            :style="'position: absolute; left: 100%; top: ' + (menuPositions['{{ $resKey }}-config'] || 0) + 'px; z-index: 50;'"
-                                            class="pl-1">
-                                        <div class="w-52 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
-                                            @if ($resType === 'application')
-                                                <a href="{{ route('project.application.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                <a href="{{ route('project.application.environment-variables', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                    Variables</a>
-                                                <a href="{{ route('project.application.persistent-storage', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                                    Storage</a>
-                                                <a href="{{ route('project.application.source', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Source</a>
-                                                <a href="{{ route('project.application.servers', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                                                <a href="{{ route('project.application.scheduled-tasks.show', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                                    Tasks</a>
-                                                <a href="{{ route('project.application.webhooks', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                <a href="{{ route('project.application.preview-deployments', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Preview
-                                                    Deployments</a>
-                                                <a href="{{ route('project.application.healthcheck', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Healthcheck</a>
-                                                <a href="{{ route('project.application.rollback', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Rollback</a>
-                                                <a href="{{ route('project.application.resource-limits', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                    Limits</a>
-                                                <a href="{{ route('project.application.resource-operations', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                    Operations</a>
-                                                <a href="{{ route('project.application.metrics', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                                                <a href="{{ route('project.application.tags', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                <a href="{{ route('project.application.advanced', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Advanced</a>
-                                                <a href="{{ route('project.application.danger', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                    Zone</a>
-                                            @elseif ($resType === 'service')
-                                                <a href="{{ route('project.service.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                <a href="{{ route('project.service.environment-variables', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                    Variables</a>
-                                                <a href="{{ route('project.service.storages', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Storages</a>
-                                                <a href="{{ route('project.service.scheduled-tasks.show', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                                    Tasks</a>
-                                                <a href="{{ route('project.service.webhooks', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                <a href="{{ route('project.service.resource-operations', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                    Operations</a>
-                                                <a href="{{ route('project.service.tags', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                <a href="{{ route('project.service.danger', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                    Zone</a>
-                                            @else
-                                                <a href="{{ route('project.database.configuration', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                <a href="{{ route('project.database.environment-variables', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                    Variables</a>
-                                                <a href="{{ route('project.database.servers', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                                                <a href="{{ route('project.database.persistent-storage', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                                    Storage</a>
-                                                <a href="{{ route('project.database.webhooks', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                <a href="{{ route('project.database.resource-limits', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                    Limits</a>
-                                                <a href="{{ route('project.database.resource-operations', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                    Operations</a>
-                                                <a href="{{ route('project.database.metrics', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                                                <a href="{{ route('project.database.tags', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                <a href="{{ route('project.database.danger', $resParams) }}" {{ wireNavigate() }}
-                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                    Zone</a>
-                                            @endif
-                                        </div>
-                                        </div>
-                                    </div>
-                                @endforeach
                             </div>
                         @endif
                     @endforeach
@@ -425,243 +242,16 @@
         </li>
 
         <!-- Resource Level -->
-        @php
-            $resourceUuid = data_get($resource, 'uuid');
-            $resourceType = $resource->getMorphClass();
-            $isApplication = $resourceType === 'App\Models\Application';
-            $isService = $resourceType === 'App\Models\Service';
-            $isDatabase = str_contains($resourceType, 'Database') || str_contains($resourceType, 'Standalone');
-            // Use loaded relation count if available, otherwise check additional_servers_count attribute
-            $hasMultipleServers = $isApplication && method_exists($resource, 'additional_servers') &&
-                ($resource->relationLoaded('additional_servers') ? $resource->additional_servers->count() > 0 : ($resource->additional_servers_count ?? 0) > 0);
-            $serverName = $hasMultipleServers ? null : data_get($resource, 'destination.server.name');
-            $routeParams = [
-                'project_uuid' => $currentProjectUuid,
-                'environment_uuid' => $currentEnvironmentUuid,
-            ];
-            if ($isApplication) {
-                $routeParams['application_uuid'] = $resourceUuid;
-            } elseif ($isService) {
-                $routeParams['service_uuid'] = $resourceUuid;
-            } else {
-                $routeParams['database_uuid'] = $resourceUuid;
-            }
-        @endphp
-        <li class="inline-flex items-center" x-data="{ resourceOpen: false, activeMenu: null, menuPosition: 0, closeTimeout: null, menuTimeout: null, toggle() { this.resourceOpen = !this.resourceOpen; if (!this.resourceOpen) { this.activeMenu = null; } }, open() { clearTimeout(this.closeTimeout); this.resourceOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.resourceOpen = false; this.activeMenu = null; }, 100) }, openMenu(id) { clearTimeout(this.closeTimeout); clearTimeout(this.menuTimeout); this.activeMenu = id }, closeMenu() { this.menuTimeout = setTimeout(() => { this.activeMenu = null; }, 100) } }">
-            <div class="flex items-center relative" @mouseenter="open()"
-                @mouseleave="close()">
-                <a class="text-xs truncate lg:text-sm hover:text-warning" {{ wireNavigate() }}
-                    href="{{ $isApplication
-                        ? route('project.application.configuration', $routeParams)
-                        : ($isService
-                            ? route('project.service.configuration', $routeParams)
-                            : route('project.database.configuration', $routeParams)) }}"
-                    title="{{ data_get($resource, 'name') }}{{ $serverName ? ' ('.$serverName.')' : '' }}">
-                    {{ data_get($resource, 'name') }}@if($serverName) <span class="text-xs text-neutral-400">({{ $serverName }})</span>@endif
-                </a>
-                <button type="button" @click.stop="toggle()" class="px-1 text-warning">
-                    <svg class="w-3 h-3 transition-transform" :class="{ 'rotate-down': resourceOpen }" fill="none"
-                        stroke="currentColor" viewBox="0 0 24 24">
-                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M9 5l7 7-7 7">
-                        </path>
-                    </svg>
-                </button>
-
-                <!-- Resource Dropdown Container -->
-                <div x-show="resourceOpen" @click.outside="close()" x-transition:enter="transition ease-out duration-200"
-                    x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
-                    x-transition:leave="transition ease-in duration-75"
-                    x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95"
-                    class="absolute z-20 top-full mt-1 left-0 sm:left-auto max-w-[calc(100vw-1rem)]" x-init="$nextTick(() => { const rect = $el.getBoundingClientRect(); if (rect.right > window.innerWidth) { $el.style.left = 'auto'; $el.style.right = '0'; } })">
-                    <!-- Main Menu List -->
-                    <div
-                        class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200">
-                        @if ($isApplication)
-                            <!-- Application Main Menus -->
-                            <div @mouseenter="openMenu('config'); menuPosition = $el.offsetTop" @mouseleave="closeMenu()">
-                                <a href="{{ route('project.application.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                    class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    <span>Configuration</span>
-                                    <svg class="w-3 h-3 shrink-0" fill="none" stroke="currentColor"
-                                        viewBox="0 0 24 24">
-                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="4"
-                                            d="M9 5l7 7-7 7"></path>
-                                    </svg>
-                                </a>
-                            </div>
-                            <a href="{{ route('project.application.deployment.index', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                Deployments
-                            </a>
-                            <a href="{{ route('project.application.logs', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                Logs
-                            </a>
-                            @can('canAccessTerminal')
-                                <a href="{{ route('project.application.command', $routeParams) }}"
-                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    Terminal
-                                </a>
-                            @endcan
-                        @elseif ($isService)
-                            <!-- Service Main Menus -->
-                            <div @mouseenter="openMenu('config'); menuPosition = $el.offsetTop" @mouseleave="closeMenu()">
-                                <a href="{{ route('project.service.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                    class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    <span>Configuration</span>
-                                    <svg class="w-4 h-4 shrink-0" 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"></path>
-                                    </svg>
-                                </a>
-                            </div>
-                            <a href="{{ route('project.service.logs', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                Logs
-                            </a>
-                            @can('canAccessTerminal')
-                                <a href="{{ route('project.service.command', $routeParams) }}"
-                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    Terminal
-                                </a>
-                            @endcan
-                        @else
-                            <!-- Database Main Menus -->
-                            <div @mouseenter="openMenu('config'); menuPosition = $el.offsetTop" @mouseleave="closeMenu()">
-                                <a href="{{ route('project.database.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                    class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    <span>Configuration</span>
-                                    <svg class="w-4 h-4 shrink-0" 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"></path>
-                                    </svg>
-                                </a>
-                            </div>
-                            <a href="{{ route('project.database.logs', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                Logs
-                            </a>
-                            @can('canAccessTerminal')
-                                <a href="{{ route('project.database.command', $routeParams) }}"
-                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    Terminal
-                                </a>
-                            @endcan
-                            @if (
-                                $resourceType === 'App\Models\StandalonePostgresql' ||
-                                    $resourceType === 'App\Models\StandaloneMongodb' ||
-                                    $resourceType === 'App\Models\StandaloneMysql' ||
-                                    $resourceType === 'App\Models\StandaloneMariadb')
-                                <a href="{{ route('project.database.backup.index', $routeParams) }}" {{ wireNavigate() }}
-                                    class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                    Backups
-                                </a>
-                            @endif
-                        @endif
-                    </div>
-
-                    <!-- Configuration Sub-menu -->
-                    <div x-show="activeMenu === 'config'" x-cloak x-transition:enter="transition ease-out duration-150"
-                        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
-                        @mouseenter="openMenu('config')"
-                        @mouseleave="closeMenu()"
-                        :style="'position: absolute; left: 100%; top: ' + menuPosition + 'px; z-index: 50;'"
-                        class="pl-1">
-                        <div class="w-52 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
-                        @if ($isApplication)
-                            <a href="{{ route('project.application.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                            <a href="{{ route('project.application.environment-variables', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                Variables</a>
-                            <a href="{{ route('project.application.persistent-storage', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                Storage</a>
-                            <a href="{{ route('project.application.source', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Source</a>
-                            <a href="{{ route('project.application.servers', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                            <a href="{{ route('project.application.scheduled-tasks.show', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                Tasks</a>
-                            <a href="{{ route('project.application.webhooks', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                            <a href="{{ route('project.application.preview-deployments', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Preview
-                                Deployments</a>
-                            <a href="{{ route('project.application.healthcheck', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Healthcheck</a>
-                            <a href="{{ route('project.application.rollback', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Rollback</a>
-                            <a href="{{ route('project.application.resource-limits', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                Limits</a>
-                            <a href="{{ route('project.application.resource-operations', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                Operations</a>
-                            <a href="{{ route('project.application.metrics', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                            <a href="{{ route('project.application.tags', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                            <a href="{{ route('project.application.advanced', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Advanced</a>
-                            <a href="{{ route('project.application.danger', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                Zone</a>
-                        @elseif ($isService)
-                            <a href="{{ route('project.service.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                            <a href="{{ route('project.service.environment-variables', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                Variables</a>
-                            <a href="{{ route('project.service.storages', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Storages</a>
-                            <a href="{{ route('project.service.scheduled-tasks.show', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                Tasks</a>
-                            <a href="{{ route('project.service.webhooks', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                            <a href="{{ route('project.service.resource-operations', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                Operations</a>
-                            <a href="{{ route('project.service.tags', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                            <a href="{{ route('project.service.danger', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                Zone</a>
-                        @else
-                            <a href="{{ route('project.database.configuration', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                            <a href="{{ route('project.database.environment-variables', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                Variables</a>
-                            <a href="{{ route('project.database.servers', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                            <a href="{{ route('project.database.persistent-storage', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                Storage</a>
-                            <a href="{{ route('project.database.webhooks', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                            <a href="{{ route('project.database.resource-limits', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                Limits</a>
-                            <a href="{{ route('project.database.resource-operations', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                Operations</a>
-                            <a href="{{ route('project.database.metrics', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                            <a href="{{ route('project.database.tags', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                            <a href="{{ route('project.database.danger', $routeParams) }}" {{ wireNavigate() }}
-                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                Zone</a>
-                        @endif
-                        </div>
-                    </div>
-                </div>
-            </div>
+        <li class="inline-flex items-center mr-2">
+            <a class="text-xs truncate lg:text-sm hover:text-warning" {{ wireNavigate() }}
+                href="{{ $isApplication
+                    ? route('project.application.configuration', $routeParams)
+                    : ($isService
+                        ? route('project.service.configuration', $routeParams)
+                        : route('project.database.configuration', $routeParams)) }}"
+                title="{{ data_get($resource, 'name') }}{{ $serverName ? ' ('.$serverName.')' : '' }}">
+                {{ data_get($resource, 'name') }}@if($serverName) <span class="text-xs text-neutral-400">({{ $serverName }})</span>@endif
+            </a>
         </li>
 
         <!-- Current Section Status -->

resources/views/components/service-database/sidebar.blade.php

@@ -16,6 +16,8 @@
     </a>
     <a class="sub-menu-item" wire:current.exact="menu-item-active" {{ wireNavigate() }}
         href="{{ route('project.service.index', $parameters) }}"><span class="menu-item-label">General</span></a>
+    <a class="sub-menu-item" wire:current.exact="menu-item-active" {{ wireNavigate() }}
+        href="{{ route('project.service.index.advanced', $parameters) }}"><span class="menu-item-label">Advanced</span></a>
     @if ($serviceDatabase?->isBackupSolutionAvailable() || $serviceDatabase?->is_migrated)
         <a class="sub-menu-item" wire:current.exact="menu-item-active" {{ wireNavigate() }}
             href="{{ route('project.service.database.backups', $parameters) }}"><span class="menu-item-label">Backups</span></a>

resources/views/components/status/index.blade.php

@@ -3,35 +3,37 @@
     'lastDeploymentLink' => null,
     'resource' => null,
 ])
-@if (str($resource->status)->startsWith('running'))
-    <x-status.running :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
-@elseif(str($resource->status)->startsWith('degraded'))
-    <x-status.degraded :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
-@elseif(str($resource->status)->startsWith('restarting') || str($resource->status)->startsWith('starting'))
-    <x-status.restarting :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
-@else
-    <x-status.stopped :status="$resource->status" />
-@endif
-@if (isset($resource->restart_count) && $resource->restart_count > 0 && !str($resource->status)->startsWith('exited'))
-    <div class="flex items-center pl-2">
-        <span class="text-xs dark:text-warning" title="Container has restarted {{ $resource->restart_count }} time{{ $resource->restart_count > 1 ? 's' : '' }}. Last restart: {{ $resource->last_restart_at?->diffForHumans() }}">
-            ({{ $resource->restart_count }}x restarts)
-        </span>
-    </div>
-@endif
-@if (!str($resource->status)->contains('exited') && $showRefreshButton)
-    <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
-        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
-        <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
-        </svg>
-    </button>
-    <button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
-        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
-        <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
-        </svg>
-    </button>
-@endif
+<div class="flex flex-wrap items-center gap-1">
+    @if (str($resource->status)->startsWith('running'))
+        <x-status.running :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
+    @elseif(str($resource->status)->startsWith('degraded'))
+        <x-status.degraded :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
+    @elseif(str($resource->status)->startsWith('restarting') || str($resource->status)->startsWith('starting'))
+        <x-status.restarting :status="$resource->status" :title="$title" :lastDeploymentLink="$lastDeploymentLink" />
+    @else
+        <x-status.stopped :status="$resource->status" />
+    @endif
+    @if (isset($resource->restart_count) && $resource->restart_count > 0 && !str($resource->status)->startsWith('exited'))
+        <div class="flex items-center">
+            <span class="text-xs dark:text-warning" title="Container has restarted {{ $resource->restart_count }} time{{ $resource->restart_count > 1 ? 's' : '' }}. Last restart: {{ $resource->last_restart_at?->diffForHumans() }}">
+                ({{ $resource->restart_count }}x restarts)
+            </span>
+        </div>
+    @endif
+    @if (!str($resource->status)->contains('exited') && $showRefreshButton)
+        <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
+            class="dark:hover:fill-white fill-black dark:fill-warning">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+            </svg>
+        </button>
+        <button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
+            class="dark:hover:fill-white fill-black dark:fill-warning">
+            <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+            </svg>
+        </button>
+    @endif
+</div>

resources/views/components/status/services.blade.php

@@ -1,30 +1,32 @@
 @php
     $displayStatus = formatContainerStatus($complexStatus);
 @endphp
-@if (str($displayStatus)->lower()->contains('running'))
-    <x-status.running :status="$displayStatus" />
-@elseif(str($displayStatus)->lower()->contains('starting'))
-    <x-status.restarting :status="$displayStatus" />
-@elseif(str($displayStatus)->lower()->contains('restarting'))
-    <x-status.restarting :status="$displayStatus" />
-@elseif(str($displayStatus)->lower()->contains('degraded'))
-    <x-status.degraded :status="$displayStatus" />
-@else
-    <x-status.stopped :status="$displayStatus" />
-@endif
-@if (!str($complexStatus)->contains('exited') && $showRefreshButton)
-    <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
-        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
-        <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
-        </svg>
-    </button>
-    <button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
-        class="mx-1 dark:hover:fill-white fill-black dark:fill-warning">
-        <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
-        </svg>
-    </button>
-@endif
+<div class="flex flex-wrap items-center gap-1">
+    @if (str($displayStatus)->lower()->contains('running'))
+        <x-status.running :status="$displayStatus" />
+    @elseif(str($displayStatus)->lower()->contains('starting'))
+        <x-status.restarting :status="$displayStatus" />
+    @elseif(str($displayStatus)->lower()->contains('restarting'))
+        <x-status.restarting :status="$displayStatus" />
+    @elseif(str($displayStatus)->lower()->contains('degraded'))
+        <x-status.degraded :status="$displayStatus" />
+    @else
+        <x-status.stopped :status="$displayStatus" />
+    @endif
+    @if (!str($complexStatus)->contains('exited') && $showRefreshButton)
+        <button wire:loading.remove.delay.shortest wire:target="manualCheckStatus" title="Refresh Status" wire:click='manualCheckStatus'
+            class="dark:hover:fill-white fill-black dark:fill-warning">
+            <svg class="w-4 h-4" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+            </svg>
+        </button>
+        <button wire:loading.delay.shortest wire:target="manualCheckStatus" title="Refreshing Status" wire:click='manualCheckStatus'
+            class="dark:hover:fill-white fill-black dark:fill-warning">
+            <svg class="w-4 h-4 animate-spin" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                <path
+                    d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+            </svg>
+        </button>
+    @endif
+</div>

resources/views/emails/server-force-disabled.blade.php

@@ -1,5 +1,5 @@
 <x-emails.layout>
     Your server ({{ $name }}) disabled because it is not paid! All automations and integrations are stopped.
 
-    Please update your subscription to enable the server again [here](https://app.coolify.io/subscriptions).
+    Please update your subscription to enable the server again [here](https://app.coolify.io/subscription).
 </x-emails.layout>

resources/views/invitation/accept.blade.php

@@ -0,0 +1,43 @@
+<x-layout-simple>
+    <section class="bg-gray-50 dark:bg-base">
+        <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0">
+            <div class="w-full max-w-md space-y-8">
+                <div class="text-center space-y-2">
+                    <h1 class="!text-5xl font-extrabold tracking-tight text-gray-900 dark:text-white">
+                        Coolify
+                    </h1>
+                </div>
+
+                <div class="space-y-6">
+                    <div class="p-6 rounded-lg border border-neutral-500/20 bg-white/5">
+                        <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4">Team Invitation</h2>
+
+                        <p class="text-sm text-gray-600 dark:text-neutral-400 mb-2">
+                            You have been invited to join:
+                        </p>
+                        <p class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+                            {{ $team->name }}
+                        </p>
+
+                        <p class="text-sm text-gray-600 dark:text-neutral-400 mb-1">
+                            Role: <span class="font-medium text-gray-900 dark:text-white">{{ ucfirst($invitation->role) }}</span>
+                        </p>
+
+                        @if ($alreadyMember)
+                            <div class="mt-4 p-3 bg-warning/10 border border-warning rounded-lg">
+                                <p class="text-sm text-warning">You are already a member of this team.</p>
+                            </div>
+                        @endif
+
+                        <form method="POST" action="{{ route('team.invitation.accept', $invitation->uuid) }}" class="mt-6">
+                            @csrf
+                            <x-forms.button class="w-full justify-center py-3 box-boarding" type="submit" isHighlighted>
+                                {{ $alreadyMember ? 'Dismiss Invitation' : 'Accept Invitation' }}
+                            </x-forms.button>
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+</x-layout-simple>

resources/views/layouts/base.blade.php

@@ -203,30 +203,6 @@
         let checkHealthInterval = null;
         let checkIfIamDeadInterval = null;
 
-        function changePasswordFieldType(event) {
-            let element = event.target
-            for (let i = 0; i < 10; i++) {
-                if (element.className === "relative") {
-                    break;
-                }
-                element = element.parentElement;
-            }
-            element = element.children[1];
-            if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
-                if (element.type === 'password') {
-                    element.type = 'text';
-                    if (element.disabled) return;
-                    element.classList.add('truncate');
-                    this.type = 'text';
-                } else {
-                    element.type = 'password';
-                    if (element.disabled) return;
-                    element.classList.remove('truncate');
-                    this.type = 'password';
-                }
-            }
-        }
-
         function copyToClipboard(text) {
             navigator?.clipboard?.writeText(text) && window.Livewire.dispatch('success', 'Copied to clipboard.');
         }
@@ -326,4 +302,4 @@
 </body>
 @show
 
-</html>
+</html>

resources/views/livewire/activity-monitor.blade.php

@@ -34,10 +34,10 @@
             }
         }" x-init="// Initial scroll
         $nextTick(() => scrollToBottom());
-        
+
         // Add scroll event listener
         $el.addEventListener('scroll', () => handleScroll());
-        
+
         // Set up mutation observer to watch for content changes
         observer = new MutationObserver(() => {
             $nextTick(() => scrollToBottom());
@@ -52,7 +52,7 @@
                 'flex-1 min-h-0' => $fullHeight,
                 'max-h-96' => !$fullHeight,
             ])>
-            <pre class="font-mono whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($activity) }}</pre>
+            <pre class="font-logs whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($activity) }}</pre>
         </div>
     @else
         @if ($showWaiting)

resources/views/livewire/dashboard.blade.php

@@ -11,12 +11,12 @@
     <section class="-mt-2">
         <div class="flex items-center gap-2 pb-2">
             <h3>Projects</h3>
-            @can('create', App\Models\Project::class)
+@can('create', App\Models\Project::class)
                 @if ($projects->count() > 0)
                     <x-modal-input buttonTitle="Add" title="New Project">
                         <x-slot:content>
                             <button
-                                class="flex items-center justify-center size-4 text-white rounded hover:bg-coolgray-400 dark:hover:bg-coolgray-300 cursor-pointer">
+                                class="flex items-center justify-center size-4 text-black dark:text-white rounded hover:bg-coolgray-400 dark:hover:bg-coolgray-300 cursor-pointer">
                                 <svg class="size-3" xmlns="http://www.w3.org/2000/svg" fill="none"
                                     viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round"
@@ -83,12 +83,12 @@
     <section>
         <div class="flex items-center gap-2 pb-2">
             <h3>Servers</h3>
-            @can('create', App\Models\Server::class)
+@can('create', App\Models\Server::class)
                 @if ($servers->count() > 0 && $privateKeys->count() > 0)
                     <x-modal-input buttonTitle="Add" title="New Server" :closeOutside="false">
                         <x-slot:content>
                             <button
-                                class="flex items-center justify-center size-4 text-white rounded hover:bg-coolgray-400 dark:hover:bg-coolgray-300 cursor-pointer">
+                                class="flex items-center justify-center size-4 text-black dark:text-white rounded hover:bg-coolgray-400 dark:hover:bg-coolgray-300 cursor-pointer">
                                 <svg class="size-3" xmlns="http://www.w3.org/2000/svg" fill="none"
                                     viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round"

resources/views/livewire/global-search.blade.php

@@ -835,6 +835,20 @@
                                                                 <div class="font-medium text-neutral-900 dark:text-white truncate"
                                                                     x-text="item.name">
                                                                 </div>
+                                                                <template x-if="item.amd_only">
+                                                                    <span
+                                                                        class="px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-200 shrink-0"
+                                                                        title="This service only supports AMD64/x86_64 architecture">
+                                                                        AMD only
+                                                                    </span>
+                                                                </template>
+                                                                <template x-if="item.arm_only">
+                                                                    <span
+                                                                        class="px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-200 shrink-0"
+                                                                        title="This service only supports ARM64/aarch64 architecture">
+                                                                        ARM only
+                                                                    </span>
+                                                                </template>
                                                                 <span
                                                                     class="text-xs text-neutral-500 dark:text-neutral-400 shrink-0"
                                                                     x-text="item.quickcommand"

resources/views/livewire/notifications/email.blade.php

@@ -30,7 +30,7 @@
             @endif
         </div>
         @if (!isCloud())
-            <div class="w-96">
+            <div class="w-full sm:w-96">
                 <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSave()" id="useInstanceEmailSettings"
                     label="Use system wide (transactional) email settings" />
             </div>
@@ -72,7 +72,7 @@
                     <div class="flex flex-col gap-4">
                         <div class="flex flex-col w-full gap-2 xl:flex-row">
                             <x-forms.input canGate="update" :canResource="$settings" required id="smtpHost" placeholder="smtp.mailgun.org" label="Host" />
-                            <x-forms.input canGate="update" :canResource="$settings" required id="smtpPort" placeholder="587" label="Port" />
+                            <x-forms.input canGate="update" :canResource="$settings" required id="smtpPort" type="number" placeholder="587" label="Port" />
                             <x-forms.select canGate="update" :canResource="$settings" required id="smtpEncryption" label="Encryption">
                                 <option value="starttls">StartTLS</option>
                                 <option value="tls">TLS/SSL</option>
@@ -82,7 +82,7 @@
                         <div class="flex flex-col w-full gap-2 xl:flex-row">
                             <x-forms.input canGate="update" :canResource="$settings" id="smtpUsername" label="SMTP Username" />
                             <x-forms.input canGate="update" :canResource="$settings" id="smtpPassword" type="password" label="SMTP Password" />
-                            <x-forms.input canGate="update" :canResource="$settings" id="smtpTimeout" helper="Timeout value for sending emails."
+                            <x-forms.input canGate="update" :canResource="$settings" id="smtpTimeout" type="number"  helper="Timeout value for sending emails."
                                 label="Timeout" />
                         </div>
                     </div>

resources/views/livewire/notifications/telegram.blade.php

@@ -41,7 +41,7 @@
             <h3 class="text-lg font-medium mb-3">Deployments</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentSuccessTelegramNotifications"
                             label="Deployment Success" />
                     </div>
@@ -49,7 +49,7 @@
                         id="telegramNotificationsDeploymentSuccessThreadId" />
                 </div>
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="deploymentFailureTelegramNotifications"
                             label="Deployment Failure" />
                     </div>
@@ -57,7 +57,7 @@
                         id="telegramNotificationsDeploymentFailureThreadId" />
                 </div>
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="statusChangeTelegramNotifications"
                             label="Container Status Changes"
                             helper="Send a notification when a container status changes. It will send a notification for Stopped and Restarted events of a container." />
@@ -71,7 +71,7 @@
             <h3 class="text-lg font-medium mb-3">Backups</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupSuccessTelegramNotifications"
                             label="Backup Success" />
                     </div>
@@ -80,7 +80,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="backupFailureTelegramNotifications"
                             label="Backup Failure" />
                     </div>
@@ -94,7 +94,7 @@
             <h3 class="text-lg font-medium mb-3">Scheduled Tasks</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskSuccessTelegramNotifications"
                             label="Scheduled Task Success" />
                     </div>
@@ -103,7 +103,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="scheduledTaskFailureTelegramNotifications"
                             label="Scheduled Task Failure" />
                     </div>
@@ -117,7 +117,7 @@
             <h3 class="text-lg font-medium mb-3">Server</h3>
             <div class="flex flex-col gap-1.5 pl-1">
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupSuccessTelegramNotifications"
                             label="Docker Cleanup Success" />
                     </div>
@@ -126,7 +126,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="dockerCleanupFailureTelegramNotifications"
                             label="Docker Cleanup Failure" />
                     </div>
@@ -135,7 +135,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverDiskUsageTelegramNotifications"
                             label="Server Disk Usage" />
                     </div>
@@ -144,7 +144,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverReachableTelegramNotifications"
                             label="Server Reachable" />
                     </div>
@@ -153,7 +153,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverUnreachableTelegramNotifications"
                             label="Server Unreachable" />
                     </div>
@@ -162,7 +162,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="serverPatchTelegramNotifications"
                             label="Server Patching" />
                     </div>
@@ -171,7 +171,7 @@
                 </div>
 
                 <div class="pl-1 flex gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="saveModel" id="traefikOutdatedTelegramNotifications"
                             label="Traefik Proxy Outdated" />
                     </div>

resources/views/livewire/project/application/advanced.blade.php

@@ -5,19 +5,7 @@
         </div>
         <div>Advanced configuration for your application.</div>
         <div class="flex flex-col gap-1 pt-4">
-            <h3>General</h3>
-            @if ($application->git_based())
-                <x-forms.checkbox helper="Automatically deploy new commits based on Git webhooks." instantSave
-                    id="isAutoDeployEnabled" label="Auto Deploy" canGate="update" :canResource="$application" />
-                <x-forms.checkbox
-                    helper="Allow to automatically deploy Preview Deployments for all opened PR's.<br><br>Closing a PR will delete Preview Deployments."
-                    instantSave id="isPreviewDeploymentsEnabled" label="Preview Deployments" canGate="update"
-                    :canResource="$application" />
-                <x-forms.checkbox
-                    helper="When enabled, anyone can trigger PR deployments. When disabled, only repository members, collaborators, and contributors can trigger PR deployments."
-                    instantSave id="isPrDeploymentsPublicEnabled" label="Allow Public PR Deployments" canGate="update"
-                    :canResource="$application" :disabled="!$isPreviewDeploymentsEnabled" />
-            @endif
+            <h3>Build</h3>
             <x-forms.checkbox helper="Disable Docker build cache on every deployment." instantSave
                 id="disableBuildCache" label="Disable Build Cache" canGate="update" :canResource="$application" />
             <x-forms.checkbox
@@ -29,6 +17,55 @@
                 instantSave id="includeSourceCommitInBuild" label="Include Source Commit in Build" canGate="update"
                 :canResource="$application" />
 
+            <h3 class="pt-4">Container</h3>
+            <x-forms.checkbox
+                helper="The deployed container will have the same name ({{ $application->uuid }}). <span class='font-bold dark:text-warning'>You will lose the rolling update feature!</span>"
+                instantSave id="isConsistentContainerNameEnabled" label="Consistent Container Names" canGate="update"
+                :canResource="$application" />
+            @if ($isConsistentContainerNameEnabled === false)
+                <form class="flex items-end gap-2 " wire:submit.prevent='saveCustomName'>
+                    <x-forms.input
+                        helper="You can add a custom name for your container.<br><br>The name will be converted to slug format when you save it. <span class='font-bold dark:text-warning'>You will lose the rolling update feature!</span>"
+                        instantSave id="customInternalName" label="Custom Container Name" canGate="update"
+                        :canResource="$application" />
+                    <x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
+                </form>
+            @endif
+
+            @if ($application->git_based())
+                <h3 class="pt-4">Deployment</h3>
+                <x-forms.checkbox helper="Automatically deploy new commits based on Git webhooks." instantSave
+                    id="isAutoDeployEnabled" label="Auto Deploy" canGate="update" :canResource="$application" />
+                <x-forms.checkbox
+                    helper="Allow to automatically deploy Preview Deployments for all opened PR's.<br><br>Closing a PR will delete Preview Deployments."
+                    instantSave id="isPreviewDeploymentsEnabled" label="Preview Deployments" canGate="update"
+                    :canResource="$application" />
+                <x-forms.checkbox
+                    helper="When enabled, anyone can trigger PR deployments. When disabled, only repository members, collaborators, and contributors can trigger PR deployments."
+                    instantSave id="isPrDeploymentsPublicEnabled" label="Allow Public PR Deployments" canGate="update"
+                    :canResource="$application" :disabled="!$isPreviewDeploymentsEnabled" />
+
+                <h3 class="pt-4">Git</h3>
+                <x-forms.checkbox instantSave id="isGitSubmodulesEnabled" label="Submodules"
+                    helper="Allow Git Submodules during build process." canGate="update" :canResource="$application" />
+                <x-forms.checkbox instantSave id="isGitLfsEnabled" label="LFS"
+                    helper="Allow Git LFS during build process." canGate="update" :canResource="$application" />
+                <x-forms.checkbox instantSave id="isGitShallowCloneEnabled" label="Shallow Clone"
+                    helper="Use shallow cloning (--depth=1) to speed up deployments by only fetching the latest commit history. This reduces clone time and resource usage, especially for large repositories."
+                    canGate="update" :canResource="$application" />
+            @endif
+
+            @if ($application->build_pack === 'dockercompose')
+                <h3 class="pt-4">Docker Compose</h3>
+                <x-forms.checkbox instantSave id="isRawComposeDeploymentEnabled" label="Raw Compose Deployment"
+                    helper="WARNING: Advanced use cases only. Your docker compose file will be deployed as-is. Nothing is modified by Coolify. You need to configure the proxy parts. More info in the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/compose#raw-docker-compose-deployment'>documentation.</a>"
+                    canGate="update" :canResource="$application" />
+                <x-forms.checkbox instantSave id="isConnectToDockerNetworkEnabled" label="Connect To Predefined Network"
+                    helper="By default, you do not reach the Coolify defined networks.<br>Starting a docker compose based resource will have an internal network. <br>If you connect to a Coolify defined network, you maybe need to use different internal DNS names to connect to a resource.<br><br>For more information, check <a class='underline dark:text-white' target='_blank' href='https://coolify.io/docs/knowledge-base/docker/compose#connect-to-predefined-networks'>this</a>."
+                    canGate="update" :canResource="$application" />
+            @endif
+
+            <h3 class="pt-4">Proxy</h3>
             @if ($application->settings->is_container_label_readonly_enabled)
                 <x-forms.checkbox
                     helper="Your application will be available only on https if your domain starts with https://..."
@@ -49,45 +86,10 @@
                     helper="Readonly labels are disabled. You need to set the labels in the labels section." disabled
                     instantSave id="isStripprefixEnabled" label="Strip Prefixes" canGate="update" :canResource="$application" />
             @endif
-            @if ($application->build_pack === 'dockercompose')
-                <h3>Docker Compose</h3>
-                <x-forms.checkbox instantSave id="isRawComposeDeploymentEnabled" label="Raw Compose Deployment"
-                    helper="WARNING: Advanced use cases only. Your docker compose file will be deployed as-is. Nothing is modified by Coolify. You need to configure the proxy parts. More info in the <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/docker/compose#raw-docker-compose-deployment'>documentation.</a>"
-                    canGate="update" :canResource="$application" />
-            @endif
-            <h3 class="pt-4">Container Names</h3>
-            <x-forms.checkbox
-                helper="The deployed container will have the same name ({{ $application->uuid }}). <span class='font-bold dark:text-warning'>You will lose the rolling update feature!</span>"
-                instantSave id="isConsistentContainerNameEnabled" label="Consistent Container Names" canGate="update"
-                :canResource="$application" />
-            @if ($isConsistentContainerNameEnabled === false)
-                <form class="flex items-end gap-2 " wire:submit.prevent='saveCustomName'>
-                    <x-forms.input
-                        helper="You can add a custom name for your container.<br><br>The name will be converted to slug format when you save it. <span class='font-bold dark:text-warning'>You will lose the rolling update feature!</span>"
-                        instantSave id="customInternalName" label="Custom Container Name" canGate="update"
-                        :canResource="$application" />
-                    <x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
-                </form>
-            @endif
-            @if ($application->build_pack === 'dockercompose')
-                <h3 class="pt-4">Network</h3>
-                <x-forms.checkbox instantSave id="isConnectToDockerNetworkEnabled" label="Connect To Predefined Network"
-                    helper="By default, you do not reach the Coolify defined networks.<br>Starting a docker compose based resource will have an internal network. <br>If you connect to a Coolify defined network, you maybe need to use different internal DNS names to connect to a resource.<br><br>For more information, check <a class='underline dark:text-white' target='_blank' href='https://coolify.io/docs/knowledge-base/docker/compose#connect-to-predefined-networks'>this</a>."
-                    canGate="update" :canResource="$application" />
-            @endif
+
             <h3 class="pt-4">Logs</h3>
             <x-forms.checkbox helper="Drain logs to your configured log drain endpoint in your Server settings."
                 instantSave id="isLogDrainEnabled" label="Drain Logs" canGate="update" :canResource="$application" />
-            @if ($application->git_based())
-                <h3>Git</h3>
-                <x-forms.checkbox instantSave id="isGitSubmodulesEnabled" label="Submodules"
-                    helper="Allow Git Submodules during build process." canGate="update" :canResource="$application" />
-                <x-forms.checkbox instantSave id="isGitLfsEnabled" label="LFS"
-                    helper="Allow Git LFS during build process." canGate="update" :canResource="$application" />
-                <x-forms.checkbox instantSave id="isGitShallowCloneEnabled" label="Shallow Clone"
-                    helper="Use shallow cloning (--depth=1) to speed up deployments by only fetching the latest commit history. This reduces clone time and resource usage, especially for large repositories."
-                    canGate="update" :canResource="$application" />
-            @endif
         </div>
 
     </div>

resources/views/livewire/project/application/configuration.blade.php

@@ -42,11 +42,11 @@
                     </span>
                 @endif
             </a>
-            <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
+            <a @class(['sub-menu-item', 'menu-item-active' => str($currentRoute)->startsWith('project.application.scheduled-tasks')]) {{ wireNavigate() }}
                 href="{{ route('project.application.scheduled-tasks.show', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Scheduled Tasks</span></a>
             <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
                 href="{{ route('project.application.webhooks', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Webhooks</span></a>
-            @if ($application->git_based())
+            @if ($application->git_based() || $application->build_pack === 'dockerimage')
                 <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
                     href="{{ route('project.application.preview-deployments', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Preview Deployments</span></a>
             @endif
@@ -84,6 +84,8 @@
                 <livewire:project.shared.destination :resource="$application" />
             @elseif ($currentRoute === 'project.application.scheduled-tasks.show')
                 <livewire:project.shared.scheduled-task.all :resource="$application" />
+            @elseif ($currentRoute === 'project.application.scheduled-tasks')
+                <livewire:project.shared.scheduled-task.show />
             @elseif ($currentRoute === 'project.application.webhooks')
                 <livewire:project.shared.webhooks :resource="$application" />
             @elseif ($currentRoute === 'project.application.preview-deployments')

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

@@ -1,4 +1,4 @@
-<div>
+<div class="flex h-[calc(100vh-10rem)] min-h-[50rem] flex-col overflow-hidden">
     <x-slot:title>
         {{ data_get_str($application, 'name')->limit(10) }} > Deployment | Coolify
         </x-slot>
@@ -165,13 +165,13 @@
                 this.scheduleScroll();
             }
         }
-    }">
+    }" class="flex flex-1 min-h-0 flex-col overflow-hidden">
             <livewire:project.application.deployment-navbar
                 :application_deployment_queue="$application_deployment_queue" />
-            <div id="screen" :class="fullscreen ? 'fullscreen flex flex-col' : 'mt-4 relative'">
+            <div id="screen" :class="fullscreen ? 'fullscreen flex flex-col' : 'mt-4 flex flex-1 min-h-0 flex-col overflow-hidden'">
                 <div @if ($isKeepAliveOn) wire:poll.2000ms="polling" @endif
-                    class="flex flex-col w-full bg-white dark:text-white dark:bg-coolgray-100 dark:border-coolgray-300"
-                    :class="fullscreen ? 'h-full' : 'border border-dotted rounded-sm'">
+                    class="flex min-h-0 flex-col w-full overflow-hidden bg-white dark:text-white dark:bg-coolgray-100 dark:border-coolgray-300"
+                    :class="fullscreen ? 'h-full' : 'flex-1 border border-dotted rounded-sm'">
                     <div
                         class="flex flex-wrap items-center justify-between gap-2 px-4 py-2 border-b dark:border-coolgray-300 border-neutral-200 shrink-0">
                         <div class="flex items-center gap-3">
@@ -332,9 +332,8 @@
                         </div>
                     </div>
                     <div id="logsContainer"
-                        class="flex flex-col overflow-y-auto p-2 px-4 min-h-4 scrollbar"
-                        :class="fullscreen ? 'flex-1' : 'max-h-[30rem]'">
-                        <div id="logs" class="flex flex-col font-mono">
+                        class="flex min-h-40 flex-1 flex-col overflow-y-auto p-2 px-4 scrollbar">
+                        <div id="logs" class="flex flex-col font-logs">
                             <div x-show="searchQuery.trim() && matchCount === 0"
                                 class="text-gray-500 dark:text-gray-400 py-2">
                                 No matches found.
@@ -360,11 +359,11 @@
                                         ])>{{ $lineContent }}</span>
                                 </div>
                             @empty
-                                <span class="font-mono text-neutral-400 mb-2">No logs yet.</span>
+                                <span class="font-logs text-neutral-400 mb-2">No logs yet.</span>
                             @endforelse
                         </div>
                     </div>
                 </div>
             </div>
         </div>
-</div>
+</div>

resources/views/livewire/project/application/general.blade.php

@@ -49,12 +49,18 @@
                             !is_null($parsedServices) &&
                                 count($parsedServices) > 0 &&
                                 !$application->settings->is_raw_compose_deployment_enabled)
-                            <h3 class="pt-6">Domains</h3>
+                            @php
+                                $hasNonDatabaseService = collect(data_get($parsedServices, 'services', []))
+                                    ->contains(fn($service) => !isDatabaseImage(data_get($service, 'image')));
+                            @endphp
+                            @if ($hasNonDatabaseService)
+                                <h3 class="pt-6">Domains</h3>
+                            @endif
                             @foreach (data_get($parsedServices, 'services') as $serviceName => $service)
                                 @if (!isDatabaseImage(data_get($service, 'image')))
                                     <div class="flex items-end gap-2">
                                         <x-forms.input
-                                            helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. "
+                                            helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- https://app.coolify.io,https://cloud.coolify.io/dashboard<br>- https://app.coolify.io/api/v3<br>- https://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container.<br>- https://app.coolify.io:8080/api -> app.coolify.io/api will point to port 8080 inside the container."
                                             label="Domains for {{ $serviceName }}"
                                             id="parsedServiceDomains.{{ str($serviceName)->replace('-', '_')->replace('.', '_') }}.domain"
                                             x-bind:disabled="shouldDisable()"></x-forms.input>
@@ -86,18 +92,20 @@
                         ]" />
                 @endcan
             @endif
-            <div class="w-96 pb-6">
-                @if ($application->could_set_build_commands())
-                    <x-forms.checkbox instantSave id="isStatic" label="Is it a static site?"
-                        helper="If your application is a static site or the final build assets should be served as a static site, enable this."
-                        x-bind:disabled="!canUpdate" />
-                @endif
-                @if ($isStatic && $buildPack !== 'static')
-                    <x-forms.checkbox label="Is it a SPA (Single Page Application)?"
-                        helper="If your application is a SPA, enable this." id="isSpa" instantSave
-                        x-bind:disabled="!canUpdate"></x-forms.checkbox>
-                @endif
-            </div>
+            @if ($application->could_set_build_commands() || ($isStatic && $buildPack !== 'static'))
+                <div class="w-96 pb-6">
+                    @if ($application->could_set_build_commands())
+                        <x-forms.checkbox instantSave id="isStatic" label="Is it a static site?"
+                            helper="If your application is a static site or the final build assets should be served as a static site, enable this."
+                            x-bind:disabled="!canUpdate" />
+                    @endif
+                    @if ($isStatic && $buildPack !== 'static')
+                        <x-forms.checkbox label="Is it a SPA (Single Page Application)?"
+                            helper="If your application is a SPA, enable this." id="isSpa" instantSave
+                            x-bind:disabled="!canUpdate"></x-forms.checkbox>
+                    @endif
+                </div>
+            @endif
             @if ($buildPack !== 'dockercompose')
                 <div class="flex items-end gap-2">
                     @if ($application->settings->is_container_label_readonly_enabled == false)
@@ -106,7 +114,7 @@
                             x-bind:disabled="!canUpdate" />
                     @else
                         <x-forms.input placeholder="https://coolify.io" wire:model="fqdn" label="Domains"
-                            helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. "
+                            helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- https://app.coolify.io,https://cloud.coolify.io/dashboard<br>- https://app.coolify.io/api/v3<br>- https://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container.<br>- https://app.coolify.io:8080/api -> app.coolify.io/api will point to port 8080 inside the container."
                             x-bind:disabled="!canUpdate" />
                         @can('update', $application)
                             <x-forms.button wire:click="getWildcardDomain">Generate Domain
@@ -209,7 +217,7 @@
                     @endif
                 </div>
             @endif
-            <div>
+            <div class="pt-6">
                 <h3>Build</h3>
                 @if ($application->build_pack === 'dockerimage')
                     <x-forms.input
@@ -268,7 +276,7 @@
                                         helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($baseDirectory . $dockerComposeLocation, '/') }}</span>"
                                         x-model="composeLocation" @blur="normalizeComposeLocation()" />
                                 </div>
-                                <div class="w-96">
+                                <div class="w-full sm:w-96">
                                     <x-forms.checkbox instantSave id="isPreserveRepositoryEnabled"
                                         label="Preserve Repository During Deployment"
                                         helper="Git repository (based on the base directory settings) will be copied to the deployment directory."
@@ -314,8 +322,8 @@
                             </div>
                         @else
                             <div x-data="{
-                                baseDir: '{{ $application->base_directory }}',
-                                dockerfileLocation: '{{ $application->dockerfile_location }}',
+                                baseDir: @entangle('baseDirectory'),
+                                dockerfileLocation: @entangle('dockerfileLocation'),
                                 normalizePath(path) {
                                     if (!path || path.trim() === '') return '/';
                                     path = path.trim();
@@ -332,11 +340,11 @@
                                     this.dockerfileLocation = this.normalizePath(this.dockerfileLocation);
                                 }
                             }" class="flex flex-col gap-2 xl:flex-row">
-                                <x-forms.input placeholder="/" wire:model.defer="baseDirectory"
+                                <x-forms.input placeholder="/"
                                     label="Base Directory" helper="Directory to use as root. Useful for monorepos."
                                     x-bind:disabled="!canUpdate" x-model="baseDir" @blur="normalizeBaseDir()" />
                                 @if ($buildPack === 'dockerfile' && !$application->dockerfile)
-                                    <x-forms.input placeholder="/Dockerfile" wire:model.defer="dockerfileLocation"
+                                    <x-forms.input placeholder="/Dockerfile"
                                         label="Dockerfile Location"
                                         helper="It is calculated together with the Base Directory:<br><span class='dark:text-warning'>{{ Str::start($application->base_directory . $application->dockerfile_location, '/') }}</span>"
                                         x-bind:disabled="!canUpdate" x-model="dockerfileLocation"
@@ -374,7 +382,7 @@
                                 x-bind:disabled="!canUpdate" />
 
                             @if ($buildPack !== 'dockercompose')
-                                <div class="pt-2 w-96">
+                                <div class="pt-2 w-full sm:w-96">
                                     <x-forms.checkbox
                                         helper="Use a build server to build your application. You can configure your build server in the Server settings. For more info, check the <a href='https://coolify.io/docs/knowledge-base/server/build-server' class='underline' target='_blank'>documentation</a>."
                                         instantSave id="isBuildServerEnabled" label="Use a Build Server?"
@@ -414,7 +422,7 @@
                                 monacoEditorLanguage="yaml" useMonacoEditor />
                         </div>
                     @endif
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox label="Escape special characters in labels?"
                             helper="By default, $ (and other chars) is escaped. So if you write $ in the labels, it will be saved as $$.<br><br>If you want to use env variables inside the labels, turn this off."
                             id="isContainerLabelEscapeEnabled" instantSave
@@ -513,7 +521,7 @@
 
                 <h3 class="pt-8">HTTP Basic Authentication</h3>
                 <div>
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox helper="This will add the proper proxy labels to the container." instantSave
                             label="Enable" id="isHttpBasicAuthEnabled" x-bind:disabled="!canUpdate" />
                     </div>
@@ -535,7 +543,7 @@
                     <x-forms.textarea label="Container Labels" rows="15" id="customLabels"
                         monacoEditorLanguage="ini" useMonacoEditor x-bind:disabled="!canUpdate"></x-forms.textarea>
                 @endif
-                <div class="w-96">
+                <div class="w-full sm:w-96">
                     <x-forms.checkbox label="Readonly labels"
                         helper="Labels are readonly by default. Readonly means that edits you do to the labels could be lost and Coolify will autogenerate the labels for you. If you want to edit the labels directly, disable this option. <br><br>Be careful, it could break the proxy configuration after you restart the container as Coolify will now NOT autogenerate the labels for you (ofc you can always reset the labels to the coolify defaults manually)."
                         id="isContainerLabelReadonlyEnabled" instantSave

resources/views/livewire/project/application/heading.blade.php

@@ -1,16 +1,17 @@
 <nav wire:poll.10000ms="checkStatus" class="pb-6">
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
     <div class="navbar-main">
-        <nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
-            <a class="{{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+        <nav
+            class="scrollbar flex min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:w-auto md:overflow-visible">
+            <a class="shrink-0 {{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('project.application.configuration', $parameters) }}">
                 Configuration
             </a>
-            <a class="{{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+            <a class="shrink-0 {{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('project.application.deployment.index', $parameters) }}">
                 Deployments
             </a>
-            <a class="{{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
+            <a class="shrink-0 {{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.application.logs', $parameters) }}">
                 <div class="flex items-center gap-1">
                     Logs
@@ -23,23 +24,82 @@
             </a>
             @if (!$application->destination->server->isSwarm())
                 @can('canAccessTerminal')
-                    <a class="{{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
+                    <a class="shrink-0 {{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
                         href="{{ route('project.application.command', $parameters) }}">
                         Terminal
                     </a>
                 @endcan
             @endif
-            <x-applications.links :application="$application" />
+            <div class="shrink-0">
+                <x-applications.links :application="$application" />
+            </div>
         </nav>
         <div class="flex flex-wrap gap-2 items-center">
             @if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw))
                 <div>Please load a Compose file.</div>
             @else
-                @if (!$application->destination->server->isSwarm())
+                <div class="md:hidden">
+                    <x-dropdown>
+                        <x-slot:title>
+                            Actions
+                        </x-slot>
+                        @if (!str($application->status)->startsWith('exited'))
+                            @if (!$application->destination->server->isSwarm())
+                                <div class="dropdown-item dropdown-item-touch" wire:click='deploy'>
+                                    Redeploy
+                                </div>
+                            @endif
+                            @if ($application->build_pack !== 'dockercompose')
+                                @if ($application->destination->server->isSwarm())
+                                    <div class="dropdown-item dropdown-item-touch" wire:click='deploy'>
+                                        Update Service
+                                    </div>
+                                @else
+                                    <div class="dropdown-item dropdown-item-touch" wire:click='restart'>
+                                        Restart
+                                    </div>
+                                @endif
+                            @endif
+                            <x-modal-confirmation title="Confirm Application Stopping?" buttonTitle="Stop"
+                                submitAction="stop" :checkboxes="$checkboxes" :actions="[
+                                    'This application will be stopped.',
+                                    'All non-persistent data of this application will be deleted.',
+                                ]" :confirmWithText="false" :confirmWithPassword="false"
+                                step1ButtonText="Continue" step2ButtonText="Confirm">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch text-error">
+                                        Stop
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                        @else
+                            <div class="dropdown-item dropdown-item-touch" wire:click='deploy'>
+                                Deploy
+                            </div>
+                        @endif
+
+                        @if (!$application->destination->server->isSwarm())
+                            <div class="mx-2 my-1 border-t border-neutral-200 dark:border-coolgray-300"></div>
+
+                            @if ($application->status === 'running')
+                                <div class="dropdown-item dropdown-item-touch" wire:click='force_deploy_without_cache'>
+                                    Force deploy (without cache)
+                                </div>
+                            @else
+                                <div class="dropdown-item dropdown-item-touch" wire:click='deploy(true)'>
+                                    Force deploy (without cache)
+                                </div>
+                            @endif
+                        @endif
+                    </x-dropdown>
+                </div>
+
+                <div class="hidden flex-wrap items-center gap-2 md:flex">
+                    @if (!$application->destination->server->isSwarm())
                         <div>
                             <x-applications.advanced :application="$application" />
                         </div>
-                @endif
+                    @endif
                     <div class="flex flex-wrap gap-2">
                         @if (!str($application->status)->startsWith('exited'))
                             @if (!$application->destination->server->isSwarm())
@@ -118,6 +178,7 @@
                             </x-forms.button>
                         @endif
                     </div>
+                </div>
             @endif
         </div>
     </div>

resources/views/livewire/project/application/previews.blade.php

@@ -68,6 +68,20 @@
             @endif
         </div>
     </div>
+    @if ($application->build_pack === 'dockerimage')
+        <div class="flex flex-col gap-2 pt-4">
+            <h3>Manual Preview Deployment</h3>
+            <form wire:submit.prevent="addDockerImagePreview" class="flex flex-col gap-2 xl:flex-row xl:items-end">
+                <x-forms.input id="manualPullRequestId" label="Pull Request Id"
+                    helper="Used as the preview identifier for naming, domains, logs, and cleanup." />
+                <x-forms.input id="manualDockerTag" label="Docker Tag"
+                    helper="The image tag to deploy for this preview, for example pr_1234." />
+                @can('deploy', $application)
+                    <x-forms.button type="submit">Deploy Preview</x-forms.button>
+                @endcan
+            </form>
+        </div>
+    @endif
     @if ($application->previews->count() > 0)
         <h3 class="py-4">Deployments</h3>
         <div class="flex flex-wrap w-full gap-4">
@@ -87,11 +101,13 @@
                                 <x-external-link />
                             </a>
                         @endif
-                        |
-                        <a target="_blank" href="{{ data_get($preview, 'pull_request_html_url') }}">Open
-                            PR on Git
-                            <x-external-link />
-                        </a>
+                        @if (filled(data_get($preview, 'pull_request_html_url')))
+                            |
+                            <a target="_blank" href="{{ data_get($preview, 'pull_request_html_url') }}">Open
+                                PR on Git
+                                <x-external-link />
+                            </a>
+                        @endif
                         @if (count($parameters) > 0)
                             |
                             <a {{ wireNavigate() }}
@@ -131,6 +147,10 @@
                         <form wire:submit="save_preview('{{ $preview->id }}')" class="flex items-end gap-2 pt-4">
                             <x-forms.input label="Domain" helper="One domain per preview."
                                 id="previewFqdns.{{ $previewName }}" canGate="update" :canResource="$application"></x-forms.input>
+                            @if ($application->build_pack === 'dockerimage')
+                                <x-forms.input label="Docker Tag" helper="The image tag used for this preview deployment."
+                                    id="previewDockerTags.{{ $previewName }}" canGate="update" :canResource="$application"></x-forms.input>
+                            @endif
                             @can('update', $application)
                                 <x-forms.button type="submit">Save</x-forms.button>
                                 <x-forms.button wire:click="generate_preview('{{ $preview->id }}')">Generate
@@ -157,7 +177,8 @@
                                 Force deploy (without
                                 cache)
                             </x-forms.button>
-                            <x-forms.button wire:click="deploy({{ data_get($preview, 'pull_request_id') }})">
+                            <x-forms.button
+                                wire:click="deploy({{ data_get($preview, 'pull_request_id') }}, null, false, '{{ data_get($preview, 'docker_registry_image_tag') }}')">
                                 @if (data_get($preview, 'status') === 'exited')
                                     <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning"
                                         viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none"

resources/views/livewire/project/database/backup-edit.blade.php

@@ -81,10 +81,10 @@
             @endif
         </div>
         <div class="flex gap-2">
-            <x-forms.input label="Frequency" id="frequency" />
+            <x-forms.input label="Frequency" id="frequency" required />
             <x-forms.input label="Timezone" id="timezone" disabled
-                helper="The timezone of the server where the backup is scheduled to run (if not set, the instance timezone will be used)" />
-            <x-forms.input label="Timeout" id="timeout" helper="The timeout of the backup job in seconds." />
+                helper="The timezone of the server where the backup is scheduled to run (if not set, the instance timezone will be used)" required />
+            <x-forms.input label="Timeout" id="timeout" type="number" min="60" helper="The timeout of the backup job in seconds." required />
         </div>
 
         <h3 class="mt-6 mb-2 text-lg font-medium">Backup Retention Settings</h3>
@@ -101,13 +101,13 @@
                 <div class="flex gap-2">
                     <x-forms.input label="Number of backups to keep" id="databaseBackupRetentionAmountLocally"
                         type="number" min="0"
-                        helper="Keeps only the specified number of most recent backups on the server. Set to 0 for unlimited backups." />
+                        helper="Keeps only the specified number of most recent backups on the server. Set to 0 for unlimited backups." required />
                     <x-forms.input label="Days to keep backups" id="databaseBackupRetentionDaysLocally" type="number"
                         min="0"
-                        helper="Automatically removes backups older than the specified number of days. Set to 0 for no time limit." />
+                        helper="Automatically removes backups older than the specified number of days. Set to 0 for no time limit." required />
                     <x-forms.input label="Maximum storage (GB)" id="databaseBackupRetentionMaxStorageLocally"
                         type="number" min="0"
-                        helper="When total size of all backups in the current backup job exceeds this limit in GB, the oldest backups will be removed. Decimal values are supported (e.g. 0.001 for 1MB). Set to 0 for unlimited storage." />
+                        helper="When total size of all backups in the current backup job exceeds this limit in GB, the oldest backups will be removed. Decimal values are supported (e.g. 0.001 for 1MB). Set to 0 for unlimited storage." required />
                 </div>
             </div>
 
@@ -117,13 +117,13 @@
                     <div class="flex gap-2">
                         <x-forms.input label="Number of backups to keep" id="databaseBackupRetentionAmountS3"
                             type="number" min="0"
-                            helper="Keeps only the specified number of most recent backups on S3 storage. Set to 0 for unlimited backups." />
+                            helper="Keeps only the specified number of most recent backups on S3 storage. Set to 0 for unlimited backups." required />
                         <x-forms.input label="Days to keep backups" id="databaseBackupRetentionDaysS3" type="number"
                             min="0"
-                            helper="Automatically removes S3 backups older than the specified number of days. Set to 0 for no time limit." />
+                            helper="Automatically removes S3 backups older than the specified number of days. Set to 0 for no time limit." required />
                         <x-forms.input label="Maximum storage (GB)" id="databaseBackupRetentionMaxStorageS3"
                             type="number" min="0"
-                            helper="When total size of all backups in the current backup job exceeds this limit in GB, the oldest backups will be removed. Decimal values are supported (e.g. 0.5 for 500MB). Set to 0 for unlimited storage." />
+                            helper="When total size of all backups in the current backup job exceeds this limit in GB, the oldest backups will be removed. Decimal values are supported (e.g. 0.5 for 500MB). Set to 0 for unlimited storage." required />
                     </div>
                 </div>
             @endif

resources/views/livewire/project/database/clickhouse/general.blade.php

@@ -92,9 +92,9 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
                     :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
                 canGate="update" :canResource="$database" />
-            <x-forms.input placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
                 label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
     </form>

resources/views/livewire/project/database/dragonfly/general.blade.php

@@ -129,9 +129,9 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
                     :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
                 canGate="update" :canResource="$database" />
-            <x-forms.input placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
                 label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
     </form>

resources/views/livewire/project/database/heading.blade.php

@@ -10,18 +10,18 @@
     </x-slide-over>
     <div class="navbar-main">
         <nav
-            class="flex overflow-x-scroll shrink-0 gap-6 items-center whitespace-nowrap sm:overflow-x-hidden scrollbar min-h-10">
-            <a class="{{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+            class="scrollbar flex min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:w-auto md:overflow-visible">
+            <a class="shrink-0 {{ request()->routeIs('project.database.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('project.database.configuration', $parameters) }}">
                 Configuration
             </a>
 
-            <a class="{{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
+            <a class="shrink-0 {{ request()->routeIs('project.database.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.database.logs', $parameters) }}">
                 Logs
             </a>
             @can('canAccessTerminal')
-                <a class="{{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
+                <a class="shrink-0 {{ request()->routeIs('project.database.command') ? 'dark:text-white' : '' }}"
                     href="{{ route('project.database.command', $parameters) }}">
                     Terminal
                 </a>
@@ -31,14 +31,53 @@
                     $database->getMorphClass() === 'App\Models\StandaloneMongodb' ||
                     $database->getMorphClass() === 'App\Models\StandaloneMysql' ||
                     $database->getMorphClass() === 'App\Models\StandaloneMariadb')
-                <a class="{{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                <a class="shrink-0 {{ request()->routeIs('project.database.backup.index') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                     href="{{ route('project.database.backup.index', $parameters) }}">
                     Backups
                 </a>
             @endif
         </nav>
         @if ($database->destination->server->isFunctional())
-                <div class="flex flex-wrap gap-2 items-center">
+            <div class="flex flex-wrap gap-2 items-center">
+                <div class="md:hidden">
+                    <x-dropdown>
+                        <x-slot:title>
+                            Actions
+                        </x-slot>
+                        @if (!str($database->status)->startsWith('exited'))
+                            <x-modal-confirmation title="Confirm Database Restart?" buttonTitle="Restart" submitAction="restart"
+                                :actions="[
+                                    'This database will be unavailable during the restart.',
+                                    'If the database is currently in use data could be lost.',
+                                ]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Restart Database"
+                                :dispatchEvent="true" dispatchEventType="restartEvent">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch">
+                                        Restart
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                            <x-modal-confirmation title="Confirm Database Stopping?" buttonTitle="Stop" submitAction="stop"
+                                :checkboxes="$checkboxes" :actions="[
+                                    'This database will be stopped.',
+                                    'If the database is currently in use data could be lost.',
+                                    'All non-persistent data of this database (containers, networks, unused images) will be deleted (don\'t worry, no data is lost and you can start the database again).',
+                                ]" :confirmWithText="false" :confirmWithPassword="false"
+                                step1ButtonText="Continue" step2ButtonText="Confirm">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch text-error">
+                                        Stop
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                        @else
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('startEvent')">
+                                Start
+                            </div>
+                        @endif
+                    </x-dropdown>
+                </div>
+                <div class="hidden flex-wrap items-center gap-2 md:flex">
                     @if (!str($database->status)->startsWith('exited'))
                         <x-modal-confirmation :disabled="!auth()->user()->can('manage', $database)" :authDisabled="!auth()->user()->can('manage', $database)" title="Confirm Database Restart?" buttonTitle="Restart" submitAction="restart"
                             :actions="[
@@ -90,18 +129,21 @@
                             Start
                         </x-forms.button>
                     @endif
-                    @script
-                        <script>
-                            $wire.$on('startEvent', () => {
-                                $wire.$call('start');
-                            });
-                            $wire.$on('restartEvent', () => {
-                                $wire.$dispatch('info', 'Restarting database.');
-                                $wire.$call('restart');
-                            });
-                        </script>
-                    @endscript
                 </div>
+                @script
+                    <script>
+                        $wire.$on('startEvent', () => {
+                            window.dispatchEvent(new CustomEvent('startdatabase'));
+                            $wire.$call('start');
+                        });
+                        $wire.$on('restartEvent', () => {
+                            $wire.$dispatch('info', 'Restarting database.');
+                            window.dispatchEvent(new CustomEvent('startdatabase'));
+                            $wire.$call('restart');
+                        });
+                    </script>
+                @endscript
+            </div>
         @else
             <div class="text-error">Underlying server is not functional.</div>
         @endif

resources/views/livewire/project/database/keydb/general.blade.php

@@ -129,9 +129,9 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
                     :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
                 canGate="update" :canResource="$database" />
-            <x-forms.input placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
                 label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
         <x-forms.textarea

resources/views/livewire/project/database/mariadb/general.blade.php

@@ -161,9 +161,9 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
                 id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
-            <x-forms.input placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
                 label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
         <x-forms.textarea label="Custom MariaDB Configuration" rows="10" id="mariadbConf"

resources/views/livewire/project/database/mongodb/general.blade.php

@@ -167,9 +167,9 @@
                     <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
                         canGate="update" :canResource="$database" />
                 </div>
-                <x-forms.input placeholder="5432" disabled="{{ $isPublic }}"
+                <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
                     id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
-                <x-forms.input placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+                <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
                     label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
             </div>
             <x-forms.textarea label="Custom MongoDB Configuration" rows="10" id="mongoConf"

resources/views/livewire/project/database/mysql/general.blade.php

@@ -177,9 +177,9 @@
                 </div>
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
                 id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
-            <x-forms.input placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
                 label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
         <x-forms.textarea label="Custom Mysql Configuration" rows="10" id="mysqlConf" canGate="update" :canResource="$database" />

resources/views/livewire/project/database/postgresql/general.blade.php

@@ -179,9 +179,9 @@
                         <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
                             canGate="update" :canResource="$database" />
                     </div>
-                    <x-forms.input placeholder="5432" disabled="{{ $isPublic }}" id="publicPort"
+                    <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort"
                         label="Public Port" canGate="update" :canResource="$database" />
-                    <x-forms.input placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+                    <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
                         label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
                 </div>
 

resources/views/livewire/project/database/redis/general.blade.php

@@ -148,9 +148,9 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input placeholder="5432" disabled="{{ $isPublic }}"
+            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
                 id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
-            <x-forms.input placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
+            <x-forms.input type="number" placeholder="3600" disabled="{{ $isPublic }}" id="publicPortTimeout"
                 label="Proxy Timeout (seconds)" helper="Timeout for the public TCP proxy connection in seconds. Default: 3600 (1 hour)." canGate="update" :canResource="$database" />
         </div>
         <x-forms.textarea placeholder="# maxmemory 256mb

resources/views/livewire/project/new/github-private-repository.blade.php

@@ -5,11 +5,13 @@
             <livewire:source.github.create />
         </x-modal-input>
         @if ($repositories->count() > 0)
-            <a target="_blank" class="flex hover:no-underline" href="{{ getInstallationPath($github_app) }}">
-                <x-forms.button>
-                    Change Repositories on GitHub
-                    <x-external-link />
-                </x-forms.button>
+            <x-forms.button wire:click.prevent="loadRepositories({{ $github_app->id }})">
+                Refresh Repository List
+            </x-forms.button>
+            <a target="_blank" class="inline-flex items-center self-center gap-1 text-sm hover:underline dark:text-neutral-400"
+                href="{{ getInstallationPath($github_app) }}">
+                Change Repositories on GitHub
+                <x-external-link />
             </a>
         @endif
     </div>
@@ -51,7 +53,10 @@
                                 @endforeach
                             </x-forms.datalist>
                         </div>
-                        <x-forms.button wire:click.prevent="loadBranches"> Load Repository </x-forms.button>
+                        <x-forms.button :showLoadingIndicator="false" wire:click.prevent="loadBranches" wire:target="loadBranches, selected_repository_id">
+                            Load Repository
+                            <x-loading-on-button wire:loading.delay wire:target="loadBranches, selected_repository_id" />
+                        </x-forms.button>
                     </div>
                 @else
                     <div>No repositories found. Check your GitHub App configuration.</div>

resources/views/livewire/project/new/select.blade.php

@@ -173,6 +173,34 @@
                                         </template>
                                     </x-slot:logo>
                                 </x-resource-view>
+                                <template x-if="service.amd_only">
+                                    <div class="absolute top-2 right-10 group">
+                                        <span
+                                            class="px-2 py-0.5 text-xs rounded bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-200 cursor-pointer">
+                                            AMD only
+                                        </span>
+                                        <div class="info-helper-popup right-0 w-sm">
+                                            <div class="p-4">
+                                                This service only supports AMD64/x86_64 architecture. It will not work
+                                                on ARM-based servers (e.g., Apple Silicon, Raspberry Pi, AWS Graviton).
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
+                                <template x-if="service.arm_only">
+                                    <div class="absolute top-2 right-10 group">
+                                        <span
+                                            class="px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/50 dark:text-amber-200 cursor-pointer">
+                                            ARM only
+                                        </span>
+                                        <div class="info-helper-popup right-0 w-sm">
+                                            <div class="p-4">
+                                                This service only supports ARM64/aarch64 architecture. It will not work
+                                                on AMD64/x86_64-based servers.
+                                            </div>
+                                        </div>
+                                    </div>
+                                </template>
                                 <template x-if="shouldShowDocIcon(service)">
                                     <a :href="getDocLink(service) || coolifyDocsUrl(service.name)" target="_blank"
                                         @click.stop @mouseenter="resolveDocLink(service)"

resources/views/livewire/project/resource/index.blade.php

@@ -60,36 +60,13 @@
                         </div>
                     </div>
                 </li>
-                <li class="inline-flex items-center" x-data="{ envOpen: false, activeEnv: null, envPositions: {}, activeRes: null, resPositions: {}, activeMenuEnv: null, menuPositions: {}, closeTimeout: null, envTimeout: null, resTimeout: null, menuTimeout: null, toggle() { this.envOpen = !this.envOpen; if (!this.envOpen) { this.activeEnv = null;
-                            this.activeRes = null;
-                            this.activeMenuEnv = null; } }, open() { clearTimeout(this.closeTimeout);
-                        this.envOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.envOpen = false;
-                            this.activeEnv = null;
-                            this.activeRes = null;
-                            this.activeMenuEnv = null; }, 100) }, openEnv(id) { clearTimeout(this.closeTimeout);
-                        clearTimeout(this.envTimeout);
-                        this.activeEnv = id }, closeEnv() { this.envTimeout = setTimeout(() => { this.activeEnv = null;
-                            this.activeRes = null;
-                            this.activeMenuEnv = null; }, 100) }, openRes(id) { clearTimeout(this.envTimeout);
-                        clearTimeout(this.resTimeout);
-                        this.activeRes = id }, closeRes() { this.resTimeout = setTimeout(() => { this.activeRes = null;
-                            this.activeMenuEnv = null; }, 100) }, openMenu(id) { clearTimeout(this.resTimeout);
-                        clearTimeout(this.menuTimeout);
-                        this.activeMenuEnv = id }, closeMenu() { this.menuTimeout = setTimeout(() => { this.activeMenuEnv = null; }, 100) } }">
+                <li class="inline-flex items-center" x-data="{ envOpen: false, activeEnv: null, envPositions: {}, closeTimeout: null, envTimeout: null, toggle() { this.envOpen = !this.envOpen; if (!this.envOpen) { this.activeEnv = null; } }, open() { clearTimeout(this.closeTimeout); this.envOpen = true }, close() { this.closeTimeout = setTimeout(() => { this.envOpen = false; this.activeEnv = null; }, 100) }, openEnv(id) { clearTimeout(this.closeTimeout); clearTimeout(this.envTimeout); this.activeEnv = id }, closeEnv() { this.envTimeout = setTimeout(() => { this.activeEnv = null; }, 100) } }">
                     <div class="flex items-center relative" @mouseenter="open()" @mouseleave="close()">
                         <a class="text-xs truncate lg:text-sm hover:text-warning" {{ wireNavigate() }}
                             href="{{ route('project.resource.index', ['project_uuid' => data_get($parameters, 'project_uuid'), 'environment_uuid' => $environment->uuid]) }}">
                             {{ $environment->name }}
                         </a>
-                        <button type="button" @click.stop="toggle()" class="px-1 text-warning">
-                            <svg class="w-3 h-3 transition-transform" :class="{ 'rotate-90': envOpen }" fill="none"
-                                stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M9 5l7 7-7 7">
-                                </path>
-                            </svg>
-                        </button>
 
-                        <!-- Environment Dropdown Container -->
                         <div x-show="envOpen" @click.outside="close()"
                             x-transition:enter="transition ease-out duration-200"
                             x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
@@ -103,26 +80,25 @@
                                 class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
                                 @foreach ($allEnvironments as $env)
                                     @php
+                                        $envDatabases = collect()
+                                            ->merge($env->postgresqls ?? collect())
+                                            ->merge($env->redis ?? collect())
+                                            ->merge($env->mongodbs ?? collect())
+                                            ->merge($env->mysqls ?? collect())
+                                            ->merge($env->mariadbs ?? collect())
+                                            ->merge($env->keydbs ?? collect())
+                                            ->merge($env->dragonflies ?? collect())
+                                            ->merge($env->clickhouses ?? collect());
                                         $envResources = collect()
-                                            ->merge(
-                                                $env->applications->map(
-                                                    fn($app) => ['type' => 'application', 'resource' => $app],
-                                                ),
-                                            )
-                                            ->merge(
-                                                $env
-                                                    ->databases()
-                                                    ->map(fn($db) => ['type' => 'database', 'resource' => $db]),
-                                            )
-                                            ->merge(
-                                                $env->services->map(
-                                                    fn($svc) => ['type' => 'service', 'resource' => $svc],
-                                                ),
-                                            );
+                                            ->merge($env->applications->map(fn($app) => ['type' => 'application', 'resource' => $app]))
+                                            ->merge($envDatabases->map(fn($db) => ['type' => 'database', 'resource' => $db]))
+                                            ->merge($env->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]))
+                                            ->sortBy(fn($item) => strtolower($item['resource']->name));
                                     @endphp
                                     <div @mouseenter="openEnv('{{ $env->uuid }}'); envPositions['{{ $env->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
                                         @mouseleave="closeEnv()">
                                         <a href="{{ route('project.resource.index', ['project_uuid' => data_get($parameters, 'project_uuid'), 'environment_uuid' => $env->uuid]) }}"
+                                            {{ wireNavigate() }}
                                             class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200 {{ $env->uuid === $environment->uuid ? 'dark:text-warning font-semibold' : '' }}"
                                             title="{{ $env->name }}">
                                             <span class="truncate">{{ $env->name }}</span>
@@ -153,7 +129,6 @@
                             <!-- Resources Sub-dropdown (2nd level) -->
                             @foreach ($allEnvironments as $env)
                                 @php
-                                    // Use pre-loaded relations instead of databases() method to avoid N+1 queries
                                     $envDatabases = collect()
                                         ->merge($env->postgresqls ?? collect())
                                         ->merge($env->redis ?? collect())
@@ -164,28 +139,19 @@
                                         ->merge($env->dragonflies ?? collect())
                                         ->merge($env->clickhouses ?? collect());
                                     $envResources = collect()
-                                        ->merge(
-                                            $env->applications->map(
-                                                fn($app) => ['type' => 'application', 'resource' => $app],
-                                            ),
-                                        )
-                                        ->merge(
-                                            $envDatabases->map(fn($db) => ['type' => 'database', 'resource' => $db]),
-                                        )
-                                        ->merge(
-                                            $env->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]),
-                                        );
+                                        ->merge($env->applications->map(fn($app) => ['type' => 'application', 'resource' => $app]))
+                                        ->merge($envDatabases->map(fn($db) => ['type' => 'database', 'resource' => $db]))
+                                        ->merge($env->services->map(fn($svc) => ['type' => 'service', 'resource' => $svc]));
                                 @endphp
                                 @if ($envResources->count() > 0)
                                     <div x-show="activeEnv === '{{ $env->uuid }}'" x-cloak
                                         x-transition:enter="transition ease-out duration-150"
                                         x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
                                         @mouseenter="openEnv('{{ $env->uuid }}')" @mouseleave="closeEnv()"
-                                        :style="'position: absolute; left: 100%; top: ' + (envPositions[
-                                            '{{ $env->uuid }}'] || 0) + 'px; z-index: 30;'"
+                                        :style="'position: absolute; left: 100%; top: ' + (envPositions['{{ $env->uuid }}'] || 0) + 'px; z-index: 30;'"
                                         class="flex flex-col sm:flex-row items-start pl-1">
                                         <div
-                                            class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
+                                            class="relative w-56 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
                                             @foreach ($envResources as $envResource)
                                                 @php
                                                     $resType = $envResource['type'];
@@ -207,241 +173,14 @@
                                                             'database_uuid' => $res->uuid,
                                                         ]),
                                                     };
-                                                    // Use loaded relation to check additional_servers (avoids N+1 query)
-                                                    $resHasMultipleServers =
-                                                        $resType === 'application' &&
-                                                        method_exists($res, 'additional_servers') &&
-                                                        ($res->relationLoaded('additional_servers') ? $res->additional_servers->count() > 0 : false);
-                                                    $resServerName = $resHasMultipleServers
-                                                        ? null
-                                                        : data_get($res, 'destination.server.name');
                                                 @endphp
-                                                <div @mouseenter="openRes('{{ $env->uuid }}-{{ $res->uuid }}'); resPositions['{{ $env->uuid }}-{{ $res->uuid }}'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                    @mouseleave="closeRes()">
-                                                    <a href="{{ $resRoute }}"
-                                                        class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200"
-                                                        title="{{ $res->name }}{{ $resServerName ? ' (' . $resServerName . ')' : '' }}">
-                                                        <span class="truncate">{{ $res->name }}@if ($resServerName)
-                                                                <span
-                                                                    class="text-xs text-neutral-400">({{ $resServerName }})</span>
-                                                            @endif
-                                                        </span>
-                                                        <svg class="w-3 h-3 shrink-0" fill="none"
-                                                            stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path stroke-linecap="round" stroke-linejoin="round"
-                                                                stroke-width="4" d="M9 5l7 7-7 7"></path>
-                                                        </svg>
-                                                    </a>
-                                                </div>
+                                                <a href="{{ $resRoute }}" {{ wireNavigate() }}
+                                                    class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200"
+                                                    title="{{ $res->name }}">
+                                                    {{ $res->name }}
+                                                </a>
                                             @endforeach
                                         </div>
-
-                                        <!-- Main Menu Sub-dropdown (3rd level) -->
-                                        @foreach ($envResources as $envResource)
-                                            @php
-                                                $resType = $envResource['type'];
-                                                $res = $envResource['resource'];
-                                                $resParams = [
-                                                    'project_uuid' => $project->uuid,
-                                                    'environment_uuid' => $env->uuid,
-                                                ];
-                                                if ($resType === 'application') {
-                                                    $resParams['application_uuid'] = $res->uuid;
-                                                } elseif ($resType === 'service') {
-                                                    $resParams['service_uuid'] = $res->uuid;
-                                                } else {
-                                                    $resParams['database_uuid'] = $res->uuid;
-                                                }
-                                                $resKey = $env->uuid . '-' . $res->uuid;
-                                            @endphp
-                                            <div x-show="activeRes === '{{ $resKey }}'" x-cloak
-                                                x-transition:enter="transition ease-out duration-150"
-                                                x-transition:enter-start="opacity-0"
-                                                x-transition:enter-end="opacity-100"
-                                                @mouseenter="openRes('{{ $resKey }}')" @mouseleave="closeRes()"
-                                                :style="'position: absolute; left: 100%; top: ' + (resPositions[
-                                                    '{{ $resKey }}'] || 0) + 'px; z-index: 40;'"
-                                                class="flex flex-col sm:flex-row items-start pl-1">
-                                                <!-- Main Menu List -->
-                                                <div
-                                                    class="relative w-48 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200">
-                                                    @if ($resType === 'application')
-                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                            @mouseleave="closeMenu()">
-                                                            <a href="{{ route('project.application.configuration', $resParams) }}"
-                                                                class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                                <span>Configuration</span>
-                                                                <svg class="w-3 h-3 shrink-0" fill="none"
-                                                                    stroke="currentColor" viewBox="0 0 24 24">
-                                                                    <path stroke-linecap="round"
-                                                                        stroke-linejoin="round" stroke-width="4"
-                                                                        d="M9 5l7 7-7 7"></path>
-                                                                </svg>
-                                                            </a>
-                                                        </div>
-                                                        <a href="{{ route('project.application.deployment.index', $resParams) }}"
-                                                            class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Deployments</a>
-                                                        <a href="{{ route('project.application.logs', $resParams) }}"
-                                                            class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                        @can('canAccessTerminal')
-                                                            <a href="{{ route('project.application.command', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                        @endcan
-                                                    @elseif ($resType === 'service')
-                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                            @mouseleave="closeMenu()">
-                                                            <a href="{{ route('project.service.configuration', $resParams) }}"
-                                                                class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                                <span>Configuration</span>
-                                                                <svg class="w-3 h-3 shrink-0" fill="none"
-                                                                    stroke="currentColor" viewBox="0 0 24 24">
-                                                                    <path stroke-linecap="round"
-                                                                        stroke-linejoin="round" stroke-width="4"
-                                                                        d="M9 5l7 7-7 7"></path>
-                                                                </svg>
-                                                            </a>
-                                                        </div>
-                                                        <a href="{{ route('project.service.logs', $resParams) }}"
-                                                            class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                        @can('canAccessTerminal')
-                                                            <a href="{{ route('project.service.command', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                        @endcan
-                                                    @else
-                                                        <div @mouseenter="openMenu('{{ $resKey }}-config'); menuPositions['{{ $resKey }}-config'] = $el.offsetTop - ($el.closest('.overflow-y-auto')?.scrollTop || 0)"
-                                                            @mouseleave="closeMenu()">
-                                                            <a href="{{ route('project.database.configuration', $resParams) }}"
-                                                                class="flex items-center justify-between gap-2 px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">
-                                                                <span>Configuration</span>
-                                                                <svg class="w-3 h-3 shrink-0" fill="none"
-                                                                    stroke="currentColor" viewBox="0 0 24 24">
-                                                                    <path stroke-linecap="round"
-                                                                        stroke-linejoin="round" stroke-width="4"
-                                                                        d="M9 5l7 7-7 7"></path>
-                                                                </svg>
-                                                            </a>
-                                                        </div>
-                                                        <a href="{{ route('project.database.logs', $resParams) }}"
-                                                            class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Logs</a>
-                                                        @can('canAccessTerminal')
-                                                            <a href="{{ route('project.database.command', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Terminal</a>
-                                                        @endcan
-                                                        @if (
-                                                            $res->getMorphClass() === 'App\Models\StandalonePostgresql' ||
-                                                                $res->getMorphClass() === 'App\Models\StandaloneMongodb' ||
-                                                                $res->getMorphClass() === 'App\Models\StandaloneMysql' ||
-                                                                $res->getMorphClass() === 'App\Models\StandaloneMariadb')
-                                                            <a href="{{ route('project.database.backup.index', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm hover:bg-neutral-100 dark:hover:bg-coolgray-200">Backups</a>
-                                                        @endif
-                                                    @endif
-                                                </div>
-
-                                                <!-- Configuration Sub-menu (4th level) -->
-                                                <div x-show="activeMenuEnv === '{{ $resKey }}-config'" x-cloak
-                                                    x-transition:enter="transition ease-out duration-150"
-                                                    x-transition:enter-start="opacity-0"
-                                                    x-transition:enter-end="opacity-100"
-                                                    @mouseenter="openMenu('{{ $resKey }}-config')"
-                                                    @mouseleave="closeMenu()"
-                                                    :style="'position: absolute; left: 100%; top: ' + (menuPositions[
-                                                        '{{ $resKey }}-config'] || 0) + 'px; z-index: 50;'"
-                                                    class="pl-1">
-                                                    <div
-                                                        class="w-52 bg-white dark:bg-coolgray-100 rounded-md shadow-lg py-1 border border-neutral-200 dark:border-coolgray-200 max-h-96 overflow-y-auto scrollbar">
-                                                        @if ($resType === 'application')
-                                                            <a href="{{ route('project.application.configuration', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                            <a href="{{ route('project.application.environment-variables', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                                Variables</a>
-                                                            <a href="{{ route('project.application.persistent-storage', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                                                Storage</a>
-                                                            <a href="{{ route('project.application.source', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Source</a>
-                                                            <a href="{{ route('project.application.servers', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                                                            <a href="{{ route('project.application.scheduled-tasks.show', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                                                Tasks</a>
-                                                            <a href="{{ route('project.application.webhooks', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                            <a href="{{ route('project.application.preview-deployments', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Preview
-                                                                Deployments</a>
-                                                            <a href="{{ route('project.application.healthcheck', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Healthcheck</a>
-                                                            <a href="{{ route('project.application.rollback', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Rollback</a>
-                                                            <a href="{{ route('project.application.resource-limits', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                                Limits</a>
-                                                            <a href="{{ route('project.application.resource-operations', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                                Operations</a>
-                                                            <a href="{{ route('project.application.metrics', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                                                            <a href="{{ route('project.application.tags', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                            <a href="{{ route('project.application.advanced', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Advanced</a>
-                                                            <a href="{{ route('project.application.danger', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                                Zone</a>
-                                                        @elseif ($resType === 'service')
-                                                            <a href="{{ route('project.service.configuration', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                            <a href="{{ route('project.service.environment-variables', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                                Variables</a>
-                                                            <a href="{{ route('project.service.storages', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Storages</a>
-                                                            <a href="{{ route('project.service.scheduled-tasks.show', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Scheduled
-                                                                Tasks</a>
-                                                            <a href="{{ route('project.service.webhooks', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                            <a href="{{ route('project.service.resource-operations', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                                Operations</a>
-                                                            <a href="{{ route('project.service.tags', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                            <a href="{{ route('project.service.danger', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                                Zone</a>
-                                                        @else
-                                                            <a href="{{ route('project.database.configuration', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">General</a>
-                                                            <a href="{{ route('project.database.environment-variables', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Environment
-                                                                Variables</a>
-                                                            <a href="{{ route('project.database.servers', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Servers</a>
-                                                            <a href="{{ route('project.database.persistent-storage', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Persistent
-                                                                Storage</a>
-                                                            <a href="{{ route('project.database.webhooks', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Webhooks</a>
-                                                            <a href="{{ route('project.database.resource-limits', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                                Limits</a>
-                                                            <a href="{{ route('project.database.resource-operations', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Resource
-                                                                Operations</a>
-                                                            <a href="{{ route('project.database.metrics', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Metrics</a>
-                                                            <a href="{{ route('project.database.tags', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200">Tags</a>
-                                                            <a href="{{ route('project.database.danger', $resParams) }}"
-                                                                class="block px-4 py-2 text-sm truncate hover:bg-neutral-100 dark:hover:bg-coolgray-200 text-red-500">Danger
-                                                                Zone</a>
-                                                        @endif
-                                                    </div>
-                                                </div>
-                                            </div>
-                                        @endforeach
                                     </div>
                                 @endif
                             @endforeach
@@ -656,16 +395,16 @@
     function searchComponent() {
         return {
             search: '',
-            applications: @js($applications),
-            postgresqls: @js($postgresqls),
-            redis: @js($redis),
-            mongodbs: @js($mongodbs),
-            mysqls: @js($mysqls),
-            mariadbs: @js($mariadbs),
-            keydbs: @js($keydbs),
-            dragonflies: @js($dragonflies),
-            clickhouses: @js($clickhouses),
-            services: @js($services),
+            applications: @js($applicationsJs),
+            postgresqls: @js($postgresqlsJs),
+            redis: @js($redisJs),
+            mongodbs: @js($mongodbsJs),
+            mysqls: @js($mysqlsJs),
+            mariadbs: @js($mariadbsJs),
+            keydbs: @js($keydbsJs),
+            dragonflies: @js($dragonfliesJs),
+            clickhouses: @js($clickhousesJs),
+            services: @js($servicesJs),
             filterAndSort(items) {
                 if (this.search === '') {
                     return Object.values(items).sort(sortFn);

resources/views/livewire/project/service/configuration.blade.php

@@ -14,7 +14,7 @@
                 href="{{ route('project.service.environment-variables', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid]) }}"><span class="menu-item-label">Environment Variables</span></a>
             <a class='sub-menu-item' wire:current.exact="menu-item-active" {{ wireNavigate() }}
                 href="{{ route('project.service.storages', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid]) }}"><span class="menu-item-label">Persistent Storages</span></a>
-            <a class='sub-menu-item' wire:current.exact="menu-item-active" {{ wireNavigate() }}
+            <a @class(['sub-menu-item', 'menu-item-active' => str($currentRoute)->startsWith('project.service.scheduled-tasks')]) {{ wireNavigate() }}
                 href="{{ route('project.service.scheduled-tasks.show', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid]) }}"><span class="menu-item-label">Scheduled Tasks</span></a>
             <a class='sub-menu-item' wire:current.exact="menu-item-active" {{ wireNavigate() }}
                 href="{{ route('project.service.webhooks', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid]) }}"><span class="menu-item-label">Webhooks</span></a>
@@ -189,6 +189,8 @@
                 @endforeach
             @elseif ($currentRoute === 'project.service.scheduled-tasks.show')
                 <livewire:project.shared.scheduled-task.all :resource="$service" />
+            @elseif ($currentRoute === 'project.service.scheduled-tasks')
+                <livewire:project.shared.scheduled-task.show />
             @elseif ($currentRoute === 'project.service.webhooks')
                 <livewire:project.shared.webhooks :resource="$service" />
             @elseif ($currentRoute === 'project.service.resource-operations')

resources/views/livewire/project/service/edit-domain.blade.php

@@ -1,16 +1,16 @@
 <div class="w-full">
     <form wire:submit.prevent='submit' class="flex flex-col w-full gap-2">
         @if($requiredPort)
-            <x-callout type="warning" title="Required Port: {{ $requiredPort }}" class="mb-2">
+            <x-callout type="info" title="Required Port: {{ $requiredPort }}" class="mb-2">
                 This service requires port <strong>{{ $requiredPort }}</strong> to function correctly. All domains must include this port number (or any other port if you know what you're doing).
                 <br><br>
-                <strong>Example:</strong> http://app.coolify.io:{{ $requiredPort }}
+                <strong>Example:</strong> https://app.coolify.io:{{ $requiredPort }},https://www.app.coolify.io:{{ $requiredPort }}
             </x-callout>
         @endif
 
         <x-forms.input canGate="update" :canResource="$application" placeholder="https://app.coolify.io" label="Domains"
             id="fqdn"
-            helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. "></x-forms.input>
+            helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- https://app.coolify.io,https://cloud.coolify.io/dashboard<br>- https://app.coolify.io/api/v3<br>- https://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container.<br>- https://app.coolify.io:8080/api -> app.coolify.io/api will point to port 8080 inside the container."></x-forms.input>
         <x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
     </form>
 

resources/views/livewire/project/service/file-storage.blade.php

@@ -15,6 +15,15 @@
                 <x-forms.input label="Destination Path" :value="$fileStorage->mount_path" readonly />
             </div>
         </div>
+        @if ($resource instanceof \App\Models\Application)
+            @can('update', $resource)
+                <div class="w-full sm:w-96">
+                    <x-forms.checkbox instantSave canGate="update" :canResource="$resource" label="Add suffix for PR deployments"
+                        id="isPreviewSuffixEnabled"
+                        helper="When enabled, a -pr-N suffix is added to this volume's path for preview deployments (e.g. ./scripts becomes ./scripts-pr-1). Disable this for volumes that contain shared config or scripts from your repository."></x-forms.checkbox>
+                </div>
+            @endcan
+        @endif
         <form wire:submit='submit' class="flex flex-col gap-2">
             @if (!$isReadOnly)
                 @can('update', $resource)
@@ -58,7 +67,7 @@
                 @if (!$fileStorage->is_directory)
                     @can('update', $resource)
                         @if (data_get($resource, 'settings.is_preserve_repository_enabled'))
-                            <div class="w-96">
+                            <div class="w-full sm:w-96">
                                 <x-forms.checkbox instantSave label="Is this based on the Git repository?"
                                     id="isBasedOnGit"></x-forms.checkbox>
                             </div>
@@ -73,7 +82,7 @@
                         @endif
                     @else
                         @if (data_get($resource, 'settings.is_preserve_repository_enabled'))
-                            <div class="w-96">
+                            <div class="w-full sm:w-96">
                                 <x-forms.checkbox disabled label="Is this based on the Git repository?"
                                     id="isBasedOnGit"></x-forms.checkbox>
                             </div>
@@ -94,7 +103,7 @@
                         </div>
                     @endcan
                     @if (data_get($resource, 'settings.is_preserve_repository_enabled'))
-                        <div class="w-96">
+                        <div class="w-full sm:w-96">
                             <x-forms.checkbox disabled label="Is this based on the Git repository?"
                                 id="isBasedOnGit"></x-forms.checkbox>
                         </div>

resources/views/livewire/project/service/heading.blade.php

@@ -9,120 +9,198 @@
     <h1>{{ $title }}</h1>
     <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
     <div class="navbar-main" x-data">
-        <nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
-            <a class="{{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+        <nav
+            class="scrollbar flex min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:w-auto md:overflow-visible">
+            <a class="shrink-0 {{ request()->routeIs('project.service.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('project.service.configuration', $parameters) }}">
                 <button>Configuration</button>
             </a>
-            <a class="{{ request()->routeIs('project.service.logs') ? 'dark:text-white' : '' }}"
+            <a class="shrink-0 {{ request()->routeIs('project.service.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.service.logs', $parameters) }}">
                 <button>Logs</button>
             </a>
             @can('canAccessTerminal')
-                <a class="{{ request()->routeIs('project.service.command') ? 'dark:text-white' : '' }}"
+                <a class="shrink-0 {{ request()->routeIs('project.service.command') ? 'dark:text-white' : '' }}"
                     href="{{ route('project.service.command', $parameters) }}">
                     <button>Terminal</button>
                 </a>
             @endcan
-            <x-services.links :service="$service" />
+            <div class="shrink-0">
+                <x-services.links :service="$service" />
+            </div>
         </nav>
         @if ($service->isDeployable)
-            <div class="flex flex-wrap order-first gap-2 items-center sm:order-last">
-                <x-services.advanced :service="$service" />
-                @if (str($service->status)->contains('running'))
-                    <x-forms.button canGate="deploy" :canResource="$service" title="Restart" @click="$wire.dispatch('restartEvent')">
-                        <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                stroke-width="2">
-                                <path d="M19.933 13.041 a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
-                                <path d="M20 4v5h-5" />
-                            </g>
-                        </svg>
-                        Restart
-                    </x-forms.button>
-                    <x-modal-confirmation :disabled="!auth()->user()->can('stop', $service)" :authDisabled="!auth()->user()->can('stop', $service)" title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
-                        submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
-                        :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
-                        <x-slot:button-title>
-                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
-                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
-                                stroke-linejoin="round">
-                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
-                                </path>
-                                <path
-                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
-                                </path>
+            <div class="order-first flex flex-wrap items-center gap-2 sm:order-last">
+                <div class="md:hidden">
+                    <x-dropdown>
+                        <x-slot:title>
+                            Actions
+                        </x-slot>
+                        @if (str($service->status)->contains('running'))
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('restartEvent')">
+                                Restart
+                            </div>
+                            <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                                submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                                :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch text-error">
+                                        Stop
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                            <div class="mx-2 my-1 border-t border-neutral-200 dark:border-coolgray-300"></div>
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('pullAndRestartEvent')">
+                                Pull Latest Images & Restart
+                            </div>
+                        @elseif (str($service->status)->contains('degraded'))
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('restartEvent')">
+                                Restart
+                            </div>
+                            <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                                submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                                :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch text-error">
+                                        Stop
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                            <div class="mx-2 my-1 border-t border-neutral-200 dark:border-coolgray-300"></div>
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('forceDeployEvent')">
+                                Force Restart
+                            </div>
+                        @elseif (str($service->status)->contains('exited'))
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('startEvent')">
+                                Deploy
+                            </div>
+                            <div class="mx-2 my-1 border-t border-neutral-200 dark:border-coolgray-300"></div>
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('forceDeployEvent')">
+                                Force Deploy
+                            </div>
+                            <div class="dropdown-item dropdown-item-touch" wire:click='stop(true)'>
+                                Force Cleanup Containers
+                            </div>
+                        @else
+                            <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                                submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                                :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                                <x-slot:trigger>
+                                    <div class="dropdown-item dropdown-item-touch text-error">
+                                        Stop
+                                    </div>
+                                </x-slot:trigger>
+                            </x-modal-confirmation>
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('startEvent')">
+                                Deploy
+                            </div>
+                            <div class="mx-2 my-1 border-t border-neutral-200 dark:border-coolgray-300"></div>
+                            <div class="dropdown-item dropdown-item-touch" @click="$wire.dispatch('forceDeployEvent')">
+                                Force Deploy
+                            </div>
+                            <div class="dropdown-item dropdown-item-touch" wire:click='stop(true)'>
+                                Force Cleanup Containers
+                            </div>
+                        @endif
+                    </x-dropdown>
+                </div>
+                <div class="hidden flex-wrap items-center gap-2 md:flex">
+                    <x-services.advanced :service="$service" />
+                    @if (str($service->status)->contains('running'))
+                        <x-forms.button canGate="deploy" :canResource="$service" title="Restart" @click="$wire.dispatch('restartEvent')">
+                            <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2">
+                                    <path d="M19.933 13.041 a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                    <path d="M20 4v5h-5" />
+                                </g>
                             </svg>
-                            Stop
-                        </x-slot:button-title>
-                    </x-modal-confirmation>
-                @elseif (str($service->status)->contains('degraded'))
-                    <x-forms.button canGate="deploy" :canResource="$service" title="Restart" @click="$wire.dispatch('restartEvent')">
-                        <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
-                                stroke-width="2">
-                                <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
-                                <path d="M20 4v5h-5" />
-                            </g>
-                        </svg>
-                        Restart
-                    </x-forms.button>
-                    <x-modal-confirmation :disabled="!auth()->user()->can('stop', $service)" :authDisabled="!auth()->user()->can('stop', $service)" title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
-                        submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
-                        :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
-                        <x-slot:button-title>
-                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
-                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
-                                stroke-linejoin="round">
-                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
-                                </path>
-                                <path
-                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
-                                </path>
+                            Restart
+                        </x-forms.button>
+                        <x-modal-confirmation :disabled="!auth()->user()->can('stop', $service)" :authDisabled="!auth()->user()->can('stop', $service)" title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                            submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                            :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                            <x-slot:button-title>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                    stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                    <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                    </path>
+                                    <path
+                                        d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                    </path>
+                                </svg>
+                                Stop
+                            </x-slot:button-title>
+                        </x-modal-confirmation>
+                    @elseif (str($service->status)->contains('degraded'))
+                        <x-forms.button canGate="deploy" :canResource="$service" title="Restart" @click="$wire.dispatch('restartEvent')">
+                            <svg class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                    stroke-width="2">
+                                    <path d="M19.933 13.041a8 8 0 1 1-9.925-8.788c3.899-1 7.935 1.007 9.425 4.747" />
+                                    <path d="M20 4v5h-5" />
+                                </g>
                             </svg>
-                            Stop
-                        </x-slot:button-title>
-                    </x-modal-confirmation>
-                @elseif (str($service->status)->contains('exited'))
-                    <x-forms.button canGate="deploy" :canResource="$service" @click="$wire.dispatch('startEvent')" class="gap-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
-                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                            stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M7 4v16l13 -8z" />
-                        </svg>
-                        Deploy
-                    </x-forms.button>
-                @else
-                    <x-modal-confirmation :disabled="!auth()->user()->can('stop', $service)" :authDisabled="!auth()->user()->can('stop', $service)" title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
-                        submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
-                        :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
-                        <x-slot:button-title>
-                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
-                                stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                            Restart
+                        </x-forms.button>
+                        <x-modal-confirmation :disabled="!auth()->user()->can('stop', $service)" :authDisabled="!auth()->user()->can('stop', $service)" title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                            submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                            :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                            <x-slot:button-title>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                    stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                    <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                    </path>
+                                    <path
+                                        d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                    </path>
+                                </svg>
+                                Stop
+                            </x-slot:button-title>
+                        </x-modal-confirmation>
+                    @elseif (str($service->status)->contains('exited'))
+                        <x-forms.button canGate="deploy" :canResource="$service" @click="$wire.dispatch('startEvent')" class="gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
                                 stroke-linejoin="round">
-                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                                <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
-                                </path>
-                                <path
-                                    d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
-                                </path>
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
                             </svg>
-                            Stop
-                        </x-slot:button-title>
-                    </x-modal-confirmation>
-                    <x-forms.button canGate="deploy" :canResource="$service" @click="$wire.dispatch('startEvent')" class="gap-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
-                            stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
-                            stroke-linejoin="round">
-                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-                            <path d="M7 4v16l13 -8z" />
-                        </svg>
-                        Deploy
-                    </x-forms.button>
-                @endif
+                            Deploy
+                        </x-forms.button>
+                    @else
+                        <x-modal-confirmation :disabled="!auth()->user()->can('stop', $service)" :authDisabled="!auth()->user()->can('stop', $service)" title="Confirm Service Stopping?" buttonTitle="Stop" :dispatchEvent="true"
+                            submitAction="stop" dispatchEventType="stopEvent" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                            :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                            <x-slot:button-title>
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-error" viewBox="0 0 24 24"
+                                    stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
+                                    stroke-linejoin="round">
+                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                                    <path d="M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                    </path>
+                                    <path
+                                        d="M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z">
+                                    </path>
+                                </svg>
+                                Stop
+                            </x-slot:button-title>
+                        </x-modal-confirmation>
+                        <x-forms.button canGate="deploy" :canResource="$service" @click="$wire.dispatch('startEvent')" class="gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-warning" viewBox="0 0 24 24"
+                                stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round"
+                                stroke-linejoin="round">
+                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                <path d="M7 4v16l13 -8z" />
+                            </svg>
+                            Deploy
+                        </x-forms.button>
+                    @endif
+                </div>
             </div>
         @else
             <div class="flex flex-wrap order-first gap-2 items-center sm:order-last">

resources/views/livewire/project/service/index.blade.php

@@ -14,7 +14,10 @@
                     </svg>
                     <span class="menu-item-label">Back</span>
                 </a>
-                <a class="sub-menu-item menu-item-active" href="#"><span class="menu-item-label">General</span></a>
+                <a class="sub-menu-item" wire:current.exact="menu-item-active" {{ wireNavigate() }}
+                    href="{{ route('project.service.index', $parameters) }}"><span class="menu-item-label">General</span></a>
+                <a class="sub-menu-item" wire:current.exact="menu-item-active" {{ wireNavigate() }}
+                    href="{{ route('project.service.index.advanced', $parameters) }}"><span class="menu-item-label">Advanced</span></a>
             </div>
         @endif
         <div class="w-full">
@@ -23,63 +26,9 @@
                     {{ data_get_str($service, 'name')->limit(10) }} >
                     {{ data_get_str($serviceApplication, 'name')->limit(10) }} | Coolify
                 </x-slot>
-                <form wire:submit='submitApplication'>
-                    <div class="flex items-center gap-2 pb-4">
-                        @if ($serviceApplication->human_name)
-                            <h2>{{ Str::headline($serviceApplication->human_name) }}</h2>
-                        @else
-                            <h2>{{ Str::headline($serviceApplication->name) }}</h2>
-                        @endif
-                        <x-forms.button canGate="update" :canResource="$serviceApplication" type="submit">Save</x-forms.button>
-                        @can('update', $serviceApplication)
-                            <x-modal-confirmation wire:click="convertToDatabase" title="Convert to Database"
-                                buttonTitle="Convert to Database" submitAction="convertToDatabase" :actions="['The selected resource will be converted to a service database.']"
-                                confirmationText="{{ Str::headline($serviceApplication->name) }}"
-                                confirmationLabel="Please confirm the execution of the actions by entering the Service Application Name below"
-                                shortConfirmationLabel="Service Application Name" />
-                        @endcan
-                        @can('delete', $serviceApplication)
-                            <x-modal-confirmation title="Confirm Service Application Deletion?" buttonTitle="Delete" isErrorButton
-                                submitAction="deleteApplication" :actions="['The selected service application container will be stopped and permanently deleted.']"
-                                confirmationText="{{ Str::headline($serviceApplication->name) }}"
-                                confirmationLabel="Please confirm the execution of the actions by entering the Service Application Name below"
-                                shortConfirmationLabel="Service Application Name" />
-                        @endcan
-                    </div>
-                    <div class="flex flex-col gap-2">
-                        @if ($requiredPort && !$serviceApplication->serviceType()?->contains(str($serviceApplication->image)->before(':')))
-                            <x-callout type="warning" title="Required Port: {{ $requiredPort }}" class="mb-2">
-                                This service requires port <strong>{{ $requiredPort }}</strong> to function correctly. All domains must include this port number (or any other port if you know what you're doing).
-                                <br><br>
-                                <strong>Example:</strong> http://app.coolify.io:{{ $requiredPort }}
-                            </x-callout>
-                        @endif
-
-                        <div class="flex gap-2">
-                            <x-forms.input canGate="update" :canResource="$serviceApplication" label="Name" id="humanName"
-                                placeholder="Human readable name"></x-forms.input>
-                            <x-forms.input canGate="update" :canResource="$serviceApplication" label="Description"
-                                id="description"></x-forms.input>
-                        </div>
-                        <div class="flex gap-2">
-                            @if (!$serviceApplication->serviceType()?->contains(str($serviceApplication->image)->before(':')))
-                                @if ($serviceApplication->required_fqdn)
-                                    <x-forms.input canGate="update" :canResource="$serviceApplication" required placeholder="https://app.coolify.io"
-                                        label="Domains" id="fqdn"
-                                        helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. "></x-forms.input>
-                                @else
-                                    <x-forms.input canGate="update" :canResource="$serviceApplication" placeholder="https://app.coolify.io"
-                                        label="Domains" id="fqdn"
-                                        helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- http://app.coolify.io,https://cloud.coolify.io/dashboard<br>- http://app.coolify.io/api/v3<br>- http://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container. "></x-forms.input>
-                                @endif
-                            @endif
-                            <x-forms.input canGate="update" :canResource="$serviceApplication"
-                                helper="You can change the image you would like to deploy.<br><br><span class='dark:text-warning'>WARNING. You could corrupt your data. Only do it if you know what you are doing.</span>"
-                                label="Image" id="image"></x-forms.input>
-                        </div>
-                    </div>
-                    <h3 class="py-2 pt-4">Advanced</h3>
-                    <div class="w-96 flex flex-col gap-1">
+                @if ($currentRoute === 'project.service.index.advanced')
+                    <h2>Advanced</h2>
+                    <div class="w-full sm:w-96 flex flex-col gap-1 pt-4">
                         @if (str($serviceApplication->image)->contains('pocketbase'))
                             <x-forms.checkbox canGate="update" :canResource="$serviceApplication" instantSave="instantSaveApplicationSettings" id="isGzipEnabled"
                                 label="Enable Gzip Compression"
@@ -99,77 +48,134 @@
                             helper="Drain logs to your configured log drain endpoint in your Server settings."
                             instantSave="instantSaveApplicationAdvanced" id="isLogDrainEnabled" label="Drain Logs" />
                     </div>
-                </form>
+                @else
+                    <form wire:submit='submitApplication'>
+                        <div class="flex items-center gap-2 pb-4">
+                            @if ($serviceApplication->human_name)
+                                <h2>{{ Str::headline($serviceApplication->human_name) }}</h2>
+                            @else
+                                <h2>{{ Str::headline($serviceApplication->name) }}</h2>
+                            @endif
+                            <x-forms.button canGate="update" :canResource="$serviceApplication" type="submit">Save</x-forms.button>
+                            @can('update', $serviceApplication)
+                                <x-modal-confirmation wire:click="convertToDatabase" title="Convert to Database"
+                                    buttonTitle="Convert to Database" submitAction="convertToDatabase" :actions="['The selected resource will be converted to a service database.']"
+                                    confirmationText="{{ Str::headline($serviceApplication->name) }}"
+                                    confirmationLabel="Please confirm the execution of the actions by entering the Service Application Name below"
+                                    shortConfirmationLabel="Service Application Name" />
+                            @endcan
+                            @can('delete', $serviceApplication)
+                                <x-modal-confirmation title="Confirm Service Application Deletion?" buttonTitle="Delete" isErrorButton
+                                    submitAction="deleteApplication" :actions="['The selected service application container will be stopped and permanently deleted.']"
+                                    confirmationText="{{ Str::headline($serviceApplication->name) }}"
+                                    confirmationLabel="Please confirm the execution of the actions by entering the Service Application Name below"
+                                    shortConfirmationLabel="Service Application Name" />
+                            @endcan
+                        </div>
+                        <div class="flex flex-col gap-2">
+                            @if ($requiredPort && !$serviceApplication->serviceType()?->contains(str($serviceApplication->image)->before(':')))
+                                <x-callout type="info" title="Required Port: {{ $requiredPort }}" class="mb-2">
+                                    This service requires port <strong>{{ $requiredPort }}</strong> to function correctly. All domains must include this port number (or any other port if you know what you're doing).
+                                    <br><br>
+                                    <strong>Example:</strong> https://app.coolify.io:{{ $requiredPort }},https://www.app.coolify.io:{{ $requiredPort }}
+                                </x-callout>
+                            @endif
 
-                <x-domain-conflict-modal
-                    :conflicts="$domainConflicts"
-                    :showModal="$showDomainConflictModal"
-                    confirmAction="confirmDomainUsage">
-                    <x-slot:consequences>
-                        <ul class="mt-2 ml-4 list-disc">
-                            <li>Only one service will be accessible at this domain</li>
-                            <li>The routing behavior will be unpredictable</li>
-                            <li>You may experience service disruptions</li>
-                            <li>SSL certificates might not work correctly</li>
-                        </ul>
-                    </x-slot:consequences>
-                </x-domain-conflict-modal>
+                            <div class="flex gap-2">
+                                <x-forms.input canGate="update" :canResource="$serviceApplication" label="Name" id="humanName"
+                                    placeholder="Human readable name"></x-forms.input>
+                                <x-forms.input canGate="update" :canResource="$serviceApplication" label="Description"
+                                    id="description"></x-forms.input>
+                            </div>
+                            <div class="flex gap-2">
+                                @if (!$serviceApplication->serviceType()?->contains(str($serviceApplication->image)->before(':')))
+                                    @if ($serviceApplication->required_fqdn)
+                                        <x-forms.input canGate="update" :canResource="$serviceApplication" required placeholder="https://app.coolify.io"
+                                            label="Domains" id="fqdn"
+                                            helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- https://app.coolify.io,https://cloud.coolify.io/dashboard<br>- https://app.coolify.io/api/v3<br>- https://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container.<br>- https://app.coolify.io:8080/api -> app.coolify.io/api will point to port 8080 inside the container."></x-forms.input>
+                                    @else
+                                        <x-forms.input canGate="update" :canResource="$serviceApplication" placeholder="https://app.coolify.io"
+                                            label="Domains" id="fqdn"
+                                            helper="You can specify one domain with path or more with comma. You can specify a port to bind the domain to.<br><br><span class='text-helper'>Example</span><br>- https://app.coolify.io,https://cloud.coolify.io/dashboard<br>- https://app.coolify.io/api/v3<br>- https://app.coolify.io:3000 -> app.coolify.io will point to port 3000 inside the container.<br>- https://app.coolify.io:8080/api -> app.coolify.io/api will point to port 8080 inside the container."></x-forms.input>
+                                    @endif
+                                @endif
+                                <x-forms.input canGate="update" :canResource="$serviceApplication"
+                                    helper="You can change the image you would like to deploy.<br><br><span class='dark:text-warning'>WARNING. You could corrupt your data. Only do it if you know what you are doing.</span>"
+                                    label="Image" id="image"></x-forms.input>
+                            </div>
+                        </div>
+                    </form>
 
-                @if ($showPortWarningModal)
-                    <div x-data="{ modalOpen: true }" x-init="$nextTick(() => { modalOpen = true })"
-                        @keydown.escape.window="modalOpen = false; $wire.call('cancelRemovePort')"
-                        :class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
-                        <template x-teleport="body">
-                            <div x-show="modalOpen"
-                                class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen" x-cloak>
-                                <div x-show="modalOpen" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
-                                <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
-                                    x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
-                                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
-                                    x-transition:leave="ease-in duration-100"
-                                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-                                    x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
-                                    class="relative w-full py-6 border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
-                                    <div class="flex justify-between items-center pb-3">
-                                        <h2 class="pr-8 font-bold">Remove Required Port?</h2>
-                                        <button @click="modalOpen = false; $wire.call('cancelRemovePort')"
-                                            class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
-                                            <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
-                                                stroke-width="1.5" stroke="currentColor">
-                                                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-                                            </svg>
-                                        </button>
-                                    </div>
-                                    <div class="relative w-auto">
-                                        <x-callout type="warning" title="Port Requirement Warning" class="mb-4">
-                                            This service requires port <strong>{{ $requiredPort }}</strong> to function correctly.
-                                            One or more of your domains are missing a port number.
-                                        </x-callout>
+                    <x-domain-conflict-modal
+                        :conflicts="$domainConflicts"
+                        :showModal="$showDomainConflictModal"
+                        confirmAction="confirmDomainUsage">
+                        <x-slot:consequences>
+                            <ul class="mt-2 ml-4 list-disc">
+                                <li>Only one service will be accessible at this domain</li>
+                                <li>The routing behavior will be unpredictable</li>
+                                <li>You may experience service disruptions</li>
+                                <li>SSL certificates might not work correctly</li>
+                            </ul>
+                        </x-slot:consequences>
+                    </x-domain-conflict-modal>
 
-                                        <x-callout type="danger" title="What will happen if you continue?" class="mb-4">
-                                            <ul class="mt-2 ml-4 list-disc">
-                                                <li>The service may become unreachable</li>
-                                                <li>The proxy may not be able to route traffic correctly</li>
-                                                <li>Environment variables may not be generated properly</li>
-                                                <li>The service may fail to start or function</li>
-                                            </ul>
-                                        </x-callout>
+                    @if ($showPortWarningModal)
+                        <div x-data="{ modalOpen: true }" x-init="$nextTick(() => { modalOpen = true })"
+                            @keydown.escape.window="modalOpen = false; $wire.call('cancelRemovePort')"
+                            :class="{ 'z-40': modalOpen }" class="relative w-auto h-auto">
+                            <template x-teleport="body">
+                                <div x-show="modalOpen"
+                                    class="fixed top-0 lg:pt-10 left-0 z-99 flex items-start justify-center w-screen h-screen" x-cloak>
+                                    <div x-show="modalOpen" class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
+                                    <div x-show="modalOpen" x-trap.inert.noscroll="modalOpen" x-transition:enter="ease-out duration-100"
+                                        x-transition:enter-start="opacity-0 -translate-y-2 sm:scale-95"
+                                        x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
+                                        x-transition:leave="ease-in duration-100"
+                                        x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
+                                        x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
+                                        class="relative w-full py-6 border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] bg-neutral-100 border-neutral-400 dark:bg-base px-7 dark:border-coolgray-300">
+                                        <div class="flex justify-between items-center pb-3">
+                                            <h2 class="pr-8 font-bold">Remove Required Port?</h2>
+                                            <button @click="modalOpen = false; $wire.call('cancelRemovePort')"
+                                                class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
+                                                <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                                    stroke-width="1.5" stroke="currentColor">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                                                </svg>
+                                            </button>
+                                        </div>
+                                        <div class="relative w-auto">
+                                            <x-callout type="warning" title="Port Requirement Warning" class="mb-4">
+                                                This service requires port <strong>{{ $requiredPort }}</strong> to function correctly.
+                                                One or more of your domains are missing a port number.
+                                            </x-callout>
 
-                                        <div class="flex flex-wrap gap-2 justify-between mt-4">
-                                            <x-forms.button @click="modalOpen = false; $wire.call('cancelRemovePort')"
-                                                class="w-auto dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
-                                                Cancel - Keep Port
-                                            </x-forms.button>
-                                            <x-forms.button wire:click="confirmRemovePort" @click="modalOpen = false" class="w-auto"
-                                                isError>
-                                                I understand, remove port anyway
-                                            </x-forms.button>
+                                            <x-callout type="danger" title="What will happen if you continue?" class="mb-4">
+                                                <ul class="mt-2 ml-4 list-disc">
+                                                    <li>The service may become unreachable</li>
+                                                    <li>The proxy may not be able to route traffic correctly</li>
+                                                    <li>Environment variables may not be generated properly</li>
+                                                    <li>The service may fail to start or function</li>
+                                                </ul>
+                                            </x-callout>
+
+                                            <div class="flex flex-wrap gap-2 justify-between mt-4">
+                                                <x-forms.button @click="modalOpen = false; $wire.call('cancelRemovePort')"
+                                                    class="w-auto dark:bg-coolgray-200 dark:hover:bg-coolgray-300">
+                                                    Cancel - Keep Port
+                                                </x-forms.button>
+                                                <x-forms.button wire:click="confirmRemovePort" @click="modalOpen = false" class="w-auto"
+                                                    isError>
+                                                    I understand, remove port anyway
+                                                </x-forms.button>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                        </template>
-                    </div>
+                            </template>
+                        </div>
+                    @endif
                 @endif
             @elseif ($resourceType === 'database')
                 <x-slot:title>
@@ -178,6 +184,17 @@
                 </x-slot>
                 @if ($currentRoute === 'project.service.database.import')
                     <livewire:project.database.import :resource="$serviceDatabase" :key="'import-' . $serviceDatabase->uuid" />
+                @elseif ($currentRoute === 'project.service.index.advanced')
+                    <h2>Advanced</h2>
+                    <div class="w-full sm:w-96 flex flex-col gap-1 pt-4">
+                        <x-forms.checkbox canGate="update" :canResource="$serviceDatabase" instantSave="instantSaveExclude"
+                            label="Exclude from service status"
+                            helper="If you do not need to monitor this resource, enable. Useful if this service is optional."
+                            id="excludeFromStatus"></x-forms.checkbox>
+                        <x-forms.checkbox canGate="update" :canResource="$serviceDatabase"
+                            helper="Drain logs to your configured log drain endpoint in your Server settings."
+                            instantSave="instantSaveLogDrain" id="isLogDrainEnabled" label="Drain Logs" />
+                    </div>
                 @else
                     <form wire:submit='submitDatabase'>
                         <div class="flex items-center gap-2 pb-4">
@@ -233,7 +250,7 @@
                                     <x-forms.checkbox canGate="update" :canResource="$serviceDatabase" instantSave id="isPublic"
                                         label="Make it publicly available" />
                                 </div>
-                                <x-forms.input canGate="update" :canResource="$serviceDatabase" placeholder="5432"
+                                <x-forms.input type="number" canGate="update" :canResource="$serviceDatabase" placeholder="5432"
                                     disabled="{{ $serviceDatabase->is_public }}" id="publicPort" label="Public Port" />
                                 @if ($db_url_public)
                                     <x-forms.input label="Database IP:PORT (public)"
@@ -242,16 +259,6 @@
                                 @endif
                             </div>
                         </div>
-                        <h3 class="pt-2">Advanced</h3>
-                        <div class="w-96">
-                            <x-forms.checkbox canGate="update" :canResource="$serviceDatabase" instantSave="instantSaveExclude"
-                                label="Exclude from service status"
-                                helper="If you do not need to monitor this resource, enable. Useful if this service is optional."
-                                id="excludeFromStatus"></x-forms.checkbox>
-                            <x-forms.checkbox canGate="update" :canResource="$serviceDatabase"
-                                helper="Drain logs to your configured log drain endpoint in your Server settings."
-                                instantSave="instantSaveLogDrain" id="isLogDrainEnabled" label="Drain Logs" />
-                        </div>
                     </form>
                 @endif
             @endif

resources/views/livewire/project/service/stack-form.blade.php

@@ -20,7 +20,10 @@
             placeholder="My super WordPress site" />
         <x-forms.input canGate="update" :canResource="$service" id="description" label="Description" />
     </div>
-    <div class="w-96">
+    <div>
+        <h3>Network</h3>
+    </div>
+    <div class="w-full sm:w-96">
         <x-forms.checkbox canGate="update" :canResource="$service" instantSave id="connectToDockerNetwork"
             label="Connect To Predefined Network"
             helper="By default, you do not reach the Coolify defined networks.<br>Starting a docker compose based resource will have an internal network. <br>If you connect to a Coolify defined network, you maybe need to use different internal DNS names to connect to a resource.<br><br>For more information, check <a class='underline dark:text-white' target='_blank' href='https://coolify.io/docs/knowledge-base/docker/compose#connect-to-predefined-networks'>this</a>." />
@@ -50,4 +53,4 @@
             @endforeach
         </div>
     @endif
-</form>
+</form>

resources/views/livewire/project/shared/environment-variable/add.blade.php

@@ -1,16 +1,23 @@
-<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'>
+<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'
+    x-data="{ isMultiline: $wire.entangle('is_multiline') }">
     <x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
-    @if ($is_multiline)
-        <x-forms.textarea id="value" label="Value" required />
-    @else
-        <x-forms.env-var-input placeholder="production" id="value" label="Value" required
-            :availableVars="$shared ? [] : $this->availableSharedVariables"
-            :projectUuid="data_get($parameters, 'project_uuid')"
-            :environmentUuid="data_get($parameters, 'environment_uuid')" />
-    @endif
+    <template x-if="isMultiline">
+        <div wire:key="env-value-textarea">
+            <x-forms.textarea id="value" label="Value" required class="font-sans" spellcheck />
+        </div>
+    </template>
+    <template x-if="!isMultiline">
+        <div wire:key="env-value-input">
+            <x-forms.env-var-input placeholder="production" id="value" label="Value" required
+                :availableVars="$shared ? [] : $this->availableSharedVariables"
+                :projectUuid="data_get($parameters, 'project_uuid')"
+                :environmentUuid="data_get($parameters, 'environment_uuid')"
+                :serverUuid="data_get($parameters, 'server_uuid')" />
+        </div>
+    </template>
 
-    @if (!$shared && !$is_multiline)
-        <div class="text-xs text-neutral-500 dark:text-neutral-400 -mt-1">
+    @if (!$shared)
+        <div x-cloak x-show="!isMultiline" wire:key="env-value-tip" class="text-xs text-neutral-500 dark:text-neutral-400 -mt-1">
             Tip: Type <span class="font-mono dark:text-warning text-coollabs">{{</span> to reference a shared environment
             variable
         </div>
@@ -33,8 +40,8 @@
             label="Is Literal?" />
     @endif
 
-    <x-forms.checkbox id="is_multiline" label="Is Multiline?" />
+    <x-forms.checkbox id="is_multiline" x-model="isMultiline" label="Is Multiline?" />
     <x-forms.button type="submit" @click="slideOverOpen=false">
         Save
     </x-forms.button>
-</form>
+</form>

resources/views/livewire/project/shared/environment-variable/all.blade.php

@@ -84,24 +84,24 @@
                     Inline comments with space before # (e.g., <code class="font-mono">KEY=value #comment</code>) are stripped.
                 </x-callout>
 
-                <x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables"
+                <x-forms.textarea rows="10" class="whitespace-pre-wrap font-sans" id="variables" wire:model="variables"
                     label="Production Environment Variables"></x-forms.textarea>
 
                 @if ($showPreview)
-                    <x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
+                    <x-forms.textarea rows="10" class="whitespace-pre-wrap font-sans" label="Preview Deployments Environment Variables"
                         id="variablesPreview" wire:model="variablesPreview"></x-forms.textarea>
                 @endif
 
                 <x-forms.button type="submit" class="btn btn-primary">Save All Environment Variables</x-forms.button>
             @else
-                <x-forms.textarea rows="10" class="whitespace-pre-wrap" id="variables" wire:model="variables"
+                <x-forms.textarea rows="10" class="whitespace-pre-wrap font-sans" id="variables" wire:model="variables"
                     label="Production Environment Variables" disabled></x-forms.textarea>
 
                 @if ($showPreview)
-                    <x-forms.textarea rows="10" class="whitespace-pre-wrap" label="Preview Deployments Environment Variables"
+                    <x-forms.textarea rows="10" class="whitespace-pre-wrap font-sans" label="Preview Deployments Environment Variables"
                         id="variablesPreview" wire:model="variablesPreview" disabled></x-forms.textarea>
                 @endif
             @endcan
         </form>
     @endif
-</div>
+</div>

resources/views/livewire/project/shared/environment-variable/show.blade.php

@@ -26,6 +26,7 @@
                 <div class="flex flex-col w-full gap-2 lg:flex-row lg:items-end">
                     <div class="flex-1">
                         <x-forms.input id="comment" label="Comment"
+                            placeholder="{{ $isMagicVariable ? 'This env cannot be edited manually, it is handled by Coolify.' : '' }}"
                             helper="Add a note to document what this environment variable is used for." maxlength="256" />
                     </div>
                     <x-forms.button type="submit">Update</x-forms.button>
@@ -34,12 +35,6 @@
                     <div class="flex flex-wrap w-full items-center gap-4">
                         @if (!$is_redis_credential)
                             @if ($type === 'service')
-                                <x-forms.checkbox instantSave id="is_buildtime"
-                                    helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
-                                    label="Available at Buildtime" />
-                                <x-forms.checkbox instantSave id="is_runtime"
-                                    helper="Make this variable available in the running container at runtime."
-                                    label="Available at Runtime" />
                                 @if (!$isMagicVariable)
                                     <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
                                     <x-forms.checkbox instantSave id="is_literal"
@@ -48,6 +43,12 @@
                                 @endif
                             @else
                                 @if ($is_shared)
+                                    <x-forms.checkbox instantSave id="is_buildtime"
+                                        helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
+                                        label="Available at Buildtime" />
+                                    <x-forms.checkbox instantSave id="is_runtime"
+                                        helper="Make this variable available in the running container at runtime."
+                                        label="Available at Runtime" />
                                     <x-forms.checkbox instantSave id="is_literal"
                                         helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
                                         label="Is Literal?" />
@@ -86,12 +87,6 @@
                     <div class="flex flex-wrap w-full items-center gap-4">
                         @if (!$is_redis_credential)
                             @if ($type === 'service')
-                                <x-forms.checkbox disabled id="is_buildtime"
-                                    helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
-                                    label="Available at Buildtime" />
-                                <x-forms.checkbox disabled id="is_runtime"
-                                    helper="Make this variable available in the running container at runtime."
-                                    label="Available at Runtime" />
                                 @if (!$isMagicVariable)
                                     <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
                                     <x-forms.checkbox disabled id="is_literal"
@@ -100,6 +95,12 @@
                                 @endif
                             @else
                                 @if ($is_shared)
+                                    <x-forms.checkbox disabled id="is_buildtime"
+                                        helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
+                                        label="Available at Buildtime" />
+                                    <x-forms.checkbox disabled id="is_runtime"
+                                        helper="Make this variable available in the running container at runtime."
+                                        label="Available at Runtime" />
                                     <x-forms.checkbox disabled id="is_literal"
                                         helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
                                         label="Is Literal?" />
@@ -140,41 +141,51 @@
                     <div class="flex flex-col w-full gap-2">
                         <div class="flex flex-col w-full gap-2 lg:flex-row">
                             <x-forms.input disabled id="key" />
-                            <x-forms.input disabled type="password" id="value" />
+                            <x-forms.env-var-input
+                                disabled
+                                type="password"
+                                id="value"
+                                :availableVars="$isSharedVariable ? [] : $this->availableSharedVariables"
+                                :projectUuid="data_get($parameters, 'project_uuid')"
+                                :environmentUuid="data_get($parameters, 'environment_uuid')"
+                                :serverUuid="data_get($parameters, 'server_uuid')" />
                             @if ($is_shared)
                                 <x-forms.input disabled type="password" id="real_value" />
                             @endif
                         </div>
-                        @if (!$isMagicVariable)
-                            <x-forms.input disabled id="comment" label="Comment"
-                                helper="Add a note to document what this environment variable is used for." maxlength="256" />
-                        @endif
+                        <x-forms.input instantSave id="comment" label="Comment"
+                            placeholder="{{ $isMagicVariable ? 'This env cannot be edited manually, it is handled by Coolify.' : '' }}"
+                            helper="Add a note to document what this environment variable is used for." maxlength="256" />
                     </div>
                 @else
                     <div class="flex flex-col w-full gap-2">
                         <div class="flex flex-col w-full gap-2 lg:flex-row">
                             @if ($is_multiline)
                                 <x-forms.input :required="$is_redis_credential" isMultiline="{{ $is_multiline }}" id="key" />
-                                <x-forms.textarea :required="$is_redis_credential" type="password" id="value" />
+                                <div class="flex-1" wire:key="env-show-value-textarea-{{ $env->id }}">
+                                    <x-forms.textarea :required="$is_redis_credential" type="password" id="value" />
+                                </div>
                             @else
                                 <x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" id="key" />
-                                <x-forms.env-var-input
-                                    :required="$is_redis_credential"
-                                    type="password"
-                                    id="value"
-                                    :availableVars="$this->availableSharedVariables"
-                                    :projectUuid="data_get($parameters, 'project_uuid')"
-                                    :environmentUuid="data_get($parameters, 'environment_uuid')" />
+                                <div class="w-full" wire:key="env-show-value-input-{{ $env->id }}">
+                                    <x-forms.env-var-input
+                                        :required="$is_redis_credential"
+                                        type="password"
+                                        id="value"
+                                        :availableVars="$isSharedVariable ? [] : $this->availableSharedVariables"
+                                        :projectUuid="data_get($parameters, 'project_uuid')"
+                                        :environmentUuid="data_get($parameters, 'environment_uuid')"
+                                        :serverUuid="data_get($parameters, 'server_uuid')" />
+                                </div>
                             @endif
                             @if ($is_shared)
                                 <x-forms.input :disabled="$is_redis_credential" :required="$is_redis_credential" disabled
                                     type="password" id="real_value" />
                             @endif
                         </div>
-                        @if (!$isMagicVariable)
-                            <x-forms.input instantSave id="comment" label="Comment"
-                                helper="Add a note to document what this environment variable is used for." maxlength="256" />
-                        @endif
+                        <x-forms.input instantSave id="comment" label="Comment"
+                            placeholder="{{ $isMagicVariable ? 'This env cannot be edited manually, it is handled by Coolify.' : '' }}"
+                            helper="Add a note to document what this environment variable is used for." maxlength="256" />
                     </div>
                 @endif
             @else
@@ -191,18 +202,18 @@
                                 disabled
                                 type="password"
                                 id="value"
-                                :availableVars="$this->availableSharedVariables"
+                                :availableVars="$isSharedVariable ? [] : $this->availableSharedVariables"
                                 :projectUuid="data_get($parameters, 'project_uuid')"
-                                :environmentUuid="data_get($parameters, 'environment_uuid')" />
+                                :environmentUuid="data_get($parameters, 'environment_uuid')"
+                                :serverUuid="data_get($parameters, 'server_uuid')" />
                             @if ($is_shared)
                                 <x-forms.input disabled type="password" id="real_value" />
                             @endif
                         @endif
                     </div>
-                    @if (!$isMagicVariable)
-                        <x-forms.input disabled id="comment" label="Comment"
-                            helper="Add a note to document what this environment variable is used for." maxlength="256" />
-                    @endif
+                    <x-forms.input disabled id="comment" label="Comment"
+                        placeholder="{{ $isMagicVariable ? 'This env cannot be edited manually, it is handled by Coolify.' : '' }}"
+                        helper="Add a note to document what this environment variable is used for." maxlength="256" />
                 </div>
             @endcan
             @can('update', $this->env)
@@ -210,12 +221,6 @@
                     <div class="flex flex-wrap w-full items-center gap-4">
                         @if (!$is_redis_credential)
                             @if ($type === 'service')
-                                <x-forms.checkbox instantSave id="is_buildtime"
-                                    helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
-                                    label="Available at Buildtime" />
-                                <x-forms.checkbox instantSave id="is_runtime"
-                                    helper="Make this variable available in the running container at runtime."
-                                    label="Available at Runtime" />
                                 @if (!$isMagicVariable)
                                     <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
                                     <x-forms.checkbox instantSave id="is_literal"
@@ -224,6 +229,12 @@
                                 @endif
                             @else
                                 @if ($is_shared)
+                                    <x-forms.checkbox instantSave id="is_buildtime"
+                                        helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
+                                        label="Available at Buildtime" />
+                                    <x-forms.checkbox instantSave id="is_runtime"
+                                        helper="Make this variable available in the running container at runtime."
+                                        label="Available at Runtime" />
                                     <x-forms.checkbox instantSave id="is_literal"
                                         helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
                                         label="Is Literal?" />
@@ -279,6 +290,10 @@
                                 step2ButtonText="Permanently Delete" />
                             @endif
                         </div>
+                    @elseif ($type === 'service')
+                        <div class="flex w-full justify-end gap-2">
+                            <x-forms.button wire:click='lock'>Lock</x-forms.button>
+                        </div>
                     @endif
                 </div>
             @else
@@ -286,12 +301,6 @@
                     <div class="flex flex-wrap w-full items-center gap-4">
                         @if (!$is_redis_credential)
                             @if ($type === 'service')
-                                <x-forms.checkbox disabled id="is_buildtime"
-                                    helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
-                                    label="Available at Buildtime" />
-                                <x-forms.checkbox disabled id="is_runtime"
-                                    helper="Make this variable available in the running container at runtime."
-                                    label="Available at Runtime" />
                                 @if (!$isMagicVariable)
                                     <x-forms.checkbox disabled id="is_multiline" label="Is Multiline?" />
                                     <x-forms.checkbox disabled id="is_literal"
@@ -300,6 +309,12 @@
                                 @endif
                             @else
                                 @if ($is_shared)
+                                    <x-forms.checkbox disabled id="is_buildtime"
+                                        helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
+                                        label="Available at Buildtime" />
+                                    <x-forms.checkbox disabled id="is_runtime"
+                                        helper="Make this variable available in the running container at runtime."
+                                        label="Available at Runtime" />
                                     <x-forms.checkbox disabled id="is_literal"
                                         helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
                                         label="Is Literal?" />
@@ -333,4 +348,4 @@
         @endif
 
     </form>
-</div>
+</div>

resources/views/livewire/project/shared/execute-container-command.blade.php

@@ -21,7 +21,8 @@
             <div>No containers are running or terminal access is disabled on this server.</div>
         @else
             <form class="w-96 min-w-fit flex gap-2 items-end" wire:submit="$dispatchSelf('connectToContainer')"
-                x-data="{ autoConnected: false }" x-init="if ({{ count($containers) }} === 1 && !autoConnected) {
+                x-data="{ autoConnected: false }"
+                x-on:terminal-websocket-ready.window="if ({{ count($containers) }} === 1 && !autoConnected) {
                     autoConnected = true;
                     $nextTick(() => $wire.dispatchSelf('connectToContainer'));
                 }">

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

@@ -8,6 +8,7 @@
         rafId: null,
         scrollDebounce: null,
         colorLogs: localStorage.getItem('coolify-color-logs') === 'true',
+        logFilters: JSON.parse(localStorage.getItem('coolify-log-filters')) || {error: true, warning: true, debug: true, info: true},
         searchQuery: '',
         matchCount: 0,
         containerName: '{{ $container ?? "logs" }}',
@@ -70,6 +71,17 @@
                 }
             }, 150);
         },
+        getLogLevel(content) {
+            if (/\b(error|err|failed|failure|exception|fatal|panic|critical)\b/.test(content)) return 'error';
+            if (/\b(warn|warning|wrn|caution)\b/.test(content)) return 'warning';
+            if (/\b(debug|dbg|trace|verbose)\b/.test(content)) return 'debug';
+            return 'info';
+        },
+        toggleLogFilter(level) {
+            this.logFilters[level] = !this.logFilters[level];
+            localStorage.setItem('coolify-log-filters', JSON.stringify(this.logFilters));
+            this.applySearch();
+        },
         toggleColorLogs() {
             this.colorLogs = !this.colorLogs;
             localStorage.setItem('coolify-color-logs', this.colorLogs);
@@ -81,17 +93,11 @@
             const lines = logs.querySelectorAll('[data-log-line]');
             lines.forEach(line => {
                 const content = (line.dataset.logContent || '').toLowerCase();
+                const level = this.getLogLevel(content);
+                line.dataset.logLevel = level;
                 line.classList.remove('log-error', 'log-warning', 'log-debug', 'log-info');
                 if (!this.colorLogs) return;
-                if (/\b(error|err|failed|failure|exception|fatal|panic|critical)\b/.test(content)) {
-                    line.classList.add('log-error');
-                } else if (/\b(warn|warning|wrn|caution)\b/.test(content)) {
-                    line.classList.add('log-warning');
-                } else if (/\b(debug|dbg|trace|verbose)\b/.test(content)) {
-                    line.classList.add('log-debug');
-                } else if (/\b(info|inf|notice)\b/.test(content)) {
-                    line.classList.add('log-info');
-                }
+                line.classList.add('log-' + level);
             });
         },
         hasActiveLogSelection() {
@@ -118,7 +124,10 @@
             lines.forEach(line => {
                 const content = (line.dataset.logContent || '').toLowerCase();
                 const textSpan = line.querySelector('[data-line-text]');
-                const matches = !query || content.includes(query);
+                const level = line.dataset.logLevel || this.getLogLevel(content);
+                const passesFilter = this.logFilters[level] !== false;
+                const matchesSearch = !query || content.includes(query);
+                const matches = passesFilter && matchesSearch;
 
                 line.classList.toggle('hidden', !matches);
                 if (matches && query) count++;
@@ -389,6 +398,52 @@
                                     d="M9.53 16.122a3 3 0 0 0-5.78 1.128 2.25 2.25 0 0 1-2.4 2.245 4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128Zm0 0a15.998 15.998 0 0 0 3.388-1.62m-5.043-.025a15.994 15.994 0 0 1 1.622-3.395m3.42 3.42a15.995 15.995 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a15.996 15.996 0 0 0-4.649 4.763m3.42 3.42a6.776 6.776 0 0 0-3.42-3.42" />
                             </svg>
                         </button>
+                        <div x-data="{ filterOpen: false }" class="relative">
+                            <button x-on:click="filterOpen = !filterOpen" title="Filter Log Levels"
+                                :class="Object.values(logFilters).some(v => !v) ? '!text-warning' : ''"
+                                class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
+                                <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+                                    stroke-width="1.5" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round"
+                                        d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 0 1-.659 1.591l-5.432 5.432a2.25 2.25 0 0 0-.659 1.591v2.927a2.25 2.25 0 0 1-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 0 0-.659-1.591L3.659 7.409A2.25 2.25 0 0 1 3 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0 1 12 3Z" />
+                                </svg>
+                            </button>
+                            <div x-show="filterOpen" x-on:click.away="filterOpen = false"
+                                x-transition:enter="transition ease-out duration-100"
+                                x-transition:enter-start="transform opacity-0 scale-95"
+                                x-transition:enter-end="transform opacity-100 scale-100"
+                                x-transition:leave="transition ease-in duration-75"
+                                x-transition:leave-start="transform opacity-100 scale-100"
+                                x-transition:leave-end="transform opacity-0 scale-95"
+                                class="absolute right-0 z-50 mt-2 w-max origin-top-right rounded-md bg-white dark:bg-coolgray-200 shadow-lg ring-1 ring-neutral-200 dark:ring-coolgray-300 focus:outline-none">
+                                <div class="py-1">
+                                    <label class="flex items-center gap-2 px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-coolgray-300 cursor-pointer select-none">
+                                        <input type="checkbox" :checked="logFilters.error" x-on:change="toggleLogFilter('error')"
+                                            class="rounded border-gray-300 dark:border-gray-600 text-warning focus:ring-warning dark:bg-coolgray-300" />
+                                        <span class="w-2.5 h-2.5 rounded-full bg-red-500"></span>
+                                        Error
+                                    </label>
+                                    <label class="flex items-center gap-2 px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-coolgray-300 cursor-pointer select-none">
+                                        <input type="checkbox" :checked="logFilters.warning" x-on:change="toggleLogFilter('warning')"
+                                            class="rounded border-gray-300 dark:border-gray-600 text-warning focus:ring-warning dark:bg-coolgray-300" />
+                                        <span class="w-2.5 h-2.5 rounded-full bg-yellow-500"></span>
+                                        Warning
+                                    </label>
+                                    <label class="flex items-center gap-2 px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-coolgray-300 cursor-pointer select-none">
+                                        <input type="checkbox" :checked="logFilters.debug" x-on:change="toggleLogFilter('debug')"
+                                            class="rounded border-gray-300 dark:border-gray-600 text-warning focus:ring-warning dark:bg-coolgray-300" />
+                                        <span class="w-2.5 h-2.5 rounded-full bg-purple-500"></span>
+                                        Debug
+                                    </label>
+                                    <label class="flex items-center gap-2 px-4 py-1.5 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-coolgray-300 cursor-pointer select-none">
+                                        <input type="checkbox" :checked="logFilters.info" x-on:change="toggleLogFilter('info')"
+                                            class="rounded border-gray-300 dark:border-gray-600 text-warning focus:ring-warning dark:bg-coolgray-300" />
+                                        <span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
+                                        Info
+                                    </label>
+                                </div>
+                            </div>
+                        </div>
                         <button title="Follow Logs" :class="alwaysScroll ? '!text-warning' : ''"
                             x-on:click="toggleScroll"
                             class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
@@ -425,7 +480,7 @@
                         @php
                             $displayLines = collect(explode("\n", $outputs))->filter(fn($line) => trim($line) !== '');
                         @endphp
-                        <div id="logs" class="font-mono max-w-full cursor-default">
+                        <div id="logs" class="font-logs max-w-full cursor-default">
                             <div x-show="searchQuery.trim() && matchCount === 0"
                                 class="text-gray-500 dark:text-gray-400 py-2">
                                 No matches found.
@@ -463,7 +518,7 @@
                         </div>
                     @else
                         <pre id="logs"
-                            class="font-mono whitespace-pre-wrap break-all max-w-full text-neutral-400">No logs yet.</pre>
+                            class="font-logs whitespace-pre-wrap break-all max-w-full text-neutral-400">No logs yet.</pre>
                     @endif
                 </div>
             </div>

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

@@ -8,39 +8,35 @@
         <livewire:project.application.heading :application="$resource" />
         <div>
             <h2>Logs</h2>
-            @if (str($status)->contains('exited'))
-                <div class="pt-4">The resource is not running.</div>
-            @else
-                <div class="pt-2" wire:loading wire:target="loadAllContainers">
-                    Loading containers...
-                </div>
-                <div x-init="$wire.loadAllContainers()" wire:loading.remove wire:target="loadAllContainers">
-                    @forelse ($servers as $server)
-                        <div class="py-2">
-                            <h4>Server: {{ $server->name }}</h4>
-                            @if ($server->isFunctional())
-                                @if (isset($serverContainers[$server->id]) && count($serverContainers[$server->id]) > 0)
-                                    @php
-                                        $totalContainers = collect($serverContainers)->flatten(1)->count();
-                                    @endphp
-                                    @foreach ($serverContainers[$server->id] as $container)
-                                        <livewire:project.shared.get-logs
-                                            wire:key="{{ data_get($container, 'ID', uniqid()) }}" :server="$server"
-                                            :resource="$resource" :container="data_get($container, 'Names')"
-                                            :expandByDefault="$totalContainers === 1" />
-                                    @endforeach
-                                @else
-                                    <div class="pt-2">No containers are running on server: {{ $server->name }}</div>
-                                @endif
+            <div class="pt-2" wire:loading wire:target="loadAllContainers">
+                Loading containers...
+            </div>
+            <div x-init="$wire.loadAllContainers()" wire:loading.remove wire:target="loadAllContainers">
+                @forelse ($servers as $server)
+                    <div class="py-2">
+                        <h4>Server: {{ $server->name }}</h4>
+                        @if ($server->isFunctional())
+                            @if (isset($serverContainers[$server->id]) && count($serverContainers[$server->id]) > 0)
+                                @php
+                                    $totalContainers = collect($serverContainers)->flatten(1)->count();
+                                @endphp
+                                @foreach ($serverContainers[$server->id] as $container)
+                                    <livewire:project.shared.get-logs
+                                        wire:key="{{ data_get($container, 'ID', uniqid()) }}" :server="$server"
+                                        :resource="$resource" :container="data_get($container, 'Names')"
+                                        :expandByDefault="$totalContainers === 1" />
+                                @endforeach
                             @else
-                                <div class="pt-2">Server {{ $server->name }} is not functional.</div>
+                                <div class="pt-2">No containers are running on server: {{ $server->name }}</div>
                             @endif
-                        </div>
-                    @empty
-                        <div>No functional server found for the application.</div>
-                    @endforelse
-                </div>
-            @endif
+                        @else
+                            <div class="pt-2">Server {{ $server->name }} is not functional.</div>
+                        @endif
+                    </div>
+                @empty
+                    <div>No functional server found for the application.</div>
+                @endforelse
+            </div>
         </div>
     @elseif ($type === 'database')
         <h1>Logs</h1>

resources/views/livewire/project/shared/resource-limits.blade.php

@@ -18,24 +18,20 @@
                 label="CPU Weight" id="limitsCpuShares" />
         </div>
         <h3 class="pt-4">Limit Memory</h3>
-        <div class="flex flex-col gap-2">
-            <div class="flex gap-2">
-                <x-forms.input canGate="update" :canResource="$resource"
-                    helper="Examples: 69b (byte) or 420k (kilobyte) or 1337m (megabyte) or 1g (gigabyte).<br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#mem_reservation'>here</a>."
-                    label="Soft Memory Limit" id="limitsMemoryReservation" />
-                <x-forms.input canGate="update" :canResource="$resource"
-                    helper="0-100.<br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#mem_swappiness'>here</a>."
-                    type="number" min="0" max="100" label="Swappiness"
-                    id="limitsMemorySwappiness" />
-            </div>
-            <div class="flex gap-2">
-                <x-forms.input canGate="update" :canResource="$resource"
-                    helper="Examples: 69b (byte) or 420k (kilobyte) or 1337m (megabyte) or 1g (gigabyte).<br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#mem_limit'>here</a>."
-                    label="Maximum Memory Limit" id="limitsMemory" />
-                <x-forms.input canGate="update" :canResource="$resource"
-                    helper="Examples:69b (byte) or 420k (kilobyte) or 1337m (megabyte) or 1g (gigabyte).<br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#memswap_limit'>here</a>."
-                    label="Maximum Swap Limit" id="limitsMemorySwap" />
-            </div>
+        <div class="flex gap-2">
+            <x-forms.input canGate="update" :canResource="$resource"
+                helper="<span class='text-helper'>Examples</span><br>• 69b (byte)<br>• 420k (kilobyte)<br>• 1337m (megabyte)<br>• 1g (gigabyte)<br><br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#mem_reservation'>here</a>."
+                label="Soft Memory Limit" id="limitsMemoryReservation" />
+            <x-forms.input canGate="update" :canResource="$resource"
+                helper="Value between 0-100.<br><br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#mem_swappiness'>here</a>."
+                type="number" min="0" max="100" label="Swappiness"
+                id="limitsMemorySwappiness" />
+            <x-forms.input canGate="update" :canResource="$resource"
+                helper="<span class='text-helper'>Examples</span><br>• 69b (byte)<br>• 420k (kilobyte)<br>• 1337m (megabyte)<br>• 1g (gigabyte)<br><br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#mem_limit'>here</a>."
+                label="Maximum Memory Limit" id="limitsMemory" />
+            <x-forms.input canGate="update" :canResource="$resource"
+                helper="<span class='text-helper'>Examples</span><br>• 69b (byte)<br>• 420k (kilobyte)<br>• 1337m (megabyte)<br>• 1g (gigabyte)<br><br>More info <a class='underline dark:text-white' target='_blank' href='https://docs.docker.com/compose/compose-file/05-services/#memswap_limit'>here</a>."
+                label="Maximum Swap Limit" id="limitsMemorySwap" />
         </div>
     </form>
 </div>

resources/views/livewire/project/shared/resource-operations.blade.php

@@ -63,6 +63,9 @@
     }">
         <h3 class="pt-4">Clone Resource</h3>
         <div class="pb-2">Duplicate this resource to another server or network destination.</div>
+        <x-callout type="info" title="Important" class="mb-4">
+            Cloning only duplicates resource configuration (such as environment variables, build settings etc..). It does not include any resource data, such as databases or stored files.
+        </x-callout>
 
         @can('update', $resource)
             <div class="space-y-4 pb-8">

resources/views/livewire/project/shared/scheduled-task/show.blade.php

@@ -1,18 +1,8 @@
 <div>
-    <x-slot:title>
-        {{ data_get_str($resource, 'name')->limit(10) }} > Scheduled Tasks | Coolify
-    </x-slot>
-    @if ($type === 'application')
-        <h1>Scheduled Task</h1>
-        <livewire:project.application.heading :application="$resource" />
-    @elseif ($type === 'service')
-        <livewire:project.service.heading :service="$resource" :parameters="$parameters" />
-    @endif
-
     <form wire:submit="submit" class="w-full">
         <div class="flex flex-col gap-2 pb-2">
             <div class="flex gap-2 items-end">
-                <h2>Scheduled Task</h2>
+                <h2>Task {{ $task->name }}</h2>
                 <x-forms.button canGate="update" :canResource="$resource" type="submit">
                     Save
                 </x-forms.button>
@@ -24,6 +14,11 @@
                     @endcan
                 @endif
                 @can('update', $resource)
+                    @if (!$isEnabled)
+                        <x-forms.button wire:click="toggleEnabled" isHighlighted>Enable Task</x-forms.button>
+                    @else
+                        <x-forms.button wire:click="toggleEnabled">Disable Task</x-forms.button>
+                    @endif
                     <x-modal-confirmation title="Confirm Scheduled Task Deletion?" isErrorButton buttonTitle="Delete"
                         submitAction="delete({{ $task->id }})" :actions="['The selected scheduled task will be permanently deleted.']" confirmationText="{{ $task->name }}"
                         confirmationLabel="Please confirm the execution of the actions by entering the Scheduled Task Name below"
@@ -31,17 +26,11 @@
                         step2ButtonText="Permanently Delete" />
                 @endcan
             </div>
-            <div class="w-48">
-                @can('update', $resource)
-                    <x-forms.checkbox instantSave id="isEnabled" label="Enabled" />
-                @else
-                    <x-forms.checkbox disabled id="isEnabled" label="Enabled" />
-                @endcan
-            </div>
+            <h3 class="pt-4">Configuration</h3>
             <div class="flex gap-2 w-full">
                 <x-forms.input :disabled="!auth()->user()->can('update', $resource)" placeholder="Name" id="name" label="Name" required />
-                <x-forms.input :disabled="!auth()->user()->can('update', $resource)" placeholder="php artisan schedule:run" id="command" label="Command" required />
-                <x-forms.input :disabled="!auth()->user()->can('update', $resource)" placeholder="0 0 * * * or daily" id="frequency" label="Frequency" required />
+                <x-forms.input :disabled="!auth()->user()->can('update', $resource)" placeholder="0 0 * * * or daily" id="frequency" label="Frequency"
+                    helper="You can use every_minute, hourly, daily, weekly, monthly, yearly or a cron expression." required />
                 <x-forms.input :disabled="!auth()->user()->can('update', $resource)" type="number" placeholder="300" id="timeout"
                     helper="Maximum execution time in seconds (60-36000)." label="Timeout (seconds)" required />
                 @if ($type === 'application')
@@ -54,6 +43,7 @@
                         id="container" label="Service name" />
                 @endif
             </div>
+            <x-forms.input :disabled="!auth()->user()->can('update', $resource)" placeholder="php artisan schedule:run" id="command" label="Command" required />
     </form>
 
     <div class="pt-4">

resources/views/livewire/project/shared/storages/show.blade.php

@@ -38,6 +38,15 @@
                     <x-forms.input id="mountPath" required readonly />
                 </div>
             @endif
+            @if (!$isService)
+                @can('update', $resource)
+                    <div class="w-full sm:w-96">
+                        <x-forms.checkbox instantSave canGate="update" :canResource="$resource" label="Add suffix for PR deployments"
+                            id="isPreviewSuffixEnabled"
+                            helper="When enabled, a -pr-N suffix is added to this volume's name for preview deployments (e.g. myvolume becomes myvolume-pr-1). Disable this for volumes that should be shared between the main and preview deployments."></x-forms.checkbox>
+                    </div>
+                @endcan
+            @endif
         @else
             @can('update', $resource)
                 @if ($isFirst)
@@ -54,6 +63,13 @@
                         <x-forms.input id="mountPath" required />
                     </div>
                 @endif
+                @if (!$isService)
+                    <div class="w-full sm:w-96">
+                        <x-forms.checkbox instantSave canGate="update" :canResource="$resource" label="Add suffix for PR deployments"
+                            id="isPreviewSuffixEnabled"
+                            helper="When enabled, a -pr-N suffix is added to this volume's name for preview deployments (e.g. myvolume becomes myvolume-pr-1). Disable this for volumes that should be shared between the main and preview deployments."></x-forms.checkbox>
+                    </div>
+                @endif
                 <div class="flex gap-2">
                     <x-forms.button type="submit">
                         Update

resources/views/livewire/security/private-key/create.blade.php

@@ -13,7 +13,7 @@
             <x-forms.input id="name" label="Name" required />
             <x-forms.input id="description" label="Description" />
         </div>
-        <x-forms.textarea realtimeValidation id="value" rows="10"
+        <x-forms.textarea realtimeValidation id="value" rows="10" monospace
             placeholder="-----BEGIN OPENSSH PRIVATE KEY-----" label="Private Key" required />
         <x-forms.input id="publicKey" readonly label="Public Key" />
         <span class="pt-2 pb-4 font-bold dark:text-warning">ACTION REQUIRED: Copy the 'Public Key' to your server's

resources/views/livewire/security/private-key/show.blade.php

@@ -56,7 +56,7 @@
                             required disabled />
                     </div>
                     <div x-cloak x-show="showPrivateKey">
-                        <x-forms.textarea canGate="update" :canResource="$private_key" rows="10" id="privateKeyValue" required />
+                        <x-forms.textarea canGate="update" :canResource="$private_key" rows="10" id="privateKeyValue" required monospace />
                     </div>
                 </div>
             </div>

resources/views/livewire/server/advanced.blade.php

@@ -22,6 +22,7 @@
                             id="serverDiskUsageCheckFrequency" label="Disk usage check frequency" required
                             helper="Cron expression for disk usage check frequency.<br>You can use every_minute, hourly, daily, weekly, monthly, yearly.<br><br>Default is every night at 11:00 PM." />
                         <x-forms.input canGate="update" :canResource="$server" id="serverDiskUsageNotificationThreshold"
+                            type="number" min="1" max="99"
                             label="Server disk usage notification threshold (%)" required
                             helper="If the server disk usage exceeds this threshold, Coolify will send a notification to the team members." />
                     </div>
@@ -31,12 +32,15 @@
                     <h3>Builds</h3>
                     <div class="flex flex-wrap gap-2 sm:flex-nowrap pt-4">
                         <x-forms.input canGate="update" :canResource="$server" id="concurrentBuilds"
+                            type="number" min="1"
                             label="Number of concurrent builds" required
                             helper="You can specify the number of simultaneous build processes/deployments that should run concurrently." />
                         <x-forms.input canGate="update" :canResource="$server" id="dynamicTimeout"
+                            type="number" min="1"
                             label="Deployment timeout (seconds)" required
                             helper="You can define the maximum duration for a deployment to run before timing it out." />
                         <x-forms.input canGate="update" :canResource="$server" id="deploymentQueueLimit"
+                            type="number" min="1"
                             label="Deployment queue limit" required
                             helper="Maximum number of queued deployments allowed. New deployments will be rejected with a 429 status when the limit is reached." />
                     </div>

resources/views/livewire/server/delete.blade.php

@@ -14,7 +14,7 @@
                     back!
                 </div>
                 @if ($server->definedResources()->count() > 0)
-                    <div class="pb-2 text-red-500">You need to delete all resources before deleting this server.</div>
+                    <div class="pb-2 text-red-500">This server has resources. You can force delete all resources by checking the option below.</div>
                 @endif
 
                 <x-modal-confirmation title="Confirm Server Deletion?" isErrorButton buttonTitle="Delete"

resources/views/livewire/server/docker-cleanup-executions.blade.php

@@ -100,7 +100,7 @@
                         <svg class="h-5 w-5 shrink-0 text-gray-500 dark:text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                         </svg>
-                        <code class="flex-1 text-sm font-mono text-gray-700 dark:text-gray-300">{{ data_get($result, 'command') }}</code>
+                        <code class="flex-1 text-sm font-logs text-gray-700 dark:text-gray-300">{{ data_get($result, 'command') }}</code>
                     </div>
                     @php
                     $output = data_get($result, 'output');
@@ -108,7 +108,7 @@
                     @endphp
                     <div class="p-4">
                         @if($hasOutput)
-                        <pre class="font-mono text-sm text-gray-600 dark:text-gray-300 whitespace-pre-wrap">{{ $output }}</pre>
+                        <pre class="font-logs text-sm text-gray-600 dark:text-gray-300 whitespace-pre-wrap">{{ $output }}</pre>
                         @else
                         <p class="text-sm text-gray-500 dark:text-gray-400 italic">
                             No output returned - command completed successfully

resources/views/livewire/server/docker-cleanup.blade.php

@@ -27,7 +27,7 @@
                     <div class="mt-1 mb-6">Configure Docker cleanup settings for your server.</div>
                 </div>
 
-                @if ($this->isCleanupStale)
+                @if (!isCloud() && $this->isCleanupStale)
                     <div class="mb-4">
                         <x-callout type="warning" title="Docker Cleanup May Be Stalled">
                             <p>The last Docker cleanup ran {{ $this->lastExecutionTime ?? 'unknown time' }} ago,

resources/views/livewire/server/proxy.blade.php

@@ -1,7 +1,7 @@
 @php use App\Enums\ProxyTypes; @endphp
 <div>
     @if ($server->proxyType())
-        <div x-init="$wire.loadProxyConfiguration">
+        <div>
             @if ($selectedProxy !== 'NONE')
                 <form wire:submit='submit'>
                     <div class="flex items-center gap-2">
@@ -31,7 +31,7 @@
                         </x-callout>
                     @endif
                     <h3>Advanced</h3>
-                    <div class="pb-6 w-96">
+                    <div class="pb-6 w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$server"
                             helper="If set, all resources will only have docker container labels for {{ str($server->proxyType())->title() }}.<br>For applications, labels needs to be regenerated manually. <br>Resources needs to be restarted."
                             id="generateExactLabels"
@@ -55,24 +55,19 @@
                             <div class="flex items-center gap-2">
                                 <h3>{{ $proxyTitle }}</h3>
                                 @can('update', $server)
-                                    <div wire:loading wire:target="loadProxyConfiguration">
-                                        <x-forms.button disabled>Reset Configuration</x-forms.button>
-                                    </div>
-                                    <div wire:loading.remove wire:target="loadProxyConfiguration">
-                                        @if ($proxySettings)
-                                            <x-modal-confirmation title="Reset Proxy Configuration?"
-                                                buttonTitle="Reset Configuration" submitAction="resetProxyConfiguration"
-                                                :actions="[
-                                                    'Reset proxy configuration to default settings',
-                                                    'All custom configurations will be lost',
-                                                    'Custom ports and entrypoints will be removed',
-                                                ]" confirmationText="{{ $server->name }}"
-                                                confirmationLabel="Please confirm by entering the server name below"
-                                                shortConfirmationLabel="Server Name" step2ButtonText="Reset Configuration"
-                                                :confirmWithPassword="false" :confirmWithText="true">
-                                            </x-modal-confirmation>
-                                        @endif
-                                    </div>
+                                    @if ($proxySettings)
+                                        <x-modal-confirmation title="Reset Proxy Configuration?"
+                                            buttonTitle="Reset Configuration" submitAction="resetProxyConfiguration"
+                                            :actions="[
+                                                'Reset proxy configuration to default settings',
+                                                'All custom configurations will be lost',
+                                                'Custom ports and entrypoints will be removed',
+                                            ]" confirmationText="{{ $server->name }}"
+                                            confirmationLabel="Please confirm by entering the server name below"
+                                            shortConfirmationLabel="Server Name" step2ButtonText="Reset Configuration"
+                                            :confirmWithPassword="false" :confirmWithText="true">
+                                        </x-modal-confirmation>
+                                    @endif
                                 @endcan
                                 @if ($server->proxyType() === ProxyTypes::TRAEFIK->value)
                                     <button type="button" x-show="traefikWarningsDismissed"
@@ -134,19 +129,14 @@
                             @endif
                         </div>
                     @endif
-                    <div wire:loading wire:target="loadProxyConfiguration" class="pt-4">
-                        <x-loading text="Loading proxy configuration..." />
-                    </div>
-                    <div wire:loading.remove wire:target="loadProxyConfiguration">
-                        @if ($proxySettings)
-                            <div class="flex flex-col gap-2 pt-2">
-                                <x-forms.textarea canGate="update" :canResource="$server" useMonacoEditor
-                                    monacoEditorLanguage="yaml"
-                                    label="Configuration file ( {{ $this->configurationFilePath }} )"
-                                    name="proxySettings" id="proxySettings" rows="30" />
-                            </div>
-                        @endif
-                    </div>
+                    @if ($proxySettings)
+                        <div class="flex flex-col gap-2 pt-2">
+                            <x-forms.textarea canGate="update" :canResource="$server" useMonacoEditor
+                                monacoEditorLanguage="yaml"
+                                label="Configuration file ( {{ $this->configurationFilePath }} )"
+                                name="proxySettings" id="proxySettings" rows="30" />
+                        </div>
+                    @endif
                 </form>
             @elseif($selectedProxy === 'NONE')
                 <div class="flex items-center gap-2">

resources/views/livewire/server/sentinel.blade.php

@@ -44,7 +44,7 @@
                     @endif
                 </div>
                 <div class="flex flex-col gap-2">
-                    <div class="w-96">
+                    <div class="w-full sm:w-96">
                         <x-forms.checkbox canGate="update" :canResource="$server" wire:model.live="isSentinelEnabled"
                             label="Enable Sentinel" />
                         @if ($server->isSentinelEnabled())
@@ -91,13 +91,14 @@
 
                         <div class="flex flex-col gap-2">
                             <div class="flex flex-wrap gap-2 sm:flex-nowrap">
-                                <x-forms.input canGate="update" :canResource="$server"
+                                <x-forms.input canGate="update" :canResource="$server" type="number" min="1"
                                     id="sentinelMetricsRefreshRateSeconds" label="Metrics rate (seconds)" required
                                     helper="Interval used for gathering metrics. Lower values result in more disk space usage." />
-                                <x-forms.input canGate="update" :canResource="$server" id="sentinelMetricsHistoryDays"
+                                <x-forms.input canGate="update" :canResource="$server" type="number" min="1"
+                                    id="sentinelMetricsHistoryDays"
                                     label="Metrics history (days)" required
                                     helper="Number of days to retain metrics data for." />
-                                <x-forms.input canGate="update" :canResource="$server"
+                                <x-forms.input canGate="update" :canResource="$server" type="number" min="10"
                                     id="sentinelPushIntervalSeconds" label="Push interval (seconds)" required
                                     helper="Interval at which metrics data is sent to the collector." />
                             </div>

resources/views/livewire/server/show.blade.php

@@ -274,7 +274,7 @@
 
                     <div class="w-full">
                         @if (!$server->isLocalhost())
-                            <div class="w-96">
+                            <div class="w-full sm:w-96">
                                 @if ($isBuildServerLocked)
                                     <x-forms.checkbox disabled instantSave id="isBuildServer"
                                         helper="You can't use this server as a build server because it has defined resources."
@@ -289,6 +289,58 @@
                     </div>
                 </div>
             </form>
+            @if ($server->isFunctional())
+                <div class="pt-6">
+                    <div class="flex items-center gap-2 mb-3">
+                        <h3>Server Details</h3>
+                        @if ($server->server_metadata)
+                            <button wire:click="refreshServerMetadata" wire:loading.attr="disabled"
+                                wire:target="refreshServerMetadata" title="Refresh server details"
+                                class="dark:hover:fill-white fill-black dark:fill-warning">
+                                <svg wire:loading.remove wire:target="refreshServerMetadata" class="w-4 h-4"
+                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+                                </svg>
+                                <svg wire:loading wire:target="refreshServerMetadata" class="w-4 h-4 animate-spin"
+                                    viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M12 2a10.016 10.016 0 0 0-7 2.877V3a1 1 0 1 0-2 0v4.5a1 1 0 0 0 1 1h4.5a1 1 0 0 0 0-2H6.218A7.98 7.98 0 0 1 20 12a1 1 0 0 0 2 0A10.012 10.012 0 0 0 12 2zm7.989 13.5h-4.5a1 1 0 0 0 0 2h2.293A7.98 7.98 0 0 1 4 12a1 1 0 0 0-2 0a9.986 9.986 0 0 0 16.989 7.133V21a1 1 0 0 0 2 0v-4.5a1 1 0 0 0-1-1z" />
+                                </svg>
+                            </button>
+                        @endif
+                    </div>
+                    @if ($server->server_metadata)
+                        @php $meta = $server->server_metadata; @endphp
+                        <div class="grid grid-cols-2 gap-x-6 gap-y-2 text-sm lg:grid-cols-3">
+                            <div><span class="font-medium dark:text-neutral-400">OS:</span>
+                                {{ $meta['os'] ?? 'N/A' }}</div>
+                            <div><span class="font-medium dark:text-neutral-400">Arch:</span>
+                                {{ $meta['arch'] ?? 'N/A' }}</div>
+                            <div><span class="font-medium dark:text-neutral-400">Kernel:</span>
+                                {{ $meta['kernel'] ?? 'N/A' }}</div>
+                            <div><span class="font-medium dark:text-neutral-400">CPU Cores:</span>
+                                {{ $meta['cpus'] ?? 'N/A' }}</div>
+                            <div><span class="font-medium dark:text-neutral-400">RAM:</span>
+                                {{ isset($meta['memory_bytes']) ? round($meta['memory_bytes'] / 1073741824, 1) . ' GB' : 'N/A' }}
+                            </div>
+                            <div><span class="font-medium dark:text-neutral-400">Up Since:</span>
+                                {{ $meta['uptime_since'] ?? 'N/A' }}</div>
+                        </div>
+                        @if (isset($meta['collected_at']))
+                            <p class="mt-2 text-xs dark:text-neutral-500">Last updated:
+                                {{ \Carbon\Carbon::parse($meta['collected_at'])->diffForHumans() }}</p>
+                        @endif
+                    @else
+                        <x-forms.button wire:click="refreshServerMetadata" canGate="update"
+                            :canResource="$server">
+                            <span wire:loading.remove wire:target="refreshServerMetadata">Fetch Server
+                                Details</span>
+                            <span wire:loading wire:target="refreshServerMetadata">Fetching...</span>
+                        </x-forms.button>
+                    @endif
+                </div>
+            @endif
             @if (!$server->hetzner_server_id && $availableHetznerTokens->isNotEmpty())
                 <div class="pt-6">
                     <h3>Link to Hetzner Cloud</h3>

resources/views/livewire/settings-email.blade.php

@@ -53,7 +53,7 @@
                         <x-forms.input id="smtpUsername" label="SMTP Username" />
                         <x-forms.input id="smtpPassword" type="password" label="SMTP Password"
                             autocomplete="new-password" />
-                        <x-forms.input id="smtpTimeout" helper="Timeout value for sending emails." label="Timeout" />
+                        <x-forms.input id="smtpTimeout" type="number" helper="Timeout value for sending emails." label="Timeout" />
                     </div>
                 </div>
             </form>

resources/views/livewire/settings/advanced.blade.php

@@ -16,14 +16,34 @@
                 <div class="pb-4">Advanced settings for your Coolify instance.</div>
 
                 <div class="flex flex-col gap-1">
-                    <div class="md:w-96">
-                        <x-forms.checkbox instantSave id="is_registration_enabled"
-                            helper="Allow users to self-register. If disabled, only administrators can create accounts."
-                            label="Registration Allowed" />
-                    </div>
+                    @if ($is_registration_enabled)
+                        <div class="md:w-96" wire:key="registration-enabled">
+                            <x-forms.checkbox instantSave id="is_registration_enabled"
+                                helper="Allow users to self-register. If disabled, only administrators can create accounts."
+                                label="Registration Allowed" />
+                        </div>
+                    @else
+                        <div class="flex items-center justify-between gap-2 md:w-96"
+                            wire:key="registration-disabled">
+                            <label class="flex items-center gap-2">
+                                Registration Allowed
+                                <x-helper
+                                    helper="Allow users to self-register. If disabled, only administrators can create accounts.">
+                                </x-helper>
+                            </label>
+                            <x-modal-confirmation title="Enable Registration?" buttonTitle="Enable" isErrorButton
+                                submitAction="toggleRegistration" :actions="[
+                                    'Enables registration for everyone',
+                                ]"
+                                warningMessage="Enabling registration allows anyone to create an account on this instance. Make sure you understand the implications before proceeding."
+                                confirmationText="ENABLE REGISTRATION"
+                                confirmationLabel="Please type the confirmation text to enable registration."
+                                shortConfirmationLabel="Confirmation text" />
+                        </div>
+                    @endif
                     <div class="md:w-96">
                         <x-forms.checkbox instantSave id="do_not_track"
-                            helper="Opt out of reporting this instance to coolify.io's installation count. No other data is collected."
+                            helper="Opt out of anonymous usage tracking. When enabled, this instance will not report to coolify.io's installation count and will not send error reports to help improve Coolify."
                             label="Do Not Track" />
                     </div>
                     <h4 class="pt-4">DNS Settings</h4>
@@ -95,4 +115,4 @@
                 </div>
             </form>
         </div>
-</div>
+</div>

resources/views/livewire/shared-variables/environment/show.blade.php

@@ -26,7 +26,7 @@
         </div>
     @else
         <form wire:submit='submit' class="flex flex-col gap-2">
-            <x-forms.textarea canGate="update" :canResource="$environment" rows="20" class="whitespace-pre-wrap" id="variables" wire:model="variables"
+            <x-forms.textarea canGate="update" :canResource="$environment" rows="20" class="whitespace-pre-wrap" id="variables" wire:model="variables" monospace
                 label="Environment Shared Variables"></x-forms.textarea>
             <x-forms.button canGate="update" :canResource="$environment" type="submit" class="btn btn-primary">Save All Environment Variables</x-forms.button>
         </form>

resources/views/livewire/shared-variables/index.blade.php

@@ -5,27 +5,33 @@
     <div class="flex items-start gap-2">
         <h1>Shared Variables</h1>
     </div>
-    <div class="subtitle">Set Team / Project / Environment wide variables.</div>
+     <div class="subtitle">Set Team / Project / Environment / Server wide variables.</div>
 
-    <div class="flex flex-col gap-2 -mt-1">
-        <a class="coolbox group" href="{{ route('shared-variables.team.index') }}" {{ wireNavigate() }}>
-            <div class="flex flex-col justify-center mx-6">
-                <div class="box-title">Team wide</div>
-                <div class="box-description">Usable for all resources in a team.</div>
-            </div>
-        </a>
-        <a class="coolbox group" href="{{ route('shared-variables.project.index') }}" {{ wireNavigate() }}>
-            <div class="flex flex-col justify-center mx-6">
-                <div class="box-title">Project wide</div>
-                <div class="box-description">Usable for all resources in a project.</div>
-            </div>
-        </a>
-        <a class="coolbox group" href="{{ route('shared-variables.environment.index') }}" {{ wireNavigate() }}>
-            <div class="flex flex-col justify-center mx-6">
-                <div class="box-title">Environment wide</div>
-                <div class="box-description">Usable for all resources in an environment.</div>
-            </div>
-        </a>
+     <div class="flex flex-col gap-2 -mt-1">
+         <a class="coolbox group" href="{{ route('shared-variables.team.index') }}" {{ wireNavigate() }}>
+             <div class="flex flex-col justify-center mx-6">
+                 <div class="box-title">Team wide</div>
+                 <div class="box-description">Usable for all resources in a team.</div>
+             </div>
+         </a>
+         <a class="coolbox group" href="{{ route('shared-variables.project.index') }}" {{ wireNavigate() }}>
+             <div class="flex flex-col justify-center mx-6">
+                 <div class="box-title">Project wide</div>
+                 <div class="box-description">Usable for all resources in a project.</div>
+             </div>
+         </a>
+         <a class="coolbox group" href="{{ route('shared-variables.environment.index') }}" {{ wireNavigate() }}>
+             <div class="flex flex-col justify-center mx-6">
+                 <div class="box-title">Environment wide</div>
+                 <div class="box-description">Usable for all resources in an environment.</div>
+             </div>
+         </a>
+         <a class="coolbox group" href="{{ route('shared-variables.server.index') }}" {{ wireNavigate() }}>
+             <div class="flex flex-col justify-center mx-6">
+                 <div class="box-title">Server wide</div>
+                 <div class="box-description">Usable for all resources in a server.</div>
+             </div>
+         </a>
 
-    </div>
+     </div>
 </div>

resources/views/livewire/shared-variables/project/show.blade.php

@@ -28,7 +28,7 @@
         </div>
     @else
         <form wire:submit='submit' class="flex flex-col gap-2">
-            <x-forms.textarea canGate="update" :canResource="$project" rows="20" class="whitespace-pre-wrap" id="variables" wire:model="variables"
+            <x-forms.textarea canGate="update" :canResource="$project" rows="20" class="whitespace-pre-wrap" id="variables" wire:model="variables" monospace
                 label="Project Shared Variables"></x-forms.textarea>
             <x-forms.button canGate="update" :canResource="$project" type="submit" class="btn btn-primary">Save All Environment Variables</x-forms.button>
         </form>

resources/views/livewire/shared-variables/server/index.blade.php

@@ -0,0 +1,25 @@
+<div>
+    <x-slot:title>
+        Server Variables | Coolify
+    </x-slot>
+    <div class="flex gap-2">
+        <h1>Servers</h1>
+    </div>
+    <div class="subtitle">List of your servers.</div>
+    <div class="flex flex-col gap-2">
+        @forelse ($servers as $server)
+            <a class="coolbox group"
+                href="{{ route('shared-variables.server.show', ['server_uuid' => data_get($server, 'uuid')]) }}" {{ wireNavigate() }}>
+                <div class="flex flex-col justify-center mx-6 ">
+                    <div class="box-title">{{ $server->name }}</div>
+                    <div class="box-description ">
+                        {{ $server->description }}</div>
+                </div>
+            </a>
+        @empty
+            <div>
+                <div>No server found.</div>
+            </div>
+        @endforelse
+    </div>
+</div>

resources/views/livewire/shared-variables/server/show.blade.php

@@ -0,0 +1,36 @@
+<div>
+    <x-slot:title>
+        Server Variable | Coolify
+    </x-slot>
+    <div class="flex gap-2 items-center">
+        <h1>Shared Variables for {{ data_get($server, 'name') }}</h1>
+        @can('update', $server)
+            <x-modal-input buttonTitle="+ Add" title="New Shared Variable">
+                <livewire:project.shared.environment-variable.add :shared="true" />
+            </x-modal-input>
+        @endcan
+        <x-forms.button canGate="update" :canResource="$server" wire:click='switch'>{{ $view === 'normal' ? 'Developer view' : 'Normal view' }}</x-forms.button>
+    </div>
+    <div class="flex flex-wrap gap-1 subtitle">
+        <div>You can use these variables anywhere with</div>
+        <div class="dark:text-warning text-coollabs">@{{ server.VARIABLENAME }} </div>
+        <x-helper
+            helper="More info <a class='underline dark:text-white' href='https://coolify.io/docs/knowledge-base/environment-variables#shared-variables' target='_blank'>here</a>."></x-helper>
+    </div>
+    @if ($view === 'normal')
+        <div class="flex flex-col gap-2">
+            @forelse ($server->environment_variables->whereNotIn('key', ['COOLIFY_SERVER_UUID', 'COOLIFY_SERVER_NAME'])->sortBy('key') as $env)
+                <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}"
+                    :env="$env" type="server" />
+            @empty
+                <div>No environment variables found.</div>
+            @endforelse
+        </div>
+    @else
+        <form wire:submit='submit' class="flex flex-col gap-2">
+            <x-forms.textarea canGate="update" :canResource="$server" rows="20" class="whitespace-pre-wrap" id="variables" wire:model="variables"
+                label="Server Shared Variables"></x-forms.textarea>
+            <x-forms.button canGate="update" :canResource="$server" type="submit" class="btn btn-primary">Save All Environment Variables</x-forms.button>
+        </form>
+    @endif
+</div>

resources/views/livewire/shared-variables/team/index.blade.php

@@ -27,7 +27,7 @@
         </div>
     @else
         <form wire:submit='submit' class="flex flex-col gap-2">
-            <x-forms.textarea canGate="update" :canResource="$team" rows="20" class="whitespace-pre-wrap" id="variables" wire:model="variables"
+            <x-forms.textarea canGate="update" :canResource="$team" rows="20" class="whitespace-pre-wrap" id="variables" wire:model="variables" monospace
                 label="Team Shared Variables"></x-forms.textarea>
             <x-forms.button canGate="update" :canResource="$team" type="submit" class="btn btn-primary">Save All Environment Variables</x-forms.button>
         </form>

resources/views/livewire/source/github/change.blade.php

@@ -242,15 +242,15 @@
                             <div class="flex flex-col sm:flex-row items-start sm:items-end gap-2">
                                 <x-forms.select wire:model.live='webhook_endpoint' label="Webhook Endpoint"
                                     helper="All Git webhooks will be sent to this endpoint. <br><br>If you would like to use domain instead of IP address, set your Coolify instance's FQDN in the Settings menu.">
+                                    @if ($fqdn)
+                                        <option value="{{ $fqdn }}">Use {{ $fqdn }}</option>
+                                    @endif
                                     @if ($ipv4)
                                         <option value="{{ $ipv4 }}">Use {{ $ipv4 }}</option>
                                     @endif
                                     @if ($ipv6)
                                         <option value="{{ $ipv6 }}">Use {{ $ipv6 }}</option>
                                     @endif
-                                    @if ($fqdn)
-                                        <option value="{{ $fqdn }}">Use {{ $fqdn }}</option>
-                                    @endif
                                     @if (config('app.url'))
                                         <option value="{{ config('app.url') }}">Use {{ config('app.url') }}</option>
                                     @endif
@@ -271,7 +271,7 @@
                             <div>You need to register a GitHub App before using this source.</div>
                         @endif
 
-                        <div class="flex flex-col gap-2 pt-4 w-96">
+                        <div class="flex w-full flex-col gap-2 pt-4 sm:w-96">
                             <x-forms.checkbox disabled id="default_permissions" label="Mandatory"
                                 helper="Contents: read<br>Metadata: read<br>Email: read" />
                             <x-forms.checkbox id="preview_deployment_permissions" label="Preview Deployments "

resources/views/livewire/storage/form.blade.php

@@ -1,36 +1,5 @@
 <div>
     <form class="flex flex-col gap-2 pb-6" wire:submit='submit'>
-        <div class="flex items-start gap-2">
-            <div class="">
-                <h1>Storage Details</h1>
-                <div class="subtitle">{{ $storage->name }}</div>
-                <div class="flex items-center gap-2 pb-4">
-                    <div>Current Status:</div>
-                    @if ($isUsable)
-                        <span
-                            class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded dark:text-green-100 dark:bg-green-800">
-                            Usable
-                        </span>
-                    @else
-                        <span
-                            class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded dark:text-red-100 dark:bg-red-800">
-                            Not Usable
-                        </span>
-                    @endif
-                </div>
-            </div>
-            <x-forms.button canGate="update" :canResource="$storage" type="submit">Save</x-forms.button>
-
-            @can('delete', $storage)
-                <x-modal-confirmation title="Confirm Storage Deletion?" isErrorButton buttonTitle="Delete"
-                    submitAction="delete({{ $storage->id }})" :actions="[
-                        'The selected storage location will be permanently deleted from Coolify.',
-                        'If the storage location is in use by any backup jobs those backup jobs will only store the backup locally on the server.',
-                    ]" confirmationText="{{ $storage->name }}"
-                    confirmationLabel="Please confirm the execution of the actions by entering the Storage Name below"
-                    shortConfirmationLabel="Storage Name" :confirmWithPassword="false" step2ButtonText="Permanently Delete" />
-            @endcan
-        </div>
         <div class="flex gap-2">
             <x-forms.input canGate="update" :canResource="$storage" label="Name" id="name" />
             <x-forms.input canGate="update" :canResource="$storage" label="Description" id="description" />

resources/views/livewire/storage/resources.blade.php

@@ -0,0 +1,107 @@
+<div x-data="{ search: '' }">
+    <x-forms.input placeholder="Search resources..." x-model="search" id="null" />
+    @if ($groupedBackups->count() > 0)
+        <div class="overflow-x-auto pt-4">
+            <div class="inline-block min-w-full">
+                <div class="overflow-hidden">
+                    <table class="min-w-full">
+                        <thead>
+                            <tr>
+                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Database</th>
+                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Frequency</th>
+                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">Status</th>
+                                <th class="px-5 py-3 text-xs font-medium text-left uppercase">S3 Storage</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            @foreach ($groupedBackups as $backups)
+                                @php
+                                    $firstBackup = $backups->first();
+                                    $database = $firstBackup->database;
+                                    $databaseName = $database?->name ?? 'Deleted database';
+                                    $resourceLink = null;
+                                    $backupParams = null;
+                                    if ($database && $database instanceof \App\Models\ServiceDatabase) {
+                                        $service = $database->service;
+                                        if ($service) {
+                                            $environment = $service->environment;
+                                            $project = $environment?->project;
+                                            if ($project && $environment) {
+                                                $resourceLink = route('project.service.configuration', [
+                                                    'project_uuid' => $project->uuid,
+                                                    'environment_uuid' => $environment->uuid,
+                                                    'service_uuid' => $service->uuid,
+                                                ]);
+                                            }
+                                        }
+                                    } elseif ($database) {
+                                        $environment = $database->environment;
+                                        $project = $environment?->project;
+                                        if ($project && $environment) {
+                                            $resourceLink = route('project.database.backup.index', [
+                                                'project_uuid' => $project->uuid,
+                                                'environment_uuid' => $environment->uuid,
+                                                'database_uuid' => $database->uuid,
+                                            ]);
+                                            $backupParams = [
+                                                'project_uuid' => $project->uuid,
+                                                'environment_uuid' => $environment->uuid,
+                                                'database_uuid' => $database->uuid,
+                                            ];
+                                        }
+                                    }
+                                @endphp
+                                @foreach ($backups as $backup)
+                                    <tr class="dark:hover:bg-coolgray-300 hover:bg-neutral-100" x-show="search === '' || '{{ strtolower(addslashes($databaseName)) }}'.includes(search.toLowerCase()) || '{{ strtolower(addslashes($backup->frequency)) }}'.includes(search.toLowerCase())">
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                            @if ($resourceLink)
+                                                <a class="hover:underline" {{ wireNavigate() }} href="{{ $resourceLink }}">{{ $databaseName }} <x-internal-link /></a>
+                                            @else
+                                                {{ $databaseName }}
+                                            @endif
+                                        </td>
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                            @php
+                                                $backupLink = null;
+                                                if ($backupParams) {
+                                                    $backupLink = route('project.database.backup.execution', array_merge($backupParams, [
+                                                        'backup_uuid' => $backup->uuid,
+                                                    ]));
+                                                }
+                                            @endphp
+                                            @if ($backupLink)
+                                                <a class="hover:underline" {{ wireNavigate() }} href="{{ $backupLink }}">{{ $backup->frequency }} <x-internal-link /></a>
+                                            @else
+                                                {{ $backup->frequency }}
+                                            @endif
+                                        </td>
+                                        <td class="px-5 py-4 text-sm font-medium whitespace-nowrap">
+                                            @if ($backup->enabled)
+                                                <span class="text-green-500">Enabled</span>
+                                            @else
+                                                <span class="text-yellow-500">Disabled</span>
+                                            @endif
+                                        </td>
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                            <div class="flex items-center gap-2">
+                                                <select wire:model="selectedStorages.{{ $backup->id }}" class="w-full input">
+                                                    @foreach ($allStorages as $s3)
+                                                        <option value="{{ $s3->id }}" @disabled(!$s3->is_usable)>{{ $s3->name }}@if (!$s3->is_usable) (unusable)@endif</option>
+                                                    @endforeach
+                                                </select>
+                                                <x-forms.button wire:click="moveBackup({{ $backup->id }})">Save</x-forms.button>
+                                                <x-forms.button isError wire:click="disableS3({{ $backup->id }})" wire:confirm="Are you sure you want to disable S3 for this backup schedule?">Disable S3</x-forms.button>
+                                            </div>
+                                        </td>
+                                    </tr>
+                                @endforeach
+                            @endforeach
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    @else
+        <div class="pt-4">No backup schedules are using this storage.</div>
+    @endif
+</div>

resources/views/livewire/storage/show.blade.php

@@ -2,5 +2,51 @@
     <x-slot:title>
         {{ data_get_str($storage, 'name')->limit(10) }} >Storages | Coolify
     </x-slot>
-    <livewire:storage.form :storage="$storage" />
+
+    <div class="flex items-center gap-2">
+        <h1>Storage Details</h1>
+        @if ($storage->is_usable)
+            <span class="px-2 py-1 text-xs font-semibold text-green-800 bg-green-100 rounded dark:text-green-100 dark:bg-green-800">
+                Usable
+            </span>
+        @else
+            <span class="px-2 py-1 text-xs font-semibold text-red-800 bg-red-100 rounded dark:text-red-100 dark:bg-red-800">
+                Not Usable
+            </span>
+        @endif
+        <x-forms.button canGate="update" :canResource="$storage" wire:click="$dispatch('submitStorage')" :disabled="$currentRoute !== 'storage.show'">Save</x-forms.button>
+        @can('delete', $storage)
+            <x-modal-confirmation title="Confirm Storage Deletion?" isErrorButton buttonTitle="Delete"
+                submitAction="delete({{ $storage->id }})" :actions="array_filter([
+                    'The selected storage location will be permanently deleted from Coolify.',
+                    $backupCount > 0
+                        ? $backupCount . ' backup schedule(s) will be updated to no longer save to S3 and will only store backups locally on the server.'
+                        : null,
+                ])" confirmationText="{{ $storage->name }}"
+                confirmationLabel="Please confirm the execution of the actions by entering the Storage Name below"
+                shortConfirmationLabel="Storage Name" :confirmWithPassword="false" step2ButtonText="Permanently Delete" />
+        @endcan
+    </div>
+    <div class="subtitle">{{ $storage->name }}</div>
+
+    <div class="navbar-main">
+        <nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
+            <a class="{{ request()->routeIs('storage.show') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('storage.show', ['storage_uuid' => $storage->uuid]) }}">
+                General
+            </a>
+            <a class="{{ request()->routeIs('storage.resources') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('storage.resources', ['storage_uuid' => $storage->uuid]) }}">
+                Resources
+            </a>
+        </nav>
+    </div>
+
+    <div class="pt-4">
+    @if ($currentRoute === 'storage.show')
+        <livewire:storage.form :storage="$storage" />
+    @elseif ($currentRoute === 'storage.resources')
+        <livewire:storage.resources :storage="$storage" :key="'resources-'.uniqid()" />
+    @endif
+    </div>
 </div>

resources/views/livewire/subscription/actions.blade.php

@@ -35,44 +35,44 @@
         }" @success.window="preview = null; showModal = false; qty = $wire.server_limits"
             @keydown.escape.window="if (showModal) { closeAdjust(); }" class="-mt-2">
             <h3 class="pb-2">Plan Overview</h3>
-            <div class="grid grid-cols-1 gap-4 xl:grid-cols-3">
-                {{-- Current Plan Card --}}
-                <div class="p-5 rounded border dark:bg-coolgray-100 bg-white border-neutral-200 dark:border-coolgray-400">
-                    <div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1">Current Plan</div>
-                    <div class="text-xl font-bold dark:text-warning">
+            <div class="space-y-2">
+                <div class="text-sm">
+                    <span class="text-neutral-500">Plan:</span>
+                    <span class="dark:text-warning font-medium">
                         @if (data_get(currentTeam(), 'subscription')->type() == 'dynamic')
                             Pay-as-you-go
                         @else
                             {{ data_get(currentTeam(), 'subscription')->type() }}
                         @endif
-                    </div>
-                    <div class="pt-2 text-sm">
+                    </span>
+                    <span class="text-neutral-500">&middot; {{ $billingInterval === 'yearly' ? 'Yearly' : 'Monthly' }}</span>
+                    <span class="text-neutral-500">&middot;</span>
+                    @if (currentTeam()->subscription->stripe_cancel_at_period_end)
+                        <span class="text-red-500 font-medium">Cancelling at end of period</span>
+                    @else
+                        <span class="text-green-500 font-medium">Active</span>
+                    @endif
+                </div>
+                <div class="text-sm flex items-center gap-2 flex-wrap">
+                    <span>
+                        <span class="text-neutral-500">Active servers:</span>
+                        <span class="font-medium {{ currentTeam()->serverOverflow() ? 'text-red-500' : 'dark:text-white' }}">{{ currentTeam()->servers->count() }}</span>
+                        <span class="text-neutral-500">/</span>
+                        <span class="font-medium dark:text-white" x-text="current"></span>
+                        <span class="text-neutral-500">paid</span>
+                    </span>
+                    <x-forms.button isHighlighted @click="openAdjust()">Adjust</x-forms.button>
+                </div>
+                <div class="text-sm text-neutral-500">
+                    @if ($refundCheckLoading)
+                        <x-loading text="Loading..." />
+                    @elseif ($nextBillingDate)
                         @if (currentTeam()->subscription->stripe_cancel_at_period_end)
-                            <span class="text-red-500 font-medium">Cancelling at end of period</span>
+                            Cancels on <span class="dark:text-white font-medium">{{ $nextBillingDate }}</span>
                         @else
-                            <span class="text-green-500 font-medium">Active</span>
-                            <span class="text-neutral-500"> &middot; Invoice
-                                {{ currentTeam()->subscription->stripe_invoice_paid ? 'paid' : 'not paid' }}</span>
+                            Next billing <span class="dark:text-white font-medium">{{ $nextBillingDate }}</span>
                         @endif
-                    </div>
-                </div>
-
-                {{-- Paid Servers Card --}}
-                <div class="p-5 rounded border dark:bg-coolgray-100 bg-white border-neutral-200 dark:border-coolgray-400 cursor-pointer hover:border-warning/50 transition-colors"
-                    @click="openAdjust()">
-                    <div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1">Paid Servers</div>
-                    <div class="text-xl font-bold dark:text-white" x-text="current"></div>
-                    <div class="pt-2 text-sm text-neutral-500">Click to adjust</div>
-                </div>
-
-                {{-- Active Servers Card --}}
-                <div
-                    class="p-5 rounded border dark:bg-coolgray-100 bg-white border-neutral-200 dark:border-coolgray-400 {{ currentTeam()->serverOverflow() ? 'border-red-500 dark:border-red-500' : '' }}">
-                    <div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1">Active Servers</div>
-                    <div class="text-xl font-bold {{ currentTeam()->serverOverflow() ? 'text-red-500' : 'dark:text-white' }}">
-                        {{ currentTeam()->servers->count() }}
-                    </div>
-                    <div class="pt-2 text-sm text-neutral-500">Currently running</div>
+                    @endif
                 </div>
             </div>
 
@@ -99,9 +99,9 @@
                         x-transition:leave-end="opacity-0 -translate-y-2 sm:scale-95"
                         class="relative w-full border rounded-sm min-w-full lg:min-w-[36rem] max-w-[48rem] max-h-[calc(100vh-2rem)] bg-neutral-100 border-neutral-400 dark:bg-base dark:border-coolgray-300 flex flex-col">
                         <div class="flex justify-between items-center py-6 px-7 shrink-0">
-                            <h3 class="pr-8 text-2xl font-bold">Adjust Server Limit</h3>
+                            <h3 class="text-2xl font-bold">Adjust Server Limit</h3>
                             <button @click="closeAdjust()"
-                                class="flex absolute top-2 right-2 justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
+                                class="flex justify-center items-center w-8 h-8 rounded-full dark:text-white hover:bg-coolgray-300">
                                 <svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                                     viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
                                     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
@@ -139,24 +139,29 @@
                                     <div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1.5">Due now</div>
                                     <div class="flex justify-between gap-6 text-sm font-bold">
                                         <span class="dark:text-white">Prorated charge</span>
-                                        <span class="dark:text-warning" x-text="fmt(preview.due_now)"></span>
+                                        <span class="dark:text-warning" x-text="fmt(preview?.due_now)"></span>
                                     </div>
                                     <p class="text-xs text-neutral-500 pt-1">Charged immediately to your payment method.</p>
                                 </div>
                                 <div>
-                                    <div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1.5">Next billing cycle</div>
+                                    <div class="text-xs font-bold text-neutral-500 uppercase tracking-wide pb-1.5">
+                                        Next billing cycle
+                                        @if ($nextBillingDate)
+                                            <span class="normal-case font-normal">&middot; {{ $nextBillingDate }}</span>
+                                        @endif
+                                    </div>
                                     <div class="space-y-1.5">
                                         <div class="flex justify-between gap-6 text-sm">
-                                            <span class="text-neutral-500" x-text="preview.quantity + ' servers × ' + fmt(preview.unit_price)"></span>
-                                            <span class="dark:text-white" x-text="fmt(preview.recurring_subtotal)"></span>
+                                            <span class="text-neutral-500" x-text="preview?.quantity + ' servers × ' + fmt(preview?.unit_price)"></span>
+                                            <span class="dark:text-white" x-text="fmt(preview?.recurring_subtotal)"></span>
                                         </div>
                                         <div class="flex justify-between gap-6 text-sm" x-show="preview?.tax_description" x-cloak>
                                             <span class="text-neutral-500" x-text="preview?.tax_description"></span>
                                             <span class="dark:text-white" x-text="fmt(preview?.recurring_tax)"></span>
                                         </div>
                                         <div class="flex justify-between gap-6 text-sm font-bold pt-1.5 border-t dark:border-coolgray-400 border-neutral-200">
-                                            <span class="dark:text-white">Total / month</span>
-                                            <span class="dark:text-white" x-text="fmt(preview.recurring_total)"></span>
+                                            <span class="dark:text-white">Total / <span x-text="preview?.billing_interval === 'year' ? 'year' : 'month'">month</span></span>
+                                            <span class="dark:text-white" x-text="fmt(preview?.recurring_total)"></span>
                                         </div>
                                     </div>
                                 </div>
@@ -175,7 +180,7 @@
                                     warningMessage="This will update your subscription and charge the prorated amount to your payment method."
                                     step2ButtonText="Confirm & Pay">
                                     <x-slot:content>
-                                        <x-forms.button @click="$wire.set('quantity', qty)">
+                                        <x-forms.button class="w-full" @click="$wire.set('quantity', qty)">
                                             Update Server Limit
                                         </x-forms.button>
                                     </x-slot:content>
@@ -194,11 +199,10 @@
             </template>
         </section>
 
-        {{-- Billing, Refund & Cancellation --}}
+        {{-- Manage Subscription --}}
         <section>
             <h3 class="pb-2">Manage Subscription</h3>
             <div class="flex flex-wrap items-center gap-2">
-                {{-- Billing --}}
                 <x-forms.button class="gap-2" wire:click='stripeCustomerPortal'>
                     <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24"
                         stroke-width="1.5" stroke="currentColor">
@@ -207,8 +211,13 @@
                     </svg>
                     Manage Billing on Stripe
                 </x-forms.button>
+            </div>
+        </section>
 
-                {{-- Resume or Cancel --}}
+        {{-- Cancel Subscription --}}
+        <section>
+            <h3 class="pb-2">Cancel Subscription</h3>
+            <div class="flex flex-wrap items-center gap-2">
                 @if (currentTeam()->subscription->stripe_cancel_at_period_end)
                     <x-forms.button wire:click="resumeSubscription">Resume Subscription</x-forms.button>
                 @else
@@ -231,10 +240,18 @@
                         confirmationLabel="Enter your team name to confirm"
                         shortConfirmationLabel="Team Name" step2ButtonText="Permanently Cancel" />
                 @endif
+            </div>
+            @if (currentTeam()->subscription->stripe_cancel_at_period_end)
+                <p class="mt-2 text-sm text-neutral-500">Your subscription is set to cancel at the end of the billing period.</p>
+            @endif
+        </section>
 
-                {{-- Refund --}}
+        {{-- Refund --}}
+        <section>
+            <h3 class="pb-2">Refund</h3>
+            <div class="flex flex-wrap items-center gap-2">
                 @if ($refundCheckLoading)
-                    <x-loading text="Checking refund..." />
+                    <x-forms.button disabled>Request Full Refund</x-forms.button>
                 @elseif ($isRefundEligible && !currentTeam()->subscription->stripe_cancel_at_period_end)
                     <x-modal-confirmation title="Request Full Refund?" buttonTitle="Request Full Refund"
                         isErrorButton submitAction="refundSubscription"
@@ -245,18 +262,21 @@
                         ]" confirmationText="{{ currentTeam()->name }}"
                         confirmationLabel="Enter your team name to confirm" shortConfirmationLabel="Team Name"
                         step2ButtonText="Confirm Refund & Cancel" />
+                @else
+                    <x-forms.button disabled>Request Full Refund</x-forms.button>
                 @endif
             </div>
-
-            {{-- Contextual notes --}}
-            @if ($isRefundEligible && !currentTeam()->subscription->stripe_cancel_at_period_end)
-                <p class="mt-2 text-sm text-neutral-500">Eligible for a full refund &mdash; <strong class="dark:text-warning">{{ $refundDaysRemaining }}</strong> days remaining.</p>
-            @elseif ($refundAlreadyUsed)
-                <p class="mt-2 text-sm text-neutral-500">Refund already processed. Each team is eligible for one refund only.</p>
-            @endif
-            @if (currentTeam()->subscription->stripe_cancel_at_period_end)
-                <p class="mt-2 text-sm text-neutral-500">Your subscription is set to cancel at the end of the billing period.</p>
-            @endif
+            <p class="mt-2 text-sm text-neutral-500">
+                @if ($refundCheckLoading)
+                    Checking refund eligibility...
+                @elseif ($isRefundEligible && !currentTeam()->subscription->stripe_cancel_at_period_end)
+                    Eligible for a full refund &mdash; <strong class="dark:text-warning">{{ $refundDaysRemaining }}</strong> days remaining.
+                @elseif ($refundAlreadyUsed)
+                    Refund already processed. Each team is eligible for one refund only.
+                @else
+                    Not eligible for a refund.
+                @endif
+            </p>
         </section>
 
         <div class="text-sm text-neutral-500">