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 = () => (
+