From 577bec0d5c6767bc47c5cf550ee3c835f3c977d0 Mon Sep 17 00:00:00 2001 From: Chris Wanstrath Date: Tue, 3 Mar 2026 12:46:20 -0800 Subject: [PATCH] Simplify modal rendering with dedicated DOM root --- src/client/components/Dashboard.tsx | 2 -- src/client/components/modal.tsx | 13 +++++++------ src/client/index.tsx | 2 -- src/server/shell.tsx | 1 + 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/client/components/Dashboard.tsx b/src/client/components/Dashboard.tsx index 72349f7..63d9aaf 100644 --- a/src/client/components/Dashboard.tsx +++ b/src/client/components/Dashboard.tsx @@ -14,7 +14,6 @@ import { import { AppDetail } from './AppDetail' import { AppSelector } from './AppSelector' import { DashboardLanding } from './DashboardLanding' -import { Modal } from './modal' import { SettingsPage } from './SettingsPage' import { Sidebar } from './Sidebar' @@ -55,7 +54,6 @@ export function Dashboard({ render }: { render: () => void }) { {!isNarrow && } - ) } diff --git a/src/client/components/modal.tsx b/src/client/components/modal.tsx index d513285..f2efba2 100644 --- a/src/client/components/modal.tsx +++ b/src/client/components/modal.tsx @@ -1,19 +1,20 @@ import type { Child } from 'hono/jsx' +import { render } from 'hono/jsx/dom' import { define } from '@because/forge' import { theme } from '../themes' let modalTitle: string | null = null let modalContent: (() => Child) | null = null -let renderFn: (() => void) | null = null -export const initModal = (render: () => void) => { - renderFn = render +const renderModal = () => { + const root = document.getElementById('modal') + if (root) render(, root) } export const openModal = (title: string, content: () => Child) => { modalTitle = title modalContent = content - renderFn?.() + renderModal() requestAnimationFrame(() => { document.querySelector('[data-modal-body] input')?.focus() }) @@ -22,11 +23,11 @@ export const openModal = (title: string, content: () => Child) => { export const closeModal = () => { modalTitle = null modalContent = null - renderFn?.() + renderModal() } export const rerenderModal = () => { - renderFn?.() + renderModal() } // ESC key handler diff --git a/src/client/index.tsx b/src/client/index.tsx index a8bec33..a4460a7 100644 --- a/src/client/index.tsx +++ b/src/client/index.tsx @@ -1,6 +1,5 @@ import { render as renderApp } from 'hono/jsx/dom' import { Dashboard } from './components' -import { initModal } from './components/modal' import { initRouter, navigate } from './router' import { apps, dashboardTab, getSelectedTab, selectedApp, setApps, setIsNarrow } from './state' import { initToolIframes, updateToolIframes } from './tool-iframes' @@ -21,7 +20,6 @@ const render = () => { } // Initialize render functions -initModal(render) initUpdate(render) initToolIframes() diff --git a/src/server/shell.tsx b/src/server/shell.tsx index daf3879..afebae8 100644 --- a/src/server/shell.tsx +++ b/src/server/shell.tsx @@ -9,6 +9,7 @@ export const Shell = () => (
+