import { createRootRoute, HeadContent, Link, Outlet, Scripts } from '@tanstack/react-router' import { useTranslation } from 'react-i18next' import { defaultLocale, localeDir } from '../i18n/config' import { classifyHealth, sortCards, type Card } from '../lib/kanban' import { formatApiError, makeApi } from '../lib/api' import '../i18n/config' import '../index.css' export interface BoardData { cards: Card[] error: string | null } // Root route renders the full HTML document for SSR (owns so the // tree mirrors for RTL locales) and the shared board chrome. Its loader fetches // the cards once on the server; child routes read this same data via // RootRoute.useLoaderData(), and mutations call router.invalidate() to re-run it. export const Route = createRootRoute({ head: () => ({ meta: [ { charSet: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { title: 'Kanban Board' }, ], }), loader: async (): Promise => { try { const { cards } = await makeApi().invoke('listCards', {}) return { cards: sortCards(cards as Card[]), error: null } } catch (thrown: unknown) { let message: string try { message = await formatApiError(thrown) } catch { message = 'Request failed' } return { cards: [], error: message } } }, component: RootDocument, }) function RootDocument() { const locale = defaultLocale const { t } = useTranslation() const { cards, error } = Route.useLoaderData() const health = classifyHealth(cards) return (

{t('shell.eyebrow')}

{t('shell.title')}

{t('shell.subtitle')}

{t('shell.stats.boardHealth')} {t(`health.${health}`)}

{t('shell.stats.cardsTracked')} {cards.length}

{t('shell.stats.runtime')} {error ? t('shell.runtimeDegraded') : t('shell.runtimeConnected')}

) }