Lists of unlimited height in a viewport

[sullyj3]

Hi there. I want to make a ui that basically looks like this:

┌──────────┐
│2025-10-03│
└──────────┘
thing 1 from today
thing 2 from today
┌──────────┐
│2025-10-02│
└──────────┘
thing 1 from yeterday
┌──────────┐
│2025-10-01│
└──────────┘
thing 1 from the 1st
thing 2 from the 1st
thing 3 from the 1st

... (with many days, the user can scroll down to see them)

This is a list of items fetched from the web, grouped by date. I want to be able to scroll through this list, select multiple, then perform bulk operations on them.

My idea was to have a brick list per day, and then try to figure out some movement event handling logic that jumps to the start of the subsequent day's list when you're at the end of the previous list.

Something like this:

viewport ItemsView Vertical (vBox (map viewDay days))

...

viewDay :: (Day, Brick.GenericList N Seq Item) -> Widget N
viewDay (day, items) =
  (txt . Interactive.boxed $ show day)
    <=> Brick.renderList viewItem False items

This crashes with tried to embed an infinite-height widget in vertical viewport ItemsView. I can prevent the crash by limiting the height of the list:

viewDay :: (Day, Brick.GenericList N Seq Item) -> Widget N
viewDay (day, items) =
  (txt . Interactive.boxed $ show day)
    <=> vLimit 20 (Brick.renderList viewItem False items)

but this either cuts off items or leaves large gaps between days. What I really want is for each day's list to take up exactly as much vertical space as it needs to, rather than some fixed amount. I could also do something like this:

viewDay :: (Day, [Item]) -> Widget N
viewDay (day, items) =
  (txt . Interactive.boxed $ show day)
    <=> vBox (map viewItem items)

This gives me what I want visually, but then of course I don't get the free selection and movement logic that comes with brick lists.

What's the best way to do this? Is there some way to do it using brick lists, or will I just need to implement the selection management myself on top of vBox?

[jtdaugherty]

Hi @sullyj3 - it will likely work better to take an approach as follows:

• Rather than putting each days' worth of items in one list each and then putting all the lists together, put all items in one big list, including the day headers that go over each collection of items for each day.
• When moving through the list, skip over entries that correspond to headers.

But this comes with a slight restriction that I can explain if needed: if you're going to use a built-in brick List for that -- and I recommend doing so -- then all of the list items must have the same height. That means that your day headers can't be boxed like they are, since that makes them three rows high, and your selectable entries are one row high each. I've run into this same sort of situation before. I handled it by drawing the list of items something like this:

---- 2025-10-03 ----
thing 1 from today
thing 2 from today
---- 2025-10-02 ----
thing 1 from yeterday
---- 2025-10-01 ----
thing 1 from the 1st
thing 2 from the 1st
thing 3 from the 1st

The list item type would need to be something like

data ListItem = Header Date | Item YourItemType

so that you can draw headers with hBorderWithLabel, for example. This also makes it possible to handle list movement input events like arrow keys by checking to see whether the movement lands on a Header and repeating the movement until it lands on an Item to prevent the headers from being selectable. It also means that populating your list entails generating your day headers and inserting them at the right points, but you already have logic for that so it could be adapted.

As for the multiple selection, that can be managed independently of the list (and probably should be) in an application state field that tracks which items are selected. Then your list item rendering function can consult that state to see whether an item is selected and render it accordingly.

Does that make sense?

[jtdaugherty]

I also ought to mention that by taking this approach you use the List's bulit-in viewport rather than needing to embed things in your own.

[sullyj3]

Thanks very much for your help!

I had briefly considered that, but I reflexively dismissed the idea as a bit hacky. My items are actually 5 lines high, so I'd have to expand the date headers instead.
I might start with that solution for now and maybe try to figure out something more custom later on.

[jtdaugherty]

Okay, good luck!