Multi-pane application design with navigation and preview/content

[skeggse]

I find that I've now wanted to make four little TUIs all with the same structure, for very different use-cases. Ideally, the basic structure of this sort of TUI looks like a two-column application, where the left column is a list of items, and the right column shows a preview of the currently selected item. You could imagine this structure being useful for a number of applications: documentation reader, email inbox, or even an accounts/register view.

This is extremely similar to the TabbedContent implementation, except with a different content selector. I could go and duplicate all the code in TabbedContent, but it's a nontrivial amount of code to copy. For really small applications that I'm only going to use occasionally, I'd really rather keep my application implementation small so I can maintain it without much effort.

There aren't any better existing primitives in textual (or third-party libraries) to provide this basic two-pane functionality, are there?

[TomJGooding]

Perhaps something like this built around the ContentSwitcher widget?

from textual import on
from textual.app import App, ComposeResult
from textual.containers import Horizontal, Vertical
from textual.widgets import ContentSwitcher, OptionList, Placeholder
from textual.widgets.option_list import Option


class ContentSwitcherApp(App):
    CSS = """
    OptionList {
        width: 1fr;
        height: 1fr;
    }

    ContentSwitcher {
        width: 3fr;
    }
    """

    def compose(self) -> ComposeResult:
        with Horizontal():
            yield OptionList(
                Option("First", "nav-1"),
                Option("Second", "nav-2"),
                Option("Third", "nav-3"),
            )
            with ContentSwitcher(initial="nav-1"):
                with Vertical(id="nav-1"):
                    yield Placeholder("First")
                with Vertical(id="nav-2"):
                    yield Placeholder("Second")
                with Vertical(id="nav-3"):
                    yield Placeholder("Third")

    @on(OptionList.OptionSelected)
    def switch_content(self, event: OptionList.OptionSelected) -> None:
        self.query_one(ContentSwitcher).current = event.option_id


if __name__ == "__main__":
    ContentSwitcherApp().run()