feat: property pane

[mierak]

This PR builds on top of #239 so make sure to account for the border changes

This PR introduces a new Property pane. It can display all the usual formatting properties which can be used in the header etc.

Consider this header:

Details

header: (
    rows: [
        (
            left: [
                (kind: Text("["), style: (fg: "yellow", modifiers: "Bold")),
                (kind: Property(Status(State)), style: (fg: "yellow", modifiers: "Bold")),
                (kind: Text("]"), style: (fg: "yellow", modifiers: "Bold"))
            ],
            center: [
                (kind: Property(Song(Title)), style: (modifiers: "Bold"), default: (kind: Text("No Song"), style: (modifiers: "Bold")))
            ], 
            right: [
                (kind: Property(Widget(Volume)), style: (fg: "blue"))
            ]
        ),
        (
            left: [
                (kind: Property(Status(Elapsed))), 
                (kind: Text(" / ")), 
                (kind: Property(Status(Duration))), 
                (kind: Group([
                    (kind: Text(" (")), 
                    (kind: Property(Status(Bitrate))), 
                    (kind: Text(" kbps)")),
                ]))
            ], 
            center: [
                (kind: Property(Song(Artist)), style: (fg: "yellow", modifiers: "Bold"), default: (kind: Text("Unknown"), style: (fg: "yellow", modifiers: "Bold"))),
                (kind: Text(" - ")),
                (kind: Property(Song(Album)), default: (kind: Text("Unknown Album")))
            ],
            right: [
                (kind: Property(Widget(States(active_style: (fg: "white", modifiers: "Bold"), separator_style: (fg: "white")))), style: (fg: "dark_gray"))
            ]
        ),
    ],
),

And this new layout definition:

Details

layout: Split(
    direction: Vertical,
    panes: [
        (
            size: "4",
            borders: "ALL",
            pane: Split(
                direction: Vertical,
                panes: [
                    (
                        size: "1",
                        direction: Vertical,
                        pane: Split(
                            direction: Horizontal,
                            panes: [
                                (
                                    size: "30%",
                                    pane: Pane(Property(
                                        content: [
                                            (kind: Text("["), style: (fg: "yellow", modifiers: "Bold")),
                                            (kind: Property(Status(StateV2())), style: (fg: "yellow", modifiers: "Bold")),
                                            (kind: Text("]"), style: (fg: "yellow", modifiers: "Bold")),
                                        ], align: Left
                                    )),
                                ),
                                (
                                    size: "40%",
                                    pane: Pane(Property(
                                        content: [
                                            (kind: Property(Song(Title)), style: (modifiers: "Bold"),
                                                default: (kind: Text("No Song"), style: (modifiers: "Bold")))
                                        ], align: Center
                                    )),
                                ),
                                (
                                    size: "30%",
                                    pane: Pane(Property(
                                        content: [
                                            (kind: Property(Widget(Volume)), style: (fg: "blue", modifiers: "Bold"))
                                        ], align: Right
                                    )),
                                ),
                            ],
                        ),
                    ),
                    (
                        size: "1",
                        direction: Vertical,
                        pane: Split(
                            direction: Horizontal,
                            panes: [
                                (
                                    size: "30%",
                                    pane: Pane(Property(
                                        content: [
                                            (kind: Property(Status(Elapsed))), 
                                            (kind: Text(" / ")), 
                                            (kind: Property(Status(Duration))), 
                                            (kind: Group([
                                                (kind: Text(" (")), 
                                                (kind: Property(Status(Bitrate))), 
                                                (kind: Text(" kbps)")),
                                            ])),
                                        ], align: Left,
                                    )),
                                ),
                                (
                                    size: "40%",
                                    pane: Pane(Property(
                                        content: [
                                            (kind: Property(Song(Artist)), style: (fg: "yellow", modifiers: "Bold"),
                                                default: (kind: Text("Unknown"), style: (fg: "yellow", modifiers: "Bold"))),
                                            (kind: Text(" - ")),
                                            (kind: Property(Song(Album)), default: (kind: Text("Unknown Album")))
                                        ], align: Center  
                                    )),
                                ),
                                (
                                    size: "30%",
                                    pane: Pane(Property(
                                        content: [
                                            (kind: Property(Widget(States(
                                                active_style: (fg: "white", modifiers: "Bold"),
                                                separator_style: (fg: "white")))
                                            ), style: (fg: "dark_gray"))
                                        ], align: Right
                                    )),
                                ),
                            ],
                        ),
                    ),
                ] 
            )
        ),
        (
            borders: "ALL",
            pane: Pane(Header),
            size: "4",
        ),
        (
            borders: "ALL",
            pane: Pane(TabContent),
            size: "100%",
        ),
    ],
),

They produce identical output

While the new pane is quite verbose it provides great flexibility should you have a need for it.'

Resolves points 1 and 2 from #233

[mierak]

Alright, this seems to work fine as well. I am really struggling with the docs here though. It might be time for bigger changes there..

Anyway, I am excited to see what people make with this. This should unlock many possibilities.