Merge remote-tracking branch 'origin/next' into feat/hetzner-firewalls-and-internal-networks

resources/css/app.css

@@ -53,6 +53,13 @@
   If we ever want to remove these styles, we need to add an explicit border
   color utility to any element that depends on these defaults.
 */
+
+@layer components {
+    .terminal-mobile-key {
+        @apply min-h-10 rounded-md border border-white/10 bg-white/10 px-2 py-2 text-sm font-semibold text-white shadow-inner active:bg-white/25;
+    }
+}
+
 @layer base {
 
     *,

resources/css/utilities.css

@@ -122,7 +122,11 @@
 }
 
 @utility button {
-    @apply flex gap-2 justify-center items-center px-2 h-8 text-sm text-black normal-case rounded-sm border-2 outline-0 cursor-pointer font-medium bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-coolgray-100 dark:text-white dark:hover:text-white dark:hover:bg-coolgray-200 dark:border-coolgray-300 hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-neutral-600 disabled:border-transparent disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base;
+    @apply flex gap-2 justify-center items-center px-2 h-8 text-sm text-black normal-case rounded-sm border-2 outline-0 cursor-pointer font-medium bg-white border-neutral-200 hover:bg-neutral-100 dark:bg-coolgray-100 dark:text-white dark:hover:text-white dark:hover:bg-coolgray-200 dark:border-coolgray-300 hover:text-black disabled:cursor-not-allowed min-w-fit dark:disabled:text-neutral-600 disabled:border-neutral-200 dark:disabled:border-coolgray-300 disabled:hover:bg-transparent disabled:bg-transparent disabled:text-neutral-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base;
+}
+
+@utility auth-tooltip {
+    @apply fixed z-[99] px-2.5 py-1.5 text-xs rounded-sm pointer-events-none whitespace-nowrap text-neutral-700 bg-neutral-200 dark:text-neutral-300 dark:bg-coolgray-400;
 }
 
 @utility alert-success {
@@ -181,7 +185,7 @@
     @apply flex gap-3 items-center px-2 py-1 w-full text-sm dark:hover:bg-coolgray-100 dark:hover:text-white hover:bg-neutral-300 rounded-sm truncate min-w-0;
 }
 @utility menu-item-icon {
-    @apply flex-shrink-0 w-6 h-6 dark:hover:text-white;
+    @apply shrink-0 size-4 dark:hover:text-white;
 }
 
 @utility menu-item-label {
@@ -201,7 +205,7 @@
 }
 
 @utility sub-menu-item-icon {
-    @apply flex-shrink-0 w-4 h-4 dark:hover:text-white;
+    @apply shrink-0 size-4 dark:hover:text-white;
 }
 
 @utility heading-item-active {
@@ -343,3 +347,20 @@
 @utility log-info {
     @apply bg-blue-500/10 dark:bg-blue-500/15;
 }
+
+@media (min-width: 1024px) {
+    .sidebar-collapsed .menu-item {
+        justify-content: center;
+        width: var(--button-h, 2rem);
+        height: var(--button-h, 2rem);
+        min-height: var(--button-h, 2rem);
+        padding-left: 0;
+        padding-right: 0;
+        gap: 0;
+        margin-inline: auto;
+    }
+
+    .sidebar-collapsed .sidebar-collapsed-label {
+        display: none;
+    }
+}

resources/js/app.js

@@ -1,5 +1,13 @@
 import { initializeTerminalComponent } from './terminal.js';
 
+// Livewire 3.5.19+ re-applies `x-cloak` to morphed elements during wire:navigate
+// (via replaceHtmlAttributes). With `[x-cloak]{display:none}` on the app wrapper,
+// this blanks the whole page on every navigation until Alpine re-processes it.
+// Strip leftover x-cloak after each navigation; the initial-load FOUC guard stays.
+document.addEventListener('livewire:navigated', () => {
+    document.querySelectorAll('[x-cloak]').forEach((el) => el.removeAttribute('x-cloak'));
+});
+
 ['livewire:navigated', 'alpine:init'].forEach((event) => {
     document.addEventListener(event, () => {
         // tree-shaking

resources/js/terminal-session-timer.js

@@ -0,0 +1,22 @@
+export const MAX_TERMINAL_SESSION_SECONDS = 8 * 60 * 60;
+export const TERMINAL_SESSION_WARNING_SECONDS = 30 * 60;
+export const TERMINAL_SESSION_DANGER_SECONDS = 5 * 60;
+
+export function formatTerminalSessionRemainingTime(seconds) {
+    const remainingSeconds = Math.max(0, Math.ceil(seconds));
+
+    if (remainingSeconds === 0) {
+        return 'expired';
+    }
+
+    const totalMinutes = Math.floor(remainingSeconds / 60);
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    const secondsPart = remainingSeconds % 60;
+
+    if (hours === 0) {
+        return `${minutes}m ${String(secondsPart).padStart(2, '0')}s`;
+    }
+
+    return `${hours}h ${String(minutes).padStart(2, '0')}m ${String(secondsPart).padStart(2, '0')}s`;
+}

resources/js/terminal.js

@@ -1,5 +1,11 @@
 import { Terminal } from '@xterm/xterm';
 import '@xterm/xterm/css/xterm.css';
+import {
+    MAX_TERMINAL_SESSION_SECONDS,
+    TERMINAL_SESSION_DANGER_SECONDS,
+    TERMINAL_SESSION_WARNING_SECONDS,
+    formatTerminalSessionRemainingTime,
+} from './terminal-session-timer.js';
 import { FitAddon } from '@xterm/addon-fit';
 
 const terminalDebugEnabled = import.meta.env.DEV;
@@ -42,12 +48,20 @@ export function initializeTerminalComponent() {
             maxHeartbeatMisses: 3,
             // Command buffering for race condition prevention
             pendingCommand: null,
+            // Last successfully sent SSH command — replayed after a transient reconnect
+            // so the PTY respawns automatically. Cleared on intentional terminations
+            // (pty-exited, unprocessable).
+            lastSentCommand: null,
             // Resize handling
             resizeObserver: null,
             resizeTimeout: null,
             // Visibility handling - prevent disconnects when tab loses focus
             isDocumentVisible: true,
             wasConnectedBeforeHidden: false,
+            mobileToolbarCollapsed: false,
+            terminalSessionStartedAt: null,
+            terminalSessionRemainingSeconds: null,
+            terminalSessionCountdownInterval: null,
 
             init() {
                 this.setupTerminal();
@@ -75,8 +89,6 @@ export function initializeTerminalComponent() {
                     focusWhenReady();
                 });
 
-                this.keepAliveInterval = setInterval(this.keepAlive.bind(this), 30000);
-
                 this.$watch('terminalActive', (active) => {
                     if (!active && this.keepAliveInterval) {
                         clearInterval(this.keepAliveInterval);
@@ -133,6 +145,7 @@ export function initializeTerminalComponent() {
                 this.clearAllTimers();
                 this.connectionState = 'disconnected';
                 this.pendingCommand = null;
+                this.resetTerminalSessionCountdown();
                 if (this.socket) {
                     this.socket.close(1000, 'Client cleanup');
                 }
@@ -150,24 +163,93 @@ export function initializeTerminalComponent() {
             },
 
             clearAllTimers() {
-                [this.keepAliveInterval, this.reconnectInterval, this.connectionTimeoutId, this.pingTimeoutId, this.resizeTimeout]
-                    .forEach(timer => timer && clearInterval(timer));
+                if (this.keepAliveInterval) {
+                    clearInterval(this.keepAliveInterval);
+                }
+                [this.reconnectInterval, this.connectionTimeoutId, this.pingTimeoutId, this.resizeTimeout]
+                    .forEach(timer => timer && clearTimeout(timer));
+                if (this.terminalSessionCountdownInterval) {
+                    clearInterval(this.terminalSessionCountdownInterval);
+                }
                 this.keepAliveInterval = null;
                 this.reconnectInterval = null;
                 this.connectionTimeoutId = null;
                 this.pingTimeoutId = null;
                 this.resizeTimeout = null;
+                this.terminalSessionCountdownInterval = null;
+            },
+
+            resetTerminalSessionCountdown() {
+                if (this.terminalSessionCountdownInterval) {
+                    clearInterval(this.terminalSessionCountdownInterval);
+                }
+
+                this.terminalSessionStartedAt = null;
+                this.terminalSessionRemainingSeconds = null;
+                this.terminalSessionCountdownInterval = null;
+            },
+
+            startTerminalSessionCountdown() {
+                this.resetTerminalSessionCountdown();
+                this.terminalSessionStartedAt = Date.now();
+                this.updateTerminalSessionCountdown();
+                this.terminalSessionCountdownInterval = setInterval(() => {
+                    this.updateTerminalSessionCountdown();
+                }, 1000);
+            },
+
+            updateTerminalSessionCountdown() {
+                if (!this.terminalSessionStartedAt) {
+                    this.terminalSessionRemainingSeconds = null;
+                    return;
+                }
+
+                const elapsedSeconds = (Date.now() - this.terminalSessionStartedAt) / 1000;
+                this.terminalSessionRemainingSeconds = Math.max(0, MAX_TERMINAL_SESSION_SECONDS - elapsedSeconds);
+            },
+
+            terminalSessionRemainingLabel() {
+                if (this.terminalSessionRemainingSeconds === null) {
+                    return '';
+                }
+
+                return `Session expires in ${formatTerminalSessionRemainingTime(this.terminalSessionRemainingSeconds)}`;
+            },
+
+            terminalSessionTimerClass() {
+                if (this.terminalSessionRemainingSeconds === null) {
+                    return 'text-neutral-300 bg-black/70 border-white/10';
+                }
+
+                if (this.terminalSessionRemainingSeconds <= TERMINAL_SESSION_DANGER_SECONDS) {
+                    return 'text-red-200 bg-red-950/80 border-red-500/40';
+                }
+
+                if (this.terminalSessionRemainingSeconds <= TERMINAL_SESSION_WARNING_SECONDS) {
+                    return 'text-yellow-200 bg-yellow-950/80 border-yellow-500/40';
+                }
+
+                return 'text-neutral-300 bg-black/70 border-white/10';
             },
 
             resetTerminal() {
                 if (this.term) {
-                    this.$wire.dispatch('error', 'Terminal websocket connection lost.');
-                    this.term.reset();
-                    this.term.clear();
+                    this.$wire.dispatch('error', 'Terminal websocket connection lost. Reconnecting...');
+                    // Preserve scrollback so the user keeps the context of their previous
+                    // session. Print a visible marker so they know where the disconnect
+                    // happened. Old PTY shell state cannot be restored — this is purely
+                    // a visual carry-over.
+                    try {
+                        const stamp = new Date().toLocaleTimeString();
+                        this.term.write(`\r\n\x1b[33m── Connection lost at ${stamp}, reconnecting... ──\x1b[0m\r\n`);
+                    } catch (_) {
+                        // ignore — terminal not ready to receive writes
+                    }
                     this.pendingWrites = 0;
                     this.paused = false;
                     this.commandBuffer = '';
                     this.pendingCommand = null;
+                    this.resetTerminalSessionCountdown();
 
                     // Notify parent component that terminal disconnected
                     this.$wire.dispatch('terminalDisconnected');
@@ -276,10 +358,22 @@ export function initializeTerminalComponent() {
                     this.connectionTimeoutId = null;
                 }
 
-                // Flush any buffered command from before WebSocket was ready
+                // Flush any buffered command from before WebSocket was ready, otherwise
+                // replay the last command so a transient reconnect respawns the PTY
+                // automatically without requiring the user to click Connect again.
                 if (this.pendingCommand) {
                     this.sendMessage(this.pendingCommand);
                     this.pendingCommand = null;
+                } else if (this.lastSentCommand) {
+                    logTerminal('log', '[Terminal] Replaying last command after reconnect.');
+                    this.sendMessage(this.lastSentCommand);
+                }
+
+                // (Re)start application-level keepalive on every successful connect.
+                // Server-side WebSocket protocol pings are the primary heartbeat; this
+                // adds a JSON-level ping in case the server-side is older or restarting.
+                if (!this.keepAliveInterval) {
+                    this.keepAliveInterval = setInterval(this.keepAlive.bind(this), 30000);
                 }
 
                 // Start ping timeout monitoring
@@ -303,6 +397,7 @@ export function initializeTerminalComponent() {
 
                 this.connectionState = 'disconnected';
                 this.clearAllTimers();
+                this.resetTerminalSessionCountdown();
 
                 // Only reset terminal and reconnect if it wasn't a clean close
                 if (event.code !== 1000) {
@@ -354,6 +449,9 @@ export function initializeTerminalComponent() {
             sendMessage(message) {
                 if (this.socket && this.socket.readyState === WebSocket.OPEN) {
                     this.socket.send(JSON.stringify(message));
+                    if (message && message.command) {
+                        this.lastSentCommand = message;
+                    }
                 } else {
                     logTerminal('warn', '[Terminal] WebSocket not ready, message not sent:', message);
                 }
@@ -368,8 +466,6 @@ export function initializeTerminalComponent() {
             },
 
             handleSocketMessage(event) {
-                logTerminal('log', '[Terminal] Received WebSocket message:', event.data);
-
                 // Handle pong responses
                 if (event.data === 'pong') {
                     this.heartbeatMissed = 0;
@@ -387,9 +483,18 @@ export function initializeTerminalComponent() {
                         this.term.open(document.getElementById('terminal'));
                         this.term._initialized = true;
                     } else {
-                        this.term.reset();
+                        // Already initialized — this is a reconnect or a follow-up command.
+                        // Preserve scrollback so the user keeps context. Write a visible
+                        // separator so the new shell prompt is easy to spot.
+                        try {
+                            const stamp = new Date().toLocaleTimeString();
+                            this.term.write(`\r\n\x1b[32m── Reconnected at ${stamp} ──\x1b[0m\r\n`);
+                        } catch (_) {
+                            // ignore — fall through; xterm will render the new prompt anyway
+                        }
                     }
                     this.terminalActive = true;
+                    this.startTerminalSessionCountdown();
                     this.term.focus();
                     document.querySelector('.xterm-viewport').classList.add('scrollbar', 'rounded-sm');
 
@@ -415,14 +520,20 @@ export function initializeTerminalComponent() {
                 } else if (event.data === 'unprocessable') {
                     if (this.term) this.term.reset();
                     this.terminalActive = false;
+                    this.lastSentCommand = null;
+                    this.resetTerminalSessionCountdown();
                     this.message = '(sorry, something went wrong, please try again)';
 
                     // Notify parent component that terminal connection failed
                     this.$wire.dispatch('terminalDisconnected');
                 } else if (event.data === 'pty-exited') {
+                    this.fullscreen = false;
+                    this.mobileToolbarCollapsed = false;
                     this.terminalActive = false;
+                    this.resetTerminalSessionCountdown();
                     this.term.reset();
                     this.commandBuffer = '';
+                    this.lastSentCommand = null;
 
                     // Notify parent component that terminal disconnected
                     this.$wire.dispatch('terminalDisconnected');
@@ -433,6 +544,7 @@ export function initializeTerminalComponent() {
                     logTerminal('error', '[Terminal] Backend rejected terminal startup:', event.data);
                     this.$wire.dispatch('error', event.data);
                     this.terminalActive = false;
+                    this.resetTerminalSessionCountdown();
                 } else {
                     try {
                         this.pendingWrites++;
@@ -493,12 +605,65 @@ export function initializeTerminalComponent() {
                 });
             },
 
-            keepAlive() {
-                // Skip keepalive when document is hidden to prevent unnecessary disconnects
-                if (!this.isDocumentVisible) {
+
+            sendTerminalInput(data) {
+                if (!this.term || !this.terminalActive) {
                     return;
                 }
 
+                this.term.focus();
+                this.sendMessage({ message: data });
+            },
+
+            sendTerminalControl(sequence) {
+                const terminalSequences = {
+                    arrowUp: '\x1b[A',
+                    arrowDown: '\x1b[B',
+                    arrowRight: '\x1b[C',
+                    arrowLeft: '\x1b[D',
+                    tab: '\t',
+                    escape: '\x1b',
+                    ctrlC: '\x03'
+                };
+
+                if (terminalSequences[sequence]) {
+                    this.sendTerminalInput(terminalSequences[sequence]);
+                }
+            },
+
+            async pasteFromClipboard() {
+                if (!navigator.clipboard?.readText) {
+                    this.$wire.dispatch('error', 'Clipboard paste is not available in this browser.');
+                    return;
+                }
+
+                try {
+                    const text = await navigator.clipboard.readText();
+                    if (text) {
+                        this.sendTerminalInput(text);
+                    }
+                } catch (error) {
+                    logTerminal('warn', '[Terminal] Clipboard paste failed:', error);
+                    this.$wire.dispatch('error', 'Clipboard paste permission was denied.');
+                }
+            },
+
+            async copyTerminalSelection() {
+                const selection = this.term?.getSelection();
+                if (!selection) {
+                    this.$wire.dispatch('error', 'Select terminal text before copying.');
+                    return;
+                }
+
+                try {
+                    await navigator.clipboard.writeText(selection);
+                } catch (error) {
+                    logTerminal('warn', '[Terminal] Clipboard copy failed:', error);
+                    this.$wire.dispatch('error', 'Clipboard copy permission was denied.');
+                }
+            },
+
+            keepAlive() {
                 if (this.socket && this.socket.readyState === WebSocket.OPEN) {
                     this.sendMessage({ ping: true });
                 } else if (this.connectionState === 'disconnected') {
@@ -524,10 +689,23 @@ export function initializeTerminalComponent() {
                     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
+                        // Connection may be half-open after Cloudflare/proxy idle drop while hidden.
+                        // Probe with a short timeout (5s) instead of the default 35s — force a
+                        // reconnect quickly if no pong arrives so the user is not stuck typing
+                        // into a dead socket.
                         this.heartbeatMissed = 0;
                         this.sendMessage({ ping: true });
-                        this.resetPingTimeout();
+                        if (this.pingTimeoutId) {
+                            clearTimeout(this.pingTimeoutId);
+                        }
+                        this.pingTimeoutId = setTimeout(() => {
+                            logTerminal('warn', '[Terminal] Visibility-resume ping timed out, forcing reconnect.');
+                            try {
+                                this.socket.close(4000, 'Visibility-resume timeout');
+                            } catch (_) {
+                                // ignore — close handler will run on its own
+                            }
+                        }, 5000);
                     } else if (this.wasConnectedBeforeHidden && this.connectionState !== 'connected') {
                         // Was connected before but now disconnected - attempt reconnection
                         this.reconnectAttempts = 0;
@@ -576,15 +754,20 @@ export function initializeTerminalComponent() {
                     // Force a refresh of the fit addon dimensions
                     this.fitAddon.fit();
 
-                    // Get fresh dimensions after fit
-                    const wrapperHeight = this.$refs.terminalWrapper.clientHeight;
-                    const wrapperWidth = this.$refs.terminalWrapper.clientWidth;
+                    // Get fresh dimensions from the terminal element itself. The mobile
+                    // toolbar can live beside the terminal in normal flow, so wrapper dimensions
+                    // would include controls that should not be counted as terminal rows.
+                    const terminalElement = document.getElementById('terminal');
+                    const terminalHeight = terminalElement?.clientHeight || this.$refs.terminalWrapper.clientHeight;
+                    const terminalWidth = terminalElement?.clientWidth || this.$refs.terminalWrapper.clientWidth;
 
-                    // Account for terminal container padding (px-2 py-1 = 8px left/right, 4px top/bottom)
-                    const horizontalPadding = 16; // 8px * 2 (left + right)
-                    const verticalPadding = 8; // 4px * 2 (top + bottom)
-                    const height = wrapperHeight - verticalPadding;
-                    const width = wrapperWidth - horizontalPadding;
+                    // Account for terminal container padding. In fullscreen mobile mode,
+                    // the fixed toolbar sits over the terminal container, so reserve its height
+                    // when calculating rows to keep the prompt above the controls.
+                    const horizontalPadding = 16; // px-2 = 8px * 2 (left + right)
+                    const verticalPadding = 8; // py-1 = 4px * 2 (top + bottom)
+                    const height = terminalHeight - verticalPadding;
+                    const width = terminalWidth - horizontalPadding;
 
                     // Check if dimensions are valid
                     if (height <= 0 || width <= 0) {

resources/js/terminal.test.js

@@ -0,0 +1,15 @@
+import test from 'node:test';
+import assert from 'node:assert/strict';
+import {
+    MAX_TERMINAL_SESSION_SECONDS,
+    formatTerminalSessionRemainingTime,
+} from './terminal-session-timer.js';
+
+test('formatTerminalSessionRemainingTime formats the eight hour terminal limit countdown', () => {
+    assert.equal(MAX_TERMINAL_SESSION_SECONDS, 8 * 60 * 60);
+    assert.equal(formatTerminalSessionRemainingTime(MAX_TERMINAL_SESSION_SECONDS), '8h 00m 00s');
+    assert.equal(formatTerminalSessionRemainingTime((7 * 60 * 60) + (59 * 60) + 59), '7h 59m 59s');
+    assert.equal(formatTerminalSessionRemainingTime(65 * 60), '1h 05m 00s');
+    assert.equal(formatTerminalSessionRemainingTime(59), '0m 59s');
+    assert.equal(formatTerminalSessionRemainingTime(0), 'expired');
+});

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

@@ -3,34 +3,84 @@
         Advanced
     </x-slot>
     @if ($application->status === 'running')
-        <div class="dropdown-iteme" wire:click='force_deploy_without_cache'>
-            <svg 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="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
-                <path
-                    d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
-                <path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
-                <path d="M3 3l18 18" />
-            </svg>
-            Force deploy (without
-            cache)
-        </div>
+        @can('deploy', $application)
+            <x-modal-confirmation title="Confirm Application Force Deployment?" buttonTitle="Force deploy"
+                submitAction="force_deploy_without_cache" :actions="[
+                    'This application will be force deployed without build cache.',
+                ]" :confirmWithText="false" :confirmWithPassword="false"
+                step2ButtonText="Confirm">
+                <x-slot:content>
+                    <div class="dropdown-iteme">
+                        <svg 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="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
+                            <path
+                                d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
+                            <path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
+                            <path d="M3 3l18 18" />
+                        </svg>
+                        Force deploy (without
+                        cache)
+                    </div>
+                </x-slot:content>
+            </x-modal-confirmation>
+        @else
+            <div class="dropdown-iteme" data-disabled>
+                <svg 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="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
+                    <path
+                        d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
+                    <path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
+                    <path d="M3 3l18 18" />
+                </svg>
+                Force deploy (without
+                cache)
+            </div>
+        @endcan
     @else
-        <div class="dropdown-item" wire:click='deploy(true)'>
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" 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="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
-                <path
-                    d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
-                <path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
-                <path d="M3 3l18 18" />
-            </svg>
-            Force deploy (without
-            cache)
-        </div>
+        @can('deploy', $application)
+            <x-modal-confirmation title="Confirm Application Force Deployment?" buttonTitle="Force deploy"
+                submitAction="deploy(true)" :actions="[
+                    'This application will be force deployed without build cache.',
+                ]" :confirmWithText="false" :confirmWithPassword="false"
+                step2ButtonText="Confirm">
+                <x-slot:content>
+                    <div class="dropdown-item">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" 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="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
+                            <path
+                                d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
+                            <path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
+                            <path d="M3 3l18 18" />
+                        </svg>
+                        Force deploy (without
+                        cache)
+                    </div>
+                </x-slot:content>
+            </x-modal-confirmation>
+        @else
+            <div class="dropdown-item" data-disabled>
+                <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" 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="M12.983 8.978c3.955 -.182 7.017 -1.446 7.017 -2.978c0 -1.657 -3.582 -3 -8 -3c-1.661 0 -3.204 .19 -4.483 .515m-2.783 1.228c-.471 .382 -.734 .808 -.734 1.257c0 1.22 1.944 2.271 4.734 2.74" />
+                    <path
+                        d="M4 6v6c0 1.657 3.582 3 8 3c.986 0 1.93 -.067 2.802 -.19m3.187 -.82c1.251 -.53 2.011 -1.228 2.011 -1.99v-6" />
+                    <path d="M4 12v6c0 1.657 3.582 3 8 3c3.217 0 5.991 -.712 7.261 -1.74m.739 -3.26v-4" />
+                    <path d="M3 3l18 18" />
+                </svg>
+                Force deploy (without
+                cache)
+            </div>
+        @endcan
     @endif
 </x-dropdown>

resources/views/components/database-status-info.blade.php

@@ -0,0 +1,100 @@
+@props([
+    'database',
+    'label',
+    'dbUrl' => null,
+    'dbUrlPublic' => null,
+    'supportsSsl' => true,
+    'enableSsl' => false,
+    'sslMode' => null,
+    'sslModeOptions' => null,
+    'sslModeHelper' => null,
+    'certificateValidUntil' => null,
+    'isExited' => false,
+    'showPublicUrlPlaceholder' => false,
+    'isPasswordHiddenForMember' => false,
+])
+
+@php
+    $urlHelper = 'If you change the user/password/port, this could be different. This is with the default values.';
+@endphp
+
+<div class="flex flex-col gap-2">
+    @if ($isPasswordHiddenForMember)
+        <x-forms.input :label="$label . ' URL (internal)'" disabled value="Hidden (only admins can view)" />
+        <x-forms.input :label="$label . ' URL (public)'" disabled value="Hidden (only admins can view)" />
+    @else
+        <x-forms.input :label="$label . ' URL (internal)'" :helper="$urlHelper" type="password" readonly
+            wire:model="dbUrl" canGate="update" :canResource="$database" />
+        @if ($dbUrlPublic)
+            <x-forms.input :label="$label . ' URL (public)'" :helper="$urlHelper" type="password" readonly
+                wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
+        @elseif ($showPublicUrlPlaceholder)
+            <x-forms.input :label="$label . ' URL (public)'" :helper="$urlHelper" readonly
+                value="Starting the database will generate this." canGate="update" :canResource="$database" />
+        @endif
+    @endif
+
+    @if ($supportsSsl)
+        <div class="flex flex-col gap-2 pt-4">
+            <div class="flex items-center justify-between py-2">
+                <div class="flex items-center justify-between w-full">
+                    <h3>SSL Configuration</h3>
+                    @if ($enableSsl && $certificateValidUntil)
+                        <x-modal-confirmation title="Regenerate SSL Certificates"
+                            buttonTitle="Regenerate SSL Certificates" :actions="[
+                                'The SSL certificate of this database will be regenerated.',
+                                'You must restart the database after regenerating the certificate to start using the new certificate.',
+                            ]"
+                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
+                    @endif
+                </div>
+            </div>
+            @if ($enableSsl && $certificateValidUntil)
+                <span class="text-sm">Valid until:
+                    @if (now()->gt($certificateValidUntil))
+                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
+                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
+                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
+                            soon</span>
+                    @else
+                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
+                    @endif
+                </span>
+            @endif
+            <div class="flex flex-col gap-2">
+                <div class="w-64" wire:key="enable_ssl">
+                    @if ($isExited)
+                        <x-forms.checkbox id="enableSsl" label="Enable SSL" wire:model.live="enableSsl"
+                            instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
+                    @else
+                        <x-forms.checkbox id="enableSsl" label="Enable SSL" wire:model.live="enableSsl"
+                            instantSave="instantSaveSSL" disabled
+                            helper="Database should be stopped to change this setting." canGate="update"
+                            :canResource="$database" />
+                    @endif
+                </div>
+                @if ($sslModeOptions && $enableSsl)
+                    <div class="mx-2">
+                        @if ($isExited)
+                            <x-forms.select id="sslMode" label="SSL Mode" wire:model.live="sslMode"
+                                instantSave="instantSaveSSL" :helper="$sslModeHelper" canGate="update"
+                                :canResource="$database">
+                                @foreach ($sslModeOptions as $value => $option)
+                                    <option value="{{ $value }}" title="{{ $option['title'] ?? '' }}">{{ $option['label'] }}</option>
+                                @endforeach
+                            </x-forms.select>
+                        @else
+                            <x-forms.select id="sslMode" label="SSL Mode" instantSave="instantSaveSSL" disabled
+                                helper="Database should be stopped to change this setting." canGate="update"
+                                :canResource="$database">
+                                @foreach ($sslModeOptions as $value => $option)
+                                    <option value="{{ $value }}" title="{{ $option['title'] ?? '' }}">{{ $option['label'] }}</option>
+                                @endforeach
+                            </x-forms.select>
+                        @endif
+                    </div>
+                @endif
+            </div>
+        </div>
+    @endif
+</div>

resources/views/components/deployment/configuration-diff.blade.php

@@ -0,0 +1,111 @@
+@props([
+    'diff' => null,
+    'compact' => false,
+])
+
+@php
+    $changes = collect(data_get($diff, 'changes', []))->values()->all();
+    $count = count($changes);
+    $requiresBuild = collect($changes)->contains(fn ($change) => data_get($change, 'impact') === 'build');
+@endphp
+
+@if ($count > 0)
+    <div @class([
+        'text-xs' => $compact,
+        'text-sm' => ! $compact,
+    ])>
+        <div class="mb-2 flex flex-wrap items-center gap-2 font-semibold text-black dark:text-white">
+            <span>{{ $count }} configuration {{ $count === 1 ? 'change' : 'changes' }}</span>
+            <span @class([
+                'rounded-sm px-1.5 py-0.5 text-[0.65rem] font-semibold uppercase leading-none',
+                'bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-300' => $requiresBuild,
+                'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300' => ! $requiresBuild,
+            ])>
+                {{ $requiresBuild ? 'Rebuild required' : 'Redeploy required' }}
+            </span>
+        </div>
+
+        @unless ($compact)
+            <div class="space-y-4">
+                @foreach (collect($changes)->groupBy('section_label') as $sectionLabel => $sectionChanges)
+                    <div>
+                        <div class="mb-0.5 text-[0.65rem] font-semibold uppercase tracking-wide text-neutral-600 dark:text-neutral-400">
+                            {{ $sectionLabel }}
+                        </div>
+                        <div class="rounded-sm border border-neutral-300 dark:border-coolgray-200">
+                            <div class="grid grid-cols-[12rem_1fr_1.5rem_1fr] items-center gap-2 bg-neutral-100 px-3 py-1.5 text-[0.65rem] font-semibold uppercase tracking-wide text-neutral-500 dark:bg-coolgray-200 dark:text-neutral-400">
+                                <div>Field</div>
+                                <div>From</div>
+                                <div></div>
+                                <div>To</div>
+                            </div>
+                            <div class="divide-y divide-neutral-300 dark:divide-coolgray-200">
+                                @foreach ($sectionChanges as $change)
+                                    @php
+                                        $changeKey = (string) data_get($change, 'key');
+                                        $expandable = data_get($change, 'expandable', false);
+                                        $oldDisplay = (string) data_get($change, 'old_display_value');
+                                        $newDisplay = (string) data_get($change, 'new_display_value');
+                                        $oldFull = data_get($change, 'old_full_value') ?? $oldDisplay;
+                                        $newFull = data_get($change, 'new_full_value') ?? $newDisplay;
+                                        $label = (string) data_get($change, 'label');
+                                        $labelTruncated = mb_strlen($label) > 20;
+                                        $rowExpandable = $expandable || $labelTruncated;
+                                    @endphp
+                                    <div class="grid grid-cols-[12rem_1fr_1.5rem_1fr] items-start gap-2 px-3 py-1.5 text-neutral-700 dark:text-neutral-300">
+                                        <div class="min-w-0 shrink-0 font-medium text-black dark:text-white">
+                                            @if ($rowExpandable)
+                                                <div class="break-words"
+                                                    :class="expandedRows['{{ $changeKey }}'] ? '' : 'truncate'"
+                                                    x-text="expandedRows['{{ $changeKey }}'] ? @js($label) : @js((string) str($label)->limit(20))"></div>
+                                            @else
+                                                {{ $label }}
+                                            @endif
+                                        </div>
+                                        <div class="min-w-0 text-red-700 dark:text-red-400/80">
+                                            @if ($expandable)
+                                                <div class="break-words"
+                                                    :class="expandedRows['{{ $changeKey }}'] ? 'whitespace-pre-wrap' : 'truncate'"
+                                                    x-text="expandedRows['{{ $changeKey }}'] ? @js($oldFull) : @js($oldDisplay)"></div>
+                                            @else
+                                                <div class="truncate">{{ $oldDisplay }}</div>
+                                            @endif
+                                        </div>
+                                        <div class="text-center text-neutral-500 dark:text-neutral-400">→</div>
+                                        <div class="flex min-w-0 items-start gap-1 text-green-700 dark:text-green-500">
+                                            <div class="min-w-0 flex-1">
+                                                @if ($expandable)
+                                                    <div class="break-words"
+                                                        :class="expandedRows['{{ $changeKey }}'] ? 'whitespace-pre-wrap' : 'truncate'"
+                                                        x-text="expandedRows['{{ $changeKey }}'] ? @js($newFull) : @js($newDisplay)"></div>
+                                                @else
+                                                    <div class="truncate">{{ $newDisplay }}</div>
+                                                @endif
+                                            </div>
+                                            @if ($rowExpandable)
+                                                <button type="button"
+                                                    x-on:click="expandedRows['{{ $changeKey }}'] = ! expandedRows['{{ $changeKey }}']"
+                                                    :aria-expanded="!! expandedRows['{{ $changeKey }}']"
+                                                    title="Toggle full value"
+                                                    class="mt-0.5 flex h-5 w-5 shrink-0 items-center justify-center text-neutral-400 transition hover:text-black dark:hover:text-white">
+                                                    <svg x-show="! expandedRows['{{ $changeKey }}']" class="h-3.5 w-3.5"
+                                                        viewBox="0 0 20 20" fill="currentColor">
+                                                        <path fill-rule="evenodd" d="M13.28 7.78l3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 0 0 1.06 1.06ZM2 17.25v-4.5a.75.75 0 0 1 1.5 0v2.69l3.22-3.22a.75.75 0 0 1 1.06 1.06L4.56 16.5h2.69a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1-.75-.75Z" clip-rule="evenodd" />
+                                                    </svg>
+                                                    <svg x-show="expandedRows['{{ $changeKey }}']" x-cloak class="h-3.5 w-3.5"
+                                                        viewBox="0 0 20 20" fill="currentColor">
+                                                        <path fill-rule="evenodd" d="M3.28 2.22a.75.75 0 0 0-1.06 1.06L5.44 6.5H2.75a.75.75 0 0 0 0 1.5h4.5A.75.75 0 0 0 8 7.25v-4.5a.75.75 0 0 0-1.5 0v2.69L3.28 2.22ZM13.5 2.75a.75.75 0 0 0-1.5 0v4.5c0 .414.336.75.75.75h4.5a.75.75 0 0 0 0-1.5h-2.69l3.22-3.22a.75.75 0 0 0-1.06-1.06L13.5 5.44V2.75ZM3.28 17.78l3.22-3.22v2.69a.75.75 0 0 0 1.5 0v-4.5a.75.75 0 0 0-.75-.75h-4.5a.75.75 0 0 0 0 1.5h2.69l-3.22 3.22a.75.75 0 1 0 1.06 1.06ZM12 12.75c0-.414.336-.75.75-.75h4.5a.75.75 0 0 1 0 1.5h-2.69l3.22 3.22a.75.75 0 1 1-1.06 1.06l-3.22-3.22v2.69a.75.75 0 0 1-1.5 0v-4.5Z" clip-rule="evenodd" />
+                                                    </svg>
+                                                </button>
+                                            @endif
+                                        </div>
+                                    </div>
+                                @endforeach
+                            </div>
+                        </div>
+                    </div>
+                @endforeach
+            </div>
+        @endunless
+    </div>
+@endif

resources/views/components/deprecated-badge.blade.php

@@ -0,0 +1,6 @@
+<span {{ $attributes->merge(['class' => 'inline-flex items-center']) }}>
+    <span
+        class="px-2 py-0.5 text-xs font-medium leading-normal rounded-full bg-warning/15 text-warning border border-warning/30">
+        Deprecated
+    </span>
+</span>

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

@@ -1,3 +1,24 @@
+@if ($authDisabled)
+<span class="relative inline-flex"
+    x-data="{ visible: false, _t: null }"
+    @mouseenter="_t = setTimeout(() => {
+        visible = true;
+        $nextTick(() => requestAnimationFrame(() => {
+            const tip = $refs.tip;
+            if (!tip) return;
+            const r = $el.getBoundingClientRect();
+            const t = tip.getBoundingClientRect();
+            let top = r.top - t.height - 6;
+            let left = r.left;
+            if (top < 4) top = r.bottom + 6;
+            if (left + t.width > innerWidth - 8) left = innerWidth - 8 - t.width;
+            if (left < 4) left = 4;
+            tip.style.top = top + 'px';
+            tip.style.left = left + 'px';
+        }));
+    }, 300)"
+    @mouseleave="clearTimeout(_t); visible = false">
+@endif
 <button @disabled($disabled) {{ $attributes->merge(['class' => $defaultClass]) }}
     {{ $attributes->merge(['type' => 'button']) }}
     @isset($confirm)
@@ -18,3 +39,9 @@
         @endif
     @endif
 </button>
+@if ($authDisabled)
+    <div x-ref="tip" x-show="visible" x-cloak class="auth-tooltip">
+        You do not have permission to perform this action.
+    </div>
+</span>
+@endif

resources/views/components/forms/copy-button.blade.php

@@ -1,18 +1,28 @@
-@props(['text'])
+@props(['text', 'label' => null])
 
-<div class="relative" x-data="{ copied: false, isSecure: window.isSecureContext }">
-    <input type="text" value="{{ $text }}" readonly class="input">
-    <button
-        x-show="isSecure"
-        @click.prevent="copied = true; navigator.clipboard.writeText({{ Js::from($text) }}); setTimeout(() => copied = false, 1000)"
-        class="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-400 hover:text-gray-300 transition-colors"
-        title="Copy to clipboard">
-        <svg x-show="!copied" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
-        </svg>
-        <svg x-show="copied" class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
-        </svg>
-    </button>
+<div class="w-full" x-data="{ copied: false, isSecure: window.isSecureContext }">
+    @if ($label)
+        <label class="flex gap-1 items-center mb-1 text-sm font-medium text-black dark:text-white">{{ $label }}</label>
+    @endif
+    <div class="relative">
+        <input type="text" value="{{ $text }}"
+            class="input pr-11 bg-white dark:bg-coolgray-100 dark:read-only:bg-coolgray-100 dark:read-only:text-white"
+            readonly
+            @keydown.prevent @paste.prevent @cut.prevent @drop.prevent
+            @focus="$event.target.select()">
+        <button
+            x-show="isSecure"
+            @click.prevent="copied = true; navigator.clipboard.writeText({{ Js::from($text) }}); setTimeout(() => copied = false, 1000)"
+            class="absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-1.5 text-neutral-500 transition-colors hover:text-neutral-700 focus-visible:ring-2 focus-visible:ring-coollabs focus-visible:ring-offset-2 dark:text-neutral-400 dark:hover:text-white dark:focus-visible:ring-warning dark:focus-visible:ring-offset-base"
+            title="Copy to clipboard"
+            aria-label="Copy to clipboard">
+            <svg x-show="!copied" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+            </svg>
+            <svg x-show="copied" class="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+            </svg>
+        </button>
+    </div>
 </div>

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

@@ -196,6 +196,31 @@
         }"
         @click.outside="showDropdown = false">
 
+        <input
+            x-ref="input"
+            @input="handleInput()"
+            @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)
+            @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"
+            @disabled($disabled)
+            @if ($type !== 'password')
+                type="{{ $type }}"
+            @endif
+            @if ($htmlId !== 'null') id="{{ $htmlId }}" @endif
+            name="{{ $name }}"
+            placeholder="{{ $attributes->get('placeholder') }}"
+            @if ($autofocus) autofocus @endif>
+
         @if ($type === 'password' && $allowToPeak)
             <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"
@@ -216,31 +241,6 @@
             </button>
         @endif
 
-        <input
-            x-ref="input"
-            @input="handleInput()"
-            @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)
-            @if ($modelBinding !== 'null')
-                wire:model="{{ $modelBinding }}"
-                wire:dirty.class="dark:border-l-warning border-l-coollabs border-l-4"
-            @endif
-            wire:loading.attr="disabled"
-            @disabled($disabled)
-            @if ($type !== 'password')
-                type="{{ $type }}"
-            @endif
-            @if ($htmlId !== 'null') id="{{ $htmlId }}" @endif
-            name="{{ $name }}"
-            placeholder="{{ $attributes->get('placeholder') }}"
-            @if ($autofocus) autofocus @endif>
-
         {{-- Dropdown for suggestions --}}
         <div x-show="showDropdown"
              x-transition

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

@@ -14,6 +14,16 @@
     @endif
     @if ($type === 'password')
         <div class="relative" x-data="{ type: 'password' }" @success.window="type = 'password'">
+            <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"
+                @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
+                name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
+                aria-placeholder="{{ $attributes->get('placeholder') }}"
+                @if ($autofocus) x-ref="autofocusInput" @endif>
             @if ($allowToPeak)
                 <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"
@@ -35,16 +45,6 @@
                     </svg>
                 </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"
-                @readonly($readonly) @disabled($disabled) id="{{ $htmlId }}"
-                name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
-                aria-placeholder="{{ $attributes->get('placeholder') }}"
-                @if ($autofocus) x-ref="autofocusInput" @endif>
 
         </div>
     @else

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

@@ -31,6 +31,21 @@
     @else
         @if ($type === 'password')
             <div class="relative" x-data="{ type: 'password' }" @success.window="type = 'password'">
+                <input x-cloak x-show="type === 'password'" value="{{ $value }}"
+                    {{ $attributes->merge(['class' => $defaultClassInput]) }} @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 }}"
+                    name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
+                    aria-placeholder="{{ $attributes->get('placeholder') }}">
+                <textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}" x-cloak x-show="type !== 'password'"
+                    placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
+                    @if ($realtimeValidation) wire:model.debounce.200ms="{{ $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]"
+                @else
+            wire:model={{ $value ?? $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
+                    @disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
+                    name="{{ $name }}" name={{ $modelBinding }}
+                    @if ($autofocus) x-ref="autofocusInput" @endif></textarea>
                 @if ($allowToPeak)
                     <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"
@@ -51,21 +66,6 @@
                         </svg>
                     </button>
                 @endif
-                <input x-cloak x-show="type === 'password'" value="{{ $value }}"
-                    {{ $attributes->merge(['class' => $defaultClassInput]) }} @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 }}"
-                    name="{{ $name }}" placeholder="{{ $attributes->get('placeholder') }}"
-                    aria-placeholder="{{ $attributes->get('placeholder') }}">
-                <textarea minlength="{{ $minlength }}" maxlength="{{ $maxlength }}" x-cloak x-show="type !== 'password'"
-                    placeholder="{{ $placeholder }}" {{ $attributes->merge(['class' => $defaultClass]) }}
-                    @if ($realtimeValidation) wire:model.debounce.200ms="{{ $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]"
-                @else
-            wire:model={{ $value ?? $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
-                    @disabled($disabled) @readonly($readonly) @required($required) id="{{ $htmlId }}"
-                    name="{{ $name }}" name={{ $modelBinding }}
-                    @if ($autofocus) x-ref="autofocusInput" @endif></textarea>
 
             </div>
         @else

resources/views/components/helper.blade.php

@@ -1,4 +1,5 @@
-<div {{ $attributes->merge(['class' => 'group']) }}>
+<div x-data="{ open: false }" @click.stop="open = !open" @click.outside="open = false"
+    {{ $attributes->merge(['class' => 'group']) }}>
     <div class="info-helper">
         @isset($icon)
             {{ $icon }}
@@ -10,7 +11,7 @@
         @endisset
 
     </div>
-    <div class="info-helper-popup">
+    <div class="info-helper-popup" :class="{ 'block': open }">
         <div class="p-4">
             {!! $helper !!}
         </div>

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

@@ -6,6 +6,7 @@
     'buttonFullWidth' => false,
     'customButton' => null,
     'disabled' => false,
+    'authDisabled' => false,
     'dispatchAction' => false,
     'submitAction' => 'delete',
     'content' => null,
@@ -128,9 +129,13 @@
     }
 }"
     @keydown.escape.window="if (modalOpen) { modalOpen = false; resetModal(); }" :class="{ 'z-40': modalOpen }"
-    class="relative w-auto h-auto">
+    @class([
+        'relative h-auto',
+        'w-full' => $buttonFullWidth,
+        'w-full sm:w-auto' => ! $buttonFullWidth,
+    ])>
     @if (isset($trigger))
-        <div @click="modalOpen=true">
+        <div class="w-full" @click="modalOpen=true">
             {{ $trigger }}
         </div>
     @elseif ($customButton)
@@ -151,11 +156,11 @@
         @else
             @if ($disabled)
                 @if ($buttonFullWidth)
-                    <x-forms.button class="w-full" isError disabled wire:target>
+                    <x-forms.button class="w-full" isError disabled :authDisabled="$authDisabled" wire:target>
                         {{ $buttonTitle }}
                     </x-forms.button>
                 @else
-                    <x-forms.button isError disabled wire:target>
+                    <x-forms.button isError disabled :authDisabled="$authDisabled" wire:target>
                         {{ $buttonTitle }}
                     </x-forms.button>
                 @endif

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

@@ -36,32 +36,34 @@
     <template x-teleport="body">
         <div x-show="modalOpen"
             x-init="$watch('modalOpen', value => { if(value) { $nextTick(() => { const firstInput = $el.querySelector('input, textarea, select'); firstInput?.focus(); }) } })"
-            class="fixed top-0 left-0 z-99 flex items-center justify-center w-screen h-screen p-4">
+            class="fixed inset-0 z-99 overflow-y-auto">
             <div x-show="modalOpen" x-transition:enter="ease-out duration-100" x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-100"
                 x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0"
-                @if ($closeOutside) @click="modalOpen=false" @endif
                 class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
-            <div id="{{ $modalId }}" 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 lg:w-auto lg:min-w-2xl lg:max-w-4xl border rounded-sm drop-shadow-sm bg-white border-neutral-200 dark:bg-base dark:border-coolgray-300 flex flex-col">
-                <div class="flex items-center justify-between py-6 px-6 shrink-0">
-                    <h3 class="text-2xl font-bold">{{ $title }}</h3>
-                    <button @click="modalOpen=false"
-                        class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base">
-                        <svg class="w-5 h-5" 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 flex items-center justify-center w-auto px-6 pb-6">
-                    {{ $slot }}
+            <div @if ($closeOutside) @click.self="modalOpen=false" @endif class="relative flex min-h-full items-start justify-center p-4 sm:items-center">
+                <div id="{{ $modalId }}" 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 flex max-h-[calc(100dvh-2rem)] w-full flex-col overflow-hidden rounded-sm border border-neutral-200 bg-white drop-shadow-sm dark:border-coolgray-300 dark:bg-base lg:w-auto lg:min-w-2xl lg:max-w-4xl">
+                    <div class="flex items-center justify-between py-6 px-6 shrink-0">
+                        <h3 class="text-2xl font-bold">{{ $title }}</h3>
+                        <button @click="modalOpen=false"
+                            class="absolute cursor-pointer top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base">
+                            <svg class="w-5 h-5" 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 min-h-0 flex-1 overflow-y-auto px-6 pb-6 pt-1"
+                        style="-webkit-overflow-scrolling: touch;">
+                        {{ $slot }}
+                    </div>
                 </div>
             </div>
         </div>

resources/views/components/navbar.blade.php

@@ -1,5 +1,20 @@
-<nav class="flex flex-col flex-1 px-2 bg-white border-r dark:border-coolgray-200 border-neutral-300 dark:bg-base"
+<nav class="flex flex-col flex-1 bg-white border-r dark:border-coolgray-200 border-neutral-300 dark:bg-base"
+    :class="collapsed ? 'px-2 lg:px-[0.7rem] sidebar-collapsed' : 'px-2 lg:px-[0.7rem]'"
+    @mouseover="
+        if (!collapsed) return;
+        const el = $event.target.closest('.menu-item');
+        if (!el) { tooltip.show = false; return; }
+        const text = el.getAttribute('title') || el.getAttribute('aria-label') || '';
+        if (!text) return;
+        const rect = el.getBoundingClientRect();
+        tooltip.text = text;
+        tooltip.x = rect.right + 8;
+        tooltip.y = rect.top + rect.height / 2;
+        tooltip.show = true;
+    "
+    @mouseleave="tooltip.show = false"
     x-data="{
+        tooltip: { text: '', x: 0, y: 0, show: false },
         switchWidth() {
                 if (this.full === 'full') {
                     localStorage.setItem('pageWidth', 'center');
@@ -29,28 +44,27 @@
                 this.queryTheme();
                 this.checkZoom();
             },
-            setTheme(type) {
-                this.theme = type;
-                localStorage.setItem('theme', type);
-                this.queryTheme();
-            },
             queryTheme() {
                 const darkModePreference = window.matchMedia('(prefers-color-scheme: dark)').matches;
                 const userSettings = localStorage.getItem('theme') || 'dark';
                 localStorage.setItem('theme', userSettings);
+                let isDark = false;
                 if (userSettings === 'dark') {
                     document.documentElement.classList.add('dark');
                     this.theme = 'dark';
+                    isDark = true;
                 } else if (userSettings === 'light') {
                     document.documentElement.classList.remove('dark');
                     this.theme = 'light';
                 } else if (darkModePreference) {
                     this.theme = 'system';
                     document.documentElement.classList.add('dark');
+                    isDark = true;
                 } else if (!darkModePreference) {
                     this.theme = 'system';
                     document.documentElement.classList.remove('dark');
                 }
+                document.querySelector('meta[name=theme-color]')?.setAttribute('content', isDark ? '#101010' : '#ffffff');
             },
             checkZoom() {
                 if (this.zoom === null) {
@@ -77,15 +91,25 @@
                 }
             }
     }">
-    <div class="flex lg:pt-6 pt-4 pb-4 pl-2">
-        <div class="flex flex-col w-full">
+    <div class="flex pt-4 pb-4 pl-2 pr-3 items-start gap-3"
+        :class="collapsed ? 'lg:flex-col lg:items-center lg:pl-0 lg:pr-0 lg:gap-3 lg:pt-7' : 'lg:pt-6'">
+        <div class="flex min-w-0 flex-1 flex-col" :class="collapsed && 'lg:hidden'">
             <a href="/" {{ wireNavigate() }} class="text-2xl font-bold tracking-tight dark:text-white hover:opacity-80 transition-opacity">Coolify</a>
             <x-version />
         </div>
-        <div>
+        <div class="hidden flex-col items-center w-full gap-1"
+            :class="collapsed && 'lg:flex'">
+            <a href="/" {{ wireNavigate() }}
+                class="hover:opacity-80 transition-opacity"
+                title="Coolify">
+                <img src="/coolify-logo.svg" alt="Coolify" class="w-6 h-6" />
+            </a>
+            <x-version class="text-[10px]" />
+        </div>
+        <div class="min-w-0 flex-1" :class="collapsed && 'lg:hidden'">
             <!-- Search button that triggers global search modal -->
             <button @click="$dispatch('open-global-search')" type="button" title="Search (Press / or ⌘K)"
-                class="flex items-center gap-1.5 px-2.5 py-1.5 bg-neutral-100 dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-200 rounded-md hover:bg-neutral-200 dark:hover:bg-coolgray-200 transition-colors">
+                class="flex h-8 w-full items-center justify-between gap-1.5 px-2.5 py-1.5 bg-neutral-100 dark:bg-coolgray-100 border border-neutral-300 dark:border-coolgray-200 rounded-md hover:bg-neutral-200 dark:hover:bg-coolgray-200 transition-colors">
                 <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-neutral-500 dark:text-neutral-400"
                     fill="none" viewBox="0 0 24 24" stroke="currentColor">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -95,9 +119,8 @@
                     class="px-1 py-0.5 text-xs font-semibold text-neutral-500 dark:text-neutral-400 bg-neutral-200 dark:bg-coolgray-200 rounded">/</kbd>
             </button>
         </div>
-        <livewire:settings-dropdown />
     </div>
-    <div class="px-2 pt-2 pb-7">
+    <div class="px-2 pt-2 pb-7 overflow-hidden" :class="collapsed && 'lg:px-0 lg:pt-0 lg:pb-4 lg:min-h-8 lg:flex lg:justify-center'">
         <livewire:switch-team />
     </div>
     <ul role="list" class="flex flex-col flex-1 gap-y-7">
@@ -112,7 +135,7 @@
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                     d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                             </svg>
-                            <span class="menu-item-label">Dashboard</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Dashboard</span>
                         </a>
                     </li>
                     <li>
@@ -127,7 +150,7 @@
                                 <path d="M4 12l8 4l8 -4" />
                                 <path d="M4 16l8 4l8 -4" />
                             </svg>
-                            <span class="menu-item-label">Projects</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Projects</span>
                         </a>
                     </li>
                     <li>
@@ -145,7 +168,7 @@
                                 <path d="M7 16v.01" />
                                 <path d="M20 15l-2 3h3l-2 3" />
                             </svg>
-                            <span class="menu-item-label">Servers</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Servers</span>
                         </a>
                     </li>
 
@@ -157,7 +180,7 @@
                                 <path fill="currentColor"
                                     d="m6.793 1.207l.353.354l-.353-.354ZM1.207 6.793l-.353-.354l.353.354Zm0 1.414l.354-.353l-.354.353Zm5.586 5.586l-.354.353l.354-.353Zm1.414 0l-.353-.354l.353.354Zm5.586-5.586l.353.354l-.353-.354Zm0-1.414l-.354.353l.354-.353ZM8.207 1.207l.354-.353l-.354.353ZM6.44.854L.854 6.439l.707.707l5.585-5.585L6.44.854ZM.854 8.56l5.585 5.585l.707-.707l-5.585-5.585l-.707.707Zm7.707 5.585l5.585-5.585l-.707-.707l-5.585 5.585l.707.707Zm5.585-7.707L8.561.854l-.707.707l5.585 5.585l.707-.707Zm0 2.122a1.5 1.5 0 0 0 0-2.122l-.707.707a.5.5 0 0 1 0 .708l.707.707ZM6.44 14.146a1.5 1.5 0 0 0 2.122 0l-.707-.707a.5.5 0 0 1-.708 0l-.707.707ZM.854 6.44a1.5 1.5 0 0 0 0 2.122l.707-.707a.5.5 0 0 1 0-.708L.854 6.44Zm6.292-4.878a.5.5 0 0 1 .708 0L8.56.854a1.5 1.5 0 0 0-2.122 0l.707.707Zm-2 1.293l1 1l.708-.708l-1-1l-.708.708ZM7.5 5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 6V5Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 4.5H8ZM7.5 4a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 3v1Zm0-1A1.5 1.5 0 0 0 6 4.5h1a.5.5 0 0 1 .5-.5V3Zm.646 2.854l1.5 1.5l.707-.708l-1.5-1.5l-.707.708ZM10.5 8a.5.5 0 0 1-.5-.5H9A1.5 1.5 0 0 0 10.5 9V8Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 12 7.5h-1Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 10.5 6v1Zm0-1A1.5 1.5 0 0 0 9 7.5h1a.5.5 0 0 1 .5-.5V6ZM7 5.5v4h1v-4H7Zm.5 5.5a.5.5 0 0 1-.5-.5H6A1.5 1.5 0 0 0 7.5 12v-1Zm.5-.5a.5.5 0 0 1-.5.5v1A1.5 1.5 0 0 0 9 10.5H8Zm-.5-.5a.5.5 0 0 1 .5.5h1A1.5 1.5 0 0 0 7.5 9v1Zm0-1A1.5 1.5 0 0 0 6 10.5h1a.5.5 0 0 1 .5-.5V9Z" />
                             </svg>
-                            <span class="menu-item-label">Sources</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Sources</span>
                         </a>
                     </li>
                     <li>
@@ -170,7 +193,7 @@
                                     stroke-linejoin="round" stroke-width="2"
                                     d="M9 4L3 8v12l6-3l6 3l6-4V4l-6 3l-6-3zm-2 8.001V12m4 .001V12m3-2l2 2m2 2l-2-2m0 0l2-2m-2 2l-2 2" />
                             </svg>
-                            <span class="menu-item-label">Destinations</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Destinations</span>
                         </a>
                     </li>
                     <li>
@@ -185,7 +208,7 @@
                                     <path d="M4 12v6a8 3 0 0 0 16 0v-6" />
                                 </g>
                             </svg>
-                            <span class="menu-item-label">S3 Storages</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">S3 Storages</span>
                         </a>
                     </li>
                     <li>
@@ -200,7 +223,7 @@
                                     <path d="M8 16c1.5 0 3-2 4-3.5S14.5 9 16 9" />
                                 </g>
                             </svg>
-                            <span class="menu-item-label">Shared Variables</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Shared Variables</span>
                         </a>
                     </li>
                     <li>
@@ -212,7 +235,7 @@
                                     stroke-linejoin="round" stroke-width="2"
                                     d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3H4a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6M9 17v1a3 3 0 0 0 6 0v-1" />
                             </svg>
-                            <span class="menu-item-label">Notifications</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Notifications</span>
                         </a>
                     </li>
                     <li>
@@ -224,7 +247,7 @@
                                     stroke-linejoin="round" stroke-width="2"
                                     d="m16.555 3.843l3.602 3.602a2.877 2.877 0 0 1 0 4.069l-2.643 2.643a2.877 2.877 0 0 1-4.069 0l-.301-.301l-6.558 6.558a2 2 0 0 1-1.239.578L5.172 21H4a1 1 0 0 1-.993-.883L3 20v-1.172a2 2 0 0 1 .467-1.284l.119-.13L4 17h2v-2h2v-2l2.144-2.144l-.301-.301a2.877 2.877 0 0 1 0-4.069l2.643-2.643a2.877 2.877 0 0 1 4.069 0zM15 9h.01" />
                             </svg>
-                            <span class="menu-item-label">Keys & Tokens</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Keys & Tokens</span>
                         </a>
                     </li>
                     <li>
@@ -239,7 +262,7 @@
                                     <path d="m18 19l1.592-1.592a4.82 4.82 0 0 0 0-6.816L15 6m-8 4h-.01" />
                                 </g>
                             </svg>
-                            <span class="menu-item-label">Tags</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Tags</span>
                         </a>
                     </li>
                     @can('canAccessTerminal')
@@ -254,7 +277,7 @@
                                     <path d="M5 7l5 5l-5 5" />
                                     <path d="M12 19l7 0" />
                                 </svg>
-                                <span class="menu-item-label">Terminal</span>
+                                <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Terminal</span>
                             </a>
                         </li>
                     @endcan
@@ -270,7 +293,7 @@
                                 <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
                                 <path d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855" />
                             </svg>
-                            <span class="menu-item-label">Profile</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Profile</span>
                         </a>
                     </li>
                     <li>
@@ -288,7 +311,7 @@
                                 <path d="M5 5a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
                                 <path d="M3 13v-1a2 2 0 0 1 2 -2h2" />
                             </svg>
-                            <span class="menu-item-label">Teams</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Teams</span>
                         </a>
                     </li>
                     @if (isCloud() && auth()->user()->isAdmin())
@@ -301,7 +324,7 @@
                                         stroke-linejoin="round" stroke-width="2"
                                         d="M3 8a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3zm0 2h18M7 15h.01M11 15h2" />
                                 </svg>
-                                <span class="menu-item-label">Subscription</span>
+                                <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Subscription</span>
                             </a>
                         </li>
                     @endif
@@ -319,7 +342,7 @@
                                         d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z" />
                                     <path d="M9 12a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
                                 </svg>
-                                <span class="menu-item-label">Settings</span>
+                                <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Settings</span>
                             </a>
                         </li>
                     @endif
@@ -333,12 +356,15 @@
                                         <path fill="currentColor"
                                             d="M177.62 159.6a52 52 0 0 1-34 34a12.2 12.2 0 0 1-3.6.55a12 12 0 0 1-3.6-23.45a28 28 0 0 0 18.32-18.32a12 12 0 0 1 22.9 7.2ZM220 144a92 92 0 0 1-184 0c0-28.81 11.27-58.18 33.48-87.28a12 12 0 0 1 17.9-1.33l19.69 19.11L127 19.89a12 12 0 0 1 18.94-5.12C168.2 33.25 220 82.85 220 144m-24 0c0-41.71-30.61-78.39-52.52-99.29l-20.21 55.4a12 12 0 0 1-19.63 4.5L80.71 82.36C67 103.38 60 124.06 60 144a68 68 0 0 0 136 0" />
                                     </svg>
-                                    <span class="menu-item-label">Admin</span>
+                                    <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Admin</span>
                                 </a>
                             </li>
                         @endif
                     @endif
                     <div class="flex-1"></div>
+                    <li>
+                        <livewire:settings-dropdown trigger="changelog-sidebar" />
+                    </li>
                     @if (isInstanceAdmin() && !isCloud())
                         @persist('upgrade')
                             <li>
@@ -368,7 +394,7 @@
                                         d="M12 6L8.707 9.293a1 1 0 0 0 0 1.414l.543.543c.69.69 1.81.69 2.5 0l1-1a3.182 3.182 0 0 1 4.5 0l2.25 2.25m-7 3l2 2M15 13l2 2" />
                                 </g>
                             </svg>
-                            <span class="menu-item-label">Sponsor us</span>
+                            <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Sponsor us</span>
                         </a>
                     </li>
                 @endif
@@ -384,7 +410,7 @@
                                     <path fill="currentColor"
                                         d="M140 180a12 12 0 1 1-12-12a12 12 0 0 1 12 12M128 72c-22.06 0-40 16.15-40 36v4a8 8 0 0 0 16 0v-4c0-11 10.77-20 24-20s24 9 24 20s-10.77 20-24 20a8 8 0 0 0-8 8v8a8 8 0 0 0 16 0v-.72c18.24-3.35 32-17.9 32-35.28c0-19.85-17.94-36-40-36m104 56A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88" />
                                 </svg>
-                                <span class="menu-item-label">Feedback</span>
+                                <span class="menu-item-label" :class="collapsed && 'lg:hidden'">Feedback</span>
                             </div>
                         </x-slot:content>
                         <livewire:help />
@@ -393,16 +419,22 @@
                 <li>
                     <form action="/logout" method="POST">
                         @csrf
-                        <button title="Logout" type="submit" class="gap-2 mb-6 menu-item">
-                            <svg class="menu-item-icon mr-1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                        <button title="Logout" type="submit" class="mb-6 menu-item">
+                            <svg class="menu-item-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                 <path fill="currentColor"
                                     d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2a9.985 9.985 0 0 1 8 4h-2.71a8 8 0 1 0 .001 12h2.71A9.985 9.985 0 0 1 12 22m7-6v-3h-8v-2h8V8l5 4z" />
                             </svg>
-                            <span>Logout</span>
+                            <span class="text-left menu-item-label" :class="collapsed && 'lg:hidden'">Logout</span>
                         </button>
                     </form>
                 </li>
             </ul>
         </li>
     </ul>
+    <div x-show="collapsed && tooltip.show"
+        x-cloak
+        x-transition.opacity.duration.100ms
+        :style="`left: ${tooltip.x}px; top: ${tooltip.y}px;`"
+        class="fixed z-[100] -translate-y-1/2 px-2 py-1 text-xs font-medium rounded-md bg-neutral-900 dark:bg-coolgray-300 text-white whitespace-nowrap pointer-events-none shadow-lg border border-neutral-700 dark:border-coolgray-200"
+        x-text="tooltip.text"></div>
 </nav>

resources/views/components/notification/navbar.blade.php

@@ -2,7 +2,7 @@
     <h1>Notifications</h1>
     <div class="subtitle">Get notified about your infrastructure.</div>
     <div class="navbar-main">
-        <nav class="flex items-center gap-3.5 min-h-10">
+        <nav class="flex items-center gap-6 min-h-10 whitespace-nowrap">
             <a class="{{ request()->routeIs('notifications.email') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('notifications.email') }}">
                 <button>Email</button>

resources/views/components/profile/navbar.blade.php

@@ -0,0 +1,17 @@
+<div class="pb-6">
+    <h1>Profile</h1>
+    <div class="subtitle">Your user profile settings.</div>
+    <div class="navbar-main">
+        <nav class="flex items-center gap-6 min-h-10">
+            <a class="{{ request()->routeIs('profile') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('profile') }}">
+                General
+            </a>
+            <a class="{{ request()->routeIs('profile.appearance') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('profile.appearance') }}">
+                Appearance
+            </a>
+            <div class="flex-1"></div>
+        </nav>
+    </div>
+</div>

resources/views/components/server/sidebar-sentinel.blade.php

@@ -0,0 +1,12 @@
+<div class="sub-menu-wrapper">
+    @can('viewSentinel', $server)
+        <a class="{{ request()->routeIs('server.sentinel') ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" {{ wireNavigate() }}
+            href="{{ route('server.sentinel', $parameters) }}">
+            <span class="menu-item-label">Configuration</span>
+        </a>
+        <a class="{{ request()->routeIs('server.sentinel.logs') ? 'sub-menu-item menu-item-active' : 'sub-menu-item' }}" {{ wireNavigate() }}
+            href="{{ route('server.sentinel.logs', $parameters) }}">
+            <span class="menu-item-label">Logs</span>
+        </a>
+    @endcan
+</div>

resources/views/components/server/sidebar.blade.php

@@ -6,11 +6,6 @@
             href="{{ route('server.advanced', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Advanced</span>
         </a>
     @endif
-    @if ($server->isFunctional() && !$server->isSwarm() && !$server->isBuildServer())
-        <a class="sub-menu-item {{ $activeMenu === 'sentinel' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.sentinel', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Sentinel</span>
-        </a>
-    @endif
     <a class="sub-menu-item {{ $activeMenu === 'private-key' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
         href="{{ route('server.private-key', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Private Key</span>
     </a>
@@ -37,11 +32,11 @@
         <a class="sub-menu-item {{ $activeMenu === 'log-drains' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
             href="{{ route('server.log-drains', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Log Drains</span></a>
         <a class="sub-menu-item {{ $activeMenu === 'metrics' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.charts', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Metrics</span></a>
+            href="{{ route('server.metrics', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Metrics</span></a>
     @endif
     @if (!$server->isBuildServer() && !$server->settings->is_cloudflare_tunnel)
         <a class="sub-menu-item {{ $activeMenu === 'swarm' ? 'menu-item-active' : '' }}" {{ wireNavigate() }}
-            href="{{ route('server.swarm', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Swarm (experimental)</span>
+            href="{{ route('server.swarm', ['server_uuid' => $server->uuid]) }}"><span class="menu-item-label">Swarm</span>
         </a>
     @endif
     @if (!$server->isLocalhost())

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

@@ -4,7 +4,7 @@
     'isImportSupported' => false,
 ])
 
-<div class="sub-menu-wrapper">
+<div class="sub-menu-wrapper hidden md:flex">
     <a class="sub-menu-item"
         class="{{ request()->routeIs('project.service.configuration') ? 'menu-item-active' : '' }}"
         {{ wireNavigate() }}

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

@@ -3,7 +3,7 @@
         Advanced
     </x-slot>
     @if (str($service->status)->contains('running'))
-        <div class="dropdown-item" @click="$wire.dispatch('pullAndRestartEvent')">
+        <div class="dropdown-item" @if(!auth()->user()->can('deploy', $service)) data-disabled @endif @click="document.getElementById('service-pullAndRestart-trigger')?.click()">
             <svg 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" />
@@ -17,7 +17,7 @@
             Pull Latest Images & Restart
         </div>
     @elseif (str($service->status)->contains('degraded'))
-        <div class="dropdown-item" @click="$wire.dispatch('forceDeployEvent')">
+        <div class="dropdown-item" @if(!auth()->user()->can('deploy', $service)) data-disabled @endif @click="document.getElementById('service-forceDeploy-trigger')?.click()">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke=""
                 style="--darkreader-inline-stroke: currentColor;" class="w-6 h-6" stroke-width="2">
@@ -27,7 +27,7 @@
             Force Restart
         </div>
     @else
-        <div class="dropdown-item" @click="$wire.dispatch('forceDeployEvent')">
+        <div class="dropdown-item" @if(!auth()->user()->can('deploy', $service)) data-disabled @endif @click="document.getElementById('service-forceDeploy-trigger')?.click()">
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-linecap="round" stroke-linejoin="round" data-darkreader-inline-stroke=""
                 style="--darkreader-inline-stroke: currentColor;" class="w-4 h-4" stroke-width="2">
@@ -36,7 +36,7 @@
             </svg>
             Force Deploy
         </div>
-        <div class="dropdown-item" wire:click='stop(true)''>
+        <div class="dropdown-item" @if(!auth()->user()->can('stop', $service)) data-disabled @endif @click="document.getElementById('service-cleanup-trigger')?.click()">
             <svg class="w-4 h-4" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
                 <path fill="currentColor" d="M26 20h-6v-2h6zm4 8h-6v-2h6zm-2-4h-6v-2h6z" />
                 <path fill="currentColor"

resources/views/components/slide-over.blade.php

@@ -32,11 +32,12 @@ x-init="$watch('slideOverOpen', value => {
                                 <div class="px-4 pb-4 sm:px-5">
                                     <div class="flex items-start justify-between pb-1">
                                         <h2 class="text-2xl leading-6" id="slide-over-title">
-                                            {{ $title }}</h2>
+                                            {{ $title }}
+                                        </h2>
                                         <div class="flex items-center h-auto ml-3">
                                             <button @click="slideOverOpen=false"
-                                                class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-2 space-x-1 text-xs font-normal border-none rounded-sm">
-                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
+                                                class="absolute cursor-pointer top-0 right-0 z-30 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base">
+                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" 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"></path>

resources/views/components/status-badge.blade.php

@@ -0,0 +1,38 @@
+@props([
+    'label' => null,
+    'status' => null,
+    'type' => 'neutral',
+    'as' => 'span',
+])
+
+@php
+    $typeClasses = [
+        'neutral' => 'border-neutral-200 bg-neutral-100 text-black dark:border-coolgray-300 dark:bg-coolgray-200 dark:text-white',
+        'success' => 'border-green-200 bg-green-50 text-green-800 dark:border-green-900 dark:bg-green-950/30 dark:text-green-300',
+        'warning' => 'border-yellow-300 bg-yellow-50 text-yellow-900 dark:border-yellow-800 dark:bg-yellow-950/30 dark:text-yellow-200',
+        'error' => 'border-red-300 bg-red-50 text-red-800 dark:border-red-900 dark:bg-red-950/30 dark:text-red-300',
+    ];
+@endphp
+
+@if ($as === 'button')
+    <button {{ $attributes->class([
+        'inline-flex h-5 max-w-full items-center gap-1 rounded-sm border px-1.5 text-xs font-medium leading-4 transition-colors',
+        $typeClasses[$type] ?? $typeClasses['neutral'],
+    ])->merge(['type' => 'button']) }}>
+        {{ collect([$label, $status])->filter()->join(' ') }}
+    </button>
+@elseif ($as === 'a')
+    <a {{ $attributes->class([
+        'inline-flex h-5 max-w-full items-center gap-1 rounded-sm border px-1.5 text-xs font-medium leading-4 transition-colors',
+        $typeClasses[$type] ?? $typeClasses['neutral'],
+    ]) }}>
+        {{ collect([$label, $status])->filter()->join(' ') }}
+    </a>
+@else
+    <span {{ $attributes->class([
+        'inline-flex h-5 max-w-full items-center gap-1 rounded-sm border px-1.5 text-xs font-medium leading-4',
+        $typeClasses[$type] ?? $typeClasses['neutral'],
+    ]) }}>
+        {{ collect([$label, $status])->filter()->join(' ') }}
+    </span>
+@endif

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

@@ -2,32 +2,18 @@
     'status' => 'Degraded',
 ])
 @php
-    // Handle both colon format (backend) and parentheses format (from services.blade.php)
-    // degraded:unhealthy → Degraded (unhealthy)
-    // degraded (unhealthy) → degraded (unhealthy) (already formatted, display as-is)
-
     if (str($status)->contains('(')) {
-        // Already in parentheses format from services.blade.php - use as-is
         $displayStatus = $status;
-        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
-    } elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
-        // Colon format from backend - transform it
+        $healthStatus = null;
+    } elseif (str($status)->contains(':') && ! str($status)->startsWith('Proxy')) {
         $parts = explode(':', $status);
-        $displayStatus = str($parts[0])->headline();
+        $displayStatus = str($parts[0])->headline()->value();
         $healthStatus = $parts[1] ?? null;
     } else {
-        // Simple status without health
-        $displayStatus = str($status)->headline();
+        $displayStatus = str($status)->headline()->value();
         $healthStatus = null;
     }
+
+    $badgeStatus = $healthStatus ? "{$displayStatus} ({$healthStatus})" : $displayStatus;
 @endphp
-<div class="flex items-center" >
-    <x-loading wire:loading.delay.longer />
-    <span wire:loading.remove.delay.longer class="flex items-center">
-        <div class="badge badge-warning"></div>
-        <div class="pl-2 pr-1 text-xs font-bold dark:text-warning">{{ $displayStatus }}</div>
-        @if ($healthStatus && !str($displayStatus)->contains('('))
-            <div class="text-xs dark:text-warning">({{ $healthStatus }})</div>
-        @endif
-    </span>
-</div>
+<x-status-badge status="{{ $badgeStatus }}" type="warning" />

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

@@ -2,7 +2,11 @@
     'title' => null,
     'lastDeploymentLink' => null,
     'resource' => null,
+    'showRefreshButton' => true,
 ])
+@php
+    $stoppedAfterRestartLimit = $resource && method_exists($resource, 'stoppedAfterRestartLimit') && $resource->stoppedAfterRestartLimit();
+@endphp
 <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" />
@@ -13,27 +17,19 @@
     @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>
+    @if (isset($resource->restart_count) && $resource->restart_count > 0 && (!str($resource->status)->startsWith('exited') || $stoppedAfterRestartLimit))
+        <x-status-badge status="{{ $resource->restart_count }}x restarts" type="warning"
+            title="Container has restarted {{ $resource->restart_count }} time{{ $resource->restart_count > 1 ? 's' : '' }}. Last restart: {{ $resource->last_restart_at?->diffForHumans() }}" />
+    @endif
+    @if ($stoppedAfterRestartLimit)
+        <x-status-badge status="Stopped after reaching restart limit ({{ $resource->restart_count }}/{{ $resource->max_restart_count }})."
+            type="warning"
+            title="Container has crashed and Coolify stopped it after {{ $resource->restart_count }} restart attempts." />
     @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>
+        <x-status-badge as="button" wire:target="manualCheckStatus" wire:loading.attr="disabled"
+            wire:click='manualCheckStatus' status="Refresh" type="neutral" title="Refresh Status"
+            aria-label="Refresh status"
+            class="min-w-[4.5rem] justify-center cursor-pointer border-transparent hover:bg-neutral-200 disabled:cursor-wait disabled:opacity-70 dark:hover:bg-coolgray-300" />
     @endif
 </div>

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

@@ -5,42 +5,23 @@
     'noLoading' => false,
 ])
 @php
-    // Handle both colon format (backend) and parentheses format (from services.blade.php)
-    // starting:unknown → Starting (unknown)
-    // starting (unknown) → starting (unknown) (already formatted, display as-is)
-
     if (str($status)->contains('(')) {
-        // Already in parentheses format from services.blade.php - use as-is
         $displayStatus = $status;
-        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
-    } elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
-        // Colon format from backend - transform it
+        $healthStatus = null;
+    } elseif (str($status)->contains(':') && ! str($status)->startsWith('Proxy')) {
         $parts = explode(':', $status);
-        $displayStatus = str($parts[0])->headline();
+        $displayStatus = str($parts[0])->headline()->value();
         $healthStatus = $parts[1] ?? null;
     } else {
-        // Simple status without health
-        $displayStatus = str($status)->headline();
+        $displayStatus = str($status)->headline()->value();
         $healthStatus = null;
     }
+
+    $badgeStatus = $healthStatus ? "{$displayStatus} ({$healthStatus})" : $displayStatus;
 @endphp
-<div class="flex items-center">
-    @if (!$noLoading)
-        <x-loading wire:loading.delay.longer />
-    @endif
-    <span wire:loading.remove.delay.longer class="flex items-center">
-        <div class="badge badge-warning"></div>
-        <div class="pl-2 pr-1 text-xs font-bold dark:text-warning" @if($title) title="{{$title}}" @endif>
-           @if ($lastDeploymentLink)
-              <a href="{{ $lastDeploymentLink }}" target="_blank" class="underline cursor-pointer">
-                  {{ $displayStatus }}
-              </a>
-          @else
-              {{ $displayStatus }}
-          @endif
-        </div>
-        @if ($healthStatus && !str($displayStatus)->contains('('))
-            <div class="text-xs dark:text-warning">({{ $healthStatus }})</div>
-        @endif
-    </span>
-</div>
+@if ($lastDeploymentLink)
+    <x-status-badge as="a" href="{{ $lastDeploymentLink }}" target="_blank" status="{{ $badgeStatus }}" type="warning"
+        title="{{ $title }}" class="cursor-pointer underline" />
+@else
+    <x-status-badge status="{{ $badgeStatus }}" type="warning" title="{{ $title }}" />
+@endif

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

@@ -5,80 +5,47 @@
     'noLoading' => false,
 ])
 @php
-    // Handle both colon format (backend) and parentheses format (from services.blade.php)
-    // running:healthy → Running (healthy)
-    // running (healthy) → running (healthy) (already formatted, display as-is)
-
     if (str($status)->contains('(')) {
-        // Already in parentheses format from services.blade.php - use as-is
         $displayStatus = $status;
-        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
-    } elseif (str($status)->contains(':') && !str($status)->startsWith('Proxy')) {
-        // Colon format from backend - transform it
+        $healthStatus = null;
+    } elseif (str($status)->contains(':') && ! str($status)->startsWith('Proxy')) {
         $parts = explode(':', $status);
-        $displayStatus = str($parts[0])->headline();
+        $displayStatus = str($parts[0])->headline()->value();
         $healthStatus = $parts[1] ?? null;
     } else {
-        // Simple status without health
-        $displayStatus = str($status)->headline();
+        $displayStatus = str($status)->headline()->value();
         $healthStatus = null;
     }
+
+    $badgeStatus = $healthStatus ? "{$displayStatus} ({$healthStatus})" : $displayStatus;
+    $showUnknownHelper = ! str($status)->startsWith('Proxy') && (str($status)->contains('unknown') || str($healthStatus)->contains('unknown'));
+    $showUnhealthyHelper = ! str($status)->startsWith('Proxy') && (str($status)->contains('unhealthy') || str($healthStatus)->contains('unhealthy'));
 @endphp
-<div class="flex items-center">
-    <div class="flex items-center">
-        <div wire:loading.delay.longer wire:target="checkProxy(true)" class="badge badge-warning"></div>
-        <div wire:loading.remove.delay.longer wire:target="checkProxy(true)" class="badge badge-success"></div>
-        <div class="pl-2 pr-1 text-xs font-bold text-success"
-            @if ($title) title="{{ $title }}" @endif>
-            @if ($lastDeploymentLink)
-                <a href="{{ $lastDeploymentLink }}" target="_blank" class="underline cursor-pointer">
-                    {{ $displayStatus }}
-                </a>
-            @else
-                {{ $displayStatus }}
-            @endif
-        </div>
-        @if ($healthStatus && !str($displayStatus)->contains('('))
-            <div class="text-xs text-success">({{ $healthStatus }})</div>
-        @endif
-        @php
-            $showUnknownHelper =
-                !str($status)->startsWith('Proxy') &&
-                (str($status)->contains('unknown') || str($healthStatus)->contains('unknown'));
-            $showUnhealthyHelper =
-                !str($status)->startsWith('Proxy') &&
-                (str($status)->contains('unhealthy') || str($healthStatus)->contains('unhealthy'));
-        @endphp
-        @if ($showUnknownHelper)
-        <div class="px-2">
+<div class="flex items-center gap-1">
+    @if ($lastDeploymentLink)
+        <x-status-badge as="a" href="{{ $lastDeploymentLink }}" target="_blank" status="{{ $badgeStatus }}" type="success"
+            title="{{ $title }}" class="cursor-pointer underline" />
+    @else
+        <x-status-badge status="{{ $badgeStatus }}" type="success" title="{{ $title }}" />
+    @endif
+    @if ($showUnknownHelper)
+        <div>
             <x-helper
                 helper="No health check configured. <span class='dark:text-warning text-coollabs'>The resource may be functioning normally.</span><br><br>Traefik and Caddy will route traffic to this container even without a health check. However, configuring a health check is recommended to ensure the resource is ready before receiving traffic.<br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
                 <x-slot:icon>
-                    <svg class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
-                        xmlns="http://www.w3.org/2000/svg">
-                        <path fill="currentColor"
-                            d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16">
-                        </path>
-                    </svg>
+                    <x-status-badge status="No health check" type="warning" class="cursor-help" />
                 </x-slot:icon>
             </x-helper>
         </div>
-        @endif
-        @if ($showUnhealthyHelper)
-         <div class="px-2">
+    @endif
+    @if ($showUnhealthyHelper)
+        <div>
             <x-helper
                 helper="Unhealthy state. <span class='dark:text-warning text-coollabs'>The health check is failing.</span><br><br>This resource will <span class='dark:text-warning text-coollabs'>NOT work with Traefik</span> as it expects a healthy state. Your action is required to fix the health check or the underlying issue causing it to fail.<br><br>More details in the <a href='https://coolify.io/docs/knowledge-base/proxy/traefik/healthchecks' class='underline dark:text-warning text-coollabs' target='_blank'>documentation</a>.">
                 <x-slot:icon>
-                    <svg class="hidden w-4 h-4 dark:text-warning lg:block" viewBox="0 0 256 256"
-                        xmlns="http://www.w3.org/2000/svg">
-                        <path fill="currentColor"
-                            d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16">
-                        </path>
-                    </svg>
+                    <x-status-badge status="Unhealthy" type="warning" class="cursor-help" />
                 </x-slot:icon>
             </x-helper>
         </div>
-        @endif
-    </div>
-
+    @endif
 </div>

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

@@ -14,19 +14,9 @@
         <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>
+        <x-status-badge as="button" wire:target="manualCheckStatus" wire:loading.attr="disabled"
+            wire:click='manualCheckStatus' status="Refresh" type="neutral" title="Refresh Status"
+            aria-label="Refresh status"
+            class="min-w-[4.5rem] justify-center cursor-pointer border-transparent hover:bg-neutral-200 disabled:cursor-wait disabled:opacity-70 dark:hover:bg-coolgray-300" />
     @endif
 </div>

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

@@ -3,46 +3,12 @@
     'noLoading' => false,
 ])
 @php
-    // Handle both colon format (backend) and parentheses format (from services.blade.php)
-    // For exited containers, health status is hidden (health checks don't run on stopped containers)
-    // exited:unhealthy → Exited
-    // exited (unhealthy) → Exited
-
     if (str($status)->contains('(')) {
-        // Already in parentheses format from services.blade.php - use as-is
-        $displayStatus = $status;
-        $healthStatus = str($status)->after('(')->before(')')->trim()->value();
-
-        // Don't show health status for exited containers (health checks don't run on stopped containers)
-        if (str($displayStatus)->lower()->contains('exited')) {
-            $displayStatus = str($status)->before('(')->trim()->headline();
-            $healthStatus = null;
-        }
+        $displayStatus = str($status)->before('(')->trim()->headline()->value();
     } elseif (str($status)->contains(':')) {
-        // Colon format from backend - transform it
-        $parts = explode(':', $status);
-        $displayStatus = str($parts[0])->headline();
-        $healthStatus = $parts[1] ?? null;
-
-        // Don't show health status for exited containers (health checks don't run on stopped containers)
-        if (str($displayStatus)->lower()->contains('exited')) {
-            $healthStatus = null;
-        }
+        $displayStatus = str(explode(':', $status)[0])->headline()->value();
     } else {
-        // Simple status without health
-        $displayStatus = str($status)->headline();
-        $healthStatus = null;
+        $displayStatus = str($status)->headline()->value();
     }
 @endphp
-<div class="flex items-center">
-    @if (!$noLoading)
-        <x-loading wire:loading.delay.longer />
-    @endif
-    <span wire:loading.remove.delay.longer class="flex items-center">
-        <div class="badge badge-error "></div>
-        <div class="pl-2 pr-1 text-xs font-bold text-error">{{ $displayStatus }}</div>
-        @if ($healthStatus && !str($displayStatus)->contains('('))
-            <div class="text-xs text-error">({{ $healthStatus }})</div>
-        @endif
-    </span>
-</div>
+<x-status-badge status="{{ $displayStatus }}" type="error" />

resources/views/emails/api-token-expiring.blade.php

@@ -0,0 +1,7 @@
+<x-emails.layout>
+Your Coolify API token ({{ $tokenName }}) expires on {{ $expiresAt }}.
+
+Rotate this token before it expires. API calls using this token will start failing once the expiration time is reached.
+
+Manage your API tokens [here]({{ $manageUrl }}).
+</x-emails.layout>

resources/views/emails/application-restart-limit-reached.blade.php

@@ -0,0 +1,7 @@
+<x-emails.layout>
+{{ $name }} has been automatically stopped after {{ $restart_count }} crash restarts (limit: {{ $max_restart_count }}).
+
+The application appears to be in a crash loop. Please investigate the issue and redeploy when ready.
+
+[Check what is going on]({{ $resource_url }}).
+</x-emails.layout>

resources/views/layouts/app.blade.php

@@ -7,18 +7,29 @@
     <!-- Global search component - included once to prevent keyboard shortcut duplication -->
     <livewire:global-search />
     @auth
-        <livewire:deployments-indicator />
         <div x-data="{
             open: false,
+            collapsed: localStorage.getItem('sidebarCollapsed') === 'true',
+            pageWidth: localStorage.getItem('pageWidth') || 'full',
+            sidebarReady: false,
             init() {
-                this.pageWidth = localStorage.getItem('pageWidth');
-                if (!this.pageWidth) {
-                    this.pageWidth = 'full';
-                    localStorage.setItem('pageWidth', 'full');
+                if (!localStorage.getItem('pageWidth')) {
+                    localStorage.setItem('pageWidth', this.pageWidth);
                 }
+
+                this.$nextTick(() => {
+                    requestAnimationFrame(() => {
+                        this.sidebarReady = true;
+                    });
+                });
+            },
+            toggleSidebar() {
+                this.collapsed = !this.collapsed;
+                localStorage.setItem('sidebarCollapsed', this.collapsed);
             }
         }" x-cloak class="mx-auto dark:text-inherit text-black"
             :class="pageWidth === 'full' ? '' : 'max-w-7xl'">
+            <livewire:deployments-indicator />
             <div class="relative z-50 lg:hidden" :class="open ? 'block' : 'hidden'" role="dialog" aria-modal="true">
                 <div class="fixed inset-0 bg-black/80" x-on:click="open = false"></div>
                 <div class="fixed inset-y-0 right-0 h-full flex">
@@ -40,10 +51,20 @@
                 </div>
             </div>
 
-            <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-56 lg:flex-col min-w-0">
+            <div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:flex-col min-w-0"
+                :class="[collapsed ? 'lg:w-16' : 'lg:w-56', sidebarReady ? 'transition-[width] duration-200' : '']">
                 <div class="flex flex-col overflow-y-auto grow gap-y-5 scrollbar min-w-0">
                     <x-navbar />
                 </div>
+                <button type="button" @click="toggleSidebar()"
+                    :title="collapsed ? 'Expand sidebar' : 'Collapse sidebar'"
+                    class="absolute top-8 -right-3 z-50 hidden lg:flex items-center justify-center w-6 h-6 rounded-full border bg-white dark:bg-coolgray-100 dark:border-coolgray-200 border-neutral-300 hover:bg-neutral-100 dark:hover:bg-coolgray-200 transition-colors shadow-sm">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-neutral-600 dark:text-neutral-300 transition-transform"
+                        :class="collapsed ? '' : 'rotate-180'"
+                        fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
+                    </svg>
+                </button>
             </div>
 
             <div
@@ -62,10 +83,8 @@
                 </button>
             </div>
 
-            <main class="lg:pl-56">
-                <div class="p-4 sm:px-6 lg:px-8 lg:py-6">
+            <main class="p-6" :class="[collapsed ? 'lg:pl-[6rem]' : 'lg:pl-[16rem]', sidebarReady ? 'transition-[padding] duration-200' : '']">
                     {{ $slot }}
-                </div>
             </main>
         </div>
     @endauth

resources/views/layouts/base.blade.php

@@ -172,7 +172,8 @@
         }
         @auth
             window.Pusher = Pusher;
-            window.Echo = new Echo({
+            const EchoConstructor = typeof Echo === 'function' ? Echo : Echo.default;
+            window.Echo = new EchoConstructor({
                 broadcaster: 'pusher',
                 cluster: "{{ config('constants.pusher.host') }}" || window.location.hostname,
                 key: "{{ config('constants.pusher.app_key') }}" || 'coolify',

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

@@ -48,11 +48,11 @@
             characterData: true
         });" x-destroy="observer && observer.disconnect()"
             @class([
-                'flex flex-col w-full px-4 py-2 overflow-y-auto bg-white border border-solid rounded-sm dark:text-white dark:bg-coolgray-100 scrollbar border-neutral-300 dark:border-coolgray-300',
+                'flex flex-col w-full min-w-0 max-w-full px-4 py-2 overflow-y-auto bg-white border border-solid rounded-sm dark:text-white dark:bg-coolgray-100 scrollbar border-neutral-300 dark:border-coolgray-300',
                 'flex-1 min-h-0' => $fullHeight,
                 'max-h-96' => !$fullHeight,
             ])>
-            <pre class="font-logs whitespace-pre-wrap" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($activity) }}</pre>
+            <pre class="font-logs min-w-0 max-w-full whitespace-pre-wrap wrap-anywhere" @if ($isPollingActive) wire:poll.1000ms="polling" @endif>{{ RunRemoteProcess::decodeOutput($activity) }}</pre>
         </div>
     @else
         @if ($showWaiting)

resources/views/livewire/dashboard.blade.php

@@ -11,20 +11,23 @@
     <section class="-mt-2">
         <div class="flex items-center gap-2 pb-2">
             <h3>Projects</h3>
-            @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-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" d="M12 4.5v15m7.5-7.5h-15" />
-                            </svg>
-                        </button>
-                    </x-slot:content>
-                    <livewire:project.add-empty />
-                </x-modal-input>
-            @endif
+@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-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"
+                                        d="M12 4.5v15m7.5-7.5h-15" />
+                                </svg>
+                            </button>
+                        </x-slot:content>
+                        <livewire:project.add-empty />
+                    </x-modal-input>
+                @endif
+            @endcan
         </div>
         @if ($projects->count() > 0)
             <div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
@@ -64,12 +67,15 @@
         @else
             <div class="flex flex-col gap-1">
                 <div class='font-bold dark:text-warning'>No projects found.</div>
-                <div class="flex items-center gap-1">
-                    <x-modal-input buttonTitle="Add" title="New Project">
-                        <livewire:project.add-empty />
-                    </x-modal-input> your first project or
-                    go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}" {{ wireNavigate() }}>onboarding</a> page.
-                </div>
+                @can('create', App\Models\Project::class)
+                    <div class="flex items-center gap-1">
+                        <x-modal-input buttonTitle="Add" title="New Project">
+                            <livewire:project.add-empty />
+                        </x-modal-input> your first project or
+                        go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}"
+                            {{ wireNavigate() }}>onboarding</a> page.
+                    </div>
+                @endcan
             </div>
         @endif
     </section>
@@ -77,20 +83,23 @@
     <section>
         <div class="flex items-center gap-2 pb-2">
             <h3>Servers</h3>
-            @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-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" d="M12 4.5v15m7.5-7.5h-15" />
-                            </svg>
-                        </button>
-                    </x-slot:content>
-                    <livewire:server.create />
-                </x-modal-input>
-            @endif
+@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-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"
+                                        d="M12 4.5v15m7.5-7.5h-15" />
+                                </svg>
+                            </button>
+                        </x-slot:content>
+                        <livewire:server.create />
+                    </x-modal-input>
+                @endif
+            @endcan
         </div>
         @if ($servers->count() > 0)
             <div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
@@ -127,26 +136,34 @@
             @if ($privateKeys->count() === 0)
                 <div class="flex flex-col gap-1">
                     <div class='font-bold dark:text-warning'>No private keys found.</div>
-                    <div class="flex items-center gap-1">Before you can add your server, first <x-modal-input
-                            buttonTitle="add" title="New Private Key">
-                            <livewire:security.private-key.create from="server" />
-                        </x-modal-input> a private key
-                        or
-                        go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}" {{ wireNavigate() }}>onboarding</a>
-                        page.
-                    </div>
+                    @can('create', App\Models\Server::class)
+                        <div class="flex items-center gap-1">Before you can add your server, first <x-modal-input
+                                buttonTitle="add" title="New Private Key">
+                                <livewire:security.private-key.create from="server" />
+                            </x-modal-input> a private key
+                            or
+                            go to the <a class="underline dark:text-white"
+                                href="{{ route('onboarding') }}"
+                                {{ wireNavigate() }}>onboarding</a>
+                            page.
+                        </div>
+                    @endcan
                 </div>
             @else
                 <div class="flex flex-col gap-1">
                     <div class='font-bold dark:text-warning'>No servers found.</div>
-                    <div class="flex items-center gap-1">
-                        <x-modal-input buttonTitle="Add" title="New Server" :closeOutside="false">
-                            <livewire:server.create />
-                        </x-modal-input> your first server
-                        or
-                        go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}" {{ wireNavigate() }}>onboarding</a>
-                        page.
-                    </div>
+                    @can('create', App\Models\Server::class)
+                        <div class="flex items-center gap-1">
+                            <x-modal-input buttonTitle="Add" title="New Server" :closeOutside="false">
+                                <livewire:server.create />
+                            </x-modal-input> your first server
+                            or
+                            go to the <a class="underline dark:text-white"
+                                href="{{ route('onboarding') }}"
+                                {{ wireNavigate() }}>onboarding</a>
+                            page.
+                        </div>
+                    @endcan
                 </div>
             @endif
         @endif

resources/views/livewire/deployments-indicator.blade.php

@@ -1,7 +1,8 @@
 <div wire:poll.3000ms x-data="{
     expanded: @entangle('expanded'),
     reduceOpacity: @js($this->shouldReduceOpacity)
-}" class="fixed bottom-0 z-60 mb-4 left-0 lg:left-56 ml-4">
+}" class="fixed bottom-0 left-0 z-60 mb-4 ml-4 transition-[left] duration-200"
+    :class="collapsed ? 'lg:left-16' : 'lg:left-56'">
     @if ($this->deploymentCount > 0)
         <div class="relative transition-opacity duration-200"
             :class="{ 'opacity-100': expanded || !reduceOpacity, 'opacity-60 hover:opacity-100': reduceOpacity && !expanded }">

resources/views/livewire/destination/index.blade.php

@@ -14,31 +14,30 @@
     </div>
     <div class="subtitle">Network endpoints to deploy your resources.</div>
     <div class="grid gap-4 lg:grid-cols-2 -mt-1">
-        @forelse ($servers as $server)
-            @forelse ($server->destinations() as $destination)
-                @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
-                    <a class="coolbox group" {{ wireNavigate() }}
-                        href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
-                        <div class="flex flex-col justify-center mx-6">
-                            <div class="box-title">{{ $destination->name }}</div>
-                            <div class="box-description">Server: {{ $destination->server->name }}</div>
+        @forelse ($destinations as $destination)
+            @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
+                <a class="coolbox group" {{ wireNavigate() }}
+                    href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
+                    <div class="flex flex-col justify-center mx-6">
+                        <div class="box-title">{{ $destination->name }}</div>
+                        <div class="box-description">Server: {{ $destination->server->name }}</div>
+                    </div>
+                </a>
+            @endif
+            @if ($destination->getMorphClass() === 'App\Models\SwarmDocker')
+                <a class="coolbox group" {{ wireNavigate() }}
+                    href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
+                    <div class="flex flex-col mx-6">
+                        <div class="box-title">
+                            {{ $destination->name }}
+                            <x-deprecated-badge />
                         </div>
-                    </a>
-                @endif
-                @if ($destination->getMorphClass() === 'App\Models\SwarmDocker')
-                    <a class="coolbox group" {{ wireNavigate() }}
-                        href="{{ route('destination.show', ['destination_uuid' => data_get($destination, 'uuid')]) }}">
-                        <div class="flex flex-col mx-6">
-                            <div class="box-title">{{ $destination->name }}</div>
-                            <div class="box-description">server: {{ $destination->server->name }}</div>
-                        </div>
-                    </a>
-                @endif
-            @empty
-                <div>No destinations found.</div>
-            @endforelse
+                        <div class="box-description">Server: {{ $destination->server->name }}</div>
+                    </div>
+                </a>
+            @endif
         @empty
-            <div>No servers found.</div>
+            <div>No destinations found.</div>
         @endforelse
     </div>
 </div>

resources/views/livewire/destination/navbar.blade.php

@@ -0,0 +1,14 @@
+@if ($destination->getMorphClass() === 'App\\Models\\StandaloneDocker')
+    <div class="navbar-main">
+        <nav class="flex shrink-0 gap-6 items-center whitespace-nowrap scrollbar min-h-10">
+            <a class="{{ request()->routeIs('destination.show') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('destination.show', ['destination_uuid' => $destination->uuid]) }}">
+                General
+            </a>
+            <a class="{{ request()->routeIs('destination.resources') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+                href="{{ route('destination.resources', ['destination_uuid' => $destination->uuid]) }}">
+                Resources
+            </a>
+        </nav>
+    </div>
+@endif

resources/views/livewire/destination/new/docker.blade.php

@@ -18,7 +18,7 @@
         </form>
     </div>
 @else
-    <x-callout type="warning" title="Permission Required">
+    <x-callout type="danger" title="Insufficient Permissions">
         You don't have permission to create new destinations. Please contact your team administrator for access.
     </x-callout>
 @endcan

resources/views/livewire/destination/resources.blade.php

@@ -0,0 +1,53 @@
+<div>
+    <div class="flex items-center gap-2">
+        <h1>Destination</h1>
+    </div>
+    <div class="subtitle">Resources deployed to this Docker network.</div>
+
+    @include('livewire.destination.navbar', ['destination' => $destination])
+
+    <div class="pt-4" x-data="{ search: '' }">
+        @if (count($resources) === 0)
+            <div class="py-4 text-sm opacity-70">No resources are using this destination.</div>
+        @else
+            <x-forms.input placeholder="Search resources..." x-model="search" id="null" />
+            <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">Project</th>
+                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Environment</th>
+                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Name</th>
+                                    <th class="px-5 py-3 text-xs font-medium text-left uppercase">Type</th>
+                                </tr>
+                            </thead>
+                            <tbody class="divide-y">
+                                @foreach ($resources as $row)
+                                    <tr class="dark:hover:bg-coolgray-300 hover:bg-neutral-100"
+                                        wire:key="destination-resource-{{ $row['type'] }}-{{ $row['uuid'] }}"
+                                        x-show="search === '' || '{{ addslashes($row['search']) }}'.includes(search.toLowerCase())">
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">{{ $row['project'] }}</td>
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">{{ $row['environment'] }}</td>
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">
+                                            @if ($row['url'])
+                                                <a {{ wireNavigate() }} href="{{ $row['url'] }}">
+                                                    {{ $row['name'] }}
+                                                    <x-internal-link />
+                                                </a>
+                                            @else
+                                                <span>{{ $row['name'] }}</span>
+                                            @endif
+                                        </td>
+                                        <td class="px-5 py-4 text-sm whitespace-nowrap">{{ ucfirst($row['type']) }}</td>
+                                    </tr>
+                                @endforeach
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        @endif
+    </div>
+</div>

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

@@ -16,9 +16,13 @@
         @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')
             <div class="subtitle ">A simple Docker network.</div>
         @else
-            <div class="subtitle ">A swarm Docker network. WIP</div>
+            <div class="subtitle flex items-center gap-2">A swarm Docker network.
+                <x-deprecated-badge />
+            </div>
         @endif
-        <div class="flex gap-2">
+        @include('livewire.destination.navbar', ['destination' => $destination])
+
+        <div class="flex gap-2 pt-4">
             <x-forms.input canGate="update" :canResource="$destination" id="name" label="Name" />
             <x-forms.input id="serverIp" label="Server IP" readonly />
             @if ($destination->getMorphClass() === 'App\Models\StandaloneDocker')

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

@@ -632,7 +632,7 @@
                                     @foreach ($searchResults as $result)
                                         @if (!isset($result['is_creatable_suggestion']))
                                             <a href="{{ $result['link'] ?? '#' }}"
-                                                class="search-result-item block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-coolgray-200 transition-colors focus:outline-none focus:bg-warning-50 dark:focus:bg-warning-900/20 border-transparent hover:border-coollabs focus:border-warning-500 dark:focus:border-warning-400">
+                                                class="search-result-item block px-4 py-3 hover:bg-neutral-100 dark:hover:bg-coolgray-200 transition-colors focus:outline-none focus:bg-neutral-100 dark:focus:bg-coolgray-200 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-coollabs dark:focus-visible:ring-warning">
                                                 <div class="flex items-center justify-between gap-3">
                                                     <div class="flex-1 min-w-0">
                                                         <div class="flex items-center gap-2 mb-1">
@@ -696,12 +696,12 @@
                                     <!-- Category Items -->
                                     @foreach ($items as $item)
                                         <button type="button" wire:click="navigateToResource('{{ $item['type'] }}')"
-                                            class="search-result-item w-full text-left block px-4 py-3 hover:bg-warning-50 dark:hover:bg-warning-900/20 transition-colors focus:outline-none focus:bg-warning-100 dark:focus:bg-warning-900/30 border-transparent hover:border-warning-500 focus:border-warning-500">
+                                            class="search-result-item w-full text-left block px-4 py-3 hover:bg-neutral-100 dark:hover:bg-coolgray-200 transition-colors focus:outline-none focus:bg-neutral-100 dark:focus:bg-coolgray-200 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-coollabs dark:focus-visible:ring-warning">
                                             <div class="flex items-center justify-between gap-3">
                                                 <div class="flex items-center gap-3 flex-1 min-w-0">
                                                     @if (! empty($item['logo']))
                                                         <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center overflow-hidden">
-                                                            <img src="{{ asset($item['logo']) }}" alt="{{ $item['name'] }}" class="w-7 h-7 object-contain">
+                                                            <img src="{{ asset($item['logo']) }}" alt="{{ $item['name'] }}" class="w-8 h-8 object-contain">
                                                         </div>
                                                     @else
                                                         <div
@@ -755,7 +755,7 @@
                                 </template>
                                 <template x-for="(result, index) in searchResults" :key="index">
                                     <a :href="result.link || '#'"
-                                        class="search-result-item block px-4 py-3 hover:bg-neutral-50 dark:hover:bg-coolgray-200 transition-colors focus:outline-none focus:bg-warning-50 dark:focus:bg-warning-900/20 border-transparent hover:border-coollabs focus:border-warning-500 dark:focus:border-warning-400">
+                                        class="search-result-item block px-4 py-3 hover:bg-neutral-100 dark:hover:bg-coolgray-200 transition-colors focus:outline-none focus:bg-neutral-100 dark:focus:bg-coolgray-200 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-coollabs dark:focus-visible:ring-warning">
                                         <div class="flex items-center justify-between gap-3">
                                             <div class="flex-1 min-w-0">
                                                 <div class="flex items-center gap-2 mb-1">
@@ -811,12 +811,12 @@
 
                                         <template x-for="item in items" :key="item.type">
                                             <button type="button" @click="$wire.navigateToResource(item.type)"
-                                                class="search-result-item w-full text-left block px-4 py-3 hover:bg-warning-50 dark:hover:bg-warning-900/20 transition-colors focus:outline-none focus:bg-warning-100 dark:focus:bg-warning-900/30 border-transparent hover:border-warning-500 focus:border-warning-500">
+                                                class="search-result-item w-full text-left block px-4 py-3 hover:bg-neutral-100 dark:hover:bg-coolgray-200 transition-colors focus:outline-none focus:bg-neutral-100 dark:focus:bg-coolgray-200 focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-coollabs dark:focus-visible:ring-warning">
                                                 <div class="flex items-center justify-between gap-3">
                                                     <div class="flex items-center gap-3 flex-1 min-w-0">
                                                         <template x-if="item.logo">
                                                             <div class="flex-shrink-0 w-10 h-10 rounded-lg bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center overflow-hidden">
-                                                                <img :src="'/' + item.logo" :alt="item.name" class="w-7 h-7 object-contain">
+                                                                <img :src="'/' + item.logo" :alt="item.name" class="w-8 h-8 object-contain">
                                                             </div>
                                                         </template>
                                                         <template x-if="!item.logo">
@@ -1137,4 +1137,4 @@
         </template>
     </div>
 
-</div>
+</div>

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

@@ -26,9 +26,15 @@
                 helper="If enabled, a ping (@here) will be sent to the notification when a critical event happens."
                 label="Ping Enabled" />
         </div>
-        <x-forms.input canGate="update" :canResource="$settings" type="password"
-            helper="Create a Discord Server and generate a Webhook URL. <br><a class='inline-block underline dark:text-white' href='https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks' target='_blank'>Webhook Documentation</a>"
-            required id="discordWebhookUrl" label="Webhook" />
+        @can('update', $settings)
+            <x-forms.input type="password"
+                helper="Create a Discord Server and generate a Webhook URL. <br><a class='inline-block underline dark:text-white' href='https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks' target='_blank'>Webhook Documentation</a>"
+                required id="discordWebhookUrl" label="Webhook" />
+        @else
+            <x-forms.input disabled
+                helper="Create a Discord Server and generate a Webhook URL. <br><a class='inline-block underline dark:text-white' href='https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks' target='_blank'>Webhook Documentation</a>"
+                required label="Webhook" value="Hidden (only admins can view)" />
+        @endcan
     </form>
     <h2 class="mt-4">Notification Settings</h2>
     <p class="mb-4">

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

@@ -81,7 +81,11 @@
                         </div>
                         <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" />
+                            @can('update', $settings)
+                                <x-forms.input canGate="update" :canResource="$settings" id="smtpPassword" type="password" label="SMTP Password" />
+                            @else
+                                <x-forms.input disabled label="SMTP Password" value="Hidden (only admins can view)" />
+                            @endcan
                             <x-forms.input canGate="update" :canResource="$settings" id="smtpTimeout" type="number"  helper="Timeout value for sending emails."
                                 label="Timeout" />
                         </div>
@@ -103,8 +107,12 @@
                 <div class="flex flex-col">
                     <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 type="password" id="resendApiKey" placeholder="API key"
-                                label="API Key" />
+                            @can('update', $settings)
+                                <x-forms.input canGate="update" :canResource="$settings" required type="password" id="resendApiKey" placeholder="API key"
+                                    label="API Key" />
+                            @else
+                                <x-forms.input disabled label="API Key" value="Hidden (only admins can view)" />
+                            @endcan
                         </div>
                     </div>
                 </div>

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

@@ -24,12 +24,21 @@
             <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSavePushoverEnabled" id="pushoverEnabled" label="Enabled" />
         </div>
         <div class="flex  gap-2">
-            <x-forms.input canGate="update" :canResource="$settings" type="password"
-                helper="Get your User Key in Pushover. You need to be logged in to Pushover to see your user key in the top right corner. <br><a class='inline-block underline dark:text-white' href='https://pushover.net/' target='_blank'>Pushover Dashboard</a>"
-                required id="pushoverUserKey" label="User Key" />
-            <x-forms.input canGate="update" :canResource="$settings" type="password"
-                helper="Generate an API Token/Key in Pushover by creating a new application. <br><a class='inline-block underline dark:text-white' href='https://pushover.net/apps/build' target='_blank'>Create Pushover Application</a>"
-                required id="pushoverApiToken" label="API Token" />
+            @can('update', $settings)
+                <x-forms.input type="password"
+                    helper="Get your User Key in Pushover. You need to be logged in to Pushover to see your user key in the top right corner. <br><a class='inline-block underline dark:text-white' href='https://pushover.net/' target='_blank'>Pushover Dashboard</a>"
+                    required id="pushoverUserKey" label="User Key" />
+                <x-forms.input type="password"
+                    helper="Generate an API Token/Key in Pushover by creating a new application. <br><a class='inline-block underline dark:text-white' href='https://pushover.net/apps/build' target='_blank'>Create Pushover Application</a>"
+                    required id="pushoverApiToken" label="API Token" />
+            @else
+                <x-forms.input disabled
+                    helper="Get your User Key in Pushover. You need to be logged in to Pushover to see your user key in the top right corner. <br><a class='inline-block underline dark:text-white' href='https://pushover.net/' target='_blank'>Pushover Dashboard</a>"
+                    required label="User Key" value="Hidden (only admins can view)" />
+                <x-forms.input disabled
+                    helper="Generate an API Token/Key in Pushover by creating a new application. <br><a class='inline-block underline dark:text-white' href='https://pushover.net/apps/build' target='_blank'>Create Pushover Application</a>"
+                    required label="API Token" value="Hidden (only admins can view)" />
+            @endcan
         </div>
     </form>
     <h2 class="mt-4">Notification Settings</h2>

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

@@ -23,9 +23,15 @@
         <div class="w-32">
             <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSaveSlackEnabled" id="slackEnabled" label="Enabled" />
         </div>
-        <x-forms.input canGate="update" :canResource="$settings" type="password"
-            helper="Create a Slack APP and generate a Incoming Webhook URL. <br><a class='inline-block underline dark:text-white' href='https://api.slack.com/apps' target='_blank'>Create Slack APP</a>"
-            required id="slackWebhookUrl" label="Webhook" />
+        @can('update', $settings)
+            <x-forms.input type="password"
+                helper="Create a Slack APP and generate a Incoming Webhook URL. <br><a class='inline-block underline dark:text-white' href='https://api.slack.com/apps' target='_blank'>Create Slack APP</a>"
+                required id="slackWebhookUrl" label="Webhook" />
+        @else
+            <x-forms.input disabled
+                helper="Create a Slack APP and generate a Incoming Webhook URL. <br><a class='inline-block underline dark:text-white' href='https://api.slack.com/apps' target='_blank'>Create Slack APP</a>"
+                required label="Webhook" value="Hidden (only admins can view)" />
+        @endcan
     </form>
     <h2 class="mt-4">Notification Settings</h2>
     <p class="mb-4">

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

@@ -24,12 +24,21 @@
             <x-forms.checkbox canGate="update" :canResource="$settings" instantSave="instantSaveTelegramEnabled" id="telegramEnabled" label="Enabled" />
         </div>
         <div class="flex gap-2">
-            <x-forms.input canGate="update" :canResource="$settings" type="password" autocomplete="new-password"
-                helper="Get it from the <a class='inline-block underline dark:text-white' href='https://t.me/botfather' target='_blank'>BotFather Bot</a> on Telegram."
-                required id="telegramToken" label="Bot API Token" />
-            <x-forms.input canGate="update" :canResource="$settings" type="password" autocomplete="new-password"
-                helper="Add your bot to a group chat and add its Chat ID here." required id="telegramChatId"
-                label="Chat ID" />
+            @can('update', $settings)
+                <x-forms.input type="password" autocomplete="new-password"
+                    helper="Get it from the <a class='inline-block underline dark:text-white' href='https://t.me/botfather' target='_blank'>BotFather Bot</a> on Telegram."
+                    required id="telegramToken" label="Bot API Token" />
+                <x-forms.input type="password" autocomplete="new-password"
+                    helper="Add your bot to a group chat and add its Chat ID here." required id="telegramChatId"
+                    label="Chat ID" />
+            @else
+                <x-forms.input disabled autocomplete="new-password"
+                    helper="Get it from the <a class='inline-block underline dark:text-white' href='https://t.me/botfather' target='_blank'>BotFather Bot</a> on Telegram."
+                    required label="Bot API Token" value="Hidden (only admins can view)" />
+                <x-forms.input disabled autocomplete="new-password"
+                    helper="Add your bot to a group chat and add its Chat ID here." required label="Chat ID"
+                    value="Hidden (only admins can view)" />
+            @endcan
         </div>
     </form>
     <h2 class="mt-4">Notification Settings</h2>

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

@@ -28,9 +28,15 @@
         </div>
         <div class="flex items-end gap-2">
 
-            <x-forms.input canGate="update" :canResource="$settings" type="password"
-                helper="Enter a valid HTTP or HTTPS URL. Coolify will send POST requests to this endpoint when events occur."
-                required id="webhookUrl" label="Webhook URL (POST)" />
+            @can('update', $settings)
+                <x-forms.input type="password"
+                    helper="Enter a valid HTTP or HTTPS URL. Coolify will send POST requests to this endpoint when events occur."
+                    required id="webhookUrl" label="Webhook URL (POST)" />
+            @else
+                <x-forms.input disabled
+                    helper="Enter a valid HTTP or HTTPS URL. Coolify will send POST requests to this endpoint when events occur."
+                    required label="Webhook URL (POST)" value="Hidden (only admins can view)" />
+            @endcan
         </div>
     </form>
     <h2 class="mt-4">Notification Settings</h2>

resources/views/livewire/profile/appearance.blade.php

@@ -0,0 +1,119 @@
+<div>
+    <x-slot:title>
+        Appearance | Coolify
+    </x-slot>
+    <x-profile.navbar />
+
+    <div x-data="{
+        theme: localStorage.getItem('theme') || 'dark',
+        pageWidth: localStorage.getItem('pageWidth') || 'full',
+        zoom: localStorage.getItem('zoom') || '100',
+        init() {
+            localStorage.setItem('theme', this.theme);
+            localStorage.setItem('pageWidth', this.pageWidth);
+            localStorage.setItem('zoom', this.zoom);
+            this.applyTheme();
+        },
+        setTheme(type) {
+            this.theme = type;
+            localStorage.setItem('theme', type);
+            this.applyTheme();
+        },
+        applyTheme() {
+            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+            const isDark = this.theme === 'dark' || (this.theme === 'system' && prefersDark);
+            document.documentElement.classList.toggle('dark', isDark);
+            document.querySelector('meta[name=theme-color]')?.setAttribute('content', isDark ? '#101010' : '#ffffff');
+        },
+        setWidth(width) {
+            this.pageWidth = width;
+            localStorage.setItem('pageWidth', width);
+            window.location.reload();
+        },
+        setZoom(value) {
+            this.zoom = value;
+            localStorage.setItem('zoom', value);
+            window.location.reload();
+        },
+    }" class="flex max-w-2xl flex-col">
+        <section class="space-y-1.5">
+            <h2>Appearance</h2>
+            <div>Choose how Coolify looks in this browser.</div>
+            <div class="flex flex-wrap gap-1.5">
+                <button type="button" @click="setTheme('light')" aria-label="Use light theme"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-left text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="theme === 'light' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
+                    </svg>
+                    <span>Light</span>
+                </button>
+                <button type="button" @click="setTheme('system')" aria-label="Use system theme"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-left text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="theme === 'system' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
+                    </svg>
+                    <span>System</span>
+                </button>
+                <button type="button" @click="setTheme('dark')" aria-label="Use dark theme"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-left text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="theme === 'dark' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
+                    </svg>
+                    <span>Dark</span>
+                </button>
+            </div>
+        </section>
+
+        <section class="space-y-1.5">
+            <h2>Width</h2>
+            <div>Choose the maximum page width for this browser.</div>
+            <div class="flex flex-wrap gap-1.5">
+                <button type="button" @click="setWidth('center')" aria-label="Use centered width"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="pageWidth === 'center' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
+                    </svg>
+                    Center
+                </button>
+                <button type="button" @click="setWidth('full')" aria-label="Use full width"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="pageWidth === 'full' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                    </svg>
+                    Full
+                </button>
+            </div>
+        </section>
+
+        <section class="space-y-1.5">
+            <h2>Zoom</h2>
+            <div>Choose interface density for this browser.</div>
+            <div class="flex flex-wrap gap-1.5">
+                <button type="button" @click="setZoom('100')" aria-label="Use 100 percent zoom"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="zoom === '100' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                    </svg>
+                    100%
+                </button>
+                <button type="button" @click="setZoom('90')" aria-label="Use 90 percent zoom"
+                    class="flex items-center gap-2 rounded-sm border border-neutral-300 bg-white px-2 py-1 text-sm hover:bg-neutral-100 focus-visible:ring-2 focus-visible:ring-coollabs dark:border-coolgray-300 dark:bg-coolgray-100 dark:hover:bg-coolgray-200 dark:focus-visible:ring-warning"
+                    :class="zoom === '90' && 'border-coollabs text-coollabs dark:border-warning dark:text-warning'">
+                    <svg class="size-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 10h4v4h-4v-4z" />
+                    </svg>
+                    90%
+                </button>
+            </div>
+        </section>
+    </div>
+</div>

resources/views/livewire/profile/index.blade.php

@@ -2,8 +2,7 @@
     <x-slot:title>
         Profile | Coolify
     </x-slot>
-    <h1>Profile</h1>
-    <div class="subtitle -mt-2">Your user profile settings.</div>
+    <x-profile.navbar />
     <form wire:submit='submit' class="flex flex-col">
         <div class="flex items-center gap-2">
             <h2>General</h2>

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

@@ -41,7 +41,7 @@
                     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."
+                    helper="When enabled, anyone can trigger PR deployments. When disabled, fork PRs are blocked and only repository owners, members, and collaborators can trigger PR deployments."
                     instantSave id="isPrDeploymentsPublicEnabled" label="Allow Public PR Deployments" canGate="update"
                     :canResource="$application" :disabled="!$isPreviewDeploymentsEnabled" />
 
@@ -86,7 +86,33 @@
                     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
-
+            <h3 class="pt-4">Operations</h3>
+            <form class="flex items-end gap-2" wire:submit.prevent='saveStopGracePeriod'>
+                <x-forms.input
+                    type="number"
+                    id="stopGracePeriod"
+                    label="Stop Grace Period (seconds)"
+                    placeholder="{{ DEFAULT_STOP_GRACE_PERIOD_SECONDS }}"
+                    helper="How long to wait for graceful shutdown during rolling updates, manual stops, and restarts. Applies to all containers for this application. Default: {{ DEFAULT_STOP_GRACE_PERIOD_SECONDS }} seconds. Range: {{ MIN_STOP_GRACE_PERIOD_SECONDS }}-{{ MAX_STOP_GRACE_PERIOD_SECONDS }} seconds (1 hour)."
+                    min="{{ MIN_STOP_GRACE_PERIOD_SECONDS }}"
+                    max="{{ MAX_STOP_GRACE_PERIOD_SECONDS }}"
+                    canGate="update"
+                    :canResource="$application"
+                />
+                <x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
+            </form>
+            <form class="flex items-end gap-2" wire:submit.prevent='saveMaxRestartCount'>
+                <x-forms.input
+                    type="number"
+                    min="0"
+                    helper="Maximum number of crash restarts before Coolify automatically stops the application and sends a notification. Set to 0 to disable the limit."
+                    id="maxRestartCount"
+                    label="Max Restart Count"
+                    canGate="update"
+                    :canResource="$application"
+                />
+                <x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
+            </form>
             <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" />

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

@@ -6,68 +6,128 @@
     <livewire:project.shared.configuration-checker :resource="$application" />
     <livewire:project.application.heading :application="$application" />
 
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
-        <div class="sub-menu-wrapper">
-            <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                href="{{ route('project.application.configuration', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">General</span></a>
-            <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                href="{{ route('project.application.advanced', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Advanced</span></a>
-            @if ($application->destination->server->isSwarm())
-                <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                    href="{{ route('project.application.swarm', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Swarm Configuration</span></a>
-            @endif
-            <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                href="{{ route('project.application.environment-variables', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Environment Variables</span></a>
-            <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                href="{{ route('project.application.persistent-storage', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Persistent Storage</span></a>
-            @if ($application->git_based())
-                <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                    href="{{ route('project.application.source', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Git Source</span></a>
-            @endif
-            <a class="sub-menu-item flex items-center gap-2" {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                href="{{ route('project.application.servers', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Servers</span>
-                @if ($application->server_status == false)
-                    <span title="One or more servers are unreachable or misconfigured.">
-                        <svg class="w-4 h-4 text-error" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-                            <path fill="currentColor"
-                                d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
-                        </svg>
-                    </span>
-                @elseif ($application->additional_servers()->exists() && str($application->status)->contains('degraded'))
-                    <span title="Application is in degraded state across multiple servers.">
-                        <svg class="w-4 h-4 text-error" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-                            <path fill="currentColor"
-                                d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
-                        </svg>
-                    </span>
-                @endif
-            </a>
-            <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() || $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
-            @if ($application->build_pack !== 'dockercompose')
-                <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                    href="{{ route('project.application.healthcheck', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Healthcheck</span></a>
-            @endif
-            <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                href="{{ route('project.application.rollback', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Rollback</span></a>
-            <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                href="{{ route('project.application.resource-limits', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Resource Limits</span></a>
-            <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                href="{{ route('project.application.resource-operations', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Resource Operations</span></a>
-            <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                href="{{ route('project.application.metrics', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Metrics</span></a>
-            <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                href="{{ route('project.application.tags', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Tags</span></a>
-            <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
-                href="{{ route('project.application.danger', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'application_uuid' => $application->uuid]) }}"><span class="menu-item-label">Danger Zone</span></a>
+    @php
+        $applicationRouteParameters = [
+            'project_uuid' => $project->uuid,
+            'environment_uuid' => $environment->uuid,
+            'application_uuid' => $application->uuid,
+        ];
+
+        $configurationMenuItems = [
+            [
+                'label' => 'General',
+                'route' => 'project.application.configuration',
+                'active' => $currentRoute === 'project.application.configuration',
+            ],
+            [
+                'label' => 'Advanced',
+                'route' => 'project.application.advanced',
+                'active' => $currentRoute === 'project.application.advanced',
+            ],
+            [
+                'label' => 'Swarm',
+                'route' => 'project.application.swarm',
+                'active' => $currentRoute === 'project.application.swarm',
+                'visible' => $application->destination->server->isSwarm(),
+            ],
+            [
+                'label' => 'Environment Variables',
+                'route' => 'project.application.environment-variables',
+                'active' => $currentRoute === 'project.application.environment-variables',
+            ],
+            [
+                'label' => 'Persistent Storage',
+                'route' => 'project.application.persistent-storage',
+                'active' => $currentRoute === 'project.application.persistent-storage',
+            ],
+            [
+                'label' => 'Git Source',
+                'route' => 'project.application.source',
+                'active' => $currentRoute === 'project.application.source',
+                'visible' => $application->git_based(),
+            ],
+            [
+                'label' => 'Servers',
+                'route' => 'project.application.servers',
+                'active' => $currentRoute === 'project.application.servers',
+                'badge' => true,
+            ],
+            [
+                'label' => 'Scheduled Tasks',
+                'route' => 'project.application.scheduled-tasks.show',
+                'active' => str($currentRoute)->startsWith('project.application.scheduled-tasks'),
+            ],
+            [
+                'label' => 'Webhooks',
+                'route' => 'project.application.webhooks',
+                'active' => $currentRoute === 'project.application.webhooks',
+            ],
+            [
+                'label' => 'Preview Deployments',
+                'route' => 'project.application.preview-deployments',
+                'active' => $currentRoute === 'project.application.preview-deployments',
+                'visible' => $application->git_based() || $application->build_pack === 'dockerimage',
+            ],
+            [
+                'label' => 'Healthcheck',
+                'route' => 'project.application.healthcheck',
+                'active' => $currentRoute === 'project.application.healthcheck',
+                'visible' => $application->build_pack !== 'dockercompose',
+            ],
+            [
+                'label' => 'Rollback',
+                'route' => 'project.application.rollback',
+                'active' => $currentRoute === 'project.application.rollback',
+            ],
+            [
+                'label' => 'Resource Limits',
+                'route' => 'project.application.resource-limits',
+                'active' => $currentRoute === 'project.application.resource-limits',
+            ],
+            [
+                'label' => 'Resource Operations',
+                'route' => 'project.application.resource-operations',
+                'active' => $currentRoute === 'project.application.resource-operations',
+            ],
+            [
+                'label' => 'Metrics',
+                'route' => 'project.application.metrics',
+                'active' => $currentRoute === 'project.application.metrics',
+            ],
+            [
+                'label' => 'Tags',
+                'route' => 'project.application.tags',
+                'active' => $currentRoute === 'project.application.tags',
+            ],
+            [
+                'label' => 'Danger Zone',
+                'route' => 'project.application.danger',
+                'active' => $currentRoute === 'project.application.danger',
+            ],
+        ];
+
+        $configurationMenuItems = array_values(array_filter(
+            $configurationMenuItems,
+            fn (array $item): bool => $item['visible'] ?? true,
+        ));
+    @endphp
+
+    <div class="flex flex-col h-full gap-4 md:gap-8 md:flex-row">
+        <div class="sub-menu-wrapper hidden md:flex">
+            @foreach ($configurationMenuItems as $menuItem)
+                <a @class([
+                    'sub-menu-item',
+                    'flex items-center gap-2' => $menuItem['badge'] ?? false,
+                    'menu-item-active' => $menuItem['active'],
+                ]) {{ wireNavigate() }} href="{{ route($menuItem['route'], $applicationRouteParameters) }}">
+                    <span class="menu-item-label">{{ $menuItem['label'] }}</span>
+                    @if ($menuItem['badge'] ?? false)
+                        <livewire:project.application.server-status-badge :application="$application" />
+                    @endif
+                </a>
+            @endforeach
         </div>
-        <div class="w-full sm:flex-grow">
+        <div class="w-full md:flex-grow">
             @if ($currentRoute === 'project.application.configuration')
                 <livewire:project.application.general :application="$application" />
             @elseif ($currentRoute === 'project.application.swarm' && $application->destination->server->isSwarm())

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

@@ -9,6 +9,13 @@
         fullscreen: @entangle('fullscreen'),
         alwaysScroll: {{ $isKeepAliveOn ? 'true' : 'false' }},
         rafId: null,
+        scrollTimeout: null,
+        scrollDebounce: null,
+        isScrolling: false,
+        destroyed: false,
+        morphUpdatedCleanup: null,
+        deploymentFinishedCleanup: null,
+        lastTouchY: 0,
         showTimestamps: true,
         searchQuery: '',
         matchCount: 0,
@@ -17,17 +24,76 @@
             this.fullscreen = !this.fullscreen;
         },
         scrollToBottom() {
-            const logsContainer = document.getElementById('logsContainer');
+            if (this.destroyed) return;
+            const logsContainer = this.$root.querySelector('#logsContainer');
             if (logsContainer) {
+                this.isScrolling = true;
                 logsContainer.scrollTop = logsContainer.scrollHeight;
+                requestAnimationFrame(() => { this.isScrolling = false; });
             }
         },
-        scheduleScroll() {
+        cancelScrollLoop() {
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = null;
+            }
+            if (this.scrollTimeout) {
+                clearTimeout(this.scrollTimeout);
+                this.scrollTimeout = null;
+            }
+            if (this.scrollDebounce) {
+                clearTimeout(this.scrollDebounce);
+                this.scrollDebounce = null;
+            }
+        },
+        disableFollow() {
             if (!this.alwaysScroll) return;
+            this.alwaysScroll = false;
+            this.cancelScrollLoop();
+        },
+        handleWheel(event) {
+            if (this.alwaysScroll && event.deltaY < 0) {
+                this.disableFollow();
+            }
+        },
+        handleTouchStart(event) {
+            this.lastTouchY = event.touches[0].clientY;
+        },
+        handleTouchMove(event) {
+            if (!this.alwaysScroll) return;
+            const currentY = event.touches[0].clientY;
+            if (currentY > this.lastTouchY) {
+                this.disableFollow();
+            }
+            this.lastTouchY = currentY;
+        },
+        handleKeyScroll(event) {
+            if (!this.alwaysScroll) return;
+            const upKeys = ['ArrowUp', 'PageUp', 'Home'];
+            if (upKeys.includes(event.key)) {
+                this.disableFollow();
+            }
+        },
+        handleScroll(event) {
+            if (this.isScrolling || this.destroyed) return;
+            const el = event.target;
+            clearTimeout(this.scrollDebounce);
+            this.scrollDebounce = setTimeout(() => {
+                if (this.destroyed) return;
+                const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+                if (!this.alwaysScroll && distanceFromBottom <= 10) {
+                    this.alwaysScroll = true;
+                    this.scheduleScroll();
+                }
+            }, 150);
+        },
+        scheduleScroll() {
+            if (!this.alwaysScroll || this.destroyed) return;
             this.rafId = requestAnimationFrame(() => {
+                if (!this.alwaysScroll || this.destroyed) return;
                 this.scrollToBottom();
-                if (this.alwaysScroll) {
-                    setTimeout(() => this.scheduleScroll(), 250);
+                if (this.alwaysScroll && !this.destroyed) {
+                    this.scrollTimeout = setTimeout(() => this.scheduleScroll(), 250);
                 }
             });
         },
@@ -36,10 +102,7 @@
             if (this.alwaysScroll) {
                 this.scheduleScroll();
             } else {
-                if (this.rafId) {
-                    cancelAnimationFrame(this.rafId);
-                    this.rafId = null;
-                }
+                this.cancelScrollLoop();
             }
         },
         hasActiveLogSelection() {
@@ -52,10 +115,6 @@
             const range = selection.getRangeAt(0);
             return logsContainer.contains(range.commonAncestorContainer);
         },
-        decodeHtml(text) {
-            const doc = new DOMParser().parseFromString(text, 'text/html');
-            return doc.documentElement.textContent;
-        },
         highlightText(el, text, query) {
             if (this.hasActiveLogSelection()) return;
 
@@ -96,7 +155,7 @@
                 if (matches && query) count++;
 
                 if (textSpan) {
-                    const originalText = this.decodeHtml(textSpan.dataset.lineText || '');
+                    const originalText = textSpan.dataset.lineText || '';
                     if (!query) {
                         textSpan.textContent = originalText;
                     } else if (matches) {
@@ -107,9 +166,9 @@
 
             this.matchCount = query ? count : 0;
         },
-        downloadLogs() {
+        collectVisibleLogs() {
             const logs = document.getElementById('logs');
-            if (!logs) return;
+            if (!logs) return '';
             const visibleLines = logs.querySelectorAll('[data-log-line]:not(.hidden)');
             let content = '';
             visibleLines.forEach(line => {
@@ -118,6 +177,24 @@
                     content += text + String.fromCharCode(10);
                 }
             });
+            return content;
+        },
+        copyLogs() {
+            const content = this.collectVisibleLogs();
+            if (!content) return;
+            if (!navigator.clipboard?.writeText) {
+                Livewire.dispatch('error', ['Clipboard is not available. Please use HTTPS or localhost.']);
+                return;
+            }
+            navigator.clipboard?.writeText(content).then(() => {
+                Livewire.dispatch('success', ['Logs copied to clipboard.']);
+            }).catch(() => {
+                Livewire.dispatch('error', ['Failed to copy logs to clipboard.']);
+            });
+        },
+        downloadLogs() {
+            const content = this.collectVisibleLogs();
+            if (!content) return;
             const blob = new Blob([content], { type: 'text/plain' });
             const url = URL.createObjectURL(blob);
             const a = document.createElement('a');
@@ -130,10 +207,7 @@
         stopScroll() {
             this.scrollToBottom();
             this.alwaysScroll = false;
-            if (this.rafId) {
-                cancelAnimationFrame(this.rafId);
-                this.rafId = null;
-            }
+            this.cancelScrollLoop();
         },
         init() {
             // Watch search query changes
@@ -141,21 +215,26 @@
                 this.applySearch();
             });
 
-            // Apply search after Livewire updates
-            Livewire.hook('morph.updated', ({ el }) => {
-                if (el.id === 'logs') {
-                    this.$nextTick(() => {
-                        this.applySearch();
-                        if (this.alwaysScroll) {
-                            this.scrollToBottom();
-                        }
-                    });
-                }
+            // Apply search after Livewire updates.
+            // Livewire.hook() returns an unregister fn; keep it for destroy().
+            this.morphUpdatedCleanup = Livewire.hook('morph.updated', ({ el }) => {
+                if (this.destroyed) return;
+                if (el.id !== 'logs' || !this.$root.contains(el)) return;
+                this.$nextTick(() => {
+                    if (this.destroyed) return;
+                    this.applySearch();
+                    if (this.alwaysScroll) {
+                        this.scrollToBottom();
+                    }
+                });
             });
 
-            // Stop auto-scroll when deployment finishes
-            Livewire.on('deploymentFinished', () => {
+            // Stop auto-scroll when deployment finishes.
+            // Livewire.on() returns an unregister fn; keep it for destroy().
+            this.deploymentFinishedCleanup = Livewire.on('deploymentFinished', () => {
+                if (this.destroyed) return;
                 setTimeout(() => {
+                    if (this.destroyed) return;
                     this.stopScroll();
                 }, 500);
             });
@@ -164,6 +243,24 @@
             if (this.alwaysScroll) {
                 this.scheduleScroll();
             }
+        },
+        destroy() {
+            // Runs when Alpine tears the component down (wire:navigate away).
+            this.destroyed = true;
+            this.alwaysScroll = false;
+            this.cancelScrollLoop();
+            if (this.scrollDebounce) {
+                clearTimeout(this.scrollDebounce);
+                this.scrollDebounce = null;
+            }
+            if (typeof this.morphUpdatedCleanup === 'function') {
+                this.morphUpdatedCleanup();
+                this.morphUpdatedCleanup = null;
+            }
+            if (typeof this.deploymentFinishedCleanup === 'function') {
+                this.deploymentFinishedCleanup();
+                this.deploymentFinishedCleanup = null;
+            }
         }
     }" class="flex flex-1 min-h-0 flex-col overflow-hidden">
             <livewire:project.application.deployment-navbar
@@ -210,12 +307,7 @@
                             </div>
                             <div class="flex flex-wrap items-center gap-1">
                                 <button
-                                    x-on:click="
-                                    $wire.copyLogs().then(logs => {
-                                        navigator.clipboard.writeText(logs);
-                                        Livewire.dispatch('success', ['Logs copied to clipboard.']);
-                                    });
-                                "
+                                    x-on:click="copyLogs()"
                                 title="Copy Logs"
                                 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"
@@ -246,6 +338,7 @@
                                             class="block w-full px-4 py-2 text-left text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-coolgray-300">
                                             Download displayed logs
                                         </button>
+                                        @can('update', $application)
                                         <button x-on:click="
                                             downloadingAllLogs = true;
                                             $wire.downloadAllLogs().then(logs => {
@@ -276,6 +369,7 @@
                                                 Downloading...
                                             </span>
                                         </button>
+                                        @endcan
                                     </div>
                                 </div>
                             </div>
@@ -288,6 +382,7 @@
                                         d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
                                 </svg>
                             </button>
+                            @can('update', $application)
                             <button wire:click="toggleDebug"
                                 title="{{ $is_debug_enabled ? 'Hide Debug Logs' : 'Show Debug Logs' }}"
                                 class="p-1 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 {{ $is_debug_enabled ? '!text-warning' : '' }}">
@@ -297,6 +392,7 @@
                                         d="M12 12.75c1.148 0 2.278.08 3.383.237 1.037.146 1.866.966 1.866 2.013 0 3.728-2.35 6.75-5.25 6.75S6.75 18.728 6.75 15c0-1.046.83-1.867 1.866-2.013A24.204 24.204 0 0 1 12 12.75Zm0 0c2.883 0 5.647.508 8.207 1.44a23.91 23.91 0 0 1-1.152 6.06M12 12.75c-2.883 0-5.647.508-8.208 1.44.125 2.104.52 4.136 1.153 6.06M12 12.75a2.25 2.25 0 0 0 2.248-2.354M12 12.75a2.25 2.25 0 0 1-2.248-2.354M12 8.25c.995 0 1.971-.08 2.922-.236.403-.066.74-.358.795-.762a3.778 3.778 0 0 0-.399-2.25M12 8.25c-.995 0-1.97-.08-2.922-.236-.402-.066-.74-.358-.795-.762a3.734 3.734 0 0 1 .4-2.253M12 8.25a2.25 2.25 0 0 0-2.248 2.146M12 8.25a2.25 2.25 0 0 1 2.248 2.146M8.683 5a6.032 6.032 0 0 1-1.155-1.002c.07-.63.27-1.222.574-1.747m.581 2.749A3.75 3.75 0 0 1 15.318 5m0 0c.427-.283.815-.62 1.155-.999a4.471 4.471 0 0 0-.575-1.752M4.921 6a24.048 24.048 0 0 0-.392 3.314c1.668.546 3.416.914 5.223 1.082M19.08 6c.205 1.08.337 2.187.392 3.314a23.882 23.882 0 0 1-5.223 1.082" />
                                 </svg>
                             </button>
+                            @endcan
                             <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">
@@ -327,7 +423,8 @@
                             </div>
                         </div>
                     </div>
-                    <div id="logsContainer"
+                    <div id="logsContainer" @scroll="handleScroll" @wheel="handleWheel"
+                        @touchstart="handleTouchStart" @touchmove="handleTouchMove" @keydown="handleKeyScroll" tabindex="0"
                         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"
@@ -339,14 +436,14 @@
                                     $lineContent = (isset($line['command']) && $line['command'] ? '[CMD]: ' : '') . trim($line['line']);
                                     $searchableContent = $line['timestamp'] . ' ' . $lineContent;
                                 @endphp
-                                <div data-log-line data-log-content="{{ htmlspecialchars($searchableContent) }}"
+                                <div data-log-line data-log-content="{{ $searchableContent }}"
                                     @class([
                                         'mt-2' => isset($line['command']) && $line['command'],
                                         'flex gap-2 log-line',
                                     ])>
                                     <span x-show="showTimestamps"
                                         class="shrink-0 text-gray-500">{{ $line['timestamp'] }}</span>
-                                    <span data-line-text="{{ htmlspecialchars($lineContent) }}"
+                                    <span data-line-text="{{ $lineContent }}"
                                         @class([
                                             'text-success dark:text-warning' => $line['hidden'],
                                             'text-red-500' => $line['stderr'],

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

@@ -12,6 +12,9 @@
                 <div>{{ $application->compose_parsing_version }}</div>
             @endif
             <x-forms.button canGate="update" :canResource="$application" type="submit">Save</x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$application" />
+            </x-modal-input>
             @if ($buildPack === 'dockercompose')
                 <x-forms.button canGate="update" :canResource="$application" wire:target='initLoadingCompose'
                     x-on:click="$wire.dispatch('loadCompose', false)">
@@ -32,6 +35,7 @@
                         <x-forms.select x-bind:disabled="shouldDisable()" wire:model.live="buildPack" label="Build Pack"
                             required>
                             <option value="nixpacks">Nixpacks</option>
+                            <option value="railpack">Railpack (Beta)</option>
                             <option value="static">Static</option>
                             <option value="dockerfile">Dockerfile</option>
                             <option value="dockercompose">Docker Compose</option>
@@ -226,20 +230,24 @@
                         id="customDockerRunOptions" label="Custom Docker Options" x-bind:disabled="!canUpdate" />
                 @else
                     @if ($application->could_set_build_commands())
-                        @if ($buildPack === 'nixpacks')
+                        @if ($buildPack === 'nixpacks' || $buildPack === 'railpack')
                             <div class="flex flex-col gap-2 xl:flex-row">
-                                <x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
+                                <x-forms.input helper="If you modify this, you probably need to have a {{ $buildPack === 'railpack' ? 'railpack.json' : 'nixpacks.toml' }}"
                                     id="installCommand" label="Install Command" x-bind:disabled="!canUpdate" />
-                                <x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
+                                <x-forms.input helper="If you modify this, you probably need to have a {{ $buildPack === 'railpack' ? 'railpack.json' : 'nixpacks.toml' }}"
                                     id="buildCommand" label="Build Command" x-bind:disabled="!canUpdate" />
-                                <x-forms.input helper="If you modify this, you probably need to have a nixpacks.toml"
+                                <x-forms.input helper="If you modify this, you probably need to have a {{ $buildPack === 'railpack' ? 'railpack.json' : 'nixpacks.toml' }}"
                                     id="startCommand" label="Start Command" x-bind:disabled="!canUpdate" />
                             </div>
-                            <div class="pt-1 text-xs">Nixpacks will detect the required configuration
-                                automatically.
+                                @if ($buildPack === 'nixpacks')
+                            <div class="pt-1 text-xs">
+
+                                    <span class="font-medium">Nixpacks</span>
+                                will detect the required configuration automatically.
                                 <a class="underline" href="https://coolify.io/docs/applications/">Framework
                                     Specific Docs</a>
                             </div>
+                                @endif
                         @endif
 
                     @endif
@@ -492,6 +500,13 @@
                         </div>
                     @endif
                 @endif
+                @if ((empty($portsExposes) || $portsExposes === '0') && !empty($fqdn))
+                    <x-callout type="info" title="No ports exposed" class="mb-4">
+                        This application does not expose any ports and will not be reachable through the proxy or your domains.
+                        This behavior is normal for background workers, bots, or scheduled tasks.
+                        If your application needs to handle HTTP traffic, please specify the port(s) it listens on.
+                    </x-callout>
+                @endif
                 <div class="flex flex-col gap-2 xl:flex-row">
                     @if ($isStatic || $buildPack === 'static')
                         <x-forms.input id="portsExposes" label="Ports Exposes" readonly
@@ -502,7 +517,7 @@
                                 helper="Readonly labels are disabled. You can set the ports manually in the labels section."
                                 x-bind:disabled="!canUpdate" />
                         @else
-                            <x-forms.input placeholder="3000,3001" id="portsExposes" label="Ports Exposes" required
+                            <x-forms.input placeholder="3000,3001" id="portsExposes" label="Ports Exposes"
                                 helper="A comma separated list of ports your application uses. The first port will be used as default healthcheck port if nothing defined in the Healthcheck menu. Be sure to set this correctly."
                                 x-bind:disabled="!canUpdate" />
                         @endif

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

@@ -1,21 +1,457 @@
 <nav wire:poll.10000ms="checkStatus" class="pb-6">
+    @php
+        $applicationMenuItems = [
+            [
+                'label' => 'Configuration',
+                'route' => 'project.application.configuration',
+                'active' => request()->routeIs('project.application.configuration'),
+            ],
+            [
+                'label' => 'Deployments',
+                'route' => 'project.application.deployment.index',
+                'active' => request()->routeIs('project.application.deployment.index', 'project.application.deployment.show'),
+            ],
+            [
+                'label' => 'Logs',
+                'route' => 'project.application.logs',
+                'active' => request()->routeIs('project.application.logs'),
+            ],
+            [
+                'label' => 'Terminal',
+                'route' => 'project.application.command',
+                'active' => request()->routeIs('project.application.command'),
+                'navigate' => false,
+                'visible' => ! $application->destination->server->isSwarm() && auth()->user()?->can('canAccessTerminal'),
+            ],
+        ];
+
+        $configurationMenuItems = [
+            [
+                'label' => 'General',
+                'route' => 'project.application.configuration',
+                'active' => request()->routeIs('project.application.configuration'),
+            ],
+            [
+                'label' => 'Advanced',
+                'route' => 'project.application.advanced',
+                'active' => request()->routeIs('project.application.advanced'),
+            ],
+            [
+                'label' => 'Swarm',
+                'route' => 'project.application.swarm',
+                'active' => request()->routeIs('project.application.swarm'),
+                'visible' => $application->destination->server->isSwarm(),
+            ],
+            [
+                'label' => 'Environment Variables',
+                'route' => 'project.application.environment-variables',
+                'active' => request()->routeIs('project.application.environment-variables'),
+            ],
+            [
+                'label' => 'Persistent Storage',
+                'route' => 'project.application.persistent-storage',
+                'active' => request()->routeIs('project.application.persistent-storage'),
+            ],
+            [
+                'label' => 'Git Source',
+                'route' => 'project.application.source',
+                'active' => request()->routeIs('project.application.source'),
+                'visible' => $application->git_based(),
+            ],
+            [
+                'label' => 'Servers',
+                'route' => 'project.application.servers',
+                'active' => request()->routeIs('project.application.servers'),
+            ],
+            [
+                'label' => 'Scheduled Tasks',
+                'route' => 'project.application.scheduled-tasks.show',
+                'active' => request()->routeIs('project.application.scheduled-tasks.show', 'project.application.scheduled-tasks'),
+            ],
+            [
+                'label' => 'Webhooks',
+                'route' => 'project.application.webhooks',
+                'active' => request()->routeIs('project.application.webhooks'),
+            ],
+            [
+                'label' => 'Preview Deployments',
+                'route' => 'project.application.preview-deployments',
+                'active' => request()->routeIs('project.application.preview-deployments'),
+                'visible' => $application->git_based() || $application->build_pack === 'dockerimage',
+            ],
+            [
+                'label' => 'Healthcheck',
+                'route' => 'project.application.healthcheck',
+                'active' => request()->routeIs('project.application.healthcheck'),
+                'visible' => $application->build_pack !== 'dockercompose',
+            ],
+            [
+                'label' => 'Rollback',
+                'route' => 'project.application.rollback',
+                'active' => request()->routeIs('project.application.rollback'),
+            ],
+            [
+                'label' => 'Resource Limits',
+                'route' => 'project.application.resource-limits',
+                'active' => request()->routeIs('project.application.resource-limits'),
+            ],
+            [
+                'label' => 'Resource Operations',
+                'route' => 'project.application.resource-operations',
+                'active' => request()->routeIs('project.application.resource-operations'),
+            ],
+            [
+                'label' => 'Metrics',
+                'route' => 'project.application.metrics',
+                'active' => request()->routeIs('project.application.metrics'),
+            ],
+            [
+                'label' => 'Tags',
+                'route' => 'project.application.tags',
+                'active' => request()->routeIs('project.application.tags'),
+            ],
+            [
+                'label' => 'Danger Zone',
+                'route' => 'project.application.danger',
+                'active' => request()->routeIs('project.application.danger'),
+            ],
+        ];
+
+        $applicationMenuItems = array_values(array_filter(
+            $applicationMenuItems,
+            fn (array $item): bool => $item['visible'] ?? true,
+        ));
+        $configurationMenuItems = array_values(array_filter(
+            $configurationMenuItems,
+            fn (array $item): bool => $item['visible'] ?? true,
+        ));
+        $activeConfigurationMenuItem = collect($configurationMenuItems)->firstWhere('active', true);
+        $activeApplicationMenuItem = collect($applicationMenuItems)->firstWhere('active', true);
+        $activeMobileMenuItem = $activeConfigurationMenuItem
+            ?? $activeApplicationMenuItem
+            ?? $applicationMenuItems[0];
+        $activeMobileMenuGroup = $activeConfigurationMenuItem ? 'configuration' : 'application';
+        $activeMobileNavigation = ($activeMobileMenuItem['navigate'] ?? true) ? 'navigate' : 'location';
+        $activeMobileMenuValue = $activeMobileNavigation.'|'.$activeMobileMenuGroup.'|'.route($activeMobileMenuItem['route'], $parameters);
+        $mobileSectionChangeHandler = <<<'JS'
+            const value = $event.target.value;
+
+            if (!value) {
+                return;
+            }
+
+            if (value.startsWith('navigate|')) {
+                const url = value.split('|').slice(2).join('|');
+                window.Livewire?.navigate ? window.Livewire.navigate(url) : window.location.href = url;
+                return;
+            }
+
+            if (value.startsWith('location|')) {
+                const url = value.split('|').slice(2).join('|');
+                window.location.href = url;
+                return;
+            }
+
+            resetToCurrent();
+
+            if (value.startsWith('external:')) {
+                window.open(value.slice(9), '_blank', 'noopener');
+                return;
+            }
+
+            const action = value.slice(7);
+            document.getElementById(`application-mobile-${action}-trigger`)?.click();
+        JS;
+    @endphp
     <x-resources.breadcrumbs :resource="$application" :parameters="$parameters" :title="$lastDeploymentInfo" :lastDeploymentLink="$lastDeploymentLink" />
     <div class="navbar-main">
+        <div class="w-full md:hidden">
+            @if (!($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw)))
+                <div id="application-mobile-actions" class="mt-2 mb-3 md:hidden">
+                    <div class="mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Actions</div>
+                    <div class="flex flex-nowrap items-center gap-2 overflow-x-auto">
+                    @if (!str($application->status)->startsWith('exited'))
+                        @if (!$application->destination->server->isSwarm())
+                            <button type="button" class="button shrink-0"
+                                @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-orange-400"
+                                    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="M10.09 4.01l.496 -.495a2 2 0 0 1 2.828 0l7.071 7.07a2 2 0 0 1 0 2.83l-7.07 7.07a2 2 0 0 1 -2.83 0l-7.07 -7.07a2 2 0 0 1 0 -2.83l3.535 -3.535h-3.988">
+                                    </path>
+                                    <path d="M7.05 11.038v-3.988"></path>
+                                </svg>
+                                Redeploy
+                            </button>
+                        @endif
+                        @if ($application->build_pack !== 'dockercompose')
+                            @if ($application->destination->server->isSwarm())
+                                <button type="button" class="button shrink-0"
+                                    @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
+                                    <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>
+                                    Update Service
+                                </button>
+                            @else
+                                <button type="button" class="button shrink-0"
+                                    @click="document.getElementById('application-mobile-restart-trigger')?.click()">
+                                    <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
+                                </button>
+                            @endif
+                        @endif
+                        <x-forms.button isError class="shrink-0"
+                            @click="document.getElementById('application-mobile-stop-trigger')?.click()">
+                            <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-forms.button>
+                    @else
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('application-mobile-deploy-trigger')?.click()">
+                            <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
+                        </button>
+                    @endif
+                    @if (!$application->destination->server->isSwarm())
+                        @if ($application->status === 'running')
+                            <button type="button" class="button shrink-0"
+                                @click="document.getElementById('application-mobile-force-deploy-trigger')?.click()">
+                                <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>
+                                Force deploy (without cache)
+                            </button>
+                        @else
+                            <button type="button" class="button shrink-0"
+                                @click="document.getElementById('application-mobile-deploy-force-trigger')?.click()">
+                                <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>
+                                Force deploy (without cache)
+                            </button>
+                        @endif
+                    @endif
+                    </div>
+                </div>
+            @endif
+            <label id="application-mobile-section-label" for="application-mobile-section" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Section</label>
+            <select id="application-mobile-section" class="select w-full" aria-label="Application menu"
+                data-current-value="{{ $activeMobileMenuValue }}"
+                x-data="{
+                    init() {
+                        this.syncFromLocation();
+                        window.Livewire?.hook?.('morphed', ({ el }) => {
+                            if (el.contains(this.$el)) {
+                                queueMicrotask(() => this.syncFromLocation());
+                            }
+                        });
+                    },
+                    selected: $el.dataset.currentValue,
+                    current: $el.dataset.currentValue,
+                    syncFromLocation() {
+                        const currentUrl = new URL(window.location.href);
+                        const matchingOptions = Array.from(this.$el.options).filter((option) => {
+                            if (!option.value.startsWith('navigate|') && !option.value.startsWith('location|')) {
+                                return false;
+                            }
+
+                            const optionUrl = new URL(option.value.split('|').slice(2).join('|'), window.location.origin);
+
+                            return optionUrl.pathname === currentUrl.pathname;
+                        });
+                        const selectedOption = matchingOptions.find((option) => {
+                            return option.value.startsWith('navigate|configuration|') || option.value.startsWith('navigate|resource|');
+                        }) || matchingOptions[0];
+
+                        if (selectedOption) {
+                            this.current = selectedOption.value;
+                            this.selected = selectedOption.value;
+                        }
+                    },
+                    resetToCurrent() {
+                        this.selected = this.current;
+                    },
+                }"
+                x-on:livewire:navigated.window="syncFromLocation()"
+                x-model="selected"
+                x-on:change="{{ $mobileSectionChangeHandler }}">
+                <optgroup label="Application">
+                    @foreach ($applicationMenuItems as $menuItem)
+                        <option value="{{ ($menuItem['navigate'] ?? true) ? 'navigate' : 'location' }}|application|{{ route($menuItem['route'], $parameters) }}">
+                            {{ $menuItem['label'] }}
+                        </option>
+                    @endforeach
+                </optgroup>
+                <optgroup label="Configuration">
+                    @foreach ($configurationMenuItems as $menuItem)
+                        <option value="navigate|configuration|{{ route($menuItem['route'], $parameters) }}">
+                            {{ $menuItem['label'] }}
+                        </option>
+                    @endforeach
+                </optgroup>
+                <optgroup label="Links">
+                    @if (
+                        (data_get($application, 'fqdn') ||
+                            collect(json_decode($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)
+                        @if (data_get($application, 'gitBrancLocation'))
+                            <option value="external:{{ $application->gitBranchLocation }}">Git Repository</option>
+                        @endif
+                        @if (data_get($application, 'build_pack') === 'dockercompose')
+                            @foreach (collect(json_decode($application->docker_compose_domains)) as $fqdn)
+                                @if (data_get($fqdn, 'domain'))
+                                    @foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
+                                        <option value="external:{{ getFqdnWithoutPort($domain) }}">{{ getFqdnWithoutPort($domain) }}</option>
+                                    @endforeach
+                                @endif
+                            @endforeach
+                        @endif
+                        @if (data_get($application, 'fqdn'))
+                            @foreach (str(data_get($application, 'fqdn'))->explode(',') as $fqdn)
+                                <option value="external:{{ getFqdnWithoutPort($fqdn) }}">{{ getFqdnWithoutPort($fqdn) }}</option>
+                            @endforeach
+                        @endif
+                        @if (data_get($application, 'previews', collect())->count() > 0)
+                            @if (data_get($application, 'build_pack') === 'dockercompose')
+                                @foreach ($application->previews as $preview)
+                                    @foreach (collect(json_decode($preview->docker_compose_domains)) as $fqdn)
+                                        @if (data_get($fqdn, 'domain'))
+                                            @foreach (explode(',', data_get($fqdn, 'domain')) as $domain)
+                                                <option value="external:{{ getFqdnWithoutPort($domain) }}">PR{{ data_get($preview, 'pull_request_id') }} | {{ getFqdnWithoutPort($domain) }}</option>
+                                            @endforeach
+                                        @endif
+                                    @endforeach
+                                @endforeach
+                            @else
+                                @foreach (data_get($application, 'previews') as $preview)
+                                    @if (data_get($preview, 'fqdn'))
+                                        <option value="external:{{ getFqdnWithoutPort(data_get($preview, 'fqdn')) }}">PR{{ data_get($preview, 'pull_request_id') }} | {{ data_get($preview, 'fqdn') }}</option>
+                                    @endif
+                                @endforeach
+                            @endif
+                        @endif
+                        @if (data_get($application, 'ports_mappings_array'))
+                            @foreach ($application->ports_mappings_array as $port)
+                                @if ($application->destination->server->id === 0)
+                                    <option value="external:http://localhost:{{ explode(':', $port)[0] }}">Port {{ $port }}</option>
+                                @else
+                                    <option value="external:http://{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}">{{ $application->destination->server->ip }}:{{ explode(':', $port)[0] }}</option>
+                                    @if (count($application->additional_servers) > 0)
+                                        @foreach ($application->additional_servers as $server)
+                                            <option value="external:http://{{ $server->ip }}:{{ explode(':', $port)[0] }}">{{ $server->ip }}:{{ explode(':', $port)[0] }}</option>
+                                        @endforeach
+                                    @endif
+                                @endif
+                            @endforeach
+                        @endif
+                    @else
+                        <option disabled>No links available</option>
+                    @endif
+                </optgroup>
+            </select>
+            <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>
+                    <button id="application-mobile-stop-trigger" type="button" class="hidden">Stop</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+            <x-modal-confirmation title="Confirm Application Deployment?" buttonTitle="Deploy"
+                submitAction="deploy" :actions="[
+                    'This application will be deployed.',
+                ]" :confirmWithText="false" :confirmWithPassword="false"
+                step2ButtonText="Confirm">
+                <x-slot:trigger>
+                    <button id="application-mobile-deploy-trigger" type="button" class="hidden">Deploy</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+            <x-modal-confirmation title="Confirm Application Restart?" buttonTitle="Restart"
+                submitAction="restart" :actions="[
+                    'This application will be restarted without rebuilding.',
+                ]" :confirmWithText="false" :confirmWithPassword="false"
+                step2ButtonText="Confirm">
+                <x-slot:trigger>
+                    <button id="application-mobile-restart-trigger" type="button" class="hidden">Restart</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+            <x-modal-confirmation title="Confirm Application Force Deployment?" buttonTitle="Force deploy"
+                submitAction="force_deploy_without_cache" :actions="[
+                    'This application will be force deployed without build cache.',
+                ]" :confirmWithText="false" :confirmWithPassword="false"
+                step2ButtonText="Confirm">
+                <x-slot:trigger>
+                    <button id="application-mobile-force-deploy-trigger" type="button" class="hidden">Force deploy</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+            <x-modal-confirmation title="Confirm Application Force Deployment?" buttonTitle="Force deploy"
+                submitAction="deploy(true)" :actions="[
+                    'This application will be force deployed without build cache.',
+                ]" :confirmWithText="false" :confirmWithPassword="false"
+                step2ButtonText="Confirm">
+                <x-slot:trigger>
+                    <button id="application-mobile-deploy-force-trigger" type="button" class="hidden">Force deploy</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+        </div>
+
         <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() }}
+            class="scrollbar hidden min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:flex md:w-auto md:overflow-visible">
+            <a class="hidden md:block shrink-0 {{ request()->routeIs('project.application.configuration') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('project.application.configuration', $parameters) }}">
                 Configuration
             </a>
-            <a class="shrink-0 {{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
+            <a class="hidden md:block shrink-0 {{ request()->routeIs('project.application.deployment.index') ? 'dark:text-white' : '' }}" {{ wireNavigate() }}
                 href="{{ route('project.application.deployment.index', $parameters) }}">
                 Deployments
             </a>
-            <a class="shrink-0 {{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
+            <a class="hidden md:block shrink-0 {{ request()->routeIs('project.application.logs') ? 'dark:text-white' : '' }}"
                 href="{{ route('project.application.logs', $parameters) }}">
                 <div class="flex items-center gap-1">
                     Logs
-                    @if ($application->restart_count > 0 && !str($application->status)->startsWith('exited'))
+                    @if ($application->restart_count > 0 && (!str($application->status)->startsWith('exited') || $application->stoppedAfterRestartLimit()))
                         <svg class="w-4 h-4 dark:text-warning" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" title="Container has restarted {{ $application->restart_count }} time{{ $application->restart_count > 1 ? 's' : '' }}">
                             <path d="M12 2L1 21h22L12 2zm0 4l7.53 13H4.47L12 6zm-1 5v4h2v-4h-2zm0 5v2h2v-2h-2z"/>
                         </svg>
@@ -24,13 +460,13 @@
             </a>
             @if (!$application->destination->server->isSwarm())
                 @can('canAccessTerminal')
-                    <a class="shrink-0 {{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
+                    <a class="hidden md:block shrink-0 {{ request()->routeIs('project.application.command') ? 'dark:text-white' : '' }}"
                         href="{{ route('project.application.command', $parameters) }}">
                         Terminal
                     </a>
                 @endcan
             @endif
-            <div class="shrink-0">
+            <div class="hidden shrink-0 md:block">
                 <x-applications.links :application="$application" />
             </div>
         </nav>
@@ -38,62 +474,6 @@
             @if ($application->build_pack === 'dockercompose' && is_null($application->docker_compose_raw))
                 <div>Please load a Compose file.</div>
             @else
-                <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>
@@ -103,49 +483,75 @@
                     <div class="flex flex-wrap gap-2">
                         @if (!str($application->status)->startsWith('exited'))
                             @if (!$application->destination->server->isSwarm())
-                                <x-forms.button title="With rolling update if possible" wire:click='deploy'>
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-orange-400"
-                                        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="M10.09 4.01l.496 -.495a2 2 0 0 1 2.828 0l7.071 7.07a2 2 0 0 1 0 2.83l-7.07 7.07a2 2 0 0 1 -2.83 0l-7.07 -7.07a2 2 0 0 1 0 -2.83l3.535 -3.535h-3.988">
-                                        </path>
-                                        <path d="M7.05 11.038v-3.988"></path>
-                                    </svg>
-                                    Redeploy
-                                </x-forms.button>
+
+                                <x-modal-confirmation title="Confirm Application Deployment?" buttonTitle="Redeploy"
+                                    submitAction="deploy" :actions="[
+                                        'This application will be redeployed.',
+                                    ]" :confirmWithText="false" :confirmWithPassword="false"
+                                    step2ButtonText="Confirm">
+                                    <x-slot:content>
+                                        <x-forms.button canGate="deploy" :canResource="$application" title="With rolling update if possible">
+                                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 dark:text-orange-400"
+                                                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="M10.09 4.01l.496 -.495a2 2 0 0 1 2.828 0l7.071 7.07a2 2 0 0 1 0 2.83l-7.07 7.07a2 2 0 0 1 -2.83 0l-7.07 -7.07a2 2 0 0 1 0 -2.83l3.535 -3.535h-3.988">
+                                                </path>
+                                                <path d="M7.05 11.038v-3.988"></path>
+                                            </svg>
+                                            Redeploy
+                                        </x-forms.button>
+                                    </x-slot:content>
+                                </x-modal-confirmation>
                             @endif
                             @if ($application->build_pack !== 'dockercompose')
                                 @if ($application->destination->server->isSwarm())
-                                    <x-forms.button title="Redeploy Swarm Service (rolling update)" wire:click='deploy'>
-                                        <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>
-                                        Update Service
-                                    </x-forms.button>
+                                    <x-modal-confirmation title="Confirm Application Deployment?" buttonTitle="Update Service"
+                                        submitAction="deploy" :actions="[
+                                            'This Swarm service will be updated with a rolling deployment.',
+                                        ]" :confirmWithText="false" :confirmWithPassword="false"
+                                        step2ButtonText="Confirm">
+                                        <x-slot:content>
+                                            <x-forms.button canGate="deploy" :canResource="$application" title="Redeploy Swarm Service (rolling update)">
+                                                <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>
+                                                Update Service
+                                            </x-forms.button>
+                                        </x-slot:content>
+                                    </x-modal-confirmation>
                                 @else
-                                    <x-forms.button title="Restart without rebuilding" wire:click='restart'>
-                                        <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 title="Confirm Application Restart?" buttonTitle="Restart"
+                                        submitAction="restart" :actions="[
+                                            'This application will be restarted without rebuilding.',
+                                        ]" :confirmWithText="false" :confirmWithPassword="false"
+                                        step2ButtonText="Confirm">
+                                        <x-slot:content>
+                                            <x-forms.button canGate="deploy" :canResource="$application" title="Restart without rebuilding">
+                                                <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-slot:content>
+                                    </x-modal-confirmation>
+
                                 @endif
                             @endif
-                            <x-modal-confirmation title="Confirm Application Stopping?" buttonTitle="Stop"
+                            <x-modal-confirmation :disabled="!auth()->user()->can('deploy', $application)" :authDisabled="!auth()->user()->can('deploy', $application)" 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.',
@@ -167,15 +573,25 @@
                                 </x-slot:button-title>
                             </x-modal-confirmation>
                         @else
-                            <x-forms.button wire:click='deploy'>
-                                <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>
+
+                            <x-modal-confirmation title="Confirm Application Deployment?" buttonTitle="Deploy"
+                                submitAction="deploy" :actions="[
+                                    'This application will be deployed.',
+                                ]" :confirmWithText="false" :confirmWithPassword="false"
+                                step2ButtonText="Confirm">
+                                <x-slot:content>
+                                    <x-forms.button canGate="deploy" :canResource="$application">
+                                        <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>
+                                </x-slot:content>
+                            </x-modal-confirmation>
+
                         @endif
                     </div>
                 </div>

resources/views/livewire/project/application/server-status-badge.blade.php

@@ -0,0 +1,17 @@
+<span>
+    @if ($application->server_status === false)
+        <span title="One or more servers are unreachable or misconfigured.">
+            <svg class="w-4 h-4 text-error" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                <path fill="currentColor"
+                    d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
+            </svg>
+        </span>
+    @elseif ($application->additional_servers()->exists() && str($application->status)->contains('degraded'))
+        <span title="Application is in degraded state across multiple servers.">
+            <svg class="w-4 h-4 text-error" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
+                <path fill="currentColor"
+                    d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
+            </svg>
+        </span>
+    @endif
+</span>

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

@@ -2,6 +2,7 @@
     <form wire:submit='submit' class="flex flex-col">
         <div class="flex items-center gap-2">
             <h2>Swarm Configuration</h2>
+            <x-deprecated-badge />
             @can('update', $application)
                 <x-forms.button type="submit">
                     Save
@@ -13,6 +14,9 @@
                 </x-forms.button>
             @endcan
         </div>
+        <x-callout type="warning" title="Deprecated" class="my-4">
+            {{ config('deprecations.swarm') }}
+        </x-callout>
         <div class="flex flex-col gap-2 py-4">
             <div class="flex flex-col items-end gap-2 xl:flex-row">
                 <x-forms.input id="swarmReplicas" label="Replicas" required canGate="update" :canResource="$application" />

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

@@ -1,32 +1,40 @@
 <form wire:submit="submit">
-    <div class="flex gap-2 pb-2">
+    <div class="flex flex-col gap-3 pb-4 sm:flex-row sm:items-center">
         <h2>Scheduled Backup</h2>
-        <x-forms.button type="submit">
-            Save
-        </x-forms.button>
-        @if (str($status)->startsWith('running'))
-            <livewire:project.database.backup-now :backup="$backup" />
-        @endif
-        @if ($backup->database_id !== 0)
-            <x-modal-confirmation title="Confirm Backup Schedule Deletion?" buttonTitle="Delete Backups and Schedule"
-                isErrorButton submitAction="delete" :checkboxes="$checkboxes" :actions="[
-                    'The selected backup schedule will be deleted.',
-                    'Scheduled backups for this database will be stopped (if this is the only backup schedule for this database).',
-                ]"
-                confirmationText="{{ $backup->database->name }}"
-                confirmationLabel="Please confirm the execution of the actions by entering the Database Name of the scheduled backups below"
-                shortConfirmationLabel="Database Name" />
-        @endif
+        <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
+            <x-forms.button type="submit" class="w-full sm:w-auto">
+                Save
+            </x-forms.button>
+            @if (str($status)->startsWith('running'))
+                <x-forms.button wire:click='backupNow' class="w-full sm:w-auto">Backup Now</x-forms.button>
+            @endif
+            @if ($backup->database_id !== 0)
+                <div class="w-full sm:w-auto">
+                    <x-modal-confirmation title="Confirm Backup Schedule Deletion?" isErrorButton submitAction="delete"
+                        :checkboxes="$checkboxes" :actions="[
+                            'The selected backup schedule will be deleted.',
+                            'Scheduled backups for this database will be stopped (if this is the only backup schedule for this database).',
+                        ]"
+                        confirmationText="{{ $backup->database->name }}"
+                        confirmationLabel="Please confirm the execution of the actions by entering the Database Name of the scheduled backups below"
+                        shortConfirmationLabel="Database Name">
+                        <x-slot:trigger>
+                            <x-forms.button isError class="w-full sm:w-auto">Delete Backups and Schedule</x-forms.button>
+                        </x-slot:trigger>
+                    </x-modal-confirmation>
+                </div>
+            @endif
+        </div>
     </div>
-    <div class="w-64 pb-2">
+    <div class="w-full max-w-md pb-2">
         <x-forms.checkbox instantSave label="Backup Enabled" id="backupEnabled" />
-        @if ($s3s->count() > 0)
+        @if ($availableS3Storages->count() > 0)
             <x-forms.checkbox instantSave label="S3 Enabled" id="saveS3" />
         @else
             <x-forms.checkbox instantSave helper="No validated S3 storage available." label="S3 Enabled" id="saveS3"
                 disabled />
         @endif
-        @if ($backup->save_s3)
+        @if ($saveS3)
             <x-forms.checkbox instantSave label="Disable Local Backup" id="disableLocalBackup"
                 helper="When enabled, backup files will be deleted from local storage immediately after uploading to S3. This requires S3 backup to be enabled." />
         @else
@@ -34,16 +42,27 @@
                 helper="When enabled, backup files will be deleted from local storage immediately after uploading to S3. This requires S3 backup to be enabled." />
         @endif
     </div>
-    @if ($backup->save_s3)
-        <div class="pb-6">
-            <x-forms.select id="s3StorageId" label="S3 Storage" required>
-                <option value="default" disabled>Select a S3 storage</option>
-                @foreach ($s3s as $s3)
+    <div class="w-full max-w-md pb-6">
+        <div class="flex gap-1 items-center mb-1 text-sm font-medium">
+            <span>S3 Storage</span>
+            @if (!$saveS3)
+                <span class="text-xs font-normal text-warning">(currently disabled)</span>
+            @endif
+            @if ($saveS3)
+                <x-highlighted text="*" />
+            @endif
+        </div>
+        <x-forms.select id="s3StorageId" wire:model.live="s3StorageId" :required="$saveS3"
+            :disabled="$availableS3Storages->isEmpty()">
+            @if ($availableS3Storages->isEmpty())
+                <option value="">No S3 storage available</option>
+            @else
+                @foreach ($availableS3Storages as $s3)
                     <option value="{{ $s3->id }}">{{ $s3->name }}</option>
                 @endforeach
-            </x-forms.select>
-        </div>
-    @endif
+            @endif
+        </x-forms.select>
+    </div>
     <div class="flex flex-col gap-2">
         <h3>Settings</h3>
         <div class="flex gap-2 flex-col ">
@@ -80,7 +99,7 @@
                 @endif
             @endif
         </div>
-        <div class="flex gap-2">
+        <div class="grid grid-cols-1 gap-2 md:grid-cols-3">
             <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)" required />
@@ -98,7 +117,7 @@
         <div class="flex gap-6 flex-col">
             <div>
                 <h4 class="mb-3 font-medium">Local Backup Retention</h4>
-                <div class="flex gap-2">
+                <div class="grid grid-cols-1 gap-2 md:grid-cols-3">
                     <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." required />
@@ -106,15 +125,15 @@
                         min="0"
                         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"
+                        type="number" min="0" step="any"
                         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>
 
-            @if ($backup->save_s3)
+            @if ($saveS3)
                 <div>
                     <h4 class="mb-3 font-medium">S3 Storage Retention</h4>
-                    <div class="flex gap-2">
+                    <div class="grid grid-cols-1 gap-2 md:grid-cols-3">
                         <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." required />
@@ -122,7 +141,7 @@
                             min="0"
                             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"
+                            type="number" min="0" step="any"
                             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>

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

@@ -1,7 +1,7 @@
 <div wire:init='refreshBackupExecutions'>
     @isset($backup)
-        <div class="flex items-center gap-2">
-            <h3 class="py-4">Executions <span class="text-xs">({{ $executions_count }})</span></h3>
+        <div class="flex flex-col gap-3 py-4 sm:flex-row sm:flex-wrap sm:items-center">
+            <h3 class="py-0">Executions <span class="text-xs">({{ $executions_count }})</span></h3>
             @if ($executions_count > 0)
                 <div class="flex items-center gap-2">
                     <x-forms.button disabled="{{ !$showPrev }}" wire:click="previousPage('{{ $defaultTake }}')">
@@ -21,13 +21,19 @@
                     </x-forms.button>
                 </div>
             @endif
-            <x-forms.button wire:click='cleanupFailed'>Cleanup Failed Backups</x-forms.button>
-            <x-modal-confirmation title="Cleanup Deleted Backup Entries?" buttonTitle="Cleanup Deleted" isErrorButton
-                submitAction="cleanupDeleted()" 
-                :actions="['This will permanently delete all backup execution entries that are marked as deleted from local storage.', 'This only removes database entries, not actual backup files.']" 
-                confirmationText="cleanup deleted backups"
-                confirmationLabel="Please confirm by typing 'cleanup deleted backups' below"
-                shortConfirmationLabel="Confirmation" />
+            <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
+                <x-forms.button wire:click='cleanupFailed' class="w-full sm:w-auto">Cleanup Failed Backups</x-forms.button>
+                <x-modal-confirmation title="Cleanup Deleted Backup Entries?" isErrorButton
+                    submitAction="cleanupDeleted()"
+                    :actions="['This will permanently delete all backup execution entries that are marked as deleted from local storage.', 'This only removes database entries, not actual backup files.']"
+                    confirmationText="cleanup deleted backups"
+                    confirmationLabel="Please confirm by typing 'cleanup deleted backups' below"
+                    shortConfirmationLabel="Confirmation">
+                    <x-slot:trigger>
+                        <x-forms.button isError class="w-full sm:w-auto">Cleanup Deleted</x-forms.button>
+                    </x-slot:trigger>
+                </x-modal-confirmation>
+            </div>
         </div>
         <div @if (!$skip) wire:poll.5000ms="refreshBackupExecutions" @endif
             class="flex flex-col gap-4">
@@ -87,7 +93,7 @@
                     <div class="text-gray-600 dark:text-gray-400 text-sm">
                         Location: {{ data_get($execution, 'filename', 'N/A') }}
                     </div>
-                    <div class="flex items-center gap-3 mt-2">
+                    <div class="flex flex-col gap-2 mt-2 sm:flex-row sm:flex-wrap sm:items-center sm:gap-3">
                         <div class="text-gray-600 dark:text-gray-400 text-sm">
                             Backup Availability:
                         </div>
@@ -154,9 +160,9 @@
                             <pre class="whitespace-pre-wrap text-sm">{{ data_get($execution, 'message') }}</pre>
                         </div>
                     @endif
-                    <div class="flex gap-2 mt-4">
+                    <div class="grid grid-cols-2 gap-2 mt-4 sm:flex sm:flex-wrap">
                         @if (data_get($execution, 'status') === 'success')
-                            <x-forms.button class="dark:hover:bg-coolgray-400"
+                            <x-forms.button class="w-full dark:hover:bg-coolgray-400 sm:w-auto"
                                 x-on:click="download_file('{{ data_get($execution, 'id') }}')">Download</x-forms.button>
                         @endif
                         @php
@@ -175,11 +181,15 @@
                                 $deleteActions[] = 'This backup execution record will be deleted.';
                             }
                         @endphp
-                        <x-modal-confirmation title="Confirm Backup Deletion?" buttonTitle="Delete" isErrorButton
+                        <x-modal-confirmation title="Confirm Backup Deletion?" isErrorButton
                             submitAction="deleteBackup({{ data_get($execution, 'id') }})" :checkboxes="$executionCheckboxes"
                             :actions="$deleteActions" confirmationText="{{ data_get($execution, 'filename') }}"
                             confirmationLabel="Please confirm the execution of the actions by entering the Backup Filename below"
-                            shortConfirmationLabel="Backup Filename" 1 />
+                            shortConfirmationLabel="Backup Filename">
+                            <x-slot:trigger>
+                                <x-forms.button isError class="w-full sm:w-auto">Delete</x-forms.button>
+                            </x-slot:trigger>
+                        </x-modal-confirmation>
                     </div>
                 </div>
             @empty

resources/views/livewire/project/database/backup/execution.blade.php

@@ -6,7 +6,7 @@
     <livewire:project.shared.configuration-checker :resource="$database" />
     <livewire:project.database.heading :database="$database" />
     <div>
-        <livewire:project.database.backup-edit :backup="$backup" :s3s="$s3s" :status="data_get($database, 'status')" />
+        <livewire:project.database.backup-edit :backup="$backup" :available-s3-storages="$s3s" :status="data_get($database, 'status')" />
         <livewire:project.database.backup-executions :backup="$backup" />
     </div>
 </div>

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -17,8 +20,12 @@
             <div class="flex gap-2">
                 <x-forms.input label="Initial Username" id="clickhouseAdminUser" placeholder="If empty: clickhouse"
                     readonly helper="You can only change this in the database." canGate="update" :canResource="$database" />
-                <x-forms.input label="Initial Password" id="clickhouseAdminPassword" type="password" required readonly
-                    helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Initial Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Initial Password" id="clickhouseAdminPassword" type="password" required readonly
+                        helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @endif
             </div>
         @else
             <div class=" dark:text-warning">Please verify these values. You can only modify them before the initial
@@ -26,8 +33,12 @@
             </div>
             <div class="flex gap-2">
                 <x-forms.input label="Username" id="clickhouseAdminUser" required canGate="update" :canResource="$database" />
-                <x-forms.input label="Password" id="clickhouseAdminPassword" type="password" required canGate="update"
-                    :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Password" id="clickhouseAdminPassword" type="password" required canGate="update"
+                        :canResource="$database" />
+                @endif
             </div>
         @endif
         <x-forms.input
@@ -41,20 +52,8 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="Clickhouse URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="dbUrl" canGate="update" :canResource="$database" />
-            @if ($dbUrlPublic)
-                <x-forms.input label="Clickhouse URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
-            @else
-                <x-forms.input label="Clickhouse URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    readonly value="Starting the database will generate this." canGate="update" :canResource="$database" />
-            @endif
         </div>
-        <div>
+        <livewire:project.database.clickhouse.status-info :database="$database" />
             <div class="flex flex-col py-2 w-64">
                 <div class="flex items-center gap-2 pb-2">
                     <div class="flex items-center">
@@ -76,11 +75,12 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
                     :canResource="$database" />
             </div>
+            <div class="flex flex-col gap-2">
             <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
                 canGate="update" :canResource="$database" />
             <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>
+            </div>
     </form>
     <h3 class="pt-4">Advanced</h3>
     <div class="w-64">

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

@@ -5,8 +5,8 @@
     <h1>Configuration</h1>
     <livewire:project.shared.configuration-checker :resource="$database" />
     <livewire:project.database.heading :database="$database" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
-        <div class="sub-menu-wrapper">
+    <div class="flex flex-col h-full gap-4 md:gap-8 md:flex-row">
+        <div class="sub-menu-wrapper hidden md:flex">
             <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
                 href="{{ route('project.database.configuration', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}"><span class="menu-item-label">General</span></a>
             <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
@@ -21,6 +21,8 @@
             @endcan
             <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
                 href="{{ route('project.database.webhooks', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}"><span class="menu-item-label">Webhooks</span></a>
+            <a class='sub-menu-item' {{ wireNavigate() }} wire:current.exact="menu-item-active"
+                href="{{ route('project.database.healthcheck', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}"><span class="menu-item-label">Healthcheck</span></a>
             <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
                 href="{{ route('project.database.resource-limits', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'database_uuid' => $database->uuid]) }}"><span class="menu-item-label">Resource Limits</span></a>
             <a class="sub-menu-item" {{ wireNavigate() }} wire:current.exact="menu-item-active"
@@ -57,6 +59,8 @@
                 <livewire:project.shared.destination :resource="$database" />
             @elseif ($currentRoute === 'project.database.persistent-storage')
                 <livewire:project.service.storage :resource="$database" />
+            @elseif ($currentRoute === 'project.database.healthcheck')
+                <livewire:project.database.health :database="$database" />
             @elseif ($currentRoute === 'project.database.import-backup')
                 <livewire:project.database.import :resource="$database" />
             @elseif ($currentRoute === 'project.database.webhooks')

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -18,16 +21,24 @@
 
         @if ($database->started_at)
             <div class="flex gap-2">
-                <x-forms.input label="Initial Password" id="dragonflyPassword" type="password" required readonly
-                    helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Initial Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Initial Password" id="dragonflyPassword" type="password" required readonly
+                        helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @endif
             </div>
         @else
             <div class=" dark:text-warning">Please verify these values. You can only modify them before the initial
                 start. After that, you need to modify it in the database.
             </div>
             <div class="flex gap-2">
-                <x-forms.input label="Password" id="dragonflyPassword" type="password" required canGate="update"
-                    :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Password" id="dragonflyPassword" type="password" required canGate="update"
+                        :canResource="$database" />
+                @endif
             </div>
         @endif
         <div class="flex flex-col gap-2">
@@ -37,60 +48,8 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="Dragonfly URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="dbUrl" canGate="update" :canResource="$database" />
-
-            @if ($dbUrlPublic)
-                <x-forms.input label="Dragonfly URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
-            @else
-                <x-forms.input label="Dragonfly URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    readonly value="Starting the database will generate this." canGate="update" :canResource="$database" />
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($database->enable_ssl && $certificateValidUntil)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($database->enable_ssl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-            <div class="flex flex-col gap-2">
-                <div class="w-64">
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
-                            instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
-                            instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." canGate="update"
-                            :canResource="$database" />
-                    @endif
-                </div>
-            </div>
         </div>
+        <livewire:project.database.dragonfly.status-info :database="$database" />
         <div>
             <div class="flex flex-col py-2 w-64">
                 <div class="flex items-center gap-2 pb-2">
@@ -113,14 +72,15 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
                     :canResource="$database" />
             </div>
-            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
-                canGate="update" :canResource="$database" />
-            <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>
-    <h3 class="pt-4">Advanced</h3>
-    <div class="w-64">
+            <div class="flex flex-col gap-2">
+                <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
+                    canGate="update" :canResource="$database" />
+                <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>
+        <h3 class="pt-4">Advanced</h3>
+        <div class="w-64">
         <x-forms.checkbox helper="Drain logs to your configured log drain endpoint in your Server settings."
             instantSave="instantSaveAdvanced" id="isLogDrainEnabled" label="Drain Logs" canGate="update"
             :canResource="$database" />

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

@@ -1,16 +1,190 @@
 <nav wire:poll.10000ms="checkStatus" class="pb-6">
+    @php
+        $databasePageItems = [
+            ['label' => 'Configuration', 'route' => 'project.database.configuration', 'active' => request()->routeIs('project.database.configuration')],
+            ['label' => 'Logs', 'route' => 'project.database.logs', 'active' => request()->routeIs('project.database.logs')],
+            ['label' => 'Terminal', 'route' => 'project.database.command', 'active' => request()->routeIs('project.database.command'), 'navigate' => false, 'visible' => auth()->user()?->can('canAccessTerminal')],
+            [
+                'label' => 'Backups',
+                'route' => 'project.database.backup.index',
+                'active' => request()->routeIs('project.database.backup.index', 'project.database.backup.execution'),
+                'visible' => in_array($database->getMorphClass(), [
+                    'App\Models\StandalonePostgresql',
+                    'App\Models\StandaloneMongodb',
+                    'App\Models\StandaloneMysql',
+                    'App\Models\StandaloneMariadb',
+                ]),
+            ],
+        ];
+
+        $databaseConfigurationItems = [
+            ['label' => 'General', 'route' => 'project.database.configuration', 'active' => request()->routeIs('project.database.configuration')],
+            ['label' => 'Environment Variables', 'route' => 'project.database.environment-variables', 'active' => request()->routeIs('project.database.environment-variables')],
+            ['label' => 'Servers', 'route' => 'project.database.servers', 'active' => request()->routeIs('project.database.servers')],
+            ['label' => 'Persistent Storage', 'route' => 'project.database.persistent-storage', 'active' => request()->routeIs('project.database.persistent-storage')],
+            ['label' => 'Import Backup', 'route' => 'project.database.import-backup', 'active' => request()->routeIs('project.database.import-backup'), 'visible' => auth()->user()?->can('update', $database)],
+            ['label' => 'Webhooks', 'route' => 'project.database.webhooks', 'active' => request()->routeIs('project.database.webhooks')],
+            ['label' => 'Healthcheck', 'route' => 'project.database.healthcheck', 'active' => request()->routeIs('project.database.healthcheck')],
+            ['label' => 'Resource Limits', 'route' => 'project.database.resource-limits', 'active' => request()->routeIs('project.database.resource-limits')],
+            ['label' => 'Resource Operations', 'route' => 'project.database.resource-operations', 'active' => request()->routeIs('project.database.resource-operations')],
+            ['label' => 'Metrics', 'route' => 'project.database.metrics', 'active' => request()->routeIs('project.database.metrics')],
+            ['label' => 'Tags', 'route' => 'project.database.tags', 'active' => request()->routeIs('project.database.tags')],
+            ['label' => 'Danger Zone', 'route' => 'project.database.danger', 'active' => request()->routeIs('project.database.danger')],
+        ];
+
+        $databasePageItems = array_values(array_filter($databasePageItems, fn (array $item): bool => $item['visible'] ?? true));
+        $databaseConfigurationItems = array_values(array_filter($databaseConfigurationItems, fn (array $item): bool => $item['visible'] ?? true));
+        $activeDatabaseConfigurationItem = collect($databaseConfigurationItems)->firstWhere('active', true);
+        $activeDatabasePageItem = collect($databasePageItems)->firstWhere('active', true);
+        $activeDatabaseMobileItem = $activeDatabaseConfigurationItem ?? $activeDatabasePageItem ?? $databasePageItems[0];
+        $activeDatabaseMobileGroup = $activeDatabaseConfigurationItem ? 'configuration' : 'database';
+        $activeDatabaseMobileNavigation = ($activeDatabaseMobileItem['navigate'] ?? true) ? 'navigate' : 'location';
+        $activeDatabaseMobileValue = $activeDatabaseMobileNavigation.'|'.$activeDatabaseMobileGroup.'|'.route($activeDatabaseMobileItem['route'], $parameters);
+        $databaseMobileMenuChangeHandler = <<<'JS'
+            const value = $event.target.value;
+
+            if (!value) {
+                return;
+            }
+
+            if (value.startsWith('navigate|')) {
+                const url = value.split('|').slice(2).join('|');
+                window.Livewire?.navigate ? window.Livewire.navigate(url) : window.location.href = url;
+                return;
+            }
+
+            if (value.startsWith('location|')) {
+                const url = value.split('|').slice(2).join('|');
+                window.location.href = url;
+                return;
+            }
+
+            resetToCurrent();
+
+            if (value.startsWith('external:')) {
+                window.open(value.slice(9), '_blank', 'noopener');
+                return;
+            }
+
+            document.getElementById(`database-${value.slice(7)}-trigger`)?.click();
+        JS;
+    @endphp
     <x-resources.breadcrumbs :resource="$database" :parameters="$parameters" />
     <x-slide-over @startdatabase.window="slideOverOpen = true" closeWithX fullScreen>
         <x-slot:title>Database Startup</x-slot:title>
         <x-slot:content>
-            <div wire:ignore>
+            <div wire:ignore class="h-full min-h-0 min-w-0 max-w-full">
                 <livewire:activity-monitor header="Logs" fullHeight />
             </div>
         </x-slot:content>
     </x-slide-over>
     <div class="navbar-main">
+        <div class="w-full md:hidden">
+            @if ($database->destination->server->isFunctional())
+                <div id="database-mobile-actions" class="mt-2 mb-3 md:hidden">
+                    <div class="mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Actions</div>
+                    <div class="flex flex-nowrap items-center gap-2 overflow-x-auto">
+                    @if (!str($database->status)->startsWith('exited'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('database-restart-trigger')?.click()">
+                            <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
+                        </button>
+                        <x-forms.button isError class="shrink-0"
+                            @click="document.getElementById('database-stop-trigger')?.click()">
+                            <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-forms.button>
+                    @else
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('database-start-trigger')?.click()">
+                            <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>
+                            Start
+                        </button>
+                    @endif
+                    </div>
+                </div>
+            @endif
+            <label id="database-mobile-section-label" for="database-mobile-section" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Section</label>
+            <select id="database-mobile-section" class="select w-full" aria-label="Database menu"
+                data-current-value="{{ $activeDatabaseMobileValue }}"
+                x-data="{
+                    init() {
+                        this.syncFromLocation();
+                        window.Livewire?.hook?.('morphed', ({ el }) => {
+                            if (el.contains(this.$el)) {
+                                queueMicrotask(() => this.syncFromLocation());
+                            }
+                        });
+                    },
+                    selected: $el.dataset.currentValue,
+                    current: $el.dataset.currentValue,
+                    syncFromLocation() {
+                        const currentUrl = new URL(window.location.href);
+                        const matchingOptions = Array.from(this.$el.options).filter((option) => {
+                            if (!option.value.startsWith('navigate|') && !option.value.startsWith('location|')) {
+                                return false;
+                            }
+
+                            const optionUrl = new URL(option.value.split('|').slice(2).join('|'), window.location.origin);
+
+                            return optionUrl.pathname === currentUrl.pathname;
+                        });
+                        const selectedOption = matchingOptions.find((option) => {
+                            return option.value.startsWith('navigate|configuration|') || option.value.startsWith('navigate|resource|');
+                        }) || matchingOptions[0];
+
+                        if (selectedOption) {
+                            this.current = selectedOption.value;
+                            this.selected = selectedOption.value;
+                        }
+                    },
+                    resetToCurrent() {
+                        this.selected = this.current;
+                    },
+                }"
+                x-on:livewire:navigated.window="syncFromLocation()"
+                x-model="selected"
+                x-on:change="{{ $databaseMobileMenuChangeHandler }}">
+                <optgroup label="Database">
+                    @foreach ($databasePageItems as $menuItem)
+                        <option value="{{ ($menuItem['navigate'] ?? true) ? 'navigate' : 'location' }}|database|{{ route($menuItem['route'], $parameters) }}">
+                            {{ $menuItem['label'] }}
+                        </option>
+                    @endforeach
+                </optgroup>
+                <optgroup label="Configuration">
+                    @foreach ($databaseConfigurationItems as $menuItem)
+                        <option value="navigate|configuration|{{ route($menuItem['route'], $parameters) }}">
+                            {{ $menuItem['label'] }}
+                        </option>
+                    @endforeach
+                </optgroup>
+            </select>
+        </div>
         <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">
+            class="scrollbar hidden min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:flex 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
@@ -37,89 +211,39 @@
                 </a>
             @endif
         </nav>
+
         @if ($database->destination->server->isFunctional())
             <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 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:button-title>
-                                <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-slot:button-title>
-                        </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: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="manage" :canResource="$database" title="Restart" @click="document.getElementById('database-restart-trigger')?.click()">
+                            <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-forms.button canGate="manage" :canResource="$database" isError title="Stop" @click="document.getElementById('database-stop-trigger')?.click()">
+                            <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-forms.button>
                     @else
-                        <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
+                        <x-forms.button canGate="manage" :canResource="$database" @click="document.getElementById('database-start-trigger')?.click()" 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">
@@ -127,7 +251,7 @@
                                 <path d="M7 4v16l13 -8z" />
                             </svg>
                             Start
-                        </button>
+                        </x-forms.button>
                     @endif
                 </div>
                 @script
@@ -148,4 +272,37 @@
             <div class="text-error">Underlying server is not functional.</div>
         @endif
     </div>
+    @if ($database->destination->server->isFunctional())
+            <x-modal-confirmation title="Confirm Database Restart?" buttonTitle="Restart" submitAction="restartEvent"
+                :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"
+                :dispatchAction="true">
+                <x-slot:trigger>
+                    <button id="database-restart-trigger" type="button" class="hidden">Restart</button>
+                </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>
+                    <button id="database-stop-trigger" type="button" class="hidden">Stop</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+            <x-modal-confirmation title="Confirm Database Start?" buttonTitle="Start" submitAction="startEvent"
+                :actions="[
+                    'This database will be started.',
+                ]" :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Start Database"
+                :dispatchAction="true">
+                <x-slot:trigger>
+                    <button id="database-start-trigger" type="button" class="hidden">Start</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+    @endif
+
 </nav>

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

@@ -0,0 +1,35 @@
+<form wire:submit='submit' class="flex flex-col">
+    <div class="flex items-center gap-2">
+        <h2>Healthcheck</h2>
+        <x-forms.button canGate="update" :canResource="$database" type="submit">Save</x-forms.button>
+        @if (!$healthCheckEnabled)
+            <x-modal-confirmation title="Confirm Healthcheck Enable?" buttonTitle="Enable Healthcheck"
+                submitAction="toggleHealthcheck" :actions="['Enable healthcheck for this database.']"
+                warningMessage="If the health check fails, this database will be marked unhealthy. Please review the <a href='https://coolify.io/docs/knowledge-base/health-checks' target='_blank' class='underline text-white'>Health Checks</a> guide before proceeding!"
+                step2ButtonText="Enable Healthcheck" :confirmWithText="false" :confirmWithPassword="false"
+                isHighlightedButton>
+            </x-modal-confirmation>
+        @else
+            <x-forms.button canGate="update" :canResource="$database" wire:click="toggleHealthcheck">Disable Healthcheck</x-forms.button>
+        @endif
+    </div>
+    <div class="mt-1 pb-4">Define how your resource's health should be checked.</div>
+    <div class="flex flex-col gap-4">
+        @if (!$healthCheckEnabled)
+            <x-callout type="warning" title="Healthcheck disabled">
+                <p>Docker runs no healthcheck probe for this database and Coolify can no longer report a healthy/unhealthy state.</p>
+            </x-callout>
+        @endif
+
+        <div class="flex gap-2">
+            <x-forms.input canGate="update" :canResource="$database" min="1" type="number" id="healthCheckInterval"
+                placeholder="15" label="Interval (s)" required />
+            <x-forms.input canGate="update" :canResource="$database" min="1" type="number" id="healthCheckTimeout"
+                placeholder="5" label="Timeout (s)" required />
+            <x-forms.input canGate="update" :canResource="$database" min="1" type="number" id="healthCheckRetries"
+                placeholder="5" label="Retries" required />
+            <x-forms.input canGate="update" :canResource="$database" min="0" type="number"
+                id="healthCheckStartPeriod" placeholder="5" label="Start Period (s)" required />
+        </div>
+    </div>
+</form>

resources/views/livewire/project/database/import-form.blade.php

@@ -0,0 +1,228 @@
+<div x-data="{
+    error: $wire.entangle('error'),
+    filesize: $wire.entangle('filesize'),
+    filename: $wire.entangle('filename'),
+    isUploading: $wire.entangle('isUploading'),
+    progress: $wire.entangle('progress'),
+    s3FileSize: $wire.entangle('s3FileSize'),
+    s3StorageId: $wire.entangle('s3StorageId'),
+    s3Path: $wire.entangle('s3Path'),
+    restoreType: null
+}">
+    <script type="text/javascript" src="{{ URL::asset('js/dropzone.js') }}"></script>
+    @script
+    <script data-navigate-once>
+        Dropzone.options.myDropzone = {
+            chunking: true,
+            method: "POST",
+            maxFilesize: 1000000000,
+            chunkSize: 10000000,
+            createImageThumbnails: false,
+            disablePreviews: true,
+            parallelChunkUploads: false,
+            init: function () {
+                let button = this.element.querySelector('button');
+                button.innerText = 'Select or drop a backup file here.'
+                this.on('sending', function (file, xhr, formData) {
+                    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
+                    formData.append("_token", token);
+                });
+                this.on("addedfile", file => {
+                    $wire.isUploading = true;
+                    $wire.customLocation = '';
+                });
+                this.on('uploadprogress', function (file, progress, bytesSent) {
+                    $wire.progress = progress;
+                });
+                this.on('complete', function (file) {
+                    $wire.filename = file.name;
+                    $wire.filesize = Number(file.size / 1024 / 1024).toFixed(2) + ' MB';
+                    $wire.isUploading = false;
+                });
+                this.on('error', function (file, message) {
+                    $wire.error = true;
+                    $wire.$dispatch('error', message.error)
+                });
+            }
+        };
+    </script>
+    @endscript
+        <div class="pt-2 rounded-sm alert-error">
+            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+            </svg>
+            <span>This is a destructive action, existing data will be replaced!</span>
+        </div>
+        {{-- Restore Command Configuration --}}
+            @if ($resourceDbType === 'standalone-postgresql')
+                @if ($dumpAll)
+                    <x-forms.textarea rows="6" readonly label="Custom Import Command"
+                        wire:model='restoreCommandText' canGate="update" :canResource="$this->resource"></x-forms.textarea>
+                @else
+                    <x-forms.input label="Custom Import Command" wire:model='postgresqlRestoreCommand' canGate="update" :canResource="$this->resource"></x-forms.input>
+                    <div class="flex flex-col gap-1 pt-1">
+                        <span class="text-xs">You can add "--clean" to drop objects before creating them, avoiding
+                            conflicts.</span>
+                        <span class="text-xs">You can add "--verbose" to log more things.</span>
+                    </div>
+                @endif
+                <div class="w-64 pt-2">
+                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll' canGate="update" :canResource="$this->resource"></x-forms.checkbox>
+                </div>
+            @elseif ($resourceDbType === 'standalone-mysql')
+                @if ($dumpAll)
+                    <x-forms.textarea rows="14" readonly label="Custom Import Command"
+                        wire:model='restoreCommandText' canGate="update" :canResource="$this->resource"></x-forms.textarea>
+                @else
+                    <x-forms.input label="Custom Import Command" wire:model='mysqlRestoreCommand' canGate="update" :canResource="$this->resource"></x-forms.input>
+                @endif
+                <div class="w-64 pt-2">
+                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll' canGate="update" :canResource="$this->resource"></x-forms.checkbox>
+                </div>
+            @elseif ($resourceDbType === 'standalone-mariadb')
+                @if ($dumpAll)
+                    <x-forms.textarea rows="14" readonly label="Custom Import Command"
+                        wire:model='restoreCommandText' canGate="update" :canResource="$this->resource"></x-forms.textarea>
+                @else
+                    <x-forms.input label="Custom Import Command" wire:model='mariadbRestoreCommand' canGate="update" :canResource="$this->resource"></x-forms.input>
+                @endif
+                <div class="w-64 pt-2">
+                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll' canGate="update" :canResource="$this->resource"></x-forms.checkbox>
+                </div>
+            @endif
+
+            {{-- Restore Type Selection Boxes --}}
+            <h3 class="pt-6">Choose Restore Method</h3>
+            <div class="flex gap-4 pt-2">
+                <div @click="restoreType = 'file'"
+                     class="flex-1 p-6 border-2 rounded-sm cursor-pointer transition-all"
+                     :class="restoreType === 'file' ? 'border-warning bg-warning/10' : 'border-neutral-200 dark:border-neutral-800 hover:border-warning/50'">
+                    <div class="flex flex-col gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
+                        </svg>
+                        <h4 class="text-lg font-bold">Restore from File</h4>
+                        <p class="text-sm text-neutral-600 dark:text-neutral-400">Upload a backup file or specify a file path on the server</p>
+                    </div>
+                </div>
+
+                @if (count($availableS3Storages) > 0)
+                    <div @click="restoreType = 's3'"
+                         class="flex-1 p-6 border-2 rounded-sm cursor-pointer transition-all"
+                         :class="restoreType === 's3' ? 'border-warning bg-warning/10' : 'border-neutral-200 dark:border-neutral-800 hover:border-warning/50'">
+                        <div class="flex flex-col gap-2">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
+                            </svg>
+                            <h4 class="text-lg font-bold">Restore from S3</h4>
+                            <p class="text-sm text-neutral-600 dark:text-neutral-400">Download and restore a backup from S3 storage</p>
+                        </div>
+                    </div>
+                @endif
+            </div>
+
+            {{-- File Restore Section --}}
+            @can('update', $this->resource)
+                <div x-show="restoreType === 'file'" class="pt-6">
+                    <h3>Backup File</h3>
+                    <form class="flex gap-2 items-end pt-2">
+                        <x-forms.input label="Location of the backup file on the server" placeholder="e.g. /home/user/backup.sql.gz"
+                            wire:model='customLocation' x-model="$wire.customLocation" canGate="update" :canResource="$this->resource"></x-forms.input>
+                        <x-forms.button class="w-full" wire:click='checkFile' x-bind:disabled="!$wire.customLocation" canGate="update" :canResource="$this->resource">Check File</x-forms.button>
+                    </form>
+                    <div class="pt-2 text-center text-xl font-bold">
+                        Or
+                    </div>
+                    <form action="{{ route('upload.backup', ['databaseUuid' => $resourceUuid]) }}" class="dropzone" id="my-dropzone" wire:ignore>
+                        @csrf
+                    </form>
+                    <div x-show="isUploading">
+                        <progress max="100" x-bind:value="progress" class="progress progress-warning"></progress>
+                    </div>
+
+                    <div x-show="filename && !error" class="pt-6">
+                        <h3>File Information</h3>
+                        <div class="pt-2">Location: <span x-text="filename ?? 'N/A'"></span><span x-show="filesize" x-text="' / ' + filesize"></span></div>
+                        <div class="pt-2">
+                            <x-modal-confirmation title="Restore Database from File?" buttonTitle="Restore from File"
+                                submitAction="runImport" isErrorButton>
+                                <x-slot:button-title>
+                                    Restore Database from File
+                                </x-slot:button-title>
+                                This will perform the following actions:
+                                <ul class="list-disc list-inside pt-2">
+                                    <li>Copy backup file to database container</li>
+                                    <li>Execute restore command</li>
+                                </ul>
+                                <div class="pt-2 font-bold text-error">WARNING: This will REPLACE all existing data!</div>
+                            </x-modal-confirmation>
+                        </div>
+                    </div>
+                </div>
+            @endcan
+
+            {{-- S3 Restore Section --}}
+            @if (count($availableS3Storages) > 0)
+                @can('update', $this->resource)
+                    <div x-show="restoreType === 's3'" class="pt-6">
+                        <h3>Restore from S3</h3>
+                        <div class="flex flex-col gap-2 pt-2">
+                            <x-forms.select label="S3 Storage" wire:model.live="s3StorageId" canGate="update" :canResource="$this->resource">
+                                <option value="">Select S3 Storage</option>
+                                @foreach ($availableS3Storages as $storage)
+                                    <option value="{{ $storage['id'] }}">{{ $storage['name'] }}
+                                        @if ($storage['description'])
+                                            - {{ $storage['description'] }}
+                                        @endif
+                                    </option>
+                                @endforeach
+                            </x-forms.select>
+
+                            <x-forms.input label="S3 File Path (within bucket)"
+                                helper="Path to the backup file in your S3 bucket, e.g., /backups/database-2025-01-15.gz"
+                                placeholder="/backups/database-backup.gz" wire:model.blur='s3Path'
+                                wire:keydown.enter='checkS3File' canGate="update" :canResource="$this->resource"></x-forms.input>
+
+                            <div class="flex gap-2">
+                                <x-forms.button class="w-full" wire:click='checkS3File' x-bind:disabled="!s3StorageId || !s3Path" canGate="update" :canResource="$this->resource">
+                                    Check File
+                                </x-forms.button>
+                            </div>
+
+                            @if ($s3FileSize)
+                                <div class="pt-6">
+                                    <h3>File Information</h3>
+                                    <div class="pt-2">Location: {{ $s3Path }} {{ formatBytes($s3FileSize ?? 0) }}</div>
+                                    <div class="pt-2">
+                                        <x-modal-confirmation title="Restore Database from S3?" buttonTitle="Restore from S3"
+                                            submitAction="restoreFromS3" isErrorButton>
+                                            <x-slot:button-title>
+                                                Restore Database from S3
+                                            </x-slot:button-title>
+                                            This will perform the following actions:
+                                            <ul class="list-disc list-inside pt-2">
+                                                <li>Download backup from S3 storage</li>
+                                                <li>Copy file into database container</li>
+                                                <li>Execute restore command</li>
+                                            </ul>
+                                            <div class="pt-2 font-bold text-error">WARNING: This will REPLACE all existing data!</div>
+                                        </x-modal-confirmation>
+                                    </div>
+                                </div>
+                            @endif
+                        </div>
+                    </div>
+                @endcan
+            @endif
+
+            {{-- Slide-over for activity monitor (all restore operations) --}}
+            <x-slide-over @databaserestore.window="slideOverOpen = true" closeWithX fullScreen>
+                <x-slot:title>Database Restore Output</x-slot:title>
+                <x-slot:content>
+                    <div wire:ignore>
+                        <livewire:activity-monitor wire:key="database-restore-{{ $resourceUuid }}" header="Logs" fullHeight />
+                    </div>
+                </x-slot:content>
+            </x-slide-over>
+</div>

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

@@ -1,237 +1,10 @@
-<div x-data="{
-    error: $wire.entangle('error'),
-    filesize: $wire.entangle('filesize'),
-    filename: $wire.entangle('filename'),
-    isUploading: $wire.entangle('isUploading'),
-    progress: $wire.entangle('progress'),
-    s3FileSize: $wire.entangle('s3FileSize'),
-    s3StorageId: $wire.entangle('s3StorageId'),
-    s3Path: $wire.entangle('s3Path'),
-    restoreType: null
-}">
-    <script type="text/javascript" src="{{ URL::asset('js/dropzone.js') }}"></script>
-    @script
-    <script data-navigate-once>
-        Dropzone.options.myDropzone = {
-            chunking: true,
-            method: "POST",
-            maxFilesize: 1000000000,
-            chunkSize: 10000000,
-            createImageThumbnails: false,
-            disablePreviews: true,
-            parallelChunkUploads: false,
-            init: function () {
-                let button = this.element.querySelector('button');
-                button.innerText = 'Select or drop a backup file here.'
-                this.on('sending', function (file, xhr, formData) {
-                    const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
-                    formData.append("_token", token);
-                });
-                this.on("addedfile", file => {
-                    $wire.isUploading = true;
-                    $wire.customLocation = '';
-                });
-                this.on('uploadprogress', function (file, progress, bytesSent) {
-                    $wire.progress = progress;
-                });
-                this.on('complete', function (file) {
-                    $wire.filename = file.name;
-                    $wire.filesize = Number(file.size / 1024 / 1024).toFixed(2) + ' MB';
-                    $wire.isUploading = false;
-                });
-                this.on('error', function (file, message) {
-                    $wire.error = true;
-                    $wire.$dispatch('error', message.error)
-                });
-            }
-        };
-    </script>
-    @endscript
+<div>
     <h2>Import Backup</h2>
     @if ($unsupported)
         <div>Database restore is not supported.</div>
+    @elseif (str($resourceStatus)->startsWith('running'))
+        <livewire:project.database.import-form wire:key="database-import-form-{{ $resourceUuid }}" />
     @else
-        <div class="pt-2 rounded-sm alert-error">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 stroke-current shrink-0" fill="none" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
-                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
-            </svg>
-            <span>This is a destructive action, existing data will be replaced!</span>
-        </div>
-        @if (str($resourceStatus)->startsWith('running'))
-            {{-- Restore Command Configuration --}}
-            @if ($resourceDbType === 'standalone-postgresql')
-                @if ($dumpAll)
-                    <x-forms.textarea rows="6" readonly label="Custom Import Command"
-                        wire:model='restoreCommandText'></x-forms.textarea>
-                @else
-                    <x-forms.input label="Custom Import Command" wire:model='postgresqlRestoreCommand'></x-forms.input>
-                    <div class="flex flex-col gap-1 pt-1">
-                        <span class="text-xs">You can add "--clean" to drop objects before creating them, avoiding
-                            conflicts.</span>
-                        <span class="text-xs">You can add "--verbose" to log more things.</span>
-                    </div>
-                @endif
-                <div class="w-64 pt-2">
-                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll'></x-forms.checkbox>
-                </div>
-            @elseif ($resourceDbType === 'standalone-mysql')
-                @if ($dumpAll)
-                    <x-forms.textarea rows="14" readonly label="Custom Import Command"
-                        wire:model='restoreCommandText'></x-forms.textarea>
-                @else
-                    <x-forms.input label="Custom Import Command" wire:model='mysqlRestoreCommand'></x-forms.input>
-                @endif
-                <div class="w-64 pt-2">
-                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll'></x-forms.checkbox>
-                </div>
-            @elseif ($resourceDbType === 'standalone-mariadb')
-                @if ($dumpAll)
-                    <x-forms.textarea rows="14" readonly label="Custom Import Command"
-                        wire:model='restoreCommandText'></x-forms.textarea>
-                @else
-                    <x-forms.input label="Custom Import Command" wire:model='mariadbRestoreCommand'></x-forms.input>
-                @endif
-                <div class="w-64 pt-2">
-                    <x-forms.checkbox label="Backup includes all databases" wire:model.live='dumpAll'></x-forms.checkbox>
-                </div>
-            @endif
-
-            {{-- Restore Type Selection Boxes --}}
-            <h3 class="pt-6">Choose Restore Method</h3>
-            <div class="flex gap-4 pt-2">
-                <div @click="restoreType = 'file'"
-                     class="flex-1 p-6 border-2 rounded-sm cursor-pointer transition-all"
-                     :class="restoreType === 'file' ? 'border-warning bg-warning/10' : 'border-neutral-200 dark:border-neutral-800 hover:border-warning/50'">
-                    <div class="flex flex-col gap-2">
-                        <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
-                        </svg>
-                        <h4 class="text-lg font-bold">Restore from File</h4>
-                        <p class="text-sm text-neutral-600 dark:text-neutral-400">Upload a backup file or specify a file path on the server</p>
-                    </div>
-                </div>
-
-                @if (count($availableS3Storages) > 0)
-                    <div @click="restoreType = 's3'"
-                         class="flex-1 p-6 border-2 rounded-sm cursor-pointer transition-all"
-                         :class="restoreType === 's3' ? 'border-warning bg-warning/10' : 'border-neutral-200 dark:border-neutral-800 hover:border-warning/50'">
-                        <div class="flex flex-col gap-2">
-                            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
-                            </svg>
-                            <h4 class="text-lg font-bold">Restore from S3</h4>
-                            <p class="text-sm text-neutral-600 dark:text-neutral-400">Download and restore a backup from S3 storage</p>
-                        </div>
-                    </div>
-                @endif
-            </div>
-
-            {{-- File Restore Section --}}
-            @can('update', $this->resource)
-                <div x-show="restoreType === 'file'" class="pt-6">
-                    <h3>Backup File</h3>
-                    <form class="flex gap-2 items-end pt-2">
-                        <x-forms.input label="Location of the backup file on the server" placeholder="e.g. /home/user/backup.sql.gz"
-                            wire:model='customLocation' x-model="$wire.customLocation"></x-forms.input>
-                        <x-forms.button class="w-full" wire:click='checkFile' x-bind:disabled="!$wire.customLocation">Check File</x-forms.button>
-                    </form>
-                    <div class="pt-2 text-center text-xl font-bold">
-                        Or
-                    </div>
-                    <form action="/upload/backup/{{ $resourceUuid }}" class="dropzone" id="my-dropzone" wire:ignore>
-                        @csrf
-                    </form>
-                    <div x-show="isUploading">
-                        <progress max="100" x-bind:value="progress" class="progress progress-warning"></progress>
-                    </div>
-
-                    <div x-show="filename && !error" class="pt-6">
-                        <h3>File Information</h3>
-                        <div class="pt-2">Location: <span x-text="filename ?? 'N/A'"></span><span x-show="filesize" x-text="' / ' + filesize"></span></div>
-                        <div class="pt-2">
-                            <x-modal-confirmation title="Restore Database from File?" buttonTitle="Restore from File"
-                                submitAction="runImport" isErrorButton>
-                                <x-slot:button-title>
-                                    Restore Database from File
-                                </x-slot:button-title>
-                                This will perform the following actions:
-                                <ul class="list-disc list-inside pt-2">
-                                    <li>Copy backup file to database container</li>
-                                    <li>Execute restore command</li>
-                                </ul>
-                                <div class="pt-2 font-bold text-error">WARNING: This will REPLACE all existing data!</div>
-                            </x-modal-confirmation>
-                        </div>
-                    </div>
-                </div>
-            @endcan
-
-            {{-- S3 Restore Section --}}
-            @if (count($availableS3Storages) > 0)
-                @can('update', $this->resource)
-                    <div x-show="restoreType === 's3'" class="pt-6">
-                        <h3>Restore from S3</h3>
-                        <div class="flex flex-col gap-2 pt-2">
-                            <x-forms.select label="S3 Storage" wire:model.live="s3StorageId">
-                                <option value="">Select S3 Storage</option>
-                                @foreach ($availableS3Storages as $storage)
-                                    <option value="{{ $storage['id'] }}">{{ $storage['name'] }}
-                                        @if ($storage['description'])
-                                            - {{ $storage['description'] }}
-                                        @endif
-                                    </option>
-                                @endforeach
-                            </x-forms.select>
-
-                            <x-forms.input label="S3 File Path (within bucket)"
-                                helper="Path to the backup file in your S3 bucket, e.g., /backups/database-2025-01-15.gz"
-                                placeholder="/backups/database-backup.gz" wire:model.blur='s3Path'
-                                wire:keydown.enter='checkS3File'></x-forms.input>
-
-                            <div class="flex gap-2">
-                                <x-forms.button class="w-full" wire:click='checkS3File' x-bind:disabled="!s3StorageId || !s3Path">
-                                    Check File
-                                </x-forms.button>
-                            </div>
-
-                            @if ($s3FileSize)
-                                <div class="pt-6">
-                                    <h3>File Information</h3>
-                                    <div class="pt-2">Location: {{ $s3Path }} {{ formatBytes($s3FileSize ?? 0) }}</div>
-                                    <div class="pt-2">
-                                        <x-modal-confirmation title="Restore Database from S3?" buttonTitle="Restore from S3"
-                                            submitAction="restoreFromS3" isErrorButton>
-                                            <x-slot:button-title>
-                                                Restore Database from S3
-                                            </x-slot:button-title>
-                                            This will perform the following actions:
-                                            <ul class="list-disc list-inside pt-2">
-                                                <li>Download backup from S3 storage</li>
-                                                <li>Copy file into database container</li>
-                                                <li>Execute restore command</li>
-                                            </ul>
-                                            <div class="pt-2 font-bold text-error">WARNING: This will REPLACE all existing data!</div>
-                                        </x-modal-confirmation>
-                                    </div>
-                                </div>
-                            @endif
-                        </div>
-                    </div>
-                @endcan
-            @endif
-
-            {{-- Slide-over for activity monitor (all restore operations) --}}
-            <x-slide-over @databaserestore.window="slideOverOpen = true" closeWithX fullScreen>
-                <x-slot:title>Database Restore Output</x-slot:title>
-                <x-slot:content>
-                    <div wire:ignore>
-                        <livewire:activity-monitor wire:key="database-restore-{{ $resourceUuid }}" header="Logs" fullHeight />
-                    </div>
-                </x-slot:content>
-            </x-slide-over>
-        @else
-            <div>Database must be running to restore a backup.</div>
-        @endif
+        <div>Database must be running to restore a backup.</div>
     @endif
-</div>
+</div>

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -15,16 +18,24 @@
 
         @if ($database->started_at)
             <div class="flex gap-2">
-                <x-forms.input label="Initial Password" id="keydbPassword" type="password" required readonly
-                    helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Initial Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Initial Password" id="keydbPassword" type="password" required readonly
+                        helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @endif
             </div>
         @else
             <div class=" dark:text-warning">Please verify these values. You can only modify them before the initial
                 start. After that, you need to modify it in the database.
             </div>
             <div class="flex gap-2">
-                <x-forms.input label="Password" id="keydbPassword" type="password" required canGate="update"
-                    :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Password" id="keydbPassword" type="password" required canGate="update"
+                        :canResource="$database" />
+                @endif
             </div>
         @endif
         <x-forms.input
@@ -38,59 +49,8 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="KeyDB URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="dbUrl" canGate="update" :canResource="$database" />
-            @if ($dbUrlPublic)
-                <x-forms.input label="KeyDB URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
-            @else
-                <x-forms.input label="KeyDB URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    readonly value="Starting the database will generate this." canGate="update" :canResource="$database" />
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($database->enable_ssl && $certificateValidUntil)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($database->enable_ssl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-            <div class="flex flex-col gap-2">
-                <div class="w-64">
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
-                            instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enable_ssl" label="Enable SSL" wire:model.live="enable_ssl"
-                            instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." canGate="update"
-                            :canResource="$database" />
-                    @endif
-                </div>
-            </div>
         </div>
+        <livewire:project.database.keydb.status-info :database="$database" />
         <div>
             <div class="flex flex-col py-2 w-64">
                 <div class="flex items-center gap-2 pb-2">
@@ -113,14 +73,15 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update"
                     :canResource="$database" />
             </div>
-            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
-                canGate="update" :canResource="$database" />
-            <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>
+            <div class="flex flex-col gap-2">
+                <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort" label="Public Port"
+                    canGate="update" :canResource="$database" />
+                <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" />
         <x-forms.textarea
             helper="<a target='_blank' class='underline dark:text-white' href='https://raw.githubusercontent.com/Snapchat/KeyDB/unstable/keydb.conf'>KeyDB Default Configuration</a>"
             label="Custom KeyDB Configuration" rows="10" id="keydbConf" canGate="update" :canResource="$database" />
+            </div>
     </form>
     <h3 class="pt-4">Advanced</h3>
     <div class="w-64">

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -17,15 +20,23 @@
         </div>
         @if ($database->started_at)
             <div class="flex xl:flex-row flex-col gap-2">
-                <x-forms.input label="Root Password" id="mariadbRootPassword" type="password" required
-                    helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work."
-                    canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Root Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Root Password" id="mariadbRootPassword" type="password" required
+                        helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work."
+                        canGate="update" :canResource="$database" />
+                @endif
                 <x-forms.input label="Normal User" id="mariadbUser" required
                     helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work."
                     canGate="update" :canResource="$database" />
-                <x-forms.input label="Normal User Password" id="mariadbPassword" type="password" required
-                    helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work."
-                    canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Normal User Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Normal User Password" id="mariadbPassword" type="password" required
+                        helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work."
+                        canGate="update" :canResource="$database" />
+                @endif
             </div>
             <div class="flex flex-col gap-2">
                 <x-forms.input label="Initial Database" id="mariadbDatabase"
@@ -34,12 +45,20 @@
             </div>
         @else
             <div class="flex xl:flex-row flex-col gap-2 pb-2">
-                <x-forms.input label="Root Password" id="mariadbRootPassword" type="password"
-                    helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Root Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Root Password" id="mariadbRootPassword" type="password"
+                        helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @endif
                 <x-forms.input label="Normal User" id="mariadbUser" required
                     helper="You can only change this in the database." canGate="update" :canResource="$database" />
-                <x-forms.input label="Normal User Password" id="mariadbPassword" type="password" required
-                    helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Normal User Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Normal User Password" id="mariadbPassword" type="password" required
+                        helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @endif
             </div>
             <div class="flex flex-col gap-2">
                 <x-forms.input label="Initial Database" id="mariadbDatabase"
@@ -61,59 +80,9 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="MariaDB URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="db_url" canGate="update" :canResource="$database" />
-            @if ($db_url_public)
-                <x-forms.input label="MariaDB URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="db_url_public" canGate="update" :canResource="$database" />
-            @endif
         </div>
 
-        <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($enableSsl && $certificateValidUntil)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($enableSsl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex flex-col gap-2">
-                <div class="w-64">
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" canGate="update"
-                            :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." canGate="update"
-                            :canResource="$database" />
-                    @endif
-                </div>
-            </div>
-        </div>
+        <livewire:project.database.mariadb.status-info :database="$database" />
 
         <div>
             <div class="flex flex-col py-2 w-64">
@@ -137,10 +106,12 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
                     canGate="update" :canResource="$database" />
             </div>
+            <div class="flex flex-col gap-2">
             <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
                 id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
             <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>
         </div>
         <x-forms.textarea label="Custom MariaDB Configuration" rows="10" id="mariadbConf"
             canGate="update" :canResource="$database" />

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -21,10 +24,14 @@
                     placeholder="If empty: postgres"
                     helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work."
                     canGate="update" :canResource="$database" />
-                <x-forms.input label="Initial Password" id="mongoInitdbRootPassword" type="password"
-                    required
-                    helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work."
-                    canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Initial Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Initial Password" id="mongoInitdbRootPassword" type="password"
+                        required
+                        helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work."
+                        canGate="update" :canResource="$database" />
+                @endif
                 <x-forms.input label="Initial Database" id="mongoInitdbDatabase"
                     placeholder="If empty, it will be the same as Username." readonly
                     helper="You can only change this in the database." canGate="update" :canResource="$database" />
@@ -33,8 +40,12 @@
             <div class="flex xl:flex-row flex-col gap-2 pb-2">
                 <x-forms.input required label="Username" id="mongoInitdbRootUsername"
                     placeholder="If empty: postgres" canGate="update" :canResource="$database" />
-                <x-forms.input label="Password" id="mongoInitdbRootPassword" type="password" required
-                    canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Password" id="mongoInitdbRootPassword" type="password" required
+                        canGate="update" :canResource="$database" />
+                @endif
                 <x-forms.input required label="Database" id="mongoInitdbDatabase"
                     placeholder="If empty, it will be the same as Username." canGate="update" :canResource="$database" />
             </div>
@@ -50,85 +61,10 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="Mongo URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="db_url" canGate="update" :canResource="$database" />
-            @if ($db_url_public)
-                <x-forms.input label="Mongo URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="db_url_public" canGate="update" :canResource="$database" />
-            @endif
         </div>
 
+        <livewire:project.database.mongodb.status-info :database="$database" />
         <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($enableSsl)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($enableSsl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex flex-col gap-2">
-                <div class="w-64">
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" canGate="update"
-                            :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." canGate="update"
-                            :canResource="$database" />
-                    @endif
-                </div>
-                @if ($enableSsl)
-                    <div class="mx-2">
-                        @if (str($database->status)->contains('exited'))
-                            <x-forms.select id="sslMode" label="SSL Mode" wire:model.live="sslMode"
-                                instantSave="instantSaveSSL"
-                                helper="Choose the SSL verification mode for MongoDB connections" canGate="update"
-                                :canResource="$database">
-                                <option value="allow" title="Allow insecure connections">allow (insecure)</option>
-                                <option value="prefer" title="Prefer secure connections">prefer (secure)</option>
-                                <option value="require" title="Require secure connections">require (secure)</option>
-                                <option value="verify-full" title="Verify full certificate">verify-full (secure)
-                                </option>
-                            </x-forms.select>
-                        @else
-                            <x-forms.select id="sslMode" label="SSL Mode" instantSave="instantSaveSSL"
-                                disabled helper="Database should be stopped to change this settings." canGate="update"
-                                :canResource="$database">
-                                <option value="allow" title="Allow insecure connections">allow (insecure)</option>
-                                <option value="prefer" title="Prefer secure connections">prefer (secure)</option>
-                                <option value="require" title="Require secure connections">require (secure)</option>
-                                <option value="verify-full" title="Verify full certificate">verify-full (secure)
-                                </option>
-                            </x-forms.select>
-                        @endif
-                    </div>
-                @endif
-            </div>
-
             <div>
                 <div class="flex flex-col py-2 w-64">
                     <div class="flex items-center gap-2 pb-2">
@@ -151,10 +87,12 @@
                     <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
                         canGate="update" :canResource="$database" />
                 </div>
+                <div class="flex flex-col gap-2">
                 <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
                     id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
                 <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>
             </div>
             <x-forms.textarea label="Custom MongoDB Configuration" rows="10" id="mongoConf"
                 canGate="update" :canResource="$database" />

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -17,12 +20,20 @@
         </div>
         @if ($database->started_at)
             <div class="flex xl:flex-row flex-col gap-2">
-                <x-forms.input label="Root Password" id="mysqlRootPassword" type="password" required
-                    helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work." canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Root Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Root Password" id="mysqlRootPassword" type="password" required
+                        helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work." canGate="update" :canResource="$database" />
+                @endif
                 <x-forms.input label="Normal User" id="mysqlUser" required
                     helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work." canGate="update" :canResource="$database" />
-                <x-forms.input label="Normal User Password" id="mysqlPassword" type="password" required
-                    helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work." canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Normal User Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Normal User Password" id="mysqlPassword" type="password" required
+                        helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work." canGate="update" :canResource="$database" />
+                @endif
             </div>
             <div class="flex flex-col gap-2">
                 <x-forms.input label="Initial Database" id="mysqlDatabase"
@@ -31,12 +42,20 @@
             </div>
         @else
             <div class="flex xl:flex-row flex-col gap-4 pb-2">
-                <x-forms.input label="Root Password" id="mysqlRootPassword" type="password"
-                    helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Root Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Root Password" id="mysqlRootPassword" type="password"
+                        helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @endif
                 <x-forms.input label="Normal User" id="mysqlUser" required
                     helper="You can only change this in the database." canGate="update" :canResource="$database" />
-                <x-forms.input label="Normal User Password" id="mysqlPassword" type="password" required
-                    helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Normal User Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Normal User Password" id="mysqlPassword" type="password" required
+                        helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                @endif
             </div>
             <div class="flex flex-col gap-2">
                 <x-forms.input label="Initial Database" id="mysqlDatabase"
@@ -56,81 +75,9 @@
                 <x-forms.input placeholder="3000:5432" id="portsMappings" label="Ports Mappings"
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433" canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="MySQL URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="db_url" />
-            @if ($db_url_public)
-                <x-forms.input label="MySQL URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="db_url_public" />
-            @endif
         </div>
 
-        <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($enableSsl && $certificateValidUntil)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($enableSsl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex flex-col gap-2">
-                <div class="w-64">
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." />
-                    @endif
-                </div>
-                @if ($enableSsl)
-                    <div class="mx-2">
-                        @if (str($database->status)->contains('exited'))
-                            <x-forms.select id="sslMode" label="SSL Mode" wire:model.live="sslMode"
-                                instantSave="instantSaveSSL"
-                                helper="Choose the SSL verification mode for MySQL connections" canGate="update" :canResource="$database">
-                                <option value="PREFERRED" title="Prefer secure connections">Prefer (secure)</option>
-                                <option value="REQUIRED" title="Require secure connections">Require (secure)</option>
-                                <option value="VERIFY_CA" title="Verify CA certificate">Verify CA (secure)</option>
-                                <option value="VERIFY_IDENTITY" title="Verify full certificate">Verify Full (secure)
-                                </option>
-                            </x-forms.select>
-                        @else
-                            <x-forms.select id="sslMode" label="SSL Mode" instantSave="instantSaveSSL"
-                                disabled helper="Database should be stopped to change this settings.">
-                                <option value="PREFERRED" title="Prefer secure connections">Prefer (secure)</option>
-                                <option value="REQUIRED" title="Require secure connections">Require (secure)</option>
-                                <option value="VERIFY_CA" title="Verify CA certificate">Verify CA (secure)</option>
-                                <option value="VERIFY_IDENTITY" title="Verify full certificate">Verify Full (secure)
-                                </option>
-                            </x-forms.select>
-                        @endif
-                    </div>
-                @endif
-            </div>
-        </div>
+        <livewire:project.database.mysql.status-info :database="$database" />
 
         <div>
             <div class="flex flex-col py-2 w-64">
@@ -153,10 +100,12 @@
                 </div>
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available" canGate="update" :canResource="$database" />
             </div>
+            <div class="flex flex-col gap-2">
             <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
                 id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
             <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>
         </div>
         <x-forms.textarea label="Custom Mysql Configuration" rows="10" id="mysqlConf" canGate="update" :canResource="$database" />
         <h3 class="pt-4">Advanced</h3>

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

@@ -19,6 +19,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex flex-wrap gap-2 sm:flex-nowrap">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -34,9 +37,13 @@
                 <x-forms.input label="Username" id="postgresUser" placeholder="If empty: postgres" canGate="update"
                     :canResource="$database"
                     helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work." />
-                <x-forms.input label="Password" id="postgresPassword" type="password" required canGate="update"
-                    :canResource="$database"
-                    helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work." />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Password" id="postgresPassword" type="password" required canGate="update"
+                        :canResource="$database"
+                        helper="If you change this in the database, please sync it here, otherwise automations (like backups) won't work." />
+                @endif
                 <x-forms.input label="Initial Database" id="postgresDb"
                     placeholder="If empty, it will be the same as Username." readonly
                     helper="You can only change this in the database." />
@@ -45,8 +52,12 @@
             <div class="flex xl:flex-row flex-col gap-2 pb-2">
                 <x-forms.input label="Username" id="postgresUser" placeholder="If empty: postgres" canGate="update"
                     :canResource="$database" />
-                <x-forms.input label="Password" id="postgresPassword" type="password" required canGate="update"
-                    :canResource="$database" />
+                @if ($isPasswordHiddenForMember)
+                    <x-forms.input label="Password" disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input label="Password" id="postgresPassword" type="password" required canGate="update"
+                        :canResource="$database" />
+                @endif
                 <x-forms.input label="Initial Database" id="postgresDb"
                     placeholder="If empty, it will be the same as Username." canGate="update" :canResource="$database" />
             </div>
@@ -68,112 +79,38 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-
-            <x-forms.input label="Postgres URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="db_url" />
-            @if ($db_url_public)
-                <x-forms.input label="Postgres URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="db_url_public" />
-            @endif
         </div>
+        <livewire:project.database.postgresql.status-info :database="$database" />
         <div class="flex flex-col gap-2">
             <div class="flex items-center gap-2 py-2">
-                <h3>SSL Configuration</h3>
-                @if ($enableSsl && $certificateValidUntil)
-                    <x-modal-confirmation title="Regenerate SSL Certificates" buttonTitle="Regenerate SSL Certificates"
-                        :actions="[
-                            'The SSL certificate of this database will be regenerated.',
-                            'You must restart the database after regenerating the certificate to start using the new certificate.',
-                        ]" submitAction="regenerateSslCertificate" :confirmWithText="false"
-                        :confirmWithPassword="false" />
+                <h3>Proxy</h3>
+                <x-loading wire:loading wire:target="instantSave" />
+                @if (data_get($database, 'is_public'))
+                    <x-slide-over fullScreen>
+                        <x-slot:title>Proxy Logs</x-slot:title>
+                        <x-slot:content>
+                            <livewire:project.shared.get-logs :server="$server" :resource="$database"
+                                container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
+                        </x-slot:content>
+                        <x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
+                            @click="slideOverOpen=true">Logs</x-forms.button>
+                    </x-slide-over>
                 @endif
             </div>
-            @if ($enableSsl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
+            <div class="flex flex-col gap-2 w-64">
+                <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
+                    canGate="update" :canResource="$database" />
+            </div>
+            <div class="flex flex-col gap-2">
+                <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort"
+                    label="Public Port" canGate="update" :canResource="$database" />
+                <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>
         </div>
         <div class="flex flex-col gap-2">
-            <div class="flex flex-col gap-2">
-                <div class="w-64" wire:key='enable_ssl'>
-                    @if ($database->isExited())
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL" wire:model.live="enableSsl"
-                            instantSave="instantSaveSSL" canGate="update" :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL" wire:model.live="enableSsl"
-                            instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." />
-                    @endif
-                </div>
-                @if ($enableSsl)
-                    <div class="mx-2">
-                        @if ($database->isExited())
-                            <x-forms.select id="sslMode" label="SSL Mode" wire:model.live="sslMode"
-                                instantSave="instantSaveSSL"
-                                helper="Choose the SSL verification mode for PostgreSQL connections" canGate="update"
-                                :canResource="$database">
-                                <option value="allow" title="Allow insecure connections">allow (insecure)</option>
-                                <option value="prefer" title="Prefer secure connections">prefer (secure)</option>
-                                <option value="require" title="Require secure connections">require (secure)</option>
-                                <option value="verify-ca" title="Verify CA certificate">verify-ca (secure)</option>
-                                <option value="verify-full" title="Verify full certificate">verify-full (secure)
-                                </option>
-                            </x-forms.select>
-                        @else
-                            <x-forms.select id="sslMode" label="SSL Mode" instantSave="instantSaveSSL" disabled
-                                helper="Database should be stopped to change this settings.">
-                                <option value="allow" title="Allow insecure connections">allow (insecure)</option>
-                                <option value="prefer" title="Prefer secure connections">prefer (secure)</option>
-                                <option value="require" title="Require secure connections">require (secure)</option>
-                                <option value="verify-ca" title="Verify CA certificate">verify-ca (secure)</option>
-                                <option value="verify-full" title="Verify full certificate">verify-full (secure)
-                                </option>
-                            </x-forms.select>
-                        @endif
-                    </div>
-                @endif
-
-                <div class="flex flex-col gap-2">
-                    <div class="flex items-center gap-2 py-2">
-                        <h3>Proxy</h3>
-                        <x-loading wire:loading wire:target="instantSave" />
-                        @if (data_get($database, 'is_public'))
-                            <x-slide-over fullScreen>
-                                <x-slot:title>Proxy Logs</x-slot:title>
-                                <x-slot:content>
-                                    <livewire:project.shared.get-logs :server="$server" :resource="$database"
-                                        container="{{ data_get($database, 'uuid') }}-proxy" :collapsible="false" lazy />
-                                </x-slot:content>
-                                <x-forms.button disabled="{{ !data_get($database, 'is_public') }}"
-                                    @click="slideOverOpen=true">Logs</x-forms.button>
-                            </x-slide-over>
-                        @endif
-                    </div>
-                    <div class="flex flex-col gap-2 w-64">
-                        <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
-                            canGate="update" :canResource="$database" />
-                    </div>
-                    <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}" id="publicPort"
-                        label="Public Port" canGate="update" :canResource="$database" />
-                    <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>
-
-                <div class="flex flex-col gap-2">
-                    <x-forms.textarea label="Custom PostgreSQL Configuration" rows="10" id="postgresConf"
-                        canGate="update" :canResource="$database" />
-                </div>
-            </div>
+            <x-forms.textarea label="Custom PostgreSQL Configuration" rows="10" id="postgresConf"
+                canGate="update" :canResource="$database" />
         </div>
     </form>
 
@@ -205,7 +142,8 @@
             </div>
             <div class="flex flex-col gap-2">
                 @forelse($initScripts ?? [] as $script)
-                    <livewire:project.database.init-script :script="$script" :wire:key="$script['index']" />
+                    <livewire:project.database.init-script :database="$database" :script="$script"
+                        :wire:key="$script['index']" />
                 @empty
                     <div>No initialization scripts found.</div>
                 @endforelse

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

@@ -5,6 +5,9 @@
             <x-forms.button type="submit" canGate="update" :canResource="$database">
                 Save
             </x-forms.button>
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$database" />
+            </x-modal-input>
         </div>
         <div class="flex gap-2">
             <x-forms.input label="Name" id="name" canGate="update" :canResource="$database" />
@@ -23,8 +26,12 @@
                         <x-forms.input label="Username" id="redisUsername"
                             helper="You can only change this in the database." canGate="update" :canResource="$database" />
                     @endif
-                    <x-forms.input label="Password" id="redisPassword" type="password"
-                        helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                    @if ($isPasswordHiddenForMember)
+                        <x-forms.input label="Password" disabled value="Hidden (only admins can view)" />
+                    @else
+                        <x-forms.input label="Password" id="redisPassword" type="password"
+                            helper="You can only change this in the database." canGate="update" :canResource="$database" />
+                    @endif
                 </div>
             @else
                 <div class="pt-2 dark:text-warning">You can only change the username and password in the database after
@@ -39,13 +46,17 @@
                     Note: If the environment variable REDIS_USERNAME is set as a shared variable (environment, project, or team-based), this input field will become read-only."
                             :disabled="$this->isSharedVariable('REDIS_USERNAME')" canGate="update" :canResource="$database" />
                     @endif
-                    <x-forms.input label="Password" id="redisPassword" type="password" required
-                        helper="You can change the Redis Password in the input field below or by editing the value of the REDIS_PASSWORD environment variable.
+                    @if ($isPasswordHiddenForMember)
+                        <x-forms.input label="Password" disabled value="Hidden (only admins can view)" />
+                    @else
+                        <x-forms.input label="Password" id="redisPassword" type="password" required
+                            helper="You can change the Redis Password in the input field below or by editing the value of the REDIS_PASSWORD environment variable.
                 <br><br>
                 If you change the Redis Password in the database, please sync it here, otherwise automations (like backups) won't work.
                 <br><br>
                 Note: If the environment variable REDIS_PASSWORD is set as a shared variable (environment, project, or team-based), this input field will become read-only."
-                        :disabled="$this->isSharedVariable('REDIS_PASSWORD')" canGate="update" :canResource="$database" />
+                            :disabled="$this->isSharedVariable('REDIS_PASSWORD')" canGate="update" :canResource="$database" />
+                    @endif
                 </div>
             @endif
         </div>
@@ -60,56 +71,8 @@
                     helper="A comma separated list of ports you would like to map to the host system.<br><span class='inline-block font-bold dark:text-warning'>Example</span>3000:5432,3002:5433"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input label="Redis URL (internal)"
-                helper="If you change the user/password/port, this could be different. This is with the default values."
-                type="password" readonly wire:model="dbUrl" canGate="update" :canResource="$database" />
-            @if ($dbUrlPublic)
-                <x-forms.input label="Redis URL (public)"
-                    helper="If you change the user/password/port, this could be different. This is with the default values."
-                    type="password" readonly wire:model="dbUrlPublic" canGate="update" :canResource="$database" />
-            @endif
-        </div>
-        <div class="flex flex-col gap-2">
-            <div class="flex items-center justify-between py-2">
-                <div class="flex items-center justify-between w-full">
-                    <h3>SSL Configuration</h3>
-                    @if ($enableSsl && $certificateValidUntil)
-                        <x-modal-confirmation title="Regenerate SSL Certificates"
-                            buttonTitle="Regenerate SSL Certificates" :actions="[
-                                'The SSL certificate of this database will be regenerated.',
-                                'You must restart the database after regenerating the certificate to start using the new certificate.',
-                            ]"
-                            submitAction="regenerateSslCertificate" :confirmWithText="false" :confirmWithPassword="false" />
-                    @endif
-                </div>
-            </div>
-            @if ($enableSsl && $certificateValidUntil)
-                <span class="text-sm">Valid until:
-                    @if (now()->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expired</span>
-                    @elseif(now()->addDays(30)->gt($certificateValidUntil))
-                        <span class="text-red-500">{{ $certificateValidUntil->format('d.m.Y H:i:s') }} - Expiring
-                            soon</span>
-                    @else
-                        <span>{{ $certificateValidUntil->format('d.m.Y H:i:s') }}</span>
-                    @endif
-                </span>
-            @endif
-            <div class="flex flex-col gap-2">
-                <div class="w-64" wire:key='enable_ssl'>
-                    @if (str($database->status)->contains('exited'))
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" canGate="update"
-                            :canResource="$database" />
-                    @else
-                        <x-forms.checkbox id="enableSsl" label="Enable SSL"
-                            wire:model.live="enableSsl" instantSave="instantSaveSSL" disabled
-                            helper="Database should be stopped to change this settings." canGate="update"
-                            :canResource="$database" />
-                    @endif
-                </div>
-            </div>
         </div>
+        <livewire:project.database.redis.status-info :database="$database" />
         <div>
             <div class="flex flex-col py-2 w-64">
                 <div class="flex items-center gap-2 pb-2">
@@ -132,10 +95,12 @@
                 <x-forms.checkbox instantSave id="isPublic" label="Make it publicly available"
                     canGate="update" :canResource="$database" />
             </div>
-            <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
-                id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
-            <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 class="flex flex-col gap-2">
+                <x-forms.input type="number" placeholder="5432" disabled="{{ $isPublic }}"
+                    id="publicPort" label="Public Port" canGate="update" :canResource="$database" />
+                <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>
         </div>
         <x-forms.textarea placeholder="# maxmemory 256mb
 # maxmemory-policy allkeys-lru

resources/views/livewire/project/database/scheduled-backups.blade.php

@@ -216,7 +216,7 @@
     @if ($type === 'service-database' && $selectedBackup)
         <div class="pt-10">
             <livewire:project.database.backup-edit wire:key="{{ $selectedBackup->id }}" :backup="$selectedBackup"
-                :s3s="$s3s" :status="data_get($database, 'status')" />
+                :available-s3-storages="$s3s" :status="data_get($database, 'status')" />
             <livewire:project.database.backup-executions wire:key="{{ $selectedBackup->uuid }}" :backup="$selectedBackup"
                 :database="$database" />
         </div>

resources/views/livewire/project/database/status-info.blade.php

@@ -0,0 +1,7 @@
+<div>
+    <x-database-status-info :database="$database" :label="$label" :db-url="$dbUrl" :db-url-public="$dbUrlPublic"
+        :enable-ssl="$enableSsl" :ssl-mode="$sslMode" :certificate-valid-until="$certificateValidUntil"
+        :supports-ssl="$supportsSsl" :ssl-mode-options="$sslModeOptions" :ssl-mode-helper="$sslModeHelper"
+        :show-public-url-placeholder="$showPublicUrlPlaceholder" :is-exited="$isExited"
+        :is-password-hidden-for-member="$isPasswordHiddenForMember" />
+</div>

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

@@ -2,7 +2,7 @@
     <x-slot:title>
         Projects | Coolify
     </x-slot>
-    <div class="flex gap-2">
+    <div class="flex gap-2 items-center">
         <h1>Projects</h1>
         @can('createAnyResource')
             <x-modal-input buttonTitle="+ Add" title="New Project">
@@ -11,38 +11,55 @@
         @endcan
     </div>
     <div class="subtitle">All your projects are here.</div>
-    <div class="grid grid-cols-1 gap-4 xl:grid-cols-2 -mt-1">
-        @foreach ($projects as $project)
-            <div class="relative gap-2 cursor-pointer coolbox group">
-                <a href="{{ $project->navigateTo() }}" {{ wireNavigate() }} class="absolute inset-0"></a>
-                <div class="flex flex-1 mx-6">
-                    <div class="flex flex-col justify-center flex-1">
-                        <div class="box-title">{{ $project->name }}</div>
-                        <div class="box-description">
-                            {{ $project->description }}
+    @if ($projects->count() > 0)
+        <div class="grid grid-cols-1 gap-4 xl:grid-cols-2 -mt-1">
+            @foreach ($projects as $project)
+                <div class="relative gap-2 cursor-pointer coolbox group">
+                    <a href="{{ $project->navigateTo() }}" {{ wireNavigate() }} class="absolute inset-0"></a>
+                    <div class="flex flex-1 mx-6">
+                        <div class="flex flex-col justify-center flex-1">
+                            <div class="box-title">{{ $project->name }}</div>
+                            <div class="box-description">
+                                {{ $project->description }}
+                            </div>
                         </div>
-                    </div>
-                    <div class="relative z-10 flex items-center justify-center gap-4 text-xs font-bold">
-                        @if ($project->environments->first())
-                            @can('createAnyResource')
+                        <div class="relative z-10 flex items-center justify-center gap-4 text-xs font-bold">
+                            @if ($project->environments->first())
+                                @can('createAnyResource')
+                                    <a class="hover:underline" {{ wireNavigate() }}
+                                        href="{{ route('project.resource.create', [
+                                            'project_uuid' => $project->uuid,
+                                            'environment_uuid' => $project->environments->first()->uuid,
+                                        ]) }}">
+                                        + Add Resource
+                                    </a>
+                                @endcan
+                            @endif
+                            @can('update', $project)
                                 <a class="hover:underline" {{ wireNavigate() }}
-                                    href="{{ route('project.resource.create', [
-                                        'project_uuid' => $project->uuid,
-                                        'environment_uuid' => $project->environments->first()->uuid,
-                                    ]) }}">
-                                    + Add Resource
+                                    href="{{ route('project.edit', ['project_uuid' => $project->uuid]) }}">
+                                    Settings
                                 </a>
                             @endcan
-                        @endif
-                        @can('update', $project)
-                            <a class="hover:underline" {{ wireNavigate() }}
-                                href="{{ route('project.edit', ['project_uuid' => $project->uuid]) }}">
-                                Settings
-                            </a>
-                        @endcan
+                        </div>
                     </div>
                 </div>
+            @endforeach
+        </div>
+    @else
+        <div class="flex flex-col gap-1">
+            <div class='font-bold dark:text-warning'>No projects found.</div>
+            <div class="flex items-center gap-1">
+                @can('createAnyResource')
+                    <x-modal-input buttonTitle="Add" title="New Project">
+                        <livewire:project.add-empty />
+                    </x-modal-input> your first project or
+                @else
+                    Create your first project or
+                @endcan
+                go to the <a class="underline dark:text-white" href="{{ route('onboarding') }}"
+                    {{ wireNavigate() }}>onboarding</a> page.
             </div>
-        @endforeach
-    </div>
+        </div>
+    @endif
 </div>

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

@@ -52,6 +52,7 @@
                     <x-forms.input id="branch" required label="Branch" />
                     <x-forms.select wire:model.live="build_pack" label="Build Pack" required>
                         <option value="nixpacks">Nixpacks</option>
+                        <option value="railpack">Railpack (Beta)</option>
                         <option value="static">Static</option>
                         <option value="dockerfile">Dockerfile</option>
                         <option value="dockercompose">Docker Compose</option>

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

@@ -83,6 +83,7 @@
                                     </x-forms.select>
                                     <x-forms.select wire:model.live="build_pack" label="Build Pack" required>
                                         <option value="nixpacks">Nixpacks</option>
+                                        <option value="railpack">Railpack (Beta)</option>
                                         <option value="static">Static</option>
                                         <option value="dockerfile">Dockerfile</option>
                                         <option value="dockercompose">Docker Compose</option>

resources/views/livewire/project/new/public-git-repository.blade.php

@@ -42,6 +42,7 @@
                     @endif
                     <x-forms.select wire:model.live="build_pack" label="Build Pack" required>
                         <option value="nixpacks">Nixpacks</option>
+                        <option value="railpack">Railpack (Beta)</option>
                         <option value="static">Static</option>
                         <option value="dockerfile">Dockerfile</option>
                         <option value="dockercompose">Docker Compose</option>

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

@@ -138,9 +138,14 @@
                     </div>
                 </div>
                 <div x-show="filteredServices.length > 0" class="mt-8">
-                    <div class="flex items-center gap-4" x-init="loadResources">
+                    <div class="flex flex-wrap items-center gap-4" x-init="loadResources">
                         <h2>Services</h2>
                         <x-forms.button x-on:click="loadResources">Reload List</x-forms.button>
+                        <div x-show="serviceTemplatesLastUpdated"
+                            class="text-xs text-neutral-500 dark:text-neutral-400">
+                            Last Updated on Service Templates:
+                            <span x-text="serviceTemplatesLastUpdated"></span>
+                        </div>
                     </div>
                     <x-callout type="info" title="Trademarks Policy" class="mt-4 mb-6">
                         The respective trademarks mentioned here are owned by the respective companies, and use of them
@@ -149,12 +154,19 @@
 
                     <div class="grid justify-start grid-cols-1 gap-4 text-left xl:grid-cols-3">
                         <template x-for="service in filteredServices" :key="service.name">
-                            <div class="relative" x-on:click="setType('one-click-service-' + service.name)"
+                            <div class="relative" x-on:click="setType('one-click-service-' + service.id)"
                                 :class="{ 'cursor-pointer': !selecting, 'cursor-not-allowed opacity-50': selecting }">
                                 <x-resource-view>
                                     <x-slot:title>
                                         <template x-if="service.name">
-                                            <span x-text="service.name"></span>
+                                            <div>
+                                                <span x-text="service.name"></span>
+                                                <template x-if="service.templateLastUpdated">
+                                                    <div class="mt-1 text-[0.7rem] font-normal text-neutral-500 dark:text-neutral-500">
+                                                        Updated: <span x-text="service.templateLastUpdated"></span>
+                                                    </div>
+                                                </template>
+                                            </div>
                                         </template>
                                     </x-slot>
                                     <x-slot:description>
@@ -202,7 +214,7 @@
                                     </div>
                                 </template>
                                 <template x-if="shouldShowDocIcon(service)">
-                                    <a :href="getDocLink(service) || coolifyDocsUrl(service.name)" target="_blank"
+                                    <a :href="getDocLink(service) || coolifyDocsUrl(service)" target="_blank"
                                         @click.stop @mouseenter="resolveDocLink(service)"
                                         class="absolute top-2 right-2 p-1.5 rounded hover:bg-neutral-200 dark:hover:bg-coolgray-300 transition-colors"
                                         :class="{ 'opacity-50': docCheckInProgress[service.name] }"
@@ -237,6 +249,7 @@
                         isSticky: false,
                         selecting: false,
                         services: [],
+                        serviceTemplatesLastUpdated: null,
                         gitBasedApplications: [],
                         dockerBasedApplications: [],
                         databases: [],
@@ -251,12 +264,14 @@
                             this.loading = true;
                             const {
                                 services,
+                                serviceTemplatesLastUpdated,
                                 categories,
                                 gitBasedApplications,
                                 dockerBasedApplications,
                                 databases
                             } = await this.$wire.loadServices();
                             this.services = services;
+                            this.serviceTemplatesLastUpdated = serviceTemplatesLastUpdated;
                             this.categories = categories || [];
                             this.gitBasedApplications = gitBasedApplications;
                             this.dockerBasedApplications = dockerBasedApplications;
@@ -272,8 +287,8 @@
                             // Remove flavor suffixes: -with-*, -without-*
                             return normalized.replace(/-(with|without)-.+$/, '');
                         },
-                        coolifyDocsUrl(serviceName) {
-                            const baseName = this.extractBaseServiceName(serviceName);
+                        coolifyDocsUrl(service) {
+                            const baseName = service.docsSlug || this.extractBaseServiceName(service.name);
                             return 'https://coolify.io/docs/services/' + baseName;
                         },
                         officialDocsUrl(service) {
@@ -307,7 +322,7 @@
                             this.docCheckInProgress[serviceName] = true;
 
                             // 1. Try Coolify docs first
-                            const coolifyUrl = this.coolifyDocsUrl(serviceName);
+                            const coolifyUrl = this.coolifyDocsUrl(service);
                             const coolifyExists = await this.checkUrlExists(coolifyUrl);
 
                             if (coolifyExists) {
@@ -452,6 +467,7 @@
                         <div class="flex flex-col mx-6">
                             <div class="font-bold dark:group-hover:text-white">
                                 Swarm Docker <span class="text-xs">({{ $swarmDocker->name }})</span>
+                                <x-deprecated-badge />
                             </div>
                         </div>
                     </div>

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

@@ -4,8 +4,8 @@
     </x-slot>
     <livewire:project.service.heading :service="$service" :parameters="$parameters" :query="$query" />
 
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
-        <div class="sub-menu-wrapper">
+    <div class="flex flex-col h-full gap-4 md:gap-8 md:flex-row">
+        <div class="sub-menu-wrapper hidden md:flex">
             <a class="sub-menu-item" target="_blank" href="{{ $service->documentation() }}"><span class="menu-item-label">Documentation</span>
                 <x-external-link /></a>
             <a class='sub-menu-item' wire:current.exact="menu-item-active" {{ wireNavigate() }}
@@ -43,134 +43,12 @@
                     @endif
 
                     @foreach ($applications as $application)
-                        <div @class([
-                            'border-l border-dashed border-red-500' => str(
-                                $application->status)->contains(['exited']),
-                            'border-l border-dashed border-success' => str(
-                                $application->status)->contains(['running']),
-                            'border-l border-dashed border-warning' => str(
-                                $application->status)->contains(['starting']),
-                            'flex gap-2 box-without-bg-without-border dark:bg-coolgray-100 bg-white dark:hover:text-neutral-300 group',
-                        ])>
-                            <div class="flex flex-row w-full">
-                                <div class="flex flex-col flex-1">
-                                    <div class="pb-2">
-                                        @if ($application->human_name)
-                                            {{ Str::headline($application->human_name) }}
-                                        @else
-                                            {{ Str::headline($application->name) }}
-                                        @endif
-                                        <span class="text-xs">({{ $application->image }})</span>
-                                    </div>
-                                    @if ($application->configuration_required)
-                                        <span class="text-xs text-error">(configuration required)</span>
-                                    @endif
-                                    @if ($application->description)
-                                        <span class="text-xs">{{ Str::limit($application->description, 60) }}</span>
-                                    @endif
-                                    @if ($application->fqdn)
-                                        <span class="flex gap-1 text-xs">{{ Str::limit($application->fqdn, 60) }}
-                                            @can('update', $service)
-                                                <x-modal-input title="Edit Domains" :closeOutside="false">
-                                                    <x-slot:content>
-                                                        <span class="cursor-pointer">
-                                                            <svg xmlns="http://www.w3.org/2000/svg"
-                                                                class="w-4 h-4 dark:text-warning text-coollabs"
-                                                                viewBox="0 0 24 24">
-                                                                <g fill="none" stroke="currentColor"
-                                                                    stroke-linecap="round" stroke-linejoin="round"
-                                                                    stroke-width="2">
-                                                                    <path
-                                                                        d="m12 15l8.385-8.415a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zm4-10l3 3" />
-                                                                    <path d="M9 7.07A7 7 0 0 0 10 21a7 7 0 0 0 6.929-6" />
-                                                                </g>
-                                                            </svg>
-
-                                                        </span>
-                                                    </x-slot:content>
-                                                    <livewire:project.service.edit-domain
-                                                        applicationId="{{ $application->id }}"
-                                                        wire:key="edit-domain-{{ $application->id }}" />
-                                                </x-modal-input>
-                                            @endcan
-                                        </span>
-                                    @endif
-                                    <div class="pt-2 text-xs">{{ formatContainerStatus($application->status) }}</div>
-                                </div>
-                                <div class="flex items-center px-4">
-                                    <a class="mx-4 text-xs font-bold hover:underline" {{ wireNavigate() }}
-                                        href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $application->uuid]) }}">
-                                        Settings
-                                    </a>
-                                    @if (str($application->status)->contains('running'))
-                                        @can('update', $service)
-                                            <x-modal-confirmation title="Confirm Service Application Restart?"
-                                                buttonTitle="Restart"
-                                                submitAction="restartApplication({{ $application->id }})" :actions="[
-                                                    'The selected service application will be unavailable during the restart.',
-                                                    'If the service application is currently in use data could be lost.',
-                                                ]"
-                                                :confirmWithText="false" :confirmWithPassword="false"
-                                                step2ButtonText="Restart Service Container" />
-                                        @endcan
-                                    @endif
-                                </div>
-                            </div>
-                        </div>
+                        <livewire:project.service.resource-card :service="$service" :resource="$application"
+                            :parameters="$parameters" wire:key="service-application-card-{{ $application->id }}" />
                     @endforeach
                     @foreach ($databases as $database)
-                        <div @class([
-                            'border-l border-dashed border-red-500' => str($database->status)->contains(
-                                ['exited']),
-                            'border-l border-dashed border-success' => str($database->status)->contains(
-                                ['running']),
-                            'border-l border-dashed border-warning' => str($database->status)->contains(
-                                ['restarting']),
-                            'flex gap-2 box-without-bg-without-border dark:bg-coolgray-100 bg-white dark:hover:text-neutral-300 group',
-                        ])>
-                            <div class="flex flex-row w-full">
-                                <div class="flex flex-col flex-1">
-                                    <div class="pb-2">
-                                        @if ($database->human_name)
-                                            {{ Str::headline($database->human_name) }}
-                                        @else
-                                            {{ Str::headline($database->name) }}
-                                        @endif
-                                        <span class="text-xs">({{ $database->image }})</span>
-                                    </div>
-                                    @if ($database->configuration_required)
-                                        <span class="text-xs text-error">(configuration required)</span>
-                                    @endif
-                                    @if ($database->description)
-                                        <span class="text-xs">{{ Str::limit($database->description, 60) }}</span>
-                                    @endif
-                                    <div class="text-xs">{{ formatContainerStatus($database->status) }}</div>
-                                </div>
-                                <div class="flex items-center px-4">
-                                    @if ($database->isBackupSolutionAvailable() || $database->is_migrated)
-                                        <a class="mx-4 text-xs font-bold hover:underline" {{ wireNavigate() }}
-                                            href="{{ route('project.service.database.backups', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $database->uuid]) }}">
-                                            Backups
-                                        </a>
-                                    @endif
-                                    <a class="mx-4 text-xs font-bold hover:underline" {{ wireNavigate() }}
-                                        href="{{ route('project.service.index', ['project_uuid' => $project->uuid, 'environment_uuid' => $environment->uuid, 'service_uuid' => $service->uuid, 'stack_service_uuid' => $database->uuid]) }}">
-                                        Settings
-                                    </a>
-                                    @if (str($database->status)->contains('running'))
-                                        @can('update', $service)
-                                            <x-modal-confirmation title="Confirm Service Database Restart?"
-                                                buttonTitle="Restart" submitAction="restartDatabase({{ $database->id }})"
-                                                :actions="[
-                                                    'This service database will be unavailable during the restart.',
-                                                    'If the service database is currently in use data could be lost.',
-                                                ]" :confirmWithText="false" :confirmWithPassword="false"
-                                                step2ButtonText="Restart Database" />
-                                        @endcan
-                                    @endif
-                                </div>
-                            </div>
-                        </div>
+                        <livewire:project.service.resource-card :service="$service" :resource="$database"
+                            :parameters="$parameters" wire:key="service-database-card-{{ $database->id }}" />
                     @endforeach
                 </div>
             @elseif ($currentRoute === 'project.service.environment-variables')

resources/views/livewire/project/service/database-backups.blade.php

@@ -1,6 +1,6 @@
 <div>
     <livewire:project.service.heading :service="$service" :parameters="$parameters" :query="$query" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-4 md:gap-8 md:flex-row">
         <x-service-database.sidebar :parameters="$parameters" :serviceDatabase="$serviceDatabase" :isImportSupported="$isImportSupported" />
         <div class="w-full">
             <x-slot:title>

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

@@ -1,6 +1,14 @@
 <div>
     <div class="flex flex-col gap-4 p-4 bg-white border dark:bg-base dark:border-coolgray-300 border-neutral-200">
-        @if ($isReadOnly)
+        @if ($fileStorage->is_too_large)
+            <div class="w-full p-2 text-sm rounded bg-warning/10 text-warning">
+                File on server exceeds 5 MB and cannot be edited from the UI. Edit it directly on the server.
+            </div>
+        @elseif ($fileStorage->is_host_file)
+            <div class="w-full p-2 text-sm rounded bg-warning/10 text-warning">
+                This host file mount is bind-only. Coolify will not create, edit, load, chmod, or delete the source file.
+            </div>
+        @elseif ($isReadOnly)
             <div class="w-full p-2 text-sm rounded bg-warning/10 text-warning">
                 @if ($fileStorage->is_directory)
                     This directory is mounted as read-only and cannot be modified from the UI.
@@ -28,7 +36,14 @@
             @if (!$isReadOnly)
                 @can('update', $resource)
                     <div class="flex gap-2">
-                        @if ($fileStorage->is_directory)
+                        @if ($fileStorage->is_host_file)
+                            <x-modal-confirmation :ignoreWire="false" title="Confirm Host File Mount Removal?"
+                                buttonTitle="Delete" isErrorButton submitAction="delete" :checkboxes="$hostFileDeletionCheckboxes"
+                                :actions="['Only the mount configuration will be removed. The host file will not be deleted.']"
+                                confirmationText="{{ $fs_path }}"
+                                confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
+                                shortConfirmationLabel="Filepath" />
+                        @elseif ($fileStorage->is_directory)
                             <x-modal-confirmation :ignoreWire="false" title="Confirm Directory Conversion to File?"
                                 buttonTitle="Convert to file" submitAction="convertToFile" :actions="[
                                     'All files in this directory will be permanently deleted and an empty file will be created in its place.',
@@ -44,7 +59,7 @@
                                 confirmationLabel="Please confirm the execution of the actions by entering the Filepath below"
                                 shortConfirmationLabel="Filepath" />
                         @else
-                            @if (!$fileStorage->is_binary)
+                            @if (!$fileStorage->is_binary && !$fileStorage->is_too_large)
                                 <x-modal-confirmation :ignoreWire="false" title="Confirm File Conversion to Directory?"
                                     buttonTitle="Convert to directory" submitAction="convertToDirectory" :actions="[
                                         'The selected file will be permanently deleted and an empty directory will be created in its place.',
@@ -64,7 +79,7 @@
                         @endif
                     </div>
                 @endcan
-                @if (!$fileStorage->is_directory)
+                @if (!$fileStorage->is_directory && !$fileStorage->is_host_file)
                     @can('update', $resource)
                         @if (data_get($resource, 'settings.is_preserve_repository_enabled'))
                             <div class="w-full sm:w-96">
@@ -76,8 +91,8 @@
                             label="{{ $fileStorage->is_based_on_git ? 'Content (refreshed after a successful deployment)' : 'Content' }}"
                             helper="The content shown may be outdated. Click 'Load from server' to fetch the latest version."
                             rows="20" id="content"
-                            readonly="{{ $fileStorage->is_based_on_git || $fileStorage->is_binary }}"></x-forms.textarea>
-                        @if (!$fileStorage->is_based_on_git && !$fileStorage->is_binary)
+                            readonly="{{ $fileStorage->is_based_on_git || $fileStorage->is_binary || $fileStorage->is_too_large }}"></x-forms.textarea>
+                        @if (!$fileStorage->is_based_on_git && !$fileStorage->is_binary && !$fileStorage->is_too_large)
                             <x-forms.button class="w-full" type="submit">Save</x-forms.button>
                         @endif
                     @else
@@ -95,8 +110,8 @@
                 @endif
             @else
                 {{-- Read-only view --}}
-                @if (!$fileStorage->is_directory)
-                    @can('view', $resource)
+                @if (!$fileStorage->is_directory && !$fileStorage->is_host_file)
+                    @can('update', $resource)
                         <div class="flex gap-2">
                             <x-forms.button type="button" wire:click="loadStorageOnServer">Load from
                                 server</x-forms.button>

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

@@ -1,4 +1,94 @@
 <div wire:poll.10000ms="checkStatus" class="pb-6">
+    @php
+        $servicePageItems = [
+            ['label' => 'Configuration', 'route' => 'project.service.configuration', 'active' => request()->routeIs('project.service.configuration')],
+            ['label' => 'Logs', 'route' => 'project.service.logs', 'active' => request()->routeIs('project.service.logs')],
+            ['label' => 'Terminal', 'route' => 'project.service.command', 'active' => request()->routeIs('project.service.command'), 'navigate' => false, 'visible' => auth()->user()?->can('canAccessTerminal')],
+        ];
+
+        $serviceConfigurationItems = [
+            ['label' => 'General', 'route' => 'project.service.configuration', 'active' => request()->routeIs('project.service.configuration')],
+            ['label' => 'Environment Variables', 'route' => 'project.service.environment-variables', 'active' => request()->routeIs('project.service.environment-variables')],
+            ['label' => 'Persistent Storages', 'route' => 'project.service.storages', 'active' => request()->routeIs('project.service.storages')],
+            ['label' => 'Scheduled Tasks', 'route' => 'project.service.scheduled-tasks.show', 'active' => request()->routeIs('project.service.scheduled-tasks.show', 'project.service.scheduled-tasks')],
+            ['label' => 'Webhooks', 'route' => 'project.service.webhooks', 'active' => request()->routeIs('project.service.webhooks')],
+            ['label' => 'Resource Operations', 'route' => 'project.service.resource-operations', 'active' => request()->routeIs('project.service.resource-operations')],
+            ['label' => 'Tags', 'route' => 'project.service.tags', 'active' => request()->routeIs('project.service.tags')],
+            ['label' => 'Danger Zone', 'route' => 'project.service.danger', 'active' => request()->routeIs('project.service.danger')],
+        ];
+        $serviceResourceItems = [];
+
+        if (filled(data_get($parameters, 'stack_service_uuid'))) {
+            $serviceResourceItems = [
+                ['label' => 'Back', 'route' => 'project.service.configuration', 'active' => false, 'parameters' => [...$parameters, 'stack_service_uuid' => null]],
+                ['label' => 'General', 'route' => 'project.service.index', 'active' => request()->routeIs('project.service.index')],
+                ['label' => 'Advanced', 'route' => 'project.service.index.advanced', 'active' => request()->routeIs('project.service.index.advanced')],
+                ['label' => 'Backups', 'route' => 'project.service.database.backups', 'active' => request()->routeIs('project.service.database.backups')],
+                ['label' => 'Import Backup', 'route' => 'project.service.database.import', 'active' => request()->routeIs('project.service.database.import')],
+            ];
+        }
+
+        $servicePageItems = array_values(array_filter($servicePageItems, fn (array $item): bool => $item['visible'] ?? true));
+        $serviceResourceItems = array_values(array_filter($serviceResourceItems, fn (array $item): bool => $item['visible'] ?? true));
+        $activeServiceResourceItem = collect($serviceResourceItems)->firstWhere('active', true);
+        $activeServiceConfigurationItem = collect($serviceConfigurationItems)->firstWhere('active', true);
+        $activeServicePageItem = collect($servicePageItems)->firstWhere('active', true);
+        $activeServiceMobileItem = $activeServiceResourceItem ?? $activeServiceConfigurationItem ?? $activeServicePageItem ?? $servicePageItems[0];
+        $activeServiceMobileGroup = $activeServiceResourceItem ? 'resource' : ($activeServiceConfigurationItem ? 'configuration' : 'service');
+        $activeServiceMobileNavigation = ($activeServiceMobileItem['navigate'] ?? true) ? 'navigate' : 'location';
+        $activeServiceMobileValue = $activeServiceMobileNavigation.'|'.$activeServiceMobileGroup.'|'.route($activeServiceMobileItem['route'], $activeServiceMobileItem['parameters'] ?? $parameters);
+        $serviceLinks = collect([]);
+        $service->applications()->get()->each(function ($application) use ($serviceLinks) {
+            $type = $application->serviceType();
+            if ($type) {
+                generateServiceSpecificFqdns($application)
+                    ->map(fn ($link) => getFqdnWithoutPort($link))
+                    ->each(fn ($link) => $serviceLinks->push($link));
+            } else {
+                if ($application->fqdn) {
+                    collect(str($application->fqdn)->explode(','))
+                        ->each(fn ($fqdn) => $serviceLinks->push(getFqdnWithoutPort($fqdn)));
+                }
+                if ($application->ports) {
+                    collect(str($application->ports)->explode(','))
+                        ->each(function ($port) use ($serviceLinks) {
+                            $hostPort = str($port)->contains(':') ? str($port)->before(':') : $port;
+                            $serviceLinks->push(base_url(withPort: false).":{$hostPort}");
+                        });
+                }
+            }
+        });
+        $serviceMobileMenuChangeHandler = <<<'JS'
+            const value = $event.target.value;
+
+            if (!value) {
+                return;
+            }
+
+            if (value.startsWith('navigate|')) {
+                const url = value.split('|').slice(2).join('|');
+                window.Livewire?.navigate ? window.Livewire.navigate(url) : window.location.href = url;
+                return;
+            }
+
+            if (value.startsWith('location|')) {
+                const url = value.split('|').slice(2).join('|');
+                window.location.href = url;
+                return;
+            }
+
+            resetToCurrent();
+
+            if (value.startsWith('external:')) {
+                window.open(value.slice(9), '_blank', 'noopener');
+                return;
+            }
+
+            const action = value.slice(7);
+
+            document.getElementById(`service-${action}-trigger`)?.click();
+        JS;
+    @endphp
     <livewire:project.shared.configuration-checker :resource="$service" />
     <x-slide-over @startservice.window="slideOverOpen = true" closeWithX fullScreen>
         <x-slot:title>Service Startup</x-slot:title>
@@ -9,8 +99,252 @@
     <h1>{{ $title }}</h1>
     <x-resources.breadcrumbs :resource="$service" :parameters="$parameters" />
     <div class="navbar-main" x-data">
+        <div class="mb-4 w-full md:mb-0 md:hidden">
+            @if ($service->isDeployable)
+                <div id="service-mobile-actions" class="mt-2 mb-3 md:hidden">
+                    <div class="mb-1 text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Actions</div>
+                    <div class="flex flex-nowrap items-center gap-2 overflow-x-auto">
+                    @if (str($service->status)->contains('running'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-restart-trigger')?.click()">
+                            <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
+                        </button>
+                        <x-forms.button isError class="shrink-0"
+                            @click="document.getElementById('service-stop-trigger')?.click()">
+                            <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-forms.button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-pullAndRestart-trigger')?.click()">
+                            <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>
+                            Pull Latest Images & Restart
+                        </button>
+                    @elseif (str($service->status)->contains('degraded'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-restart-trigger')?.click()">
+                            <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
+                        </button>
+                        <x-forms.button isError class="shrink-0"
+                            @click="document.getElementById('service-stop-trigger')?.click()">
+                            <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-forms.button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
+                            <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>
+                            Force Restart
+                        </button>
+                    @elseif (str($service->status)->contains('exited'))
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-start-trigger')?.click()">
+                            <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
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
+                            <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>
+                            Force Deploy
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-cleanup-trigger')?.click()">
+                            <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>
+                            Force Cleanup Containers
+                        </button>
+                    @else
+                        <x-forms.button isError class="shrink-0"
+                            @click="document.getElementById('service-stop-trigger')?.click()">
+                            <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-forms.button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-start-trigger')?.click()">
+                            <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
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-forceDeploy-trigger')?.click()">
+                            <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>
+                            Force Deploy
+                        </button>
+                        <button type="button" class="button shrink-0"
+                            @click="document.getElementById('service-cleanup-trigger')?.click()">
+                            <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>
+                            Force Cleanup Containers
+                        </button>
+                    @endif
+                    </div>
+                </div>
+            @endif
+            <label id="service-mobile-section-label" for="service-mobile-section" class="mb-1 block text-xs font-semibold uppercase tracking-wide text-neutral-500 dark:text-neutral-400">Section</label>
+            <select id="service-mobile-section" class="select w-full" aria-label="Service menu"
+                data-current-value="{{ $activeServiceMobileValue }}"
+                x-data="{
+                    init() {
+                        this.syncFromLocation();
+                        window.Livewire?.hook?.('morphed', ({ el }) => {
+                            if (el.contains(this.$el)) {
+                                queueMicrotask(() => this.syncFromLocation());
+                            }
+                        });
+                    },
+                    selected: $el.dataset.currentValue,
+                    current: $el.dataset.currentValue,
+                    syncFromLocation() {
+                        const currentUrl = new URL(window.location.href);
+                        const matchingOptions = Array.from(this.$el.options).filter((option) => {
+                            if (!option.value.startsWith('navigate|') && !option.value.startsWith('location|')) {
+                                return false;
+                            }
+
+                            const optionUrl = new URL(option.value.split('|').slice(2).join('|'), window.location.origin);
+
+                            return optionUrl.pathname === currentUrl.pathname;
+                        });
+                        const selectedOption = matchingOptions.find((option) => {
+                            return option.value.startsWith('navigate|configuration|') || option.value.startsWith('navigate|resource|');
+                        }) || matchingOptions[0];
+
+                        if (selectedOption) {
+                            this.current = selectedOption.value;
+                            this.selected = selectedOption.value;
+                        }
+                    },
+                    resetToCurrent() {
+                        this.selected = this.current;
+                    },
+                }"
+                x-on:livewire:navigated.window="syncFromLocation()"
+                x-model="selected"
+                x-on:change="{{ $serviceMobileMenuChangeHandler }}">
+                <optgroup label="Service">
+                    @foreach ($servicePageItems as $menuItem)
+                        <option value="{{ ($menuItem['navigate'] ?? true) ? 'navigate' : 'location' }}|service|{{ route($menuItem['route'], $parameters) }}">
+                            {{ $menuItem['label'] }}
+                        </option>
+                    @endforeach
+                </optgroup>
+                <optgroup label="Configuration">
+                    @foreach ($serviceConfigurationItems as $menuItem)
+                        <option value="navigate|configuration|{{ route($menuItem['route'], $parameters) }}">
+                            {{ $menuItem['label'] }}
+                        </option>
+                    @endforeach
+                </optgroup>
+                @if (count($serviceResourceItems) > 0)
+                    <optgroup label="Resource">
+                        @foreach ($serviceResourceItems as $menuItem)
+                            <option value="navigate|resource|{{ route($menuItem['route'], $menuItem['parameters'] ?? $parameters) }}">
+                                {{ $menuItem['label'] }}
+                            </option>
+                        @endforeach
+                    </optgroup>
+                @endif
+                <optgroup label="Links">
+                    @if (filled($service->documentation()))
+                        <option value="external:{{ $service->documentation() }}">Documentation</option>
+                    @endif
+                    @forelse ($serviceLinks as $link)
+                        <option value="external:{{ $link }}">{{ $link }}</option>
+                    @empty
+                        @if (blank($service->documentation()))
+                            <option disabled>No links available</option>
+                        @endif
+                    @endforelse
+                </optgroup>
+            </select>
+        </div>
         <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">
+            class="scrollbar hidden min-h-10 w-full flex-nowrap items-center gap-6 overflow-x-scroll overflow-y-hidden pb-1 whitespace-nowrap md:flex 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>
@@ -29,85 +363,15 @@
                 <x-services.links :service="$service" />
             </div>
         </nav>
+
         @if ($service->isDeployable)
-            <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">
+            <div class="hidden flex-wrap items-center gap-2 md:flex">
+                <div class="flex flex-wrap items-center gap-2">
                     <x-services.advanced :service="$service" />
                     @if (str($service->status)->contains('running'))
-                        <x-forms.button title="Restart" @click="$wire.dispatch('restartEvent')">
+
+                        <x-forms.button canGate="deploy" :canResource="$service" title="Restart" @click="document.getElementById('service-restart-trigger')?.click()">
+
                             <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">
@@ -117,25 +381,23 @@
                             </svg>
                             Restart
                         </x-forms.button>
-                        <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: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="stop" :canResource="$service" isError title="Stop" @click="document.getElementById('service-stop-trigger')?.click()">
+                            <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-forms.button>
                     @elseif (str($service->status)->contains('degraded'))
-                        <x-forms.button title="Restart" @click="$wire.dispatch('restartEvent')">
+                        <x-forms.button canGate="deploy" :canResource="$service" title="Restart" @click="document.getElementById('service-restart-trigger')?.click()">
+
                             <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">
@@ -145,25 +407,23 @@
                             </svg>
                             Restart
                         </x-forms.button>
-                        <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: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="stop" :canResource="$service" isError title="Stop" @click="document.getElementById('service-stop-trigger')?.click()">
+                            <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-forms.button>
                     @elseif (str($service->status)->contains('exited'))
-                        <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
+                        <x-forms.button canGate="deploy" :canResource="$service" @click="document.getElementById('service-start-trigger')?.click()" 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">
@@ -171,26 +431,24 @@
                                 <path d="M7 4v16l13 -8z" />
                             </svg>
                             Deploy
-                        </button>
+                        </x-forms.button>
                     @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: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>
-                        <button @click="$wire.dispatch('startEvent')" class="gap-2 button">
+
+                        <x-forms.button canGate="stop" :canResource="$service" isError title="Stop" @click="document.getElementById('service-stop-trigger')?.click()">
+                            <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-forms.button>
+                        <x-forms.button canGate="deploy" :canResource="$service" @click="document.getElementById('service-start-trigger')?.click()" 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">
@@ -198,7 +456,7 @@
                                 <path d="M7 4v16l13 -8z" />
                             </svg>
                             Deploy
-                        </button>
+                        </x-forms.button>
                     @endif
                 </div>
             </div>
@@ -212,6 +470,51 @@
             </div>
         @endif
     </div>
+    @if ($service->isDeployable)
+            <x-modal-confirmation title="Confirm Service Deployment?" buttonTitle="Deploy"
+                submitAction="startEvent" :dispatchAction="true" :actions="['This service will be deployed.']"
+                :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Confirm">
+                <x-slot:trigger>
+                    <button id="service-start-trigger" type="button" class="hidden">Deploy</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+            <x-modal-confirmation title="Confirm Service Restart?" buttonTitle="Restart"
+                submitAction="restartEvent" :dispatchAction="true" :actions="['This service will be restarted.']"
+                :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Confirm">
+                <x-slot:trigger>
+                    <button id="service-restart-trigger" type="button" class="hidden">Restart</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+            <x-modal-confirmation title="Confirm Service Stopping?" buttonTitle="Stop"
+                submitAction="stop" :checkboxes="$checkboxes" :actions="[__('service.stop'), __('resource.non_persistent')]"
+                :confirmWithText="false" :confirmWithPassword="false" step1ButtonText="Continue" step2ButtonText="Confirm">
+                <x-slot:trigger>
+                    <button id="service-stop-trigger" type="button" class="hidden">Stop</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+            <x-modal-confirmation title="Confirm Service Force Deployment?" buttonTitle="Force Deploy"
+                submitAction="forceDeployEvent" :dispatchAction="true" :actions="['This service will be force deployed.']"
+                :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Confirm">
+                <x-slot:trigger>
+                    <button id="service-forceDeploy-trigger" type="button" class="hidden">Force Deploy</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+            <x-modal-confirmation title="Confirm Pull Latest Images & Restart?" buttonTitle="Pull Latest Images & Restart"
+                submitAction="pullAndRestartEvent" :dispatchAction="true" :actions="['Latest images will be pulled and the service will be restarted.']"
+                :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Confirm">
+                <x-slot:trigger>
+                    <button id="service-pullAndRestart-trigger" type="button" class="hidden">Pull Latest Images & Restart</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+            <x-modal-confirmation title="Confirm Force Cleanup Containers?" buttonTitle="Force Cleanup Containers"
+                submitAction="cleanupEvent" :dispatchAction="true" :actions="['Service containers will be force cleaned up.']"
+                :confirmWithText="false" :confirmWithPassword="false" step2ButtonText="Confirm">
+                <x-slot:trigger>
+                    <button id="service-cleanup-trigger" type="button" class="hidden">Force Cleanup Containers</button>
+                </x-slot:trigger>
+            </x-modal-confirmation>
+    @endif
+
     @script
         <script>
             $wire.$on('stopEvent', () => {
@@ -227,11 +530,9 @@
                     );
                     return;
                 }
-                window.dispatchEvent(new CustomEvent('startservice'));
                 $wire.$call('start');
             });
             $wire.$on('forceDeployEvent', () => {
-                window.dispatchEvent(new CustomEvent('startservice'));
                 $wire.$call('forceDeploy');
             });
             $wire.$on('restartEvent', async () => {
@@ -244,14 +545,15 @@
                 }
                 $wire.$dispatch('info',
                     'Gracefully stopping service.<br/><br/>It could take a while depending on the service.');
-                window.dispatchEvent(new CustomEvent('startservice'));
                 $wire.$call('restart');
             });
             $wire.$on('pullAndRestartEvent', () => {
                 $wire.$dispatch('info', 'Pulling new images and restarting service.');
-                window.dispatchEvent(new CustomEvent('startservice'));
                 $wire.$call('pullAndRestartEvent');
             });
+            $wire.$on('cleanupEvent', () => {
+                $wire.$call('stop', true);
+            });
             $wire.on('imagePulled', () => {
                 window.dispatchEvent(new CustomEvent('startservice'));
                 $wire.$dispatch('info', 'Restarting service.');

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

@@ -1,10 +1,10 @@
 <div>
     <livewire:project.service.heading :service="$service" :parameters="$parameters" :query="$query" />
-    <div class="flex flex-col h-full gap-8 sm:flex-row">
+    <div class="flex flex-col h-full gap-4 md:gap-8 md:flex-row">
         @if ($resourceType === 'database')
             <x-service-database.sidebar :parameters="$parameters" :serviceDatabase="$serviceDatabase" :isImportSupported="$isImportSupported" />
         @else
-            <div class="sub-menu-wrapper">
+            <div class="sub-menu-wrapper hidden md:flex">
                 <a class="sub-menu-item"
                     class="{{ request()->routeIs('project.service.configuration') ? 'menu-item-active' : '' }}"
                     {{ wireNavigate() }}
@@ -123,7 +123,7 @@
                     @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">
+                            :class="{ 'z-40': modalOpen }" class="relative">
                             <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>

resources/views/livewire/project/service/resource-card.blade.php

@@ -0,0 +1,85 @@
+<div @class([
+    'border-l border-dashed border-red-500' => str($resource->status)->contains(['exited']),
+    'border-l border-dashed border-success' => str($resource->status)->contains(['running']),
+    'border-l border-dashed border-warning' => str($resource->status)->contains(['starting', 'restarting']),
+    'flex gap-2 box-without-bg-without-border dark:bg-coolgray-100 bg-white dark:hover:text-neutral-300 group',
+])>
+    <div class="flex flex-row w-full">
+        <div class="flex flex-col flex-1">
+            <div class="pb-2">
+                @if ($resource->human_name)
+                    {{ Str::headline($resource->human_name) }}
+                @else
+                    {{ Str::headline($resource->name) }}
+                @endif
+                <span class="text-xs">({{ $resource->image }})</span>
+            </div>
+            @if ($resource->configuration_required)
+                <span class="text-xs text-error">(configuration required)</span>
+            @endif
+            @if ($resource->description)
+                <span class="text-xs">{{ Str::limit($resource->description, 60) }}</span>
+            @endif
+            @if ($isApplication && $resource->fqdn)
+                <span class="flex gap-1 text-xs">{{ Str::limit($resource->fqdn, 60) }}
+                    @can('update', $service)
+                        <x-modal-input title="Edit Domains" :closeOutside="false">
+                            <x-slot:content>
+                                <span class="cursor-pointer">
+                                    <svg xmlns="http://www.w3.org/2000/svg"
+                                        class="w-4 h-4 dark:text-warning text-coollabs"
+                                        viewBox="0 0 24 24">
+                                        <g fill="none" stroke="currentColor" stroke-linecap="round"
+                                            stroke-linejoin="round" stroke-width="2">
+                                            <path d="m12 15l8.385-8.415a2.1 2.1 0 0 0-2.97-2.97L9 12v3h3zm4-10l3 3" />
+                                            <path d="M9 7.07A7 7 0 0 0 10 21a7 7 0 0 0 6.929-6" />
+                                        </g>
+                                    </svg>
+                                </span>
+                            </x-slot:content>
+                            <livewire:project.service.edit-domain applicationId="{{ $resource->id }}"
+                                wire:key="edit-domain-{{ $resource->id }}" />
+                        </x-modal-input>
+                    @endcan
+                </span>
+            @endif
+            <div @class(['pt-2' => $isApplication])>
+                @if (str($resource->status)->contains('running'))
+                    <x-status-badge status="{{ formatContainerStatus($resource->status) }}" type="success" />
+                @elseif (str($resource->status)->contains(['starting', 'restarting', 'degraded']))
+                    <x-status-badge status="{{ formatContainerStatus($resource->status) }}" type="warning" />
+                @else
+                    <x-status-badge status="{{ formatContainerStatus($resource->status) }}" type="error" />
+                @endif
+            </div>
+        </div>
+        <div class="flex items-center px-4">
+            @if ($isDatabase && ($resource->isBackupSolutionAvailable() || $resource->is_migrated))
+                <a class="mx-4 text-xs font-bold hover:underline" {{ wireNavigate() }}
+                    href="{{ route('project.service.database.backups', [...$parameters, 'stack_service_uuid' => $resource->uuid]) }}">
+                    Backups
+                </a>
+            @endif
+            <a class="mx-4 text-xs font-bold hover:underline" {{ wireNavigate() }}
+                href="{{ route('project.service.index', [...$parameters, 'stack_service_uuid' => $resource->uuid]) }}">
+                Settings
+            </a>
+            @if (str($resource->status)->contains('running'))
+                @can('update', $service)
+                    <x-modal-confirmation :title="$isApplication ? 'Confirm Service Application Restart?' : 'Confirm Service Database Restart?'"
+                        buttonTitle="Restart" submitAction="restart" :actions="$isApplication
+                            ? [
+                                'The selected service application will be unavailable during the restart.',
+                                'If the service application is currently in use data could be lost.',
+                            ]
+                            : [
+                                'This service database will be unavailable during the restart.',
+                                'If the service database is currently in use data could be lost.',
+                            ]"
+                        :confirmWithText="false" :confirmWithPassword="false"
+                        :step2ButtonText="$isApplication ? 'Restart Service Container' : 'Restart Database'" />
+                @endcan
+            @endif
+        </div>
+    </div>
+</div>

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

@@ -12,6 +12,9 @@
                     <livewire:project.service.edit-compose serviceId="{{ $service->id }}" />
                 </x-modal-input>
             @endcan
+            <x-modal-input title="Resource Details" buttonTitle="Details">
+                <livewire:project.shared.resource-details :resource="$service" />
+            </x-modal-input>
         </div>
         <div>Configuration</div>
     </div>
@@ -42,10 +45,14 @@
                         <x-helper helper="Variable name: {{ $serviceName }}" />
                     @endif
                 </div>
-                <x-forms.input canGate="update" :canResource="$service"
-                    type="{{ data_get($field, 'isPassword') ? 'password' : 'text' }}"
-                    required="{{ str(data_get($field, 'rules'))?->contains('required') }}"
-                    id="fields.{{ $serviceName }}.value"></x-forms.input>
+                @if ($isPasswordHiddenForMember && data_get($field, 'isPassword'))
+                    <x-forms.input disabled value="Hidden (only admins can view)" />
+                @else
+                    <x-forms.input canGate="update" :canResource="$service"
+                        type="{{ data_get($field, 'isPassword') ? 'password' : 'text' }}"
+                        required="{{ str(data_get($field, 'rules'))?->contains('required') }}"
+                        id="fields.{{ $serviceName }}.value"></x-forms.input>
+                @endif
             @endforeach
         </div>
     @endif

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

@@ -22,11 +22,13 @@
                             dropdownOpen: false,
                             volumeModalOpen: false,
                             fileModalOpen: false,
+                            hostFileModalOpen: false,
                             directoryModalOpen: false
                         }"
                             @close-storage-modal.window="
                             if ($event.detail === 'volume') volumeModalOpen = false;
                             if ($event.detail === 'file') fileModalOpen = false;
+                            if ($event.detail === 'host-file') hostFileModalOpen = false;
                             if ($event.detail === 'directory') directoryModalOpen = false;
                         ">
                             <div class="relative" @click.outside="dropdownOpen = false">
@@ -62,6 +64,15 @@
                                                 </svg>
                                                 File Mount
                                             </a>
+                                            <a class="dropdown-item"
+                                                @click="hostFileModalOpen = true; dropdownOpen = false">
+                                                <svg class="size-4" fill="none" stroke="currentColor"
+                                                    viewBox="0 0 24 24">
+                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                                        d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                                                </svg>
+                                                Host File Mount
+                                            </a>
                                             <a class="dropdown-item"
                                                 @click="directoryModalOpen = true; dropdownOpen = false">
                                                 <svg class="size-4" fill="none" stroke="currentColor"
@@ -188,14 +199,28 @@
                                                 }
                                             })">
                                             <form class="flex flex-col w-full gap-2 rounded-sm"
+                                                x-data="{
+                                                    hostPath: @js($this->fileStorageHostPath()),
+                                                    filePath: @entangle('file_storage_path'),
+                                                    previewPath() {
+                                                        const path = (this.filePath || '').trim();
+
+                                                        return this.hostPath + (path === '' ? '/' : (path.startsWith('/') ? path : `/${path}`));
+                                                    },
+                                                }"
                                                 wire:submit='submitFileStorage'>
                                                 <div class="flex flex-col">
-                                                    <div>Actual file mounted from the host system to the container.</div>
+                                                    <div>This file will be created on the host, then mounted into the container.</div>
                                                 </div>
                                                 <div class="flex flex-col gap-2">
+                                                    <div class="p-2 text-xs rounded-sm bg-neutral-100 dark:bg-coolgray-200">
+                                                        <div class="mb-1 font-medium">Host file path</div>
+                                                        <code class="break-all" x-text="previewPath()">{{ $this->fileStoragePreviewPath() }}</code>
+                                                    </div>
                                                     <x-forms.input canGate="update" :canResource="$resource"
                                                         placeholder="/etc/nginx/nginx.conf" id="file_storage_path"
                                                         label="Destination Path" required
+                                                        x-on:input="filePath = $event.target.value"
                                                         helper="File location inside the container" />
                                                     <x-forms.textarea canGate="update" :canResource="$resource" label="Content"
                                                         id="file_storage_content"></x-forms.textarea>
@@ -209,6 +234,67 @@
                                 </div>
                             </template>
 
+                            {{-- Host File Modal --}}
+                            <template x-teleport="body">
+                                <div x-show="hostFileModalOpen" @keydown.window.escape="hostFileModalOpen=false"
+                                    class="fixed top-0 left-0 lg:px-0 px-4 z-99 flex items-center justify-center w-screen h-screen">
+                                    <div x-show="hostFileModalOpen" x-transition:enter="ease-out duration-100"
+                                        x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
+                                        x-transition:leave="ease-in duration-100" x-transition:leave-start="opacity-100"
+                                        x-transition:leave-end="opacity-0" @click="hostFileModalOpen=false"
+                                        class="absolute inset-0 w-full h-full bg-black/20 backdrop-blur-xs"></div>
+                                    <div x-show="hostFileModalOpen" x-trap.inert.noscroll="hostFileModalOpen"
+                                        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 drop-shadow-sm min-w-full lg:min-w-[36rem] max-w-fit bg-white border-neutral-200 dark:bg-base px-6 dark:border-coolgray-300">
+                                        <div class="flex items-center justify-between pb-3">
+                                            <h3 class="text-2xl font-bold">Add Host File Mount</h3>
+                                            <button @click="hostFileModalOpen=false"
+                                                class="absolute top-0 right-0 flex items-center justify-center w-8 h-8 mt-5 mr-5 rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0 focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning">
+                                                <svg class="w-5 h-5" 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 flex items-center justify-center w-auto"
+                                            x-init="$watch('hostFileModalOpen', value => {
+                                                if (value) {
+                                                    $nextTick(() => {
+                                                        const input = $el.querySelector('input');
+                                                        input?.focus();
+                                                    })
+                                                }
+                                            })">
+                                            <form class="flex flex-col w-full gap-2 rounded-sm"
+                                                wire:submit='submitHostFileStorage'>
+                                                <div class="flex flex-col">
+                                                    <div>Bind an existing host file into the container. Coolify will not create, edit, load, chmod, or delete the source file.</div>
+                                                </div>
+                                                <div class="flex flex-col gap-2">
+                                                    <x-forms.input canGate="update" :canResource="$resource"
+                                                        placeholder="/etc/nginx/nginx.conf"
+                                                        id="host_file_storage_source" label="Host File Path" required
+                                                        helper="Existing file on the host system." />
+                                                    <x-forms.input canGate="update" :canResource="$resource"
+                                                        placeholder="/etc/nginx/nginx.conf"
+                                                        id="host_file_storage_destination" label="Destination Path"
+                                                        required helper="File location inside the container." />
+                                                    <x-forms.button canGate="update" :canResource="$resource" type="submit">
+                                                        Add
+                                                    </x-forms.button>
+                                                </div>
+                                            </form>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+
                             {{-- Directory Modal --}}
                             <template x-teleport="body">
                                 <div x-show="directoryModalOpen" @keydown.window.escape="directoryModalOpen=false"

resources/views/livewire/project/shared/configuration-checker.blade.php

@@ -1,22 +1,77 @@
 <div>
     @if ($isConfigurationChanged && !is_null($resource->config_hash) && !$resource->isExited())
-        <x-popup-small>
-            <x-slot:title>
-                The latest configuration has not been applied
-            </x-slot:title>
-            <x-slot:icon>
-                <svg class="hidden w-10 h-10 dark:text-warning lg:block" viewBox="0 0 256 256"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path fill="currentColor"
-                        d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
-                </svg>
-            </x-slot:icon>
-            <x-slot:description>
-                <span>Please redeploy to apply the new configuration.</span>
-            </x-slot:description>
-            <x-slot:button-text @click="disableSponsorship()">
-                Disable This Popup
-            </x-slot:button-text>
-        </x-popup-small>
+        <div x-data="{ configurationDiffModalOpen: false, expandedRows: {} }">
+            <x-popup-small>
+                <x-slot:title>
+                    The latest configuration has not been applied
+                </x-slot:title>
+                <x-slot:icon>
+                    <svg class="hidden w-10 h-10 dark:text-warning lg:block" viewBox="0 0 256 256"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path fill="currentColor"
+                            d="M240.26 186.1L152.81 34.23a28.74 28.74 0 0 0-49.62 0L15.74 186.1a27.45 27.45 0 0 0 0 27.71A28.31 28.31 0 0 0 40.55 228h174.9a28.31 28.31 0 0 0 24.79-14.19a27.45 27.45 0 0 0 .02-27.71m-20.8 15.7a4.46 4.46 0 0 1-4 2.2H40.55a4.46 4.46 0 0 1-4-2.2a3.56 3.56 0 0 1 0-3.73L124 46.2a4.77 4.77 0 0 1 8 0l87.44 151.87a3.56 3.56 0 0 1 .02 3.73M116 136v-32a12 12 0 0 1 24 0v32a12 12 0 0 1-24 0m28 40a16 16 0 1 1-16-16a16 16 0 0 1 16 16" />
+                    </svg>
+                </x-slot:icon>
+                <x-slot:description>
+                    <span>
+                        @if (data_get($configurationDiff, 'count'))
+                            {{ data_get($configurationDiff, 'count') }} unapplied configuration
+                            {{ data_get($configurationDiff, 'count') === 1 ? 'change' : 'changes' }} detected.
+                            @if (data_get($configurationDiff, 'requires_build'))
+                                A rebuild is required.
+                            @else
+                                Please redeploy to apply the new configuration.
+                            @endif
+                            <button type="button" class="ml-1 font-semibold underline text-coollabs dark:text-warning"
+                                x-on:click="$wire.refreshConfigurationChanges().then(() => configurationDiffModalOpen = true)"
+                                wire:loading.attr="disabled" wire:target="refreshConfigurationChanges">
+                                View changes
+                            </button>
+                        @else
+                            Please redeploy to apply the new configuration.
+                        @endif
+                    </span>
+                </x-slot:description>
+            </x-popup-small>
+
+            @if (data_get($configurationDiff, 'count'))
+                <template x-teleport="body">
+                    <div x-show="configurationDiffModalOpen" x-cloak
+                        class="fixed inset-0 z-99 flex h-screen w-screen items-center justify-center p-4"
+                        @keydown.escape.window="configurationDiffModalOpen = false">
+                        <div x-show="configurationDiffModalOpen" x-transition.opacity
+                            class="absolute inset-0 h-full w-full bg-black/20 backdrop-blur-xs"
+                            @click="configurationDiffModalOpen = false"></div>
+                        <div x-show="configurationDiffModalOpen" x-trap.inert.noscroll="configurationDiffModalOpen"
+                            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 flex max-h-[85vh] w-full flex-col rounded-sm border border-neutral-200 bg-white shadow-lg dark:border-coolgray-300 dark:bg-base lg:max-w-4xl">
+                            <div class="flex shrink-0 items-center justify-between border-b border-neutral-200 px-6 py-5 dark:border-coolgray-300">
+                                <div>
+                                    <h3 class="text-2xl font-bold text-black dark:text-white">Configuration changes</h3>
+                                    <p class="mt-1 text-sm text-neutral-600 dark:text-neutral-400">
+                                        These changes are not applied to the latest deployment yet.
+                                    </p>
+                                </div>
+                                <button type="button" @click="configurationDiffModalOpen = false"
+                                    class="flex h-8 w-8 items-center justify-center rounded-full dark:text-white hover:bg-neutral-100 dark:hover:bg-coolgray-300 outline-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-coollabs dark:focus-visible:ring-warning focus-visible:ring-offset-2 dark:focus-visible:ring-offset-base">
+                                    <svg class="h-5 w-5" 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="overflow-y-auto p-6">
+                                <x-deployment.configuration-diff :diff="$configurationDiff" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            @endif
+        </div>
     @endif
 </div>

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

@@ -43,38 +43,69 @@
         @endif
     </div>
     @if ($view === 'normal')
-        <div>
-            <h3>Production Environment Variables</h3>
-            <div>Environment (secrets) variables for Production.</div>
-        </div>
-        @forelse ($this->environmentVariables as $env)
-            <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}" :env="$env"
-                :type="$resource->type()" />
-        @empty
-            <div>No environment variables found.</div>
-        @endforelse
-        @if (($resource->type() === 'service' || $resource?->build_pack === 'dockercompose') && $this->hardcodedEnvironmentVariables->isNotEmpty())
-            @foreach ($this->hardcodedEnvironmentVariables as $index => $env)
-                <livewire:project.shared.environment-variable.show-hardcoded
-                    wire:key="hardcoded-prod-{{ $env['key'] }}-{{ $env['service_name'] ?? 'default' }}-{{ $index }}"
-                    :env="$env" />
-            @endforeach
-        @endif
-        @if ($resource->type() === 'application' && $resource->environment_variables_preview->count() > 0 && $showPreview)
-            <div>
-                <h3>Preview Deployments Environment Variables</h3>
-                <div>Environment (secrets) variables for Preview Deployments.</div>
+        <div class="w-full md:w-96">
+            <div class="relative">
+                <input type="search" placeholder="Search" aria-label="Search environment variables"
+                    wire:model.live.debounce.300ms="search" class="w-full input pl-10" />
+                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
+                    <div class="relative w-4 h-4">
+                        <svg wire:loading.remove wire:target="search" aria-hidden="true"
+                            class="absolute inset-0 w-4 h-4 dark:text-neutral-400" fill="none" stroke="currentColor"
+                            viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                        </svg>
+                        <svg wire:loading wire:target="search" aria-hidden="true"
+                            class="absolute inset-0 w-4 h-4 text-coollabs dark:text-warning animate-spin" fill="none"
+                            viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
+                                stroke-width="4" />
+                            <path class="opacity-75" fill="currentColor"
+                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+                        </svg>
+                    </div>
+                </div>
             </div>
-            @foreach ($this->environmentVariablesPreview as $env)
-                <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}" :env="$env"
-                    :type="$resource->type()" />
-            @endforeach
-            @if (($resource->type() === 'service' || $resource?->build_pack === 'dockercompose') && $this->hardcodedEnvironmentVariablesPreview->isNotEmpty())
-                @foreach ($this->hardcodedEnvironmentVariablesPreview as $index => $env)
-                    <livewire:project.shared.environment-variable.show-hardcoded
-                        wire:key="hardcoded-preview-{{ $env['key'] }}-{{ $env['service_name'] ?? 'default' }}-{{ $index }}"
-                        :env="$env" />
+        </div>
+        @if ($this->isSearchActive && ! $this->hasEnvironmentVariables)
+            <div>No environment variables found.</div>
+        @else
+            @if ($this->environmentVariables->isNotEmpty() || $this->hardcodedEnvironmentVariables->isNotEmpty())
+                <div>
+                    <h3>Production Environment Variables</h3>
+                    <div>Environment (secrets) variables for Production.</div>
+                </div>
+                @foreach ($this->environmentVariables as $env)
+                    <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}" :env="$env"
+                        :type="$resource->type()" />
                 @endforeach
+                @if (($resource->type() === 'service' || $resource?->build_pack === 'dockercompose') && $this->hardcodedEnvironmentVariables->isNotEmpty())
+                    @foreach ($this->hardcodedEnvironmentVariables as $index => $env)
+                        <livewire:project.shared.environment-variable.show-hardcoded
+                            wire:key="hardcoded-prod-{{ $env['key'] }}-{{ $env['service_name'] ?? 'default' }}-{{ $index }}" :env="$env" />
+                    @endforeach
+                @endif
+            @endif
+            @if (
+                $resource->type() === 'application' &&
+                    $showPreview &&
+                    ($this->environmentVariablesPreview->isNotEmpty() || $this->hardcodedEnvironmentVariablesPreview->isNotEmpty())
+            )
+                <div>
+                    <h3>Preview Deployments Environment Variables</h3>
+                    <div>Environment (secrets) variables for Preview Deployments.</div>
+                </div>
+                @foreach ($this->environmentVariablesPreview as $env)
+                    <livewire:project.shared.environment-variable.show wire:key="environment-{{ $env->id }}" :env="$env"
+                        :type="$resource->type()" />
+                @endforeach
+                @if (($resource->type() === 'service' || $resource?->build_pack === 'dockercompose') && $this->hardcodedEnvironmentVariablesPreview->isNotEmpty())
+                    @foreach ($this->hardcodedEnvironmentVariablesPreview as $index => $env)
+                        <livewire:project.shared.environment-variable.show-hardcoded
+                            wire:key="hardcoded-preview-{{ $env['key'] }}-{{ $env['service_name'] ?? 'default' }}-{{ $index }}"
+                            :env="$env" />
+                    @endforeach
+                @endif
             @endif
         @endif
     @else
@@ -88,8 +119,9 @@
                     label="Production Environment Variables"></x-forms.textarea>
 
                 @if ($showPreview)
-                    <x-forms.textarea rows="10" class="whitespace-pre-wrap font-sans" label="Preview Deployments Environment Variables"
-                        id="variablesPreview" wire:model="variablesPreview"></x-forms.textarea>
+                    <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>
@@ -98,8 +130,9 @@
                     label="Production Environment Variables" disabled></x-forms.textarea>
 
                 @if ($showPreview)
-                    <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>
+                    <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>

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

@@ -58,7 +58,7 @@
                                             <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
                                         @endif
                                     @else
-                                        @if (!$env->is_nixpacks)
+                                        @if (!$env->is_buildpack_control)
                                             <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" />
@@ -67,7 +67,7 @@
                                             helper="Make this variable available in the running container at runtime."
                                             label="Available at Runtime" />
                                         @if (!$isMagicVariable)
-                                            @if (!$env->is_nixpacks)
+                                            @if (!$env->is_buildpack_control)
                                                 <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
                                                 @if ($is_multiline === false)
                                                     <x-forms.checkbox instantSave id="is_literal"
@@ -184,6 +184,7 @@
                             @endif
                         </div>
                         <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
@@ -191,16 +192,23 @@
                 <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.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" />
+                        @if ($isValueHidden)
+                            <div class="w-full">
+                                <input disabled type="text" value="Hidden (only admins can view)"
+                                    class="input italic !text-neutral-500 dark:!text-neutral-500" />
+                            </div>
+                        @else
+                            <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
                         @endif
                     </div>
                     <x-forms.input disabled id="comment" label="Comment"
@@ -236,7 +244,7 @@
                                             <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
                                         @endif
                                     @else
-                                        @if (!$env->is_nixpacks)
+                                        @if (!$env->is_buildpack_control)
                                             <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" />
@@ -245,7 +253,7 @@
                                             helper="Make this variable available in the running container at runtime."
                                             label="Available at Runtime" />
                                         @if (!$isMagicVariable)
-                                            @if (!$env->is_nixpacks)
+                                            @if (!$env->is_buildpack_control)
                                                 <x-forms.checkbox instantSave id="is_multiline" label="Is Multiline?" />
                                                 @if ($is_multiline === false)
                                                     <x-forms.checkbox instantSave id="is_literal"

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

@@ -28,6 +28,38 @@
             }
         },
         isScrolling: false,
+        lastTouchY: 0,
+        disableFollow() {
+            if (!this.alwaysScroll) return;
+            this.alwaysScroll = false;
+            if (this.rafId) {
+                cancelAnimationFrame(this.rafId);
+                this.rafId = null;
+            }
+        },
+        handleWheel(event) {
+            if (this.alwaysScroll && event.deltaY < 0) {
+                this.disableFollow();
+            }
+        },
+        handleTouchStart(event) {
+            this.lastTouchY = event.touches[0].clientY;
+        },
+        handleTouchMove(event) {
+            if (!this.alwaysScroll) return;
+            const currentY = event.touches[0].clientY;
+            if (currentY > this.lastTouchY) {
+                this.disableFollow();
+            }
+            this.lastTouchY = currentY;
+        },
+        handleKeyScroll(event) {
+            if (!this.alwaysScroll) return;
+            const upKeys = ['ArrowUp', 'PageUp', 'Home'];
+            if (upKeys.includes(event.key)) {
+                this.disableFollow();
+            }
+        },
         scrollToBottom() {
             const logsContainer = document.getElementById('logsContainer');
             if (logsContainer) {
@@ -57,17 +89,14 @@
             }
         },
         handleScroll(event) {
-            if (!this.alwaysScroll || this.isScrolling) return;
+            if (this.isScrolling) return;
             clearTimeout(this.scrollDebounce);
             this.scrollDebounce = setTimeout(() => {
                 const el = event.target;
                 const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
-                if (distanceFromBottom > 100) {
-                    this.alwaysScroll = false;
-                    if (this.rafId) {
-                        cancelAnimationFrame(this.rafId);
-                        this.rafId = null;
-                    }
+                if (!this.alwaysScroll && distanceFromBottom <= 10) {
+                    this.alwaysScroll = true;
+                    this.scheduleScroll();
                 }
             }, 150);
         },
@@ -110,10 +139,6 @@
             const range = selection.getRangeAt(0);
             return logsContainer.contains(range.commonAncestorContainer);
         },
-        decodeHtml(text) {
-            const doc = new DOMParser().parseFromString(text, 'text/html');
-            return doc.documentElement.textContent;
-        },
         applySearch() {
             const logs = document.getElementById('logs');
             if (!logs) return;
@@ -134,7 +159,7 @@
 
                 // Update highlighting
                 if (textSpan) {
-                    const originalText = this.decodeHtml(textSpan.dataset.lineText || '');
+                    const originalText = textSpan.dataset.lineText || '';
                     if (!query) {
                         textSpan.textContent = originalText;
                     } else if (matches) {
@@ -245,10 +270,13 @@
                     <div>({{ $pull_request }})</div>
                 @endif
                 @if ($streamLogs)
-                    <x-loading wire:poll.2000ms='getLogs(true)' />
+                    <x-loading />
                 @endif
             </div>
         @endif
+        @if ($streamLogs)
+            <div class="sr-only" wire:poll.2000ms="getLogs(true)" aria-hidden="true"></div>
+        @endif
         <div x-show="expanded" {{ $collapsible ? 'x-collapse' : '' }}
             :class="fullscreen ? 'fullscreen flex flex-col !overflow-visible' : 'relative w-full {{ $collapsible ? 'py-4' : '' }} mx-auto'"
             :style="fullscreen ? 'max-height: none !important; height: 100% !important;' : ''">
@@ -314,8 +342,17 @@
                         <button
                             x-on:click="
                                 $wire.copyLogs().then(logs => {
-                                    navigator.clipboard.writeText(logs);
-                                    Livewire.dispatch('success', ['Logs copied to clipboard.']);
+                                    if (!navigator.clipboard?.writeText) {
+                                        Livewire.dispatch('error', ['Clipboard is not available. Please use HTTPS or localhost.']);
+                                        return;
+                                    }
+                                    navigator.clipboard.writeText(logs).then(() => {
+                                        Livewire.dispatch('success', ['Logs copied to clipboard.']);
+                                    }).catch(() => {
+                                        Livewire.dispatch('error', ['Failed to copy logs to clipboard.']);
+                                    });
+                                }).catch(() => {
+                                    Livewire.dispatch('error', ['Failed to prepare logs for clipboard.']);
                                 });
                             "
                             title="Copy Logs"
@@ -473,7 +510,8 @@
                         </div>
                     </div>
                 </div>
-                <div id="logsContainer" @scroll="handleScroll"
+                <div id="logsContainer" @scroll="handleScroll" @wheel="handleWheel"
+                    @touchstart="handleTouchStart" @touchmove="handleTouchMove" @keydown="handleKeyScroll" tabindex="0"
                     class="flex overflow-y-auto overflow-x-hidden flex-col px-4 py-2 w-full min-w-0 scrollbar"
                     :class="fullscreen ? 'flex-1' : 'max-h-[40rem]'">
                     @if ($outputs)
@@ -490,20 +528,19 @@
                                     // Parse timestamp from log line (ISO 8601 format: 2025-12-04T11:48:39.136764033Z)
                                     $timestamp = '';
                                     $logContent = $line;
-                                    if (preg_match('/^(\d{4})-(\d{2})-(\d{2})T(\d{2}:\d{2}:\d{2})(?:\.(\d+))?Z?\s(.*)$/', $line, $matches)) {
-                                        $year = $matches[1];
-                                        $month = $matches[2];
-                                        $day = $matches[3];
-                                        $time = $matches[4];
-                                        $microseconds = isset($matches[5]) ? substr($matches[5], 0, 6) : '000000';
-                                        $logContent = $matches[6];
+                                    if (preg_match('/^(\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2})(?:\.(\d+))?Z?\s(.*)$/', $line, $matches)) {
+                                        $microseconds = isset($matches[2]) ? substr($matches[2], 0, 6) : '000000';
+                                        $logContent = $matches[3];
 
-                                        // Convert month number to abbreviated name
-                                        $monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-                                        $monthName = $monthNames[(int)$month - 1] ?? $month;
-
-                                        // Format for display: 2025-Dec-04 09:44:58
-                                        $timestamp = "{$year}-{$monthName}-{$day} {$time}";
+                                        // Convert UTC Docker timestamp to server timezone for display
+                                        $carbonTs = \Carbon\Carbon::parse($matches[1], 'UTC');
+                                        $serverTz = getServerTimezone($server);
+                                        try {
+                                            $carbonTs->setTimezone($serverTz);
+                                        } catch (\Exception) {
+                                            // keep UTC
+                                        }
+                                        $timestamp = $carbonTs->format('Y-M-d H:i:s');
                                         // Include microseconds in key for uniqueness
                                         $lineKey = "{$timestamp}.{$microseconds}";
                                     }

resources/views/livewire/project/shared/health-checks.blade.php

@@ -1,14 +1,14 @@
 <form wire:submit='submit' class="flex flex-col">
     <div class="flex items-center gap-2">
-        <h2>Healthchecks</h2>
+        <h2>Healthcheck</h2>
         <x-forms.button canGate="update" :canResource="$resource" type="submit">Save</x-forms.button>
         @if (!$healthCheckEnabled)
-            <x-modal-confirmation title="Confirm Healthcheck Enable?" buttonTitle="Enable Healthcheck"
-                submitAction="toggleHealthcheck" :actions="['Enable healthcheck for this resource.']"
-                warningMessage="If the health check fails, your application will become inaccessible. Please review the <a href='https://coolify.io/docs/knowledge-base/health-checks' target='_blank' class='underline text-white'>Health Checks</a> guide before proceeding!"
-                step2ButtonText="Enable Healthcheck" :confirmWithText="false" :confirmWithPassword="false"
-                isHighlightedButton>
-            </x-modal-confirmation>
+                <x-modal-confirmation :disabled="!auth()->user()->can('update', $resource)" :authDisabled="!auth()->user()->can('update', $resource)" title="Confirm Healthcheck Enable?" buttonTitle="Enable Healthcheck"
+                    submitAction="toggleHealthcheck" :actions="['Enable healthcheck for this resource.']"
+                    warningMessage="If the health check fails, your application will become inaccessible. Please review the <a href='https://coolify.io/docs/knowledge-base/health-checks' target='_blank' class='underline text-white'>Health Checks</a> guide before proceeding!"
+                    step2ButtonText="Enable Healthcheck" :confirmWithText="false" :confirmWithPassword="false"
+                    isHighlightedButton>
+                </x-modal-confirmation>
         @else
             <x-forms.button canGate="update" :canResource="$resource" wire:click="toggleHealthcheck">Disable Healthcheck</x-forms.button>
         @endif

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

@@ -5,13 +5,19 @@
     <div class="pb-4">Basic metrics for your application container.</div>
     <div>
         @if ($resource->getMorphClass() === 'App\Models\Application' && $resource->build_pack === 'dockercompose')
-            <div class="alert alert-warning">Metrics are not available for Docker Compose applications yet!</div>
+            <x-callout type="warning" title="Not Available">
+                Metrics are not available for Docker Compose applications yet!
+            </x-callout>
         @elseif(!$resource->destination->server->isMetricsEnabled())
-            <div class="alert alert-warning pb-1">Metrics are only available for servers with Sentinel & Metrics enabled!</div>
-            <div>Go to <a class="underline dark:text-white" href="{{ route('server.show', $resource->destination->server->uuid) }}/sentinel" {{ wireNavigate() }}>Server settings</a> to enable it.</div>
+            <x-callout type="info" title="Metrics Not Enabled">
+                Metrics are only available for servers with Sentinel & Metrics enabled.
+                Go to <a class="underline font-semibold" href="{{ route('server.metrics', ['server_uuid' => $resource->destination->server->uuid]) }}" {{ wireNavigate() }}>Server Metrics</a> to enable it.
+            </x-callout>
         @else
             @if (!str($resource->status)->contains('running'))
-                <div class="alert alert-warning">Metrics are only available when the application container is running!</div>
+                <x-callout type="warning" title="Container Not Running">
+                    Metrics are only available when the application container is running!
+                </x-callout>
             @else
                 <div>
                 <x-forms.select label="Interval" wire:change="setInterval" id="interval">

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

@@ -0,0 +1,55 @@
+<div class="w-full max-h-[70vh] overflow-y-auto pr-1 pt-1">
+    <div class="flex flex-col gap-6">
+        <div>
+            <h3>Resource</h3>
+            <div class="pt-2 grid grid-cols-1 gap-3 md:grid-cols-2">
+                <x-forms.copy-button label="Name" :text="$resource->name ?? ''" />
+                <x-forms.copy-button label="UUID" :text="$resource->uuid ?? ''" />
+            </div>
+        </div>
+
+        @if ($environment_uuid)
+            <div>
+                <h3>Environment</h3>
+                <div class="pt-2 grid grid-cols-1 gap-3 md:grid-cols-2">
+                    <x-forms.copy-button label="Name" :text="$environment_name ?? ''" />
+                    <x-forms.copy-button label="UUID" :text="$environment_uuid" />
+                </div>
+            </div>
+        @endif
+
+        @if ($project_uuid)
+            <div>
+                <h3>Project</h3>
+                <div class="pt-2 grid grid-cols-1 gap-3 md:grid-cols-2">
+                    <x-forms.copy-button label="Name" :text="$project_name ?? ''" />
+                    <x-forms.copy-button label="UUID" :text="$project_uuid" />
+                </div>
+            </div>
+        @endif
+
+        @if ($server_uuid)
+            <div>
+                <h3>Server</h3>
+                <div class="pt-2 grid grid-cols-1 gap-3 md:grid-cols-2">
+                    <x-forms.copy-button label="Name" :text="$server_name ?? ''" />
+                    <x-forms.copy-button label="UUID" :text="$server_uuid" />
+                </div>
+            </div>
+        @endif
+
+        @if (! empty($stack_applications) || ! empty($stack_databases))
+            <div>
+                <h3>Stack Sub-Resources</h3>
+                <div class="pt-2 grid grid-cols-1 gap-3 md:grid-cols-2">
+                    @foreach ($stack_applications as $item)
+                        <x-forms.copy-button :label="'Application — ' . $item['name']" :text="$item['uuid']" />
+                    @endforeach
+                    @foreach ($stack_databases as $item)
+                        <x-forms.copy-button :label="'Database — ' . $item['name']" :text="$item['uuid']" />
+                    @endforeach
+                </div>
+            </div>
+        @endif
+    </div>
+</div>

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

@@ -101,16 +101,10 @@
                     </div>
                 </div>
             </div>
-        @else
-            <x-callout type="warning" title="Access Restricted">
-                You don't have permission to clone resources. Contact your team administrator to request access.
-            </x-callout>
-        @endcan
 
-        <h3 class="pt-4">Move Resource</h3>
-        <div class="pb-4">Transfer this resource between projects and environments.</div>
+            <h3 class="pt-4">Move Resource</h3>
+            <div class="pb-4">Transfer this resource between projects and environments.</div>
 
-        @can('update', $resource)
             @if ($projects->count() > 0)
                 <div class="space-y-4">
                     <div class="flex flex-col lg:flex-row gap-4">
@@ -160,9 +154,8 @@
                 </div>
             @endif
         @else
-            <x-callout type="warning" title="Access Restricted">
-                You don't have permission to move resources between projects or environments. Contact your team
-                administrator to request access.
+            <x-callout type="danger" title="Insufficient Permissions">
+                You don't have permission to modify this resource. Contact your team administrator for access.
             </x-callout>
         @endcan
     </div>