Add Layout and ability to render its tree

Both on update events from `musicplayer` but also on interval

src/musicplayer/musicplayer.gleam

@@ -2,11 +2,11 @@ import gleam/erlang/process.{type Name, type Subject}
 import gleam/otp/actor
 import gleam/result
 import gleam/string
+import musicplayer/time/time
 
 import musicplayer/control.{type Control}
 import musicplayer/input/key.{type Key}
 import musicplayer/mpv/control as mpv_control
-import musicplayer/time/time
 import musicplayer/ui/control as ui_control
 import musicplayer/ui/layout
 
@@ -121,7 +121,7 @@ fn update_playback_time(
         ui,
         ui_control.UpdateState(
           layout.PlaybackTime,
-          "playback time: " <> time.to_time_string(playback_time),
+          "playback time: " <> time.to_duration_string(playback_time),
         ),
       )
   }

src/musicplayer/time/time.gleam

@@ -2,8 +2,11 @@ import gleam/float
 import gleam/int
 import gleam/string
 
-pub fn to_time_string(seconds: Float) -> String {
+pub fn to_duration_string(seconds: Float) -> String {
-  let total = float.truncate(seconds)
+  let total =
+    seconds
+    |> float.max(0.0)
+    |> float.truncate
 
   let minutes = total / 60
   let seconds = total % 60

test/musicplayer/time/time_test.gleam

@@ -0,0 +1,32 @@
+import gleam/list
+import gleeunit
+
+import musicplayer/time/time
+
+pub fn main() -> Nil {
+  gleeunit.main()
+}
+
+type TestCase {
+  TestCase(seconds: Float, expected: String)
+}
+
+pub fn to_duration_string_test() {
+  let test_cases = [
+    TestCase(-1.0, "00:00"),
+    TestCase(0.0, "00:00"),
+    TestCase(9.0, "00:09"),
+    TestCase(10.0, "00:10"),
+    TestCase(11.0, "00:11"),
+    TestCase(60.0, "01:00"),
+    TestCase(61.0, "01:01"),
+    TestCase(120.0, "02:00"),
+    TestCase(600.0, "10:00"),
+    TestCase(6000.0, "100:00"),
+    TestCase(6001.0, "100:01"),
+  ]
+
+  list.each(test_cases, fn(tc) {
+    assert tc.expected == time.to_duration_string(tc.seconds)
+  })
+}