imperative-to-declarative-flet

Copy the app folder, create a root @ft.component App, and run it with ft.run(lambda page: page.render(App)). Move UI into components, use ft.use_state for local state and @ft.observable for app data, removing manual page.update() calls.

Use @ft.observable for nested application data you mutate in place, such as boards, lists, or cards with drag-and-drop reordering. Use ft.use_state for local ephemeral UI state like hover flags, input text, or dialog selections.

Convert the dialog content into an @ft.component that uses ft.use_state for values like error messages or selected colors. Event handlers call state setters, and the dialog is shown via page.show_dialog(ft.AlertDialog(content=DialogContent(...))).

Event handler typing is invariant, so Event[Sub] is not assignable to Event[Base]. If on_click is declared on Button, annotate the parameter as ft.Event[ft.Button] or define the handler without a parameter.

Set page.fonts with a dict where the key is the font family name, for example page.fonts = {"Pacifico": "Pacifico-Regular.ttf"}, then reference font_family="Pacifico". Prefer an absolute assets_dir derived from __file__.