feat(editor): restore the dialogs, context menus and gradient tools

Author: dnlblasco

resources/js/components/ContextMenu.tsx

@@ -0,0 +1,68 @@
+import { useEffect, useRef } from 'react';
+
+export interface ContextMenuEntry {
+    label: string;
+    shortcut?: string;
+    danger?: boolean;
+    disabled?: boolean;
+    onSelect: () => void;
+}
+
+interface ContextMenuProps {
+    x: number;
+    y: number;
+    entries: (ContextMenuEntry | 'divider')[];
+    onDismiss: () => void;
+}
+
+/** The editor's right click menu, dismissed by Escape or a click outside. */
+export function ContextMenu({ x, y, entries, onDismiss }: ContextMenuProps) {
+    const menu = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const dismiss = (event: MouseEvent): void => {
+            if (menu.current !== null && !menu.current.contains(event.target as Node)) {
+                onDismiss();
+            }
+        };
+
+        const escape = (event: KeyboardEvent): void => {
+            if (event.key === 'Escape') {
+                onDismiss();
+            }
+        };
+
+        document.addEventListener('mousedown', dismiss);
+        document.addEventListener('keydown', escape);
+
+        return () => {
+            document.removeEventListener('mousedown', dismiss);
+            document.removeEventListener('keydown', escape);
+        };
+    }, [onDismiss]);
+
+    return (
+        <div ref={menu} role="menu" style={{ left: x, top: y }} className="context-menu">
+            {entries.map((entry, index) =>
+                entry === 'divider' ? (
+                    <div key={`divider-${index}`} className="context-menu-divider" />
+                ) : (
+                    <button
+                        key={entry.label}
+                        type="button"
+                        role="menuitem"
+                        disabled={entry.disabled}
+                        onClick={() => {
+                            entry.onSelect();
+                            onDismiss();
+                        }}
+                        className={`context-menu-item${entry.danger === true ? ' danger' : ''}`}
+                    >
+                        {entry.label}
+                        {entry.shortcut !== undefined && <span className="shortcut">{entry.shortcut}</span>}
+                    </button>
+                ),
+            )}
+        </div>
+    );
+}

resources/js/components/DeleteMenuDialog.tsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { Modal } from './Modal';
+import type { MenuDescriptor } from '../types/editor';
+
+interface DeleteMenuDialogProps {
+    menu: MenuDescriptor;
+    onConfirm: () => void;
+    onClose: () => void;
+}
+
+/**
+ * Deleting asks twice, as it did before the migration: the file is removed from
+ * the server and there is no undo.
+ */
+export function DeleteMenuDialog({ menu, onConfirm, onClose }: DeleteMenuDialogProps) {
+    const [confirming, setConfirming] = useState(false);
+
+    if (!confirming) {
+        return (
+            <Modal
+                title="⚠️ Confirm Deletion"
+                onClose={onClose}
+                footer={
+                    <>
+                        <button type="button" className="btn btn-secondary" onClick={onClose}>
+                            Cancel
+                        </button>
+                        <button type="button" className="btn btn-danger" onClick={() => setConfirming(true)}>
+                            Delete
+                        </button>
+                    </>
+                }
+            >
+                <p style={{ color: 'var(--error-color)', fontWeight: 'bold', marginBottom: '12px' }}>
+                    WARNING! This action is irreversible.
+                </p>
+                <p style={{ marginBottom: '8px' }}>You are about to delete the menu:</p>
+                <p
+                    style={{
+                        background: 'var(--bg-secondary)',
+                        padding: '8px',
+                        borderRadius: '4px',
+                        fontFamily: 'monospace',
+                        marginBottom: '12px',
+                    }}
+                >
+                    📄 {menu.fileName}
+                </p>
+                <p style={{ color: 'var(--text-secondary)', fontSize: '13px' }}>
+                    The file will be permanently deleted from the server.
+                </p>
+            </Modal>
+        );
+    }
+
+    return (
+        <Modal
+            title="⚠️ Final Confirmation"
+            onClose={onClose}
+            footer={
+                <>
+                    <button type="button" className="btn btn-secondary" onClick={onClose}>
+                        Cancel
+                    </button>
+                    <button type="button" className="btn btn-danger" onClick={onConfirm}>
+                        Delete permanently
+                    </button>
+                </>
+            }
+        >
+            <p style={{ color: 'var(--error-color)', fontWeight: 'bold', marginBottom: '12px' }}>FINAL WARNING!</p>
+            <p>
+                <code>{menu.fileName}</code> will be deleted from the server and cannot be recovered.
+            </p>
+        </Modal>
+    );
+}

resources/js/components/DemoWorkspace.tsx

@@ -55,8 +55,11 @@ export function DemoWorkspace() {
             busy={false}
             canSave={false}
             onToggleVisual={() => setVisualMode(mode => !mode)}
-            onValidate={() =>
-                current !== null && setDiagnostics(validateMenuSource(current.content, current.menu.platform))
+            onRefresh={() => notify('info', 'The demo always shows the sample menus.')}
+            onToggleOutput={() =>
+                setDiagnostics(current === null || diagnostics !== null
+                    ? null
+                    : validateMenuSource(current.content, current.menu.platform))
             }
             onSave={() => notify('info', 'The demo cannot save. Open the editor from your server to keep changes.')}
             onOpen={menu => void openMenu(menu)}
@@ -65,6 +68,7 @@ export function DemoWorkspace() {
             statusLeft={`${store.menus.filter(menu => menu.platform !== 'CONFIG').length} menus loaded`}
             statusRight={EDITOR_VERSION}
             onCloseDiagnostics={() => setDiagnostics(null)}
+            onReloadTab={() => notify('info', 'The demo always shows the sample menus.')}
         />
     );
 }

resources/js/components/EditorTabs.tsx

@@ -1,18 +1,33 @@
 import { useState, type ReactNode } from 'react';
 import { isDirty, type OpenTab } from '../editor/store';
+import { ContextMenu } from './ContextMenu';
 
 interface EditorTabsProps {
     tabs: OpenTab[];
     activeKey: string | null;
     actions?: ReactNode;
     onActivate: (key: string) => void;
     onClose: (key: string) => void;
+    onCloseOthers: (key: string) => void;
+    onCloseAll: () => void;
+    onReload: (key: string) => void;
     onReorder: (from: number, to: number) => void;
 }
 
-export function EditorTabs({ tabs, activeKey, actions, onActivate, onClose, onReorder }: EditorTabsProps) {
+export function EditorTabs({
+    tabs,
+    activeKey,
+    actions,
+    onActivate,
+    onClose,
+    onCloseOthers,
+    onCloseAll,
+    onReload,
+    onReorder,
+}: EditorTabsProps) {
     const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
     const [overIndex, setOverIndex] = useState<number | null>(null);
+    const [menu, setMenu] = useState<{ key: string; x: number; y: number } | null>(null);
 
     return (
         <div className="editor-tabs">
@@ -42,6 +57,10 @@ export function EditorTabs({ tabs, activeKey, actions, onActivate, onClose, onRe
                         }}
                         onClick={() => onActivate(tab.key)}
                         onKeyDown={event => event.key === 'Enter' && onActivate(tab.key)}
+                        onContextMenu={event => {
+                            event.preventDefault();
+                            setMenu({ key: tab.key, x: event.clientX, y: event.clientY });
+                        }}
                         className={[
                             'editor-tab',
                             tab.key === activeKey ? 'active' : '',
@@ -69,6 +88,21 @@ export function EditorTabs({ tabs, activeKey, actions, onActivate, onClose, onRe
             </div>
 
             {actions !== undefined && <div className="tabs-actions">{actions}</div>}
+
+            {menu !== null && (
+                <ContextMenu
+                    x={menu.x}
+                    y={menu.y}
+                    onDismiss={() => setMenu(null)}
+                    entries={[
+                        { label: 'Reload from server', onSelect: () => onReload(menu.key) },
+                        'divider',
+                        { label: 'Close', onSelect: () => onClose(menu.key) },
+                        { label: 'Close others', disabled: tabs.length < 2, onSelect: () => onCloseOthers(menu.key) },
+                        { label: 'Close all', onSelect: onCloseAll },
+                    ]}
+                />
+            )}
         </div>
     );
 }