refactor(example): rework headers.lua to reusable components

[ngvt1n]

Addressing #43
Sorry for the repeated PR, I messed up my other branch :(

[ngvt1n]

Hi, I refactored the example again, this time embracing more Lua-ism :) #43

[Tieske]

yesterday a new utils.class function was merged.

Can we externalise the headers and footers? based on this class system?
So probably some abstract panel class (with predefined methods), with subclasses header and footer.

@Vishrutha1909 has widgets in src/terminal/cli/... in #76. So probably these new objects should go in something like src/terminal/ui/panel.lua etc.

[Tieske]

btw; should we have a panel-container? a panel that hosts sub-panels. Then we can have screen-panel, containing a header panel, a footer panel, and a body panel, where the body panel automatically gets the remaining rows...

also; should we be stricter in naming? panel feels like x-y-h-w coordinates, where this system is just full-width, so maybe it should be called fwpanel ?

wdyt?

[ngvt1n]

Can we externalise the headers and footers? based on this class system?

Yup, the new utils functions are great, really would make the example more intuitive.

So probably some abstract panel class (with predefined methods), with subclasses header and footer.

I'm trying to reason out why header and footer would be separate subclasses instead of instances, for me they both seem really similar and wouldn't differ from each other at all in terms of methods. A bar/box/fullwidthbar vs. a body subclass would be great however!

also; should we be stricter in naming? panel feels like x-y-h-w coordinates, where this system is just full-width, so maybe it should be called fwpanel ?

I don't think it matter that much, never thought of panel as being particularly x-y-h-w
Though I must say I'm a huge fan of flexbox or (FTXUI follows this!)

[Tieske]

a bar makes sense.

• height = 1, row = 1 is header
• height = 1, row = -1 is footer

(with a flexbox approach one would only set height, not position, correct?)

should it take a single content string? but then header might need more; 3 text elements, left middle right, bar and the 3 elements should probably have their own attributes (color etc).

flexbox seems nice, renders in one direction (horizontal or vertical, in a TUI case that would be vertical). So that should go in the container class then?

just brainstorming some classes;

• panel base
  • panel container
    • screen panel (eg. fullscreen size, containing header, footer & body, etc)
    • tab panel (eg. a bar for the tabs, and a body for the tab-content)
  • bar panel (single line)
    • title (text left middle right), to be used for headers & footers
    • tab-bar (see tab-panel above)
    • message bar; a line that appears briefly with a notification/message/warning