Move UI Logic to a Builder

[andreamancuso]

Something like

public override IRenderable Render() =>
 UI.Build()
 .Button("Add todo", AppStateManager.OnClick, ButtonStyle)
 .ForEach(props.Value?.TodoItems ?? new(), todo => 
 UI.Text($"{todo.Text} ({(todo.Done ? "done" : "to do")}).", TextStyle))
 .Render();

Where UI is a helper with extension methods:

public static class UI
{
 public static UIBuilder Build() => new UIBuilder();

 public static UIBuilder ForEach<T>(this UIBuilder builder, IEnumerable<T> items, Func<T, IRenderable> render) 
 => builder.Add(items.Select(render));

 public static UIBuilder Button(this UIBuilder builder, string text, Action onClick, WidgetStyle style)
 => builder.Add(WidgetNodeFactory.Button(text, onClick, style));

 public static UIBuilder Text(this UIBuilder builder, string text, WidgetStyle style)
 => builder.Add(WidgetNodeFactory.UnformattedText(text, style));
}

public class UIBuilder
{
 private readonly List<IRenderable> _elements = new();

 public UIBuilder Add(IRenderable element)
 {
 _elements.Add(element);
 return this;
 }

 public UIBuilder Add(IEnumerable<IRenderable> elements)
 {
 _elements.AddRange(elements);
 return this;
 }

 public IRenderable Render() => WidgetNodeFactory.Node(_elements);
}