Agile and Usage screen: Redesign widget space

[ryanw-mobile]

After 2 weeks' trial, it seems having the widgets filling up the space horizontally isn't that meaningful especially on desktop with large screen. It increases the complexity to code each of the layout, too.

So we should probably try using the flow layout to arrange fixed-size widgets so later on we just have to sequentially add new widgets to the queue, without having to redesign the layout for different window sizes.

This can reduce quite a number of adaptive composable layouts

[ryanw-mobile]

It turns out to be challenging - we should instead impose some restriction so each widget has to follow the same layout standard, so it can be processed more easily.

Create a shared composable, e.g. CardWidget{} so it has the same card appearance and width limitation. If there's too much information to fit in one widget, split it into two.

Then we need a way to present this n number of widgets according to different WindowSizeClass.

So each widget will have the same size and is predictable. Although boring but it guarantees we can manage the complexity as we keep on adding new features to this app.

[ryanw-mobile]

A better alternative will be following the way we do the layout for partitioned grid cells: so given the ViewModel request the number of columns, at the top level (main lazy column), we add a new AdaptiveLayout which takes a predefined number of slots (that we simply provide the composable inline). That AdaptiveLayout will fill enough number of items in one or more LazyColumn item with Row(), so that we can reasonably make sure all widgets on the same row shares the same dynamic height.