toes/src/client/index.tsx
2026-01-30 08:23:29 -08:00

38 lines
1.1 KiB
TypeScript

import { render as renderApp } from 'hono/jsx/dom'
import { Dashboard } from './components'
import { apps, selectedApp, setApps, setSelectedApp } from './state'
import { initModal } from './components/modal'
import { initUpdate } from './update'
const render = () => {
renderApp(<Dashboard render={render} />, document.getElementById('app')!)
}
// Initialize render functions
initModal(render)
initUpdate(render)
// 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()
// SSE connection
const events = new EventSource('/api/apps/stream')
events.onmessage = e => {
setApps(JSON.parse(e.data))
const valid = selectedApp && apps.some(a => a.name === selectedApp)
if (!valid && apps.length) setSelectedApp(apps[0]!.name)
render()
}