Use StringTree to store the rendered layout

And print the entire layout at once

src/musicplayer/ui/internal.gleam

@@ -7,9 +7,13 @@ pub fn clear_screen() -> Nil {
   io.print("\u{001B}[2J\u{001B}[H")
 }
 
-pub fn print_at(text: String, x: Int, y: Int) -> Nil {
+pub fn chars_at(chars: String, x: Int, y: Int) -> String {
   let seq = "\u{001B}[" <> int.to_string(y) <> ";" <> int.to_string(x) <> "H"
-  io.print(seq <> text)
+  seq <> chars
+}
+
+pub fn print(chars: String) -> Nil {
+  io.print(chars)
 }
 
 pub fn hide_cursor() -> Nil {

src/musicplayer/ui/layout.gleam

@@ -1,5 +1,6 @@
 import gleam/dict
 import gleam/list
+import gleam/string_tree.{type StringTree}
 
 import musicplayer/ui/internal
 
@@ -61,12 +62,29 @@ pub fn update_dimensions(layout: Layout, width: Int, height: Int) -> Layout {
 }
 
 pub fn render(layout: Layout, from: Section) -> Nil {
-  case dict.get(layout.nodes, from) {
+  string_tree.new()
-    Error(_) -> Nil
+  |> render_loop(layout, from, _)
-    Ok(node) -> {
+  |> string_tree.to_string
-      list.each(node.children, fn(child) { render(layout, child) })
+  |> internal.print
+}
 
-      internal.print_at(node.content, node.x, node.y)
+pub fn render_loop(
+  layout: Layout,
+  from: Section,
+  into: StringTree,
+) -> StringTree {
+  case dict.get(layout.nodes, from) {
+    Error(_) -> into
+    Ok(node) -> {
+      let parent =
+        string_tree.append(
+          into,
+          internal.chars_at(node.content, node.x, node.y),
+        )
+
+      list.fold(node.children, parent, fn(into_acc, child) {
+        render_loop(layout, child, into_acc)
+      })
     }
   }
 }