toes/src/client/components/DashboardLanding.tsx
2026-02-18 20:46:56 -08:00

73 lines
1.9 KiB
TypeScript

import { useEffect } from 'hono/jsx'
import { openAppSelectorModal } from '../modals'
import { apps, isNarrow, setSelectedApp } from '../state'
import {
AppSelectorChevron,
DashboardContainer,
DashboardHeader,
DashboardInstallCmd,
DashboardTitle,
StatusDot,
StatusDotLink,
StatusDotsRow,
} from '../styles'
import { update } from '../update'
import { UnifiedLogs, initUnifiedLogs } from './UnifiedLogs'
import { Vitals, initVitals } from './Vitals'
let activeTooltip: string | null = null
export function DashboardLanding({ render }: { render: () => void }) {
useEffect(() => {
initUnifiedLogs()
initVitals()
}, [])
const narrow = isNarrow || undefined
return (
<DashboardContainer narrow={narrow}>
<DashboardHeader>
<DashboardTitle narrow={narrow}>
🐾 Toes
{isNarrow && (
<AppSelectorChevron onClick={() => openAppSelectorModal(render)}>
</AppSelectorChevron>
)}
</DashboardTitle>
<DashboardInstallCmd>
curl -fsSL {location.origin}/install | bash
</DashboardInstallCmd>
</DashboardHeader>
<StatusDotsRow>
{[...apps.filter(a => !a.tool), ...apps.filter(a => a.tool)].map(app => (
<StatusDotLink
key={app.name}
data-tooltip={app.name}
tooltipVisible={activeTooltip === app.name || undefined}
onClick={(e: Event) => {
e.preventDefault()
if (isNarrow && activeTooltip !== app.name) {
activeTooltip = app.name
render()
return
}
activeTooltip = null
setSelectedApp(app.name)
update()
}}
>
<StatusDot state={app.state} data-app={app.name} />
</StatusDotLink>
))}
</StatusDotsRow>
<Vitals />
<UnifiedLogs />
</DashboardContainer>
)
}