Split container with resizeable sections

[TomJGooding]

This is an idea that has been knocking around my head for a while.

I've attempted to create a proof of concept below. The new SplitContainer (name TBD!) would allow resizing sections with a draggable separator. This could also potentially also be nested inside another SplitContainer!

Perhaps this would be better as an external package, but just posting this idea to see if there is any interest?

from textual import events
from textual.app import App, ComposeResult
from textual.geometry import Offset, Size
from textual.widget import Widget
from textual.widgets import Rule, Static


class SplitContainerSeparator(Rule):
    pass


class SplitContainer(Widget, inherit_bindings=False):
    _separator_grabbed: bool = False
    _offset_before_dragged: Offset | None = None
    _size_before_dragged: Size | None = None

    DEFAULT_CSS = """
    SplitContainer {
        width: 1fr;
        height: 1fr;
        layout: horizontal;
        overflow: hidden hidden;
    }
    """

    def __init__(
        self,
        before: Widget,
        after: Widget,
    ) -> None:
        super().__init__()
        self.before = before
        self.after = after

        self.before.styles.width = "1fr"
        self.after.styles.width = "1fr"

    def compose(self) -> ComposeResult:
        yield self.before
        yield SplitContainerSeparator("vertical")
        yield self.after

    def on_mouse_down(self, event: events.MouseDown) -> None:
        widget, _ = self.screen.get_widget_at(event.screen_x, event.screen_y)
        if isinstance(widget, SplitContainerSeparator):
            self._separator_grabbed = True
            self._offset_before_dragged = event.screen_offset
            self._size_before_dragged = self.before.size

    def on_mouse_move(self, event: events.MouseMove) -> None:
        if not self._separator_grabbed:
            return
        assert self._size_before_dragged is not None
        dragged_offset = event.screen_offset - self._offset_before_dragged
        new_dragged_width = self._size_before_dragged.width + dragged_offset.x
        self.before.styles.width = new_dragged_width

    def on_mouse_up(self) -> None:
        self._separator_grabbed = False
        self._offset_before_dragged = None
        self._size_before_dragged = None


class SplitContainerApp(App):
    CSS = """
    Screen {
        align: center middle;
    }

    SplitContainer {
        width: 80;
        height: 24;
        background: $panel;
    }
    """

    def compose(self) -> ComposeResult:
        yield SplitContainer(
            before=Static("This is some content to the left."),
            after=Static("This is some content to the right."),
        )


if __name__ == "__main__":
    app = SplitContainerApp()
    app.run()