feat(ui): Shadow UI redesign, domain management, and DNS autoconfigure (#11119)

Co-authored-by: ShadowArcanist <162910371+ShadowArcanist@users.noreply.github.com>
This commit is contained in:
Andras BacsaiandShadowArcanist authored and GitHub committed 2026-08-03 23:11:54 +02:00
1 parent 0b843bb07c
commit 8ae56587d5
497 files changed
+44045 -22630

No files matched your search

@@ -55,9 +55,55 @@
let proxy = URL.createObjectURL(new Blob([`self.MonacoEnvironment={baseUrl:'${window.location.origin}/js/monaco-editor-${monacoVersion}/min'};importScripts('${window.location.origin}/js/monaco-editor-${monacoVersion}/min/vs/base/worker/workerMain.js');`], { type: 'text/javascript' }));
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
require(['vs/editor/editor.main'], () => {
if (!window.__coolifyMonacoThemeDefined) {
monaco.editor.defineTheme('coolify-dark', {
base: 'vs-dark',
inherit: true,
rules: [],
colors: {
'editor.background': '#0b0b0c',
'editorGutter.background': '#0b0b0c',
'editorStickyScroll.background': '#0b0b0c',
'minimap.background': '#0b0b0c',
'scrollbarSlider.background': '#ffffff1a',
'scrollbarSlider.hoverBackground': '#ffffff2e',
'scrollbarSlider.activeBackground': '#ffffff40',
'scrollbar.shadow': '#00000000'
}
});
window.__coolifyMonacoThemeDefined = true;
}
@if ($language === 'nginx')
if (!monaco.languages.getLanguages().some((registered) => registered.id === 'nginx')) {
monaco.languages.register({ id: 'nginx' });
monaco.languages.setLanguageConfiguration('nginx', {
comments: { lineComment: '#' },
brackets: [['{', '}']],
autoClosingPairs: [
{ open: '{', close: '}' },
],
});
monaco.languages.setMonarchTokensProvider('nginx', {
defaultToken: '',
tokenizer: {
root: [
[/#.*$/, 'comment'],
[/\$[A-Za-z_]\w*/, 'variable'],
[/^\s*(server|location|upstream|http|events|types|map|if|include|listen|server_name|root|index|alias|return|rewrite|try_files|proxy_pass|proxy_set_header|proxy_http_version|fastcgi_pass|fastcgi_param|add_header|expires|error_page|access_log|error_log|gzip|gzip_types|charset|sendfile|keepalive_timeout|client_max_body_size|default_type|worker_processes|worker_connections|ssl_certificate|ssl_certificate_key|allow|deny|autoindex|set|break|internal|limit_req|limit_conn|resolver)\b/, 'keyword'],
[/^\s*[A-Za-z_][\w.]*/, 'type'],
[/\u0022([^\u0022\\]|\\.)*\u0022/, 'string'],
[/'([^'\\]|\\.)*'/, 'string'],
[/\b\d+(\.\d+)?(ms|[smhdwMy]|[kKmMgG])?\b/, 'number'],
[/[{}();]/, 'delimiter'],
[/(~\*?|\^~|=|\!=)/, 'operator'],
],
},
});
}
@endif
const editor = monaco.editor.create($refs.monacoEditorElement, {
value: monacoContent,
theme: document.documentElement.classList.contains('dark') ? 'vs-dark' : 'vs',
theme: document.documentElement.classList.contains('dark') ? 'coolify-dark' : 'vs',
wordWrap: 'on',
readOnly: '{{ $readonly ?? false }}',
minimap: { enabled: false },
@@ -67,15 +113,26 @@
language: '{{ $language }}',
domReadOnly: '{{ $readonly ?? false }}',
contextmenu: '!{{ $readonly ?? false }}',
renderLineHighlight: '{{ $readonly ?? false }} ? none : all',
stickyScroll: { enabled: false }
renderLineHighlight: 'none',
stickyScroll: { enabled: false },
padding: { top: 12, bottom: 12 },
overviewRulerLanes: 0,
overviewRulerBorder: false,
hideCursorInOverviewRuler: true,
scrollbar: {
vertical: 'auto',
horizontal: 'auto',
verticalScrollbarSize: 8,
horizontalScrollbarSize: 8,
useShadows: false
}
});
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.attributeName === 'class') {
const isDark = document.documentElement.classList.contains('dark');
monaco.editor.setTheme(isDark ? 'vs-dark' : 'vs');
monaco.editor.setTheme(isDark ? 'coolify-dark' : 'vs');
}
});
});
@@ -114,7 +171,7 @@
}, 5);" :id="monacoId">
</div>
<div class="relative z-10 w-full h-full">
<div x-ref="monacoEditorElement" class="w-full text-md {{ $readonly ? 'opacity-65' : '' }}" style="height: var(--editor-height, calc(100vh - 20rem)); min-height: 300px;"></div>
<div x-ref="monacoEditorElement" class="w-full text-md {{ $readonly ? 'opacity-65' : '' }}" style="height: var(--editor-height, calc(100vh - 20rem)); min-height: 150px;"></div>
<div x-ref="monacoPlaceholderElement" x-show="monacoPlaceholder" @click="monacoEditorFocus()"
:style="'font-size: ' + monacoFontSize"
class="w-full text-sm font-mono absolute z-50 text-gray-500 ml-14 -translate-x-0.5 mt-0.5 left-0 top-0"