probablycorey/toes
1
0
Fork 0
forked from defunkt/toes
Code Pull Requests Activity

Simplify modal rendering with dedicated DOM root

Browse Source
This commit is contained in:
Chris Wanstrath 2026-03-03 12:46:20 -08:00
parent 002f0a64ef
commit 577bec0d5c
4 changed files with 8 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/client/components/Dashboard.tsx
View File

@ -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 }) {
<Styles />
{!isNarrow && <Sidebar render={render} />}
<MainContent render={render} />
<Modal />
</Layout>
)
}

13
src/client/components/modal.tsx
View File

@ -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(<Modal />, root)
}
export const openModal = (title: string, content: () => Child) => {
modalTitle = title
modalContent = content
renderFn?.()
renderModal()
requestAnimationFrame(() => {
document.querySelector<HTMLInputElement>('[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

2
src/client/index.tsx
View File

@ -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()

1
src/server/shell.tsx
View File

@ -9,6 +9,7 @@ export const Shell = () => (
</head>
<body>
<div id="app"></div>
<div id="modal"></div>
<div id="tool-iframes"></div>
<script type="module" src="/client/index.js"></script>
</body>