From 2fdbaa630c2496a1afd610801978348d18508ea7 Mon Sep 17 00:00:00 2001
From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com>
Date: Sun, 23 Feb 2025 13:21:56 +0100
Subject: [PATCH 1/2] Add modals directly from views instead of controllers

---
 .../Panel/Controllers/AbstractController.php  | 13 ++++-------
 .../Panel/Controllers/DashboardController.php |  4 ----
 .../Panel/Controllers/OptionsController.php   |  4 ----
 .../src/Panel/Controllers/PagesController.php | 20 +----------------
 .../src/Panel/Controllers/ToolsController.php |  2 --
 .../src/Panel/Controllers/UsersController.php | 10 ---------
 formwork/src/Panel/Modals/Modal.php           | 18 +++++++++++++++
 formwork/src/Panel/Modals/ModalCollection.php |  2 ++
 formwork/src/Panel/Modals/Modals.php          | 22 +++++++++++++++++++
 .../Services/Loaders/PanelServiceLoader.php   |  2 ++
 panel/views/dashboard/index.php               |  2 ++
 panel/views/fields/markdown.php               |  3 +++
 panel/views/fields/page/imagepicker.php       | 18 ++++++++-------
 panel/views/fields/partials/filelist.php      |  2 ++
 panel/views/options/site.php                  |  2 ++
 panel/views/options/system.php                |  2 ++
 panel/views/pages/editor.php                  |  3 +++
 panel/views/pages/file.php                    |  3 +++
 panel/views/pages/index.php                   |  2 ++
 panel/views/pages/tree.php                    |  2 ++
 panel/views/tools/backups.php                 |  2 ++
 panel/views/users/index.php                   |  4 +++-
 panel/views/users/profile.php                 |  5 ++++-
 23 files changed, 89 insertions(+), 58 deletions(-)
 create mode 100644 formwork/src/Panel/Modals/Modals.php

diff --git a/formwork/src/Panel/Controllers/AbstractController.php b/formwork/src/Panel/Controllers/AbstractController.php
index 869a8532b..9484ab66b 100644
--- a/formwork/src/Panel/Controllers/AbstractController.php
+++ b/formwork/src/Panel/Controllers/AbstractController.php
@@ -5,8 +5,7 @@
 use Formwork\Cms\Site;
 use Formwork\Controllers\AbstractController as BaseAbstractController;
 use Formwork\Panel\Modals\Modal;
-use Formwork\Panel\Modals\ModalCollection;
-use Formwork\Panel\Modals\ModalFactory;
+use Formwork\Panel\Modals\Modals;
 use Formwork\Panel\Panel;
 use Formwork\Parsers\Json;
 use Formwork\Router\Router;
@@ -18,20 +17,16 @@
 
 abstract class AbstractController extends BaseAbstractController
 {
-    protected ModalCollection $modals;
-
     public function __construct(
         private Container $container,
         protected readonly Router $router,
         protected readonly CsrfToken $csrfToken,
         protected readonly Translations $translations,
-        protected readonly ModalFactory $modalFactory,
+        protected readonly Modals $modals,
         protected readonly Site $site,
         protected readonly Panel $panel,
     ) {
         $this->container->call(parent::__construct(...));
-
-        $this->modals = new ModalCollection();
     }
 
     /**
@@ -65,8 +60,8 @@ protected function hasPermission(string $permission): bool
      */
     protected function modal(string $name): Modal
     {
-        $this->modals->add($modal = $this->modalFactory->make($name));
-        return $modal;
+        $this->modals->add($name);
+        return $this->modals->get($name);
     }
 
     /**
diff --git a/formwork/src/Panel/Controllers/DashboardController.php b/formwork/src/Panel/Controllers/DashboardController.php
index 735a80f0e..e97a58509 100644
--- a/formwork/src/Panel/Controllers/DashboardController.php
+++ b/formwork/src/Panel/Controllers/DashboardController.php
@@ -17,10 +17,6 @@ public function index(Statistics $statistics): Response
             return $this->forward(ErrorsController::class, 'forbidden');
         }
 
-        $this->modal('newPage');
-
-        $this->modal('deletePage');
-
         return new Response($this->view('dashboard.index', [
             'title'             => $this->translate('panel.dashboard.dashboard'),
             'lastModifiedPages' => $this->view('pages.tree', [
diff --git a/formwork/src/Panel/Controllers/OptionsController.php b/formwork/src/Panel/Controllers/OptionsController.php
index b82c68c1f..cccd04c88 100644
--- a/formwork/src/Panel/Controllers/OptionsController.php
+++ b/formwork/src/Panel/Controllers/OptionsController.php
@@ -66,8 +66,6 @@ public function systemOptions(Schemes $schemes): Response
 
         $fields->setValues($this->config->get('system'));
 
-        $this->modal('changes');
-
         return new Response($this->view('options.system', [
             'title' => $this->translate('panel.options.options'),
             'tabs'  => $this->view('options.tabs', [
@@ -111,8 +109,6 @@ public function siteOptions(Schemes $schemes): Response
 
         $fields->setValues($this->site->data());
 
-        $this->modal('changes');
-
         return new Response($this->view('options.site', [
             'title' => $this->translate('panel.options.options'),
             'tabs'  => $this->view('options.tabs', [
diff --git a/formwork/src/Panel/Controllers/PagesController.php b/formwork/src/Panel/Controllers/PagesController.php
index 43768e76c..9343c1c60 100644
--- a/formwork/src/Panel/Controllers/PagesController.php
+++ b/formwork/src/Panel/Controllers/PagesController.php
@@ -39,10 +39,6 @@ public function index(): Response
             return $this->forward(ErrorsController::class, 'forbidden');
         }
 
-        $this->modal('newPage');
-
-        $this->modal('deletePage');
-
         $pages = $this->site->pages();
 
         $indexOffset = $pages->indexOf($this->site->indexPage());
@@ -194,17 +190,7 @@ public function edit(RouteParams $routeParams): Response
                 return $this->redirect($this->generateRoute('panel.pages.edit', ['page' => $page->route()]));
         }
 
-        $this->modal('images');
-
-        $this->modal('link');
-
-        $this->modal('changes');
-
-        $this->modal('deletePage');
-
-        $this->modal('deleteFile');
-
-        $this->modal('renameFile');
+        $this->modal('images')->setFieldsModel($page);
 
         $contentHistory = $page->contentPath()
             ? new ContentHistory($page->contentPath())
@@ -552,10 +538,6 @@ public function file(RouteParams $routeParams): Response
                 return $this->redirect($this->generateRoute('panel.pages.file', ['page' => $page->route(), 'filename' => $filename]));
         }
 
-        $this->modal('renameFile');
-        $this->modal('deleteFile');
-        $this->modal('changes');
-
         return new Response($this->view('pages.file', [
             'title' => $file->name(),
             'page'  => $page,
diff --git a/formwork/src/Panel/Controllers/ToolsController.php b/formwork/src/Panel/Controllers/ToolsController.php
index 5bac06fc8..5892d8703 100644
--- a/formwork/src/Panel/Controllers/ToolsController.php
+++ b/formwork/src/Panel/Controllers/ToolsController.php
@@ -49,8 +49,6 @@ public function backups(): Response
             'size'        => FileSystem::formatSize(FileSystem::size($path)),
         ]);
 
-        $this->modal('deleteFile');
-
         return new Response($this->view('tools.backups', [
             'title' => $this->translate('panel.tools.backups'),
             'tabs'  => $this->view('tools.tabs', [
diff --git a/formwork/src/Panel/Controllers/UsersController.php b/formwork/src/Panel/Controllers/UsersController.php
index 0765ba37d..c5cb8c846 100644
--- a/formwork/src/Panel/Controllers/UsersController.php
+++ b/formwork/src/Panel/Controllers/UsersController.php
@@ -30,10 +30,6 @@ public function index(): Response
             return $this->forward(ErrorsController::class, 'forbidden');
         }
 
-        $this->modal('newUser');
-
-        $this->modal('deleteUser');
-
         return new Response($this->view('users.index', [
             'title' => $this->translate('panel.users.users'),
             'users' => $this->site->users()->sortBy('username'),
@@ -198,12 +194,6 @@ public function profile(RouteParams $routeParams): Response
 
         $fields = $fields->setValues($user);
 
-        $this->modal('changes');
-
-        $this->modal('deleteUser');
-
-        $this->modal('deleteUserImage');
-
         return new Response($this->view('users.profile', [
             'title'  => $this->translate('panel.users.userProfile', $user->username()),
             'user'   => $user,
diff --git a/formwork/src/Panel/Modals/Modal.php b/formwork/src/Panel/Modals/Modal.php
index 69f61e836..4389cbeef 100644
--- a/formwork/src/Panel/Modals/Modal.php
+++ b/formwork/src/Panel/Modals/Modal.php
@@ -6,6 +6,7 @@
 use Formwork\Data\Traits\DataArrayable;
 use Formwork\Fields\FieldCollection;
 use Formwork\Fields\FieldFactory;
+use Formwork\Model\Model;
 use Formwork\Translations\Translation;
 use Formwork\Utils\Arr;
 use Formwork\Utils\Str;
@@ -20,6 +21,11 @@ class Modal implements Arrayable
      */
     protected string $id;
 
+    /**
+     * Fields model
+     */
+    protected Model $fieldsModel;
+
     /**
      * Modal buttons
      */
@@ -96,9 +102,21 @@ public function fields(): FieldCollection
         // @phpstan-ignore argument.templateType
         $fieldCollection->setMultiple(Arr::map($this->data['fields'] ?? [], fn($data, $name) => $this->fieldFactory->make($this->id . '.' . $name, $data, $fieldCollection)));
 
+        if (isset($this->fieldsModel)) {
+            $fieldCollection->setModel($this->fieldsModel);
+        }
+
         return $fieldCollection;
     }
 
+    /**
+     * Set fields model
+     */
+    public function setFieldsModel(Model $model): void
+    {
+        $this->fieldsModel = $model;
+    }
+
     /**
      * Get modal buttons
      */
diff --git a/formwork/src/Panel/Modals/ModalCollection.php b/formwork/src/Panel/Modals/ModalCollection.php
index 293d9d1f2..6e1ae6886 100644
--- a/formwork/src/Panel/Modals/ModalCollection.php
+++ b/formwork/src/Panel/Modals/ModalCollection.php
@@ -6,6 +6,8 @@
 
 class ModalCollection extends AbstractCollection
 {
+    protected bool $associative = true;
+
     protected ?string $dataType = Modal::class;
 
     protected bool $mutable = true;
diff --git a/formwork/src/Panel/Modals/Modals.php b/formwork/src/Panel/Modals/Modals.php
new file mode 100644
index 000000000..34690a9ed
--- /dev/null
+++ b/formwork/src/Panel/Modals/Modals.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace Formwork\Panel\Modals;
+
+class Modals extends ModalCollection
+{
+    public function __construct(
+        private ModalFactory $modalFactory
+    ) {}
+
+    /**
+     * Add a modal by name. If the modal is already present, it won't be added again
+     *
+     * @param string $name
+     */
+    public function add(mixed $name): void
+    {
+        if (!$this->has($name)) {
+            $this->set($name, $this->modalFactory->make($name));
+        }
+    }
+}
diff --git a/formwork/src/Services/Loaders/PanelServiceLoader.php b/formwork/src/Services/Loaders/PanelServiceLoader.php
index de8380055..14ee9e460 100644
--- a/formwork/src/Services/Loaders/PanelServiceLoader.php
+++ b/formwork/src/Services/Loaders/PanelServiceLoader.php
@@ -8,6 +8,7 @@
 use Formwork\Log\Registry;
 use Formwork\Panel\Controllers\ErrorsController;
 use Formwork\Panel\Modals\ModalFactory;
+use Formwork\Panel\Modals\Modals;
 use Formwork\Panel\Panel;
 use Formwork\Panel\Security\AccessLimiter;
 use Formwork\Schemes\Schemes;
@@ -41,6 +42,7 @@ public function load(Container $container): Panel
         $this->request->session()->setDuration($this->config->get('system.panel.sessionTimeout') * 60);
 
         $container->define(ModalFactory::class);
+        $container->define(Modals::class);
 
         return $container->build(Panel::class);
     }
diff --git a/panel/views/dashboard/index.php b/panel/views/dashboard/index.php
index 70aec3189..583890e12 100644
--- a/panel/views/dashboard/index.php
+++ b/panel/views/dashboard/index.php
@@ -1,5 +1,7 @@
 <?php $this->layout('panel') ?>
 
+<?php $modals->add('newPage') ?>
+
 <div data-view="dashboard">
     <div class="header">
         <div class="header-title"><?= $this->translate('panel.dashboard.dashboard') ?></div>
diff --git a/panel/views/fields/markdown.php b/panel/views/fields/markdown.php
index 5cb299af4..9deb4a35e 100644
--- a/panel/views/fields/markdown.php
+++ b/panel/views/fields/markdown.php
@@ -1,4 +1,7 @@
 <?php $this->layout('fields.field') ?>
+
+<?php $modals->addMultiple(['images', 'link']) ?>
+
 <div class="editor-wrap">
     <div class="editor-toolbar">
         <button type="button" class="button toolbar-button editor-toggle-markdown" data-command="toggle-markdown" title="<?= $this->translate('panel.editor.toggleMarkdown') ?>" aria-label="<?= $this->translate('panel.editor.toggleMarkdown') ?>"><?= $this->icon('markdown') ?></button>
diff --git a/panel/views/fields/page/imagepicker.php b/panel/views/fields/page/imagepicker.php
index 716c805b1..c3035d433 100644
--- a/panel/views/fields/page/imagepicker.php
+++ b/panel/views/fields/page/imagepicker.php
@@ -3,11 +3,13 @@
     <span class="image-picker-empty-state-icon"><?= $this->icon('image') ?></span>
     <h4 class="h5"><?= $this->translate('panel.modal.images.noImages') ?></h4>
 </div>
-<select class="form-input image-picker" id="<?= $field->name() ?>">
-    <?php foreach ($page->images() as $image) : ?>
-        <option <?= $this->attr([
-                    'value'          => $page->uri($image, includeLanguage: false),
-                    'data-thumbnail' => $image->square(300, 'contain')->uri(),
-                ]) ?>><?= $image ?></option>
-    <?php endforeach ?>
-</select>
\ No newline at end of file
+<?php if (($model = $field->parent()->model())?->has('files')): ?>
+    <select class="form-input image-picker" id="<?= $field->name() ?>">
+        <?php foreach ($model->files()->filterBy('type', 'image') as $image) : ?>
+            <option <?= $this->attr([
+                        'value'          => $page->uri($image, includeLanguage: false),
+                        'data-thumbnail' => $image->square(300, 'contain')->uri(),
+                    ]) ?>><?= $image ?></option>
+        <?php endforeach ?>
+    </select>
+<?php endif ?>
\ No newline at end of file
diff --git a/panel/views/fields/partials/filelist.php b/panel/views/fields/partials/filelist.php
index e6071fdd2..0d787813b 100644
--- a/panel/views/fields/partials/filelist.php
+++ b/panel/views/fields/partials/filelist.php
@@ -1,3 +1,5 @@
+<?php $modals->addMultiple(['deleteFile', 'renameFile']) ?>
+
 <div class="files-list">
     <div>
         <fieldset class="form-togglegroup files-list-view-as" data-field-name="<?= $field->name() ?>">
diff --git a/panel/views/options/site.php b/panel/views/options/site.php
index fb899a9aa..ddf505d24 100644
--- a/panel/views/options/site.php
+++ b/panel/views/options/site.php
@@ -1,5 +1,7 @@
 <?php $this->layout('panel') ?>
 
+<?php $modals->add('changes') ?>
+
 <form method="post" class="options-form" data-form="site-options-form">
     <div class="header">
         <div class="header-title"><?= $this->translate('panel.options.options') ?></div>
diff --git a/panel/views/options/system.php b/panel/views/options/system.php
index e12b485ec..def14eb1f 100644
--- a/panel/views/options/system.php
+++ b/panel/views/options/system.php
@@ -1,5 +1,7 @@
 <?php $this->layout('panel') ?>
 
+<?php $modals->add('changes') ?>
+
 <form method="post" class="options-form" data-form="system-options-form">
     <div class="header">
         <div class="header-title"><?= $this->translate('panel.options.options') ?></div>
diff --git a/panel/views/pages/editor.php b/panel/views/pages/editor.php
index fe72f3487..70cd1908a 100644
--- a/panel/views/pages/editor.php
+++ b/panel/views/pages/editor.php
@@ -1,4 +1,7 @@
 <?php $this->layout('panel') ?>
+
+<?php $modals->addMultiple(['changes', 'deletePage']) ?>
+
 <form method="post" data-form="page-editor-form" enctype="multipart/form-data">
     <input type="submit" <?= $this->attr(['hidden' => true, 'aria-hidden' => 'true', 'tabindex' => -1, 'data-command' => 'save', 'formaction' => $history?->isJustCreated() ? '?publish=false' : null]) ?>>
     <div class="header">
diff --git a/panel/views/pages/file.php b/panel/views/pages/file.php
index e6df7a158..16f00e493 100644
--- a/panel/views/pages/file.php
+++ b/panel/views/pages/file.php
@@ -1,4 +1,7 @@
 <?php $this->layout('panel') ?>
+
+<?php $modals->addMultiple(['changes', 'renameFile', 'deleteFile']) ?>
+
 <form method="post" enctype="multipart/form-data" data-form="page-file-form">
     <div class="header">
         <div class="min-w-0 flex-grow-1">
diff --git a/panel/views/pages/index.php b/panel/views/pages/index.php
index cc9edaae9..609278ffd 100644
--- a/panel/views/pages/index.php
+++ b/panel/views/pages/index.php
@@ -1,5 +1,7 @@
 <?php $this->layout('panel') ?>
 
+<?php $modals->add('newPage') ?>
+
 <div class="header">
     <div class="header-title"><?= $this->translate('panel.pages.pages') ?> <span class="badge"><?= $app->site()->descendants()->count() ?></span></div>
     <div>
diff --git a/panel/views/pages/tree.php b/panel/views/pages/tree.php
index 800fc9abd..885c0290c 100644
--- a/panel/views/pages/tree.php
+++ b/panel/views/pages/tree.php
@@ -1,3 +1,5 @@
+<?php $modals->add('deletePage') ?>
+
 <?php if ($headers) : ?>
     <div class="pages-tree-headers" aria-hidden="true">
         <div class="pages-tree-headers-cell page-details truncate"><?= $this->translate('page.title') ?></div>
diff --git a/panel/views/tools/backups.php b/panel/views/tools/backups.php
index 4af7e6647..0de087ac3 100644
--- a/panel/views/tools/backups.php
+++ b/panel/views/tools/backups.php
@@ -1,5 +1,7 @@
 <?php $this->layout('panel') ?>
 
+<?php $modals->add('deleteFile') ?>
+
 <div class="header">
     <div class="header-title"><?= $this->translate('panel.tools.tools') ?></div>
 </div>
diff --git a/panel/views/users/index.php b/panel/views/users/index.php
index 7a55e1620..6b1b7cd81 100644
--- a/panel/views/users/index.php
+++ b/panel/views/users/index.php
@@ -1,5 +1,7 @@
 <?php $this->layout('panel') ?>
 
+<?php $modals->addMultiple(['newUser', 'deleteUser']) ?>
+
 <div class="header">
     <div class="header-title"><?= $this->translate('panel.users.users') ?></div>
     <div>
@@ -31,4 +33,4 @@
             </div>
         <?php endforeach ?>
     </div>
-</section>
+</section>
\ No newline at end of file
diff --git a/panel/views/users/profile.php b/panel/views/users/profile.php
index 8534ea420..6ccb981bb 100644
--- a/panel/views/users/profile.php
+++ b/panel/views/users/profile.php
@@ -1,4 +1,7 @@
 <?php $this->layout('panel') ?>
+
+<?php $modals->addMultiple(['changes', 'deleteUser', 'deleteUserImage']) ?>
+
 <form method="post" enctype="multipart/form-data" data-form="user-profile-form">
     <div class="header">
         <div class="header-title"><?= $this->translate('user.user') ?></div>
@@ -35,4 +38,4 @@
         <?php $this->insert('fields', ['fields' => $fields]) ?>
         <input type="hidden" name="csrf-token" value="<?= $csrfToken ?>">
     <?php endif ?>
-</form>
+</form>
\ No newline at end of file

From af6dc91a4a73faddf308b02b9c2df59853076d71 Mon Sep 17 00:00:00 2001
From: Giuseppe Criscione <18699708+giuscris@users.noreply.github.com>
Date: Sun, 23 Feb 2025 14:50:16 +0100
Subject: [PATCH 2/2] Rewrite frontend modal api

---
 panel/src/scss/components/_modals.scss        |   2 +-
 panel/src/ts/components/form.ts               |  40 ++--
 .../components/inputs/editor/markdown/menu.ts |  86 ++++-----
 .../src/ts/components/inputs/image-picker.ts  |  36 +---
 panel/src/ts/components/modal.ts              | 179 ++++++++++++------
 panel/src/ts/components/views/pages.ts        |  16 +-
 6 files changed, 200 insertions(+), 159 deletions(-)

diff --git a/panel/src/scss/components/_modals.scss b/panel/src/scss/components/_modals.scss
index b01d4de6e..89b7a988f 100644
--- a/panel/src/scss/components/_modals.scss
+++ b/panel/src/scss/components/_modals.scss
@@ -16,7 +16,7 @@
     outline: 0;
 }
 
-.modal.show {
+.modal.open {
     display: flex;
 }
 
diff --git a/panel/src/ts/components/form.ts b/panel/src/ts/components/form.ts
index f5d37c15a..4e4bb49fd 100644
--- a/panel/src/ts/components/form.ts
+++ b/panel/src/ts/components/form.ts
@@ -39,12 +39,15 @@ export class Form {
             element.addEventListener("click", (event) => {
                 if (this.hasChanged()) {
                     event.preventDefault();
-                    app.modals["changesModal"].show(undefined, (modal) => {
+
+                    app.modals["changesModal"].onOpen((modal) => {
                         const continueCommand = $("[data-command=continue]", modal.element);
                         if (continueCommand) {
                             continueCommand.dataset.href = element.href;
                         }
                     });
+
+                    app.modals["changesModal"].open();
                 }
             });
         });
@@ -60,34 +63,29 @@ export class Form {
         registerModalExceptions();
 
         function registerModalExceptions() {
-            const changesModal = document.getElementById("changesModal");
-            const deletePageModal = document.getElementById("deletePageModal");
-            const deleteUserModal = document.getElementById("deleteUserModal");
+            const changesModal = app.modals["changesModal"];
+            const deletePageModal = app.modals["deletePageModal"];
+            const deleteUserModal = app.modals["deleteUserModal"];
 
             if (changesModal) {
-                const continueCommand = $("[data-command=continue]", changesModal);
-                if (continueCommand) {
-                    continueCommand.addEventListener("click", function () {
-                        removeBeforeUnload();
-                        if (this.dataset.href) {
-                            window.location.href = this.dataset.href;
-                        }
-                    });
-                }
+                changesModal.onCommand("continue", (_, button) => {
+                    removeBeforeUnload();
+                    if (button?.dataset.href) {
+                        window.location.href = button.dataset.href;
+                    }
+                });
             }
 
             if (deletePageModal) {
-                const deleteCommand = $("[data-command=delete]", deletePageModal);
-                if (deleteCommand) {
-                    deleteCommand.addEventListener("click", removeBeforeUnload);
-                }
+                deletePageModal.onCommand("delete", () => {
+                    removeBeforeUnload();
+                });
             }
 
             if (deleteUserModal) {
-                const deleteCommand = $("[data-command=delete]", deleteUserModal);
-                if (deleteCommand) {
-                    deleteCommand.addEventListener("click", removeBeforeUnload);
-                }
+                deleteUserModal.onCommand("delete", () => {
+                    removeBeforeUnload();
+                });
             }
         }
     }
diff --git a/panel/src/ts/components/inputs/editor/markdown/menu.ts b/panel/src/ts/components/inputs/editor/markdown/menu.ts
index 3a5a41da1..80c815253 100644
--- a/panel/src/ts/components/inputs/editor/markdown/menu.ts
+++ b/panel/src/ts/components/inputs/editor/markdown/menu.ts
@@ -118,6 +118,8 @@ function plugin(items: MenuItem[]) {
 }
 
 export function menuPlugin() {
+    initModals();
+
     return plugin([
         {
             name: app.config.EditorInput.labels.paragraph,
@@ -227,33 +229,26 @@ export function menuPlugin() {
                     return canInsert(state, schema.nodes.image);
                 }
                 if (view) {
-                    app.modals["imagesModal"].show(undefined, (modal) => {
-                        const commandPickImage = $("[data-command=pick-image]", modal.element) as HTMLElement;
+                    app.modals["imagesModal"].open();
 
+                    app.modals["imagesModal"].onCommand("pick-image", (modal) => {
                         const selected = $(".image-picker-thumbnail.selected", modal.element);
-                        if (selected) {
-                            selected.classList.remove("selected");
+
+                        if (selected && view) {
+                            const baseUri = $("textarea", view.dom.parentNode!)!.dataset.baseUri;
+                            const filename = selected.dataset.filename;
+                            view.dispatch(
+                                state.tr.replaceSelectionWith(
+                                    schema.nodes.image.createAndFill({
+                                        src: `${baseUri}${filename}`,
+                                        alt: "",
+                                    })!,
+                                ),
+                            );
+                            view.focus();
                         }
 
-                        const insertImage = () => {
-                            const selected = $(".image-picker-thumbnail.selected", modal.element);
-                            if (selected && view) {
-                                const baseUri = $("textarea", view.dom.parentNode!)!.dataset.baseUri;
-                                const filename = selected.dataset.filename;
-                                view.dispatch(
-                                    state.tr.replaceSelectionWith(
-                                        schema.nodes.image.createAndFill({
-                                            src: `${baseUri}${filename}`,
-                                            alt: "",
-                                        })!,
-                                    ),
-                                );
-                                view.focus();
-                            }
-                            modal.hide();
-                            commandPickImage.removeEventListener("click", insertImage);
-                        };
-                        commandPickImage.addEventListener("click", insertImage);
+                        modal.close();
                     });
                 }
                 return true;
@@ -271,31 +266,24 @@ export function menuPlugin() {
                     toggleMark(schema.marks.link)(state, dispatch);
                     return true;
                 }
-                app.modals["linkModal"].show(undefined, (modal) => {
-                    const insertLinkCommand = $("[data-command=insert-link]", modal.element) as HTMLElement;
-                    const uri = $('[id="linkModal.uri"]') as HTMLInputElement;
 
-                    uri.value = "https://";
-                    uri.setSelectionRange(8, 8);
+                app.modals["linkModal"].onOpen((modal) => {
+                    const uriInput = $('[id="linkModal.uri"]', modal.element) as HTMLInputElement;
+                    uriInput.value = "https://";
+                    uriInput.setSelectionRange(8, 8);
+                });
 
-                    const insertLink = () => {
-                        if (view && uri.value) {
-                            toggleMark(schema.marks.link, { href: uri.value })(view.state, view.dispatch);
-                            view.focus();
-                        }
-                        modal.hide();
-                        insertLinkCommand.removeEventListener("click", insertLink);
-                    };
-
-                    uri.addEventListener("keydown", (event) => {
-                        if (event.key === "Enter") {
-                            insertLink();
-                            event.preventDefault();
-                        }
-                    });
+                app.modals["linkModal"].open();
 
-                    insertLinkCommand.addEventListener("click", insertLink);
+                app.modals["linkModal"].onCommand("insert-link", (modal) => {
+                    const uriInput = $('[id="linkModal.uri"]', modal.element) as HTMLInputElement;
+                    if (view && uriInput.value) {
+                        toggleMark(schema.marks.link, { href: uriInput.value })(view.state, view.dispatch);
+                        view.focus();
+                    }
+                    modal.close();
                 });
+
                 return true;
             },
             dom: createButton("link", app.config.EditorInput.labels.link),
@@ -375,3 +363,13 @@ function isMarkActive(state: EditorState, type: MarkType) {
     }
     return state.doc.rangeHasMark(from, to, type);
 }
+
+function initModals() {
+    const linkModal = app.modals["linkModal"];
+    $('[id="linkModal.uri"]', linkModal.element)?.addEventListener("keydown", (event) => {
+        if (event.key === "Enter") {
+            linkModal.triggerCommand("insert-link");
+            event.preventDefault();
+        }
+    });
+}
diff --git a/panel/src/ts/components/inputs/image-picker.ts b/panel/src/ts/components/inputs/image-picker.ts
index 2053ead5f..cf1406e23 100644
--- a/panel/src/ts/components/inputs/image-picker.ts
+++ b/panel/src/ts/components/inputs/image-picker.ts
@@ -1,9 +1,7 @@
 import { $, $$ } from "../../utils/selectors";
-
 export class ImagePicker {
     constructor(element: HTMLSelectElement) {
         const options = $$("option", element);
-        const pickCommand = $("[data-command=pick-image]", (element.parentNode as ParentNode).parentNode ?? document);
 
         element.hidden = true;
         element.ariaHidden = "true";
@@ -19,8 +17,8 @@ export class ImagePicker {
                 thumbnail.style.backgroundImage = `url(${option.dataset.thumbnail ?? option.value})`;
                 thumbnail.dataset.uri = option.value;
                 thumbnail.dataset.filename = option.text;
-                thumbnail.addEventListener("click", handleThumbnailClick);
-                thumbnail.addEventListener("dblclick", handleThumbnailDblclick);
+                thumbnail.addEventListener("click", () => pickImage(thumbnail));
+                thumbnail.addEventListener("dblclick", () => pickImage(thumbnail));
                 container.appendChild(thumbnail);
             }
 
@@ -28,37 +26,11 @@ export class ImagePicker {
             ($(".image-picker-empty-state") as HTMLElement).style.display = "none";
         }
 
-        pickCommand?.addEventListener("click", function () {
-            const selectedThumbnail = $(".image-picker-thumbnail.selected");
-            const targetId = this.dataset.target;
-            if (selectedThumbnail && targetId) {
-                const target = document.getElementById(targetId) as HTMLSelectElement;
-                const selectedThumbnailFilename = selectedThumbnail.dataset.filename;
-                if (target && selectedThumbnailFilename) {
-                    target.value = selectedThumbnailFilename;
-                    target.dispatchEvent(new Event("input", { bubbles: true }));
-                    target.dispatchEvent(new Event("change", { bubbles: true }));
-                }
-            }
-        });
-
-        function handleThumbnailClick(this: HTMLElement) {
+        function pickImage(thumbnail: HTMLElement) {
             $$(".image-picker-thumbnail").forEach((element) => {
                 element.classList.remove("selected");
             });
-            this.classList.add("selected");
-            const targetId = ($("[data-command=pick-image]") as HTMLElement).dataset.target;
-            if (targetId) {
-                const target = document.getElementById(targetId) as HTMLSelectElement;
-                if (target) {
-                    target.value = this.dataset.filename as string;
-                }
-            }
-        }
-
-        function handleThumbnailDblclick(this: HTMLElement) {
-            this.click();
-            $("[data-command=pick-image]")?.click();
+            thumbnail.classList.add("selected");
         }
     }
 }
diff --git a/panel/src/ts/components/modal.ts b/panel/src/ts/components/modal.ts
index bc507cde7..a867593a7 100644
--- a/panel/src/ts/components/modal.ts
+++ b/panel/src/ts/components/modal.ts
@@ -1,83 +1,102 @@
 import { $, $$ } from "../utils/selectors";
 import { Inputs } from "./inputs";
 
-function getFirstFocusableElement(parent: HTMLElement = document.body): HTMLElement {
-    return parent.querySelector("button, .button, input:not([type=hidden]), select, textarea") || parent;
+interface ModalShowOptions {
+    action?: string;
+    triggerElement?: HTMLElement;
 }
 
+interface ModalHideOptions {
+    triggerElement?: HTMLElement;
+}
+
+type ModalCallback = (modal: Modal, triggerElement?: HTMLElement) => void;
+
+type ModalState = "open" | "closed";
+
 export class Modal {
-    element: HTMLElement;
-    inputs: Inputs;
+    readonly element: HTMLElement;
+
+    readonly inputs: Inputs;
+
+    readonly data: { [key: string]: unknown } = {};
+
+    private readonly callbacks: { [name: string]: ModalCallback } = {};
+
+    private state: ModalState = "closed";
 
     constructor(element: HTMLElement) {
         this.element = element;
 
-        document.addEventListener("keyup", (event) => {
-            if (event.key === "Escape") {
-                this.hide();
-            }
-        });
+        new Inputs(this.element);
 
-        window.addEventListener("focus", () => getFirstFocusableElement(this.element).focus());
+        this.registerEvents();
+    }
 
-        this.inputs = new Inputs(this.element);
+    get isOpen() {
+        return this.state === "open";
+    }
 
-        $("[data-dismiss]", element)?.addEventListener("click", () => this.hide());
+    get isClosed() {
+        return this.state === "closed";
+    }
 
-        let mousedownCaptured = false;
-        element.addEventListener("mousedown", (event) => {
-            mousedownCaptured = event.target === element;
-        });
-        element.addEventListener("mouseup", (event) => {
-            if (mousedownCaptured && event.target === element) {
-                this.hide();
-            }
-            mousedownCaptured = false;
-        });
+    open(options: ModalShowOptions = {}) {
+        this.element.role = "dialog";
+        this.element.ariaModal = "true";
+        this.element.classList.add("open");
 
-        document.addEventListener("click", (event) => {
-            const target = (event.target as HTMLElement).closest("[data-modal]") as HTMLDivElement;
-            if (target && target.dataset.modal === element.id) {
-                const modalAction = target.dataset.modalAction;
-                if (modalAction) {
-                    this.show(modalAction);
-                } else {
-                    this.show();
-                }
+        if (options.action) {
+            const form = $("form", this.element) as HTMLFormElement | null;
+            if (form) {
+                form.action = options.action;
             }
-        });
-    }
-
-    show(action?: string, callback?: (modal: this) => void) {
-        const modal = this.element;
-        modal.role = "dialog";
-        modal.ariaModal = "true";
-        modal.classList.add("show");
-        if (action) {
-            ($("form", modal) as HTMLFormElement).action = action;
-        }
-        (document.activeElement as HTMLElement).blur(); // Don't retain focus on any element
-        if ($("[autofocus]", modal)) {
-            ($("[autofocus]", modal) as HTMLFormElement).focus(); // Firefox bug
-        } else {
-            getFirstFocusableElement(modal).focus();
         }
-        if (typeof callback === "function") {
-            callback(this);
-        }
-        $$(".tooltip").forEach((element) => element.parentNode && element.parentNode.removeChild(element));
+
+        (document.activeElement as HTMLElement | null)?.blur(); // Don't retain focus on any element
+
+        this.getFirstFocusableElement(this.element)?.focus();
+
+        $$(".tooltip").forEach((tooltip) => tooltip.parentNode && tooltip.parentNode.removeChild(tooltip));
+
         this.createBackdrop();
+
+        this.state = "open";
+
+        this.dispatchCallback("open", options.triggerElement);
     }
 
-    hide() {
+    close(options: ModalHideOptions = {}) {
         const modal = this.element;
-        modal.classList.remove("show");
+
+        modal.classList.remove("open");
         modal.role = null;
         modal.ariaModal = null;
+
         this.removeBackdrop();
+
+        this.state = "closed";
+
+        this.dispatchCallback("close", options.triggerElement);
     }
 
-    createBackdrop() {
+    onOpen(callback: ModalCallback) {
+        this.callbacks["open"] = callback;
+    }
+
+    onClose(callback: ModalCallback) {
+        this.callbacks["close"] = callback;
+    }
+
+    onCommand(command: string, callback: ModalCallback) {
+        this.callbacks[`command-${command}`] = callback;
+    }
+
+    triggerCommand(command: string, triggerElement?: HTMLElement) {
+        this.dispatchCallback(`command-${command}`, triggerElement);
+    }
+
+    private createBackdrop() {
         if (!$(".modal-backdrop")) {
             const backdrop = document.createElement("div");
             backdrop.className = "modal-backdrop";
@@ -85,10 +104,60 @@ export class Modal {
         }
     }
 
-    removeBackdrop() {
+    private removeBackdrop() {
         const backdrop = $(".modal-backdrop");
         if (backdrop && backdrop.parentNode) {
             backdrop.parentNode.removeChild(backdrop);
         }
     }
+
+    private dispatchCallback(name: string, triggerElement?: HTMLElement) {
+        const callback = this.callbacks[name];
+        if (callback) {
+            callback(this, triggerElement);
+        }
+    }
+
+    private registerEvents() {
+        document.addEventListener("click", (event) => {
+            const target = (event.target as HTMLElement).closest(`[data-modal="${this.element.id}"]`) as HTMLDivElement | null;
+            if (target) {
+                this.open({ action: target.dataset.modalAction, triggerElement: target });
+            }
+        });
+
+        $$("[data-command]", this.element).forEach((commandButton) => commandButton.addEventListener("click", () => this.triggerCommand(commandButton.dataset.command as string, commandButton)));
+
+        const dismissButton = $("[data-dismiss]", this.element);
+        dismissButton?.addEventListener("click", () => this.close({ triggerElement: dismissButton }));
+
+        document.addEventListener("keyup", (event) => {
+            if (event.key === "Escape") {
+                this.close();
+            }
+        });
+
+        let mousedownCaptured = false;
+
+        this.element.addEventListener("mousedown", (event) => {
+            mousedownCaptured = event.target === this.element;
+        });
+
+        this.element.addEventListener("mouseup", (event) => {
+            if (mousedownCaptured && event.target === this.element) {
+                this.close();
+            }
+            mousedownCaptured = false;
+        });
+
+        window.addEventListener("focus", () => {
+            if (this.element.classList.contains("open")) {
+                this.getFirstFocusableElement(this.element).focus();
+            }
+        });
+    }
+
+    private getFirstFocusableElement(parent: HTMLElement = document.body): HTMLElement {
+        return parent.querySelector("[autofocus], button, .button, input:not([type=hidden]), select, textarea") || parent;
+    }
 }
diff --git a/panel/src/ts/components/views/pages.ts b/panel/src/ts/components/views/pages.ts
index ee28dc5e4..9cb6941cd 100644
--- a/panel/src/ts/components/views/pages.ts
+++ b/panel/src/ts/components/views/pages.ts
@@ -180,13 +180,17 @@ export class Pages {
             }
         }
 
-        $$("[data-modal=renameFileModal]").forEach((element) => {
-            element.addEventListener("click", () => {
-                const input = $('[id="renameFileModal.filename"]') as HTMLInputElement;
-                input.value = element.dataset.filename as string;
-                input.setSelectionRange(0, input.value.lastIndexOf("."));
+        const renameFileModal = app.modals["renameFileModal"];
+
+        if (renameFileModal) {
+            renameFileModal.onOpen((modal, trigger) => {
+                if (trigger) {
+                    const input = $('[id="renameFileModal.filename"]', modal.element) as HTMLInputElement;
+                    input.value = trigger.dataset.filename as string;
+                    input.setSelectionRange(0, input.value.lastIndexOf("."));
+                }
             });
-        });
+        }
 
         $$("[data-command=replaceFile]").forEach((element) => {
             element.addEventListener("click", () => {