forked from defunkt/toes
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
import { render as renderApp } from 'hono/jsx/dom'
|
|
import { Dashboard } from './components'
|
|
import { initModal } from './components/modal'
|
|
import { initRouter, navigate } from './router'
|
|
import { apps, getSelectedTab, selectedApp, setApps, setIsNarrow } from './state'
|
|
import { initToolIframes, updateToolIframes } from './tool-iframes'
|
|
import { initUpdate } from './update'
|
|
|
|
const render = () => {
|
|
renderApp(<Dashboard render={render} />, document.getElementById('app')!)
|
|
// Update tool iframes after DOM settles
|
|
requestAnimationFrame(() => {
|
|
const tools = apps.filter(a => a.tool)
|
|
updateToolIframes(getSelectedTab(selectedApp), tools, selectedApp)
|
|
})
|
|
}
|
|
|
|
// Initialize render functions
|
|
initModal(render)
|
|
initUpdate(render)
|
|
initToolIframes()
|
|
|
|
// Set theme based on system preference
|
|
const setTheme = () => {
|
|
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
document.documentElement.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
|
|
}
|
|
|
|
// Listen for system theme changes
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
|
|
setTheme()
|
|
render()
|
|
})
|
|
|
|
// Set initial theme
|
|
setTheme()
|
|
|
|
// Listen for narrow screen changes
|
|
const narrowQuery = window.matchMedia('(max-width: 768px)')
|
|
narrowQuery.addEventListener('change', e => {
|
|
setIsNarrow(e.matches)
|
|
render()
|
|
})
|
|
|
|
// Initialize router (sets initial state from URL and renders)
|
|
initRouter(render)
|
|
|
|
// SSE connection
|
|
const events = new EventSource('/api/apps/stream')
|
|
events.onmessage = e => {
|
|
setApps(JSON.parse(e.data))
|
|
|
|
if (selectedApp && !apps.some(a => a.name === selectedApp)) {
|
|
navigate('/')
|
|
}
|
|
|
|
render()
|
|
}
|