{ "version": "1.0.0", "layout_name": "admin_template_layout_edit", "permissions": [ "core.templates.read" ], "extends": "_admin_base", "meta": { "title": "$t:admin.templates.layout_edit.title", "description": "$t:admin.templates.layout_edit.description" }, "transition_overlay": { "wait_for": [ "template_info", "current_layout", "layout_versions", "layout_extensions" ] }, "data_sources": [ { "id": "template_info", "label_key": "$t:editor.data_source.template_info", "type": "api", "endpoint": "/api/admin/templates/{{route.identifier}}", "method": "GET", "auto_fetch": true, "auth_required": true, "fallback": { "data": null } }, { "id": "layout_files", "label_key": "$t:editor.data_source.layout_files", "type": "api", "endpoint": "/api/admin/templates/{{route.identifier}}/layouts", "method": "GET", "auto_fetch": true, "auth_required": true, "loading_strategy": "blocking", "initGlobal": [ "layoutFilesList", { "key": "selectedLayoutName", "path": "[0].name" } ], "fallback": { "data": [] } }, { "id": "current_layout", "label_key": "$t:editor.data_source.current_layout", "type": "api", "endpoint": "/api/admin/templates/{{route.identifier}}/layouts/{{_global.selectedLayoutName || _global.layoutFilesList?.[0]?.name}}", "method": "GET", "auto_fetch": true, "auth_required": true, "loading_strategy": "progressive", "initGlobal": { "key": "editorContent", "path": "content" }, "fallback": { "data": { "content": "{}", "name": "", "description": "", "updated_at": null } } }, { "id": "layout_versions", "label_key": "$t:editor.data_source.layout_versions", "type": "api", "endpoint": "/api/admin/templates/{{route.identifier}}/layouts/{{_global.selectedLayoutName}}/versions", "method": "GET", "auto_fetch": false, "auth_required": true, "fallback": { "data": [] } }, { "id": "layout_extensions", "label_key": "$t:editor.data_source.layout_extensions", "type": "api", "endpoint": "/api/admin/templates/{{route.identifier}}/layout-extensions", "method": "GET", "auto_fetch": true, "auth_required": true, "loading_strategy": "blocking", "fallback": { "data": [] } }, { "id": "current_extension", "label_key": "$t:editor.data_source.current_extension", "type": "api", "endpoint": "/api/admin/templates/{{route.identifier}}/layout-extensions/{{_global.selectedExtensionId}}", "method": "GET", "auto_fetch": false, "auth_required": true, "initGlobal": { "key": "editorContent", "path": "content" }, "fallback": { "data": null } }, { "id": "extension_versions", "label_key": "$t:editor.data_source.extension_versions", "type": "api", "endpoint": "/api/admin/templates/{{route.identifier}}/layout-extensions/{{_global.selectedExtensionId}}/versions", "method": "GET", "auto_fetch": false, "auth_required": true, "fallback": { "data": [] } } ], "init_actions": [ { "handler": "setState", "if": "{{!!query.route && !!(layout_files?.data ?? []).find(f => f.route_path === query.route)?.name}}", "params": { "target": "global", "selectedNodeKind": "layout", "selectedLayoutName": "{{(layout_files?.data ?? []).find(f => f.route_path === query.route)?.name}}" } } ], "slots": { "content": [ { "id": "page_container", "type": "basic", "name": "Div", "props": { "className": "admin-page-content-responsive" }, "children": [ { "id": "page_header", "type": "composite", "name": "PageHeader", "props": { "title": "$t:admin.templates.layout_edit.page_title ({{template_info?.data?.name ?? route.identifier}})", "description": "$t:admin.templates.layout_edit.page_description" }, "children": [ { "id": "header_cancel_button", "type": "basic", "name": "Button", "props": { "className": "btn btn-secondary" }, "actions": [ { "type": "click", "handler": "navigateBack" } ], "children": [ { "type": "basic", "name": "Span", "text": "$t:common.cancel" } ] }, { "type": "basic", "name": "Button", "if": "{{_global.selectedNodeKind !== 'extension'}}", "props": { "type": "button", "className": "flex-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" }, "actions": [ { "type": "click", "handler": "sequence", "params": { "actions": [ { "handler": "apiCall", "auth_required": true, "target": "/api/admin/templates/{{route.identifier}}/layouts/{{_global.selectedLayoutName || layout_files?.data?.[0]?.name}}/preview", "params": { "method": "POST", "body": { "content": "{{_global.editorContent}}" } }, "onSuccess": [ { "handler": "openWindow", "params": { "path": "/preview/{{response.data.token}}" } } ], "onError": [ { "handler": "toast", "params": { "type": "error", "message": "$t:admin.templates.layout_edit.preview_error" } } ] } ] } } ], "children": [ { "type": "basic", "name": "Icon", "props": { "name": "fa-regular fa-eye", "className": "w-4 h-4" } }, { "type": "basic", "name": "Span", "props": { "className": "hidden sm:inline" }, "text": "$t:admin.templates.layout_edit.preview" } ] }, { "type": "basic", "name": "Button", "if": "{{_global.selectedNodeKind === 'extension'}}", "props": { "type": "button", "className": "flex-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" }, "actions": [ { "type": "click", "handler": "sequence", "params": { "actions": [ { "handler": "conditions", "conditions": [ { "if": "{{current_extension?.data?.extension_type === 'overlay'}}", "then": [ { "handler": "apiCall", "auth_required": true, "target": "/api/admin/templates/{{route.identifier}}/layout-extensions/{{_global.selectedExtensionId}}/preview", "params": { "method": "POST", "body": { "content": "{{_global.editorContent}}" } }, "onSuccess": [ { "handler": "openWindow", "params": { "path": "/preview/{{response.data.token}}" } } ], "onError": [ { "handler": "toast", "params": { "type": "error", "message": "$t:admin.templates.layout_edit.preview_error" } } ] } ] }, { "then": [ { "handler": "openModal", "target": "extension_preview_layout_modal" } ] } ] } ] } } ], "children": [ { "type": "basic", "name": "Icon", "props": { "name": "fa-regular fa-eye", "className": "w-4 h-4" } }, { "type": "basic", "name": "Span", "props": { "className": "hidden sm:inline" }, "text": "$t:admin.templates.layout_edit.preview" } ] }, { "type": "basic", "name": "Button", "if": "{{_global.selectedNodeKind !== 'extension' && current_layout?.data?.abilities?.can_update !== false}}", "props": { "className": "flex-center gap-2 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors disabled:opacity-50", "disabled": "{{_global.isSaving}}" }, "actions": [ { "type": "click", "handler": "sequence", "actions": [ { "handler": "setState", "params": { "target": "global", "isSaving": true } }, { "handler": "apiCall", "auth_required": true, "target": "/api/admin/templates/{{route.identifier}}/layouts/{{_global.selectedLayoutName || layout_files?.data?.[0]?.name}}", "params": { "method": "PUT", "body": { "content": "{{_global.editorContent}}", "expected_lock_version": "{{current_layout?.data?.lock_version ?? 0}}" } }, "onSuccess": [ { "handler": "setState", "params": { "target": "global", "isSaving": false } }, { "handler": "toast", "params": { "type": "success", "message": "$t:admin.templates.layout_edit.save_success" } }, { "handler": "refetchDataSource", "params": { "dataSourceId": "current_layout" } } ], "onError": [ { "handler": "setState", "params": { "target": "global", "isSaving": false } }, { "handler": "toast", "params": { "type": "error", "message": "{{error.message}}" } } ] } ] } ], "children": [ { "type": "basic", "name": "Icon", "if": "{{!_global.isSaving}}", "props": { "name": "fa-regular fa-floppy-disk", "className": "w-4 h-4" } }, { "type": "basic", "name": "Icon", "if": "{{_global.isSaving}}", "props": { "name": "fa-solid fa-spinner", "className": "spinner-sm" } }, { "type": "basic", "name": "Span", "text": "{{_global.isSaving ? '$t:admin.templates.layout_edit.saving' : '$t:admin.templates.layout_edit.save'}}" } ] }, { "type": "basic", "name": "Button", "if": "{{_global.selectedNodeKind === 'extension' && current_extension?.data?.abilities?.can_update !== false}}", "props": { "className": "flex-center gap-2 px-4 py-2 bg-gray-900 dark:bg-white text-white dark:text-gray-900 rounded-lg hover:bg-gray-800 dark:hover:bg-gray-100 transition-colors disabled:opacity-50", "disabled": "{{_global.isSaving}}" }, "actions": [ { "type": "click", "handler": "sequence", "actions": [ { "handler": "setState", "params": { "target": "global", "isSaving": true } }, { "handler": "apiCall", "auth_required": true, "target": "/api/admin/templates/{{route.identifier}}/layout-extensions/{{_global.selectedExtensionId}}", "params": { "method": "PUT", "body": { "content": "{{_global.editorContent}}", "expected_lock_version": "{{current_extension?.data?.lock_version ?? 0}}" } }, "onSuccess": [ { "handler": "setState", "params": { "target": "global", "isSaving": false } }, { "handler": "toast", "params": { "type": "success", "message": "$t:admin.templates.layout_edit.extension_save_success" } }, { "handler": "refetchDataSource", "params": { "dataSourceId": "current_extension" } }, { "handler": "refetchDataSource", "params": { "dataSourceId": "layout_extensions" } } ], "onError": [ { "handler": "setState", "params": { "target": "global", "isSaving": false } }, { "handler": "toast", "params": { "type": "error", "message": "{{error.message}}" } } ] } ] } ], "children": [ { "type": "basic", "name": "Icon", "if": "{{!_global.isSaving}}", "props": { "name": "fa-regular fa-floppy-disk", "className": "w-4 h-4" } }, { "type": "basic", "name": "Icon", "if": "{{_global.isSaving}}", "props": { "name": "fa-solid fa-spinner", "className": "spinner-sm" } }, { "type": "basic", "name": "Span", "text": "{{_global.isSaving ? '$t:admin.templates.layout_edit.saving' : '$t:admin.templates.layout_edit.save'}}" } ] } ] }, { "id": "mobile_file_selector", "type": "basic", "name": "Div", "props": { "className": "hidden" }, "responsive": { "portable": { "props": { "className": "block mt-6" } } }, "children": [ { "type": "basic", "name": "Div", "props": { "className": "admin-card" }, "children": [ { "type": "basic", "name": "Div", "props": { "className": "flex-center gap-2 mb-2" }, "children": [ { "type": "basic", "name": "Icon", "props": { "name": "fa-regular fa-folder-open", "className": "text-secondary w-5 h-5" } }, { "type": "basic", "name": "Span", "props": { "className": "text-primary font-medium" }, "text": "$t:admin.templates.layout_edit.layout_files" } ] }, { "type": "composite", "name": "RichSelect", "props": { "value": "{{_global.selectedNodeKind === 'extension' ? ('ext:' + _global.selectedExtensionId) : ('layout:' + (_global.selectedLayoutName || layout_files?.data?.[0]?.name))}}", "options": "{{[...(layout_files?.data ?? []).map(f => ({ value: 'layout:' + f.name, label: f.name, name: f.name, kind: 'layout', size: f.size_formatted, updated_at: f.updated_at, has_update: f.has_update, is_override: false })), ...(layout_extensions?.data ?? []).flatMap(g => (g.extensions ?? []).map(e => ({ value: 'ext:' + e.id, label: e.target_name, name: e.target_name, kind: 'extension', size: e.source_label, updated_at: e.extension_type, has_update: false, is_override: e.is_override })))]}}", "placeholder": "$t:admin.templates.layout_edit.select_file" }, "component_layout": { "item": [ { "type": "basic", "name": "Div", "props": { "className": "flex flex-col w-full" }, "children": [ { "type": "basic", "name": "Div", "props": { "className": "flex-between" }, "children": [ { "type": "basic", "name": "Span", "props": { "className": "text-primary font-medium" }, "text": "{{item.name}}" }, { "type": "basic", "name": "Span", "if": "{{item.has_update}}", "props": { "className": "px-2 py-0.5 text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded" }, "text": "$t:admin.templates.layout_edit.update_available" }, { "type": "basic", "name": "Span", "if": "{{item.is_override}}", "props": { "className": "px-2 py-0.5 text-xs bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 rounded" }, "text": "$t:admin.templates.layout_edit.extension_override_badge" } ] }, { "type": "basic", "name": "Div", "props": { "className": "flex-center gap-2 form-hint" }, "children": [ { "type": "basic", "name": "Span", "text": "{{item.size}}" }, { "type": "basic", "name": "Span", "text": "•" }, { "type": "basic", "name": "Span", "text": "{{item.updated_at}}" } ] } ] } ], "selected": [ { "type": "basic", "name": "Span", "props": { "className": "truncate" }, "text": "{{item.name}}" } ] }, "actions": [ { "type": "change", "handler": "conditions", "conditions": [ { "if": "{{$event.target.value.slice(0, 4) === 'ext:'}}", "then": [ { "handler": "setState", "params": { "target": "global", "selectedNodeKind": "extension", "selectedExtensionId": "{{Number($event.target.value.slice(4))}}" } }, { "handler": "replaceUrl", "params": { "query": { "route": "" } } }, { "handler": "refetchDataSource", "params": { "dataSourceId": "current_extension" } }, { "handler": "refetchDataSource", "params": { "dataSourceId": "extension_versions" } } ] }, { "then": [ { "handler": "setState", "params": { "target": "global", "selectedNodeKind": "layout", "selectedLayoutName": "{{$event.target.value.slice(7)}}" } }, { "handler": "replaceUrl", "params": { "query": { "route": "{{(layout_files?.data ?? []).find(f => f.name === $event.target.value.slice(7))?.route_path ?? ''}}" } } }, { "handler": "refetchDataSource", "params": { "dataSourceId": "current_layout" } } ] } ] } ] } ] } ] }, { "id": "main_grid", "type": "basic", "name": "Div", "props": { "className": "mt-6 flex flex-row gap-6" }, "responsive": { "portable": { "props": { "className": "mt-6 row-stack" } } }, "children": [ { "id": "file_list_card", "type": "basic", "name": "Div", "props": { "className": "admin-card" }, "responsive": { "portable": { "props": { "className": "hidden" } } }, "children": [ { "type": "basic", "name": "Div", "props": { "className": "p-4 border-b border-gray-200 dark:border-gray-700" }, "children": [ { "type": "basic", "name": "Div", "props": { "className": "flex-center gap-2" }, "children": [ { "type": "basic", "name": "Icon", "props": { "name": "fa-regular fa-folder-open", "className": "text-secondary w-5 h-5" } }, { "type": "basic", "name": "Span", "props": { "className": "text-primary font-medium" }, "text": "$t:admin.templates.layout_edit.layout_files" } ] }, { "type": "basic", "name": "P", "props": { "className": "mt-1 text-label-subtle" }, "text": "$t:admin.templates.layout_edit.select_file_prompt" } ] }, { "type": "basic", "name": "Div", "props": { "className": "max-h-[calc(100vh-320px)] overflow-y-auto" }, "children": [ { "type": "basic", "name": "Div", "props": { "className": "px-3 py-2 bg-gray-50 dark:bg-gray-700/50 border-b border-gray-200 dark:border-gray-700" }, "children": [ { "type": "basic", "name": "Span", "props": { "className": "text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400" }, "text": "$t:admin.templates.layout_edit.section_layouts" } ] }, { "type": "basic", "name": "Div", "props": { "className": "divider-list" }, "children": [ { "type": "basic", "name": "Div", "iteration": { "source": "{{layout_files?.data ?? []}}", "item_var": "file", "index_var": "fileIdx" }, "props": { "className": "p-3 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors {{_global.selectedNodeKind !== 'extension' && (_global.selectedLayoutName || layout_files?.data?.[0]?.name) === file.name ? 'bg-blue-50 dark:bg-blue-900/30 border-l-4 border-blue-500' : ''}}" }, "actions": [ { "type": "click", "handler": "sequence", "actions": [ { "handler": "setState", "params": { "target": "global", "selectedNodeKind": "layout", "selectedLayoutName": "{{file.name}}" } }, { "handler": "replaceUrl", "params": { "query": { "route": "{{file.route_path ?? ''}}" } } }, { "handler": "refetchDataSource", "params": { "dataSourceId": "current_layout" } } ] } ], "children": [ { "type": "basic", "name": "Div", "props": { "className": "flex-center gap-2" }, "children": [ { "type": "basic", "name": "Icon", "props": { "name": "fa-regular fa-file-code", "className": "w-4 h-4 text-gray-400 dark:text-gray-500" } }, { "type": "basic", "name": "Span", "props": { "className": "text-primary font-medium text-sm" }, "text": "{{file.name}}.json" }, { "type": "basic", "name": "Span", "if": "{{file.has_update}}", "props": { "className": "px-1.5 py-0.5 text-xs bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400 rounded" }, "text": "$t:admin.templates.layout_edit.updated_badge" } ] }, { "type": "basic", "name": "P", "props": { "className": "form-hint" }, "text": "{{raw:file.description || file.name}}" }, { "type": "basic", "name": "Div", "props": { "className": "text-hint mt-1 flex-center gap-2" }, "children": [ { "type": "basic", "name": "Span", "text": "{{file.size_formatted || '0 KB'}}" }, { "type": "basic", "name": "Span", "text": "•" }, { "type": "basic", "name": "Span", "text": "{{file.updated_at}}" } ] } ] } ] }, { "type": "basic", "name": "Div", "props": { "className": "px-3 py-2 bg-gray-50 dark:bg-gray-700/50 border-y border-gray-200 dark:border-gray-700" }, "children": [ { "type": "basic", "name": "Span", "props": { "className": "text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400" }, "text": "$t:admin.templates.layout_edit.section_extensions" } ] }, { "type": "basic", "name": "Div", "if": "{{(layout_extensions?.data?.length ?? 0) === 0}}", "props": { "className": "p-3 text-xs text-gray-400 dark:text-gray-500" }, "text": "$t:admin.templates.layout_edit.no_extensions" }, { "type": "basic", "name": "Div", "iteration": { "source": "{{layout_extensions?.data ?? []}}", "item_var": "extGroup", "index_var": "extGroupIdx" }, "children": [ { "type": "basic", "name": "Div", "props": { "className": "px-3 py-1.5 flex-center gap-1.5 bg-gray-100/60 dark:bg-gray-700/30" }, "children": [ { "type": "basic", "name": "Icon", "props": { "name": "{{extGroup.source_type === 'plugin' ? 'fa-solid fa-plug' : 'fa-solid fa-puzzle-piece'}}", "className": "w-3.5 h-3.5 text-gray-500 dark:text-gray-400" } }, { "type": "basic", "name": "Span", "props": { "className": "text-xs font-medium text-gray-600 dark:text-gray-300 truncate" }, "text": "{{extGroup.source_label}}" } ] }, { "type": "basic", "name": "Div", "props": { "className": "divider-list" }, "children": [ { "type": "basic", "name": "Div", "iteration": { "source": "{{extGroup.extensions ?? []}}", "item_var": "ext", "index_var": "extIdx" }, "props": { "className": "p-3 pl-5 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors {{_global.selectedNodeKind === 'extension' && _global.selectedExtensionId === ext.id ? 'bg-blue-50 dark:bg-blue-900/30 border-l-4 border-blue-500' : ''}} {{ext.is_active === false ? 'opacity-50' : ''}}" }, "actions": [ { "type": "click", "handler": "sequence", "actions": [ { "handler": "setState", "params": { "target": "global", "selectedNodeKind": "extension", "selectedExtensionId": "{{ext.id}}" } }, { "handler": "replaceUrl", "params": { "query": { "route": "" } } }, { "handler": "refetchDataSource", "params": { "dataSourceId": "current_extension" } }, { "handler": "refetchDataSource", "params": { "dataSourceId": "extension_versions" } } ] } ], "children": [ { "type": "basic", "name": "Div", "props": { "className": "flex-center gap-2 flex-wrap" }, "children": [ { "type": "basic", "name": "Icon", "props": { "name": "fa-solid fa-circle-plus", "className": "w-3.5 h-3.5 text-gray-400 dark:text-gray-500" } }, { "type": "basic", "name": "Span", "props": { "className": "text-primary font-medium text-sm truncate" }, "text": "{{ext.target_name}}" }, { "type": "basic", "name": "Span", "props": { "className": "px-1.5 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded" }, "text": "{{ext.extension_type === 'overlay' ? '$t:admin.templates.layout_edit.extension_type_overlay' : '$t:admin.templates.layout_edit.extension_type_point'}}" }, { "type": "basic", "name": "Span", "if": "{{ext.is_override}}", "props": { "className": "px-1.5 py-0.5 text-xs bg-indigo-100 dark:bg-indigo-900/30 text-indigo-700 dark:text-indigo-400 rounded" }, "text": "$t:admin.templates.layout_edit.extension_override_badge" }, { "type": "basic", "name": "Span", "if": "{{ext.is_modified}}", "props": { "className": "px-1.5 py-0.5 text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded" }, "text": "$t:admin.templates.layout_edit.extension_modified_badge" }, { "type": "basic", "name": "Span", "if": "{{ext.is_active === false}}", "props": { "className": "px-1.5 py-0.5 text-xs bg-gray-200 dark:bg-gray-600 text-gray-500 dark:text-gray-400 rounded" }, "text": "$t:admin.templates.layout_edit.extension_inactive_badge" } ] }, { "type": "basic", "name": "Div", "props": { "className": "text-hint mt-1 flex-center gap-2" }, "children": [ { "type": "basic", "name": "Span", "text": "$t:admin.templates.layout_edit.extension_priority|priority={{ext.priority ?? 100}}" }, { "type": "basic", "name": "Span", "text": "•" }, { "type": "basic", "name": "Span", "text": "{{ext.size_formatted ?? '0 B'}}" } ] } ] } ] } ] } ] } ] }, { "id": "editor_card", "type": "basic", "name": "Div", "props": { "className": "admin-card" }, "children": [ { "type": "basic", "name": "Div", "props": { "className": "p-4 border-b border-gray-200 dark:border-gray-700" }, "children": [ { "type": "basic", "name": "Div", "props": { "className": "flex-start justify-between gap-4" }, "responsive": { "portable": { "props": { "className": "row-stack" } } }, "children": [ { "type": "basic", "name": "Div", "children": [ { "type": "basic", "name": "Div", "props": { "className": "flex-center gap-2 flex-wrap" }, "children": [ { "type": "basic", "name": "Icon", "props": { "name": "fa-regular fa-file-code", "className": "text-secondary w-5 h-5" } }, { "type": "basic", "name": "Span", "if": "{{_global.selectedNodeKind !== 'extension'}}", "props": { "className": "text-primary font-medium" }, "text": "{{_global.selectedLayoutName || layout_files?.data?.[0]?.name || 'main'}}.json" }, { "type": "basic", "name": "Span", "if": "{{_global.selectedNodeKind === 'extension'}}", "props": { "className": "text-primary font-medium" }, "text": "{{current_extension?.data?.target_name ?? ''}}" }, { "type": "basic", "name": "Span", "if": "{{_global.selectedNodeKind === 'extension'}}", "props": { "className": "px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded" }, "text": "{{current_extension?.data?.source_label ?? ''}}" }, { "type": "basic", "name": "Span", "if": "{{_global.selectedNodeKind !== 'extension' && current_layout?.data?.has_update}}", "props": { "className": "px-2 py-0.5 text-xs bg-red-100 dark:bg-red-900 text-red-600 dark:text-red-400 rounded" }, "text": "$t:admin.templates.layout_edit.layout_updated_badge" }, { "type": "basic", "name": "Span", "if": "{{_global.selectedNodeKind === 'extension' && current_extension?.data?.is_modified}}", "props": { "className": "px-2 py-0.5 text-xs bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400 rounded" }, "text": "$t:admin.templates.layout_edit.extension_modified_badge" } ] }, { "type": "basic", "name": "P", "if": "{{_global.selectedNodeKind !== 'extension'}}", "props": { "className": "mt-1 text-label-subtle" }, "text": "{{raw:current_layout?.data?.description || ''}}" } ] }, { "type": "basic", "name": "Div", "props": { "className": "flex-center gap-3" }, "children": [ { "type": "basic", "name": "Span", "props": { "className": "text-label-subtle" }, "text": "$t:admin.templates.layout_edit.modified_at|date={{current_layout?.data?.updated_at ?? ''}}" }, { "type": "basic", "name": "Button", "props": { "className": "flex-center gap-2 px-3 py-1.5 border border-gray-300 dark:border-gray-600 text-body rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" }, "actions": [ { "type": "click", "handler": "conditions", "conditions": [ { "if": "{{_global.selectedNodeKind === 'extension'}}", "then": [ { "handler": "refetchDataSource", "params": { "dataSourceId": "extension_versions" } }, { "handler": "openModal", "target": "extension_version_history_modal" } ] }, { "then": [ { "handler": "refetchDataSource", "params": { "dataSourceId": "layout_versions" } }, { "handler": "openModal", "target": "version_history_modal" } ] } ] } ], "children": [ { "type": "basic", "name": "Icon", "props": { "name": "fa-solid fa-clock-rotate-left", "className": "w-4 h-4" } }, { "type": "basic", "name": "Span", "text": "$t:admin.templates.layout_edit.version_history_button" } ] } ] } ] } ] }, { "type": "basic", "name": "Div", "props": { "className": "flex-1" }, "children": [ { "type": "composite", "name": "CodeEditor", "props": { "value": "{{raw:_global.editorContent ?? current_layout?.data?.content ?? '{}'}}", "language": "json", "theme": "vs-dark", "height": "calc(100vh - 340px)" }, "actions": [ { "event": "onChange", "type": "change", "handler": "setState", "debounce": 300, "params": { "target": "global", "editorContent": "{{$event.target.value}}" } } ] } ] }, { "type": "basic", "name": "Div", "props": { "className": "p-3 bg-gray-50 dark:bg-gray-700 border-t border-gray-200 dark:border-gray-600" }, "children": [ { "type": "basic", "name": "Div", "props": { "className": "flex-center gap-2 text-label-subtle" }, "children": [ { "type": "basic", "name": "Icon", "props": { "name": "fa-solid fa-circle-info", "className": "w-4 h-4" } }, { "type": "basic", "name": "Span", "text": "$t:admin.templates.layout_edit.save_creates_view" } ] } ] } ] } ] } ] } ] }, "modals": [ { "partial": "partials/admin_template_layout_edit/_modal_version_history.json" }, { "partial": "partials/admin_template_layout_edit/_modal_extension_version_history.json" }, { "partial": "partials/admin_template_layout_edit/_modal_extension_preview_layout.json" } ] }