feat: Elevator Closures list

[cmaddox5]

This PR adds a simple list view of elevator closures throughout the system. It works very similarly to Pre-Fares except all dynamic paging is done on the client. The way I handled paging was to generate the pages before React drew anything on the screen and then switch to rendering these pages once it is done. This appears seamless and looks like it loads like any other screen. After all pages have been rendered, it executes a callback that tells React it is ready to replace it's data in the next refresh. The way I did this in code feels a little messy so please do suggest improvements.

[digitalcora]

The client-side resizing approach here seems much more complicated than it needs to be — I thought we had been on the same page about how to implement this, so either that's my bad for not being clear enough, or maybe you ran into some issues?

Basically my idea was that Flexbox can almost entirely do the work for us. Throw this into a sandbox:

<div class="container">
  <div class="closures">
    <div class="closure">
      Repellendus nisi ut adipisci aperiam enim. Itaque quam recusandae voluptatem eum asperiores mollitia.
    </div>
    <div class="closure">
      Ipsum ea et quidem. Nam quidem aut voluptas. Sed qui at quis doloribus. Facere neque voluptatum dolor temporibus a aliquam. Soluta aut eaque ipsam doloremque. Possimus accusantium occaecati reiciendis expedita quia.
    </div>
    <div class="closure">
      Itaque recusandae adipisci est harum possimus exercitationem. Odit voluptas consequatur tempore deserunt et officia. Quas tenetur quia veniam dolores vero.
    </div>
    <div class="closure">
      Distinctio distinctio voluptates quo. Recusandae non est natus ex velit dolores beatae. Est nisi sit nobis corrupti tempora. Debitis et autem voluptatem reprehenderit cum. Occaecati tempore aut praesentium mollitia omnis perferendis nam.
    </div>
    <div class="closure">
      In dicta ut explicabo aliquam distinctio. Et et neque et. Est architecto quaerat debitis.
    </div>
  </div>
</div>

.container {
  width: 300px;
  border: 1px dotted black;
  overflow: hidden;
}

.closures {
  height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.closure {
  border: 1px solid gray;
}

const closures = document.getElementsByClassName("closure");

for (const closure of closures) {
  console.log(closure.offsetLeft);
}

And you'll get this (I commented out overflow: hidden so we can see what's "behind the overflow"):

Without any script, this already lays out how we want: when a closure is too tall to fit on the current page, it flexes to the next page (i.e. column). The script is demonstrating that by collecting the values of offsetLeft, we can both tell how many pages there are and how many items are on each page (we'd do this inside a useLayoutEffect). Then the only missing piece is how to display a specific "page" other than the first one, which we already have a pretty clean example of in LaterDepartures that uses a CSS variable.

Let me know if that makes sense, or if you already tried this and it didn't work.