🎉 Show Boards on BoardOverview works

Try with proper formatting of listitem to show additional Infos.
Otherwise using a datatable might be more appropiate

src/kanban_tui/assets/style.tcss

@@ -229,43 +229,48 @@ ModalNewBoardScreen {
     Vertical{
         width:60%;
         border:$success;
-        height:40%;
+        height:auto;
         align:center middle;
         content-align:center middle;
 
-        #label_header {
+        Horizontal{
+            height:auto;
+        }
+        Label{
             width:1fr;
-            height:1fr;
+            height:auto;
             background: $background;
             align:center middle;
             text-align:center;
+            padding: 1 0;
         }
 
         #input_board_icon{
             width:2fr;
-            height: 1fr;
+            height: auto;
+            border: tall $success;
+            border-title-align:center;
             text-align:center;
         }
         #input_board_name{
             width:5fr;
-            height: 1fr;
+            height: auto;
+            border: tall $success;
+            border-title-align:center;
             text-align:center;
         }
         #static_preview_icon{
-            width:1fr;
-            height: 1fr;
+            width:2fr;
+            height: auto;
             color: $text-disabled;
+            border: tall $success;
+            border-title-align:center;
             text-align:center;
-            padding: 1 0 0 0;
-        }
-        CreationDateInfo{
-            width:1fr;
-            height:1fr;
-            align:center middle;
+            padding: 0 0 0 0;
         }
         Button {
             width: 1fr;
-            height:1fr;
+            height:auto;
         }
     }
 }
@@ -275,18 +280,23 @@ ModalBoardOverviewScreen {
     Vertical{
         width:70%;
         border:$success;
-        height:75%;
+        height:50%;
         align:center middle;
         content-align:center middle;
 
         Label{
             width:1fr;
-            height: 1fr;
+            height: auto;
             text-align:center;
+
+        VerticalScroll{
+            width:1fr;
+            height: auto;
+            }
         }
         Button {
             width: 1fr;
-            height:1fr;
+            height:auto;
         }
     }
 }

src/kanban_tui/modal/modal_board_screen.py

@@ -1,4 +1,5 @@
 from typing import Iterable
+from datetime import datetime
 
 from textual import on
 from textual.widget import Widget
@@ -10,7 +11,7 @@
 from textual.containers import Horizontal, Vertical
 
 from kanban_tui.classes.board import Board
-from kanban_tui.widgets.modal_task_widgets import CreationDateInfo
+from kanban_tui.widgets.modal_board_widgets import BoardList
 
 
 class ModalNewBoardScreen(ModalScreen):
@@ -24,28 +25,34 @@ def _on_mount(self, event: Mount) -> None:
         if self.kanban_board:
             self.query_one("#btn_continue_new_board", Button).label = "Edit Board"
             self.query_one("#label_header", Label).update("Edit Board")
-            # self.read_values_from_task()
+
+        self.query_one("#input_board_icon", Input).border_title = "Icon"
+        self.query_one("#input_board_name", Input).border_title = "Board Name"
+        self.query_one("#static_preview_icon", Static).border_title = "Preview"
+        # self.read_values_from_board()
         return super()._on_mount(event)
 
     def compose(self) -> Iterable[Widget]:
         with Vertical():
             yield Label("Create New Board", id="label_header")
             with Horizontal():
                 yield Input(
-                    placeholder="Icon",
-                    value="books",
-                    # validate_on=["changed"],
-                    # validators=[ValidBoard()],
+                    placeholder="e.g. books",
+                    value="",
                     id="input_board_icon",
                 )
-                yield Static(id="static_preview_icon")
+                yield Static(":books:", id="static_preview_icon")
                 yield Input(
-                    placeholder="New Board Name",
+                    placeholder="Enter Board Name",
                     validate_on=["changed"],
                     validators=[ValidBoard()],
                     id="input_board_name",
                 )
-            yield CreationDateInfo()
+            # yield CreationDateInfo()
+            yield Label(
+                f"Board created at: {datetime.now().replace(microsecond=0)}",
+                id="label_create_date",
+            )
             with Horizontal(id="horizontal_buttons_delete"):
                 yield Button(
                     "Create Board",
@@ -78,7 +85,7 @@ def check_if_board_icon_can_is_empty(self, event: Input.Changed):
             )
         else:
             self.query_exactly_one("#static_preview_icon", Static).update(
-                "[gray]Preview[/]"
+                "[gray]No Icon[/]"
             )
 
 
@@ -106,14 +113,12 @@ def _on_mount(self, event: Mount) -> None:
     def compose(self) -> Iterable[Widget]:
         with Vertical():
             yield Label("Your Boards", id="label_header")
-            with Horizontal(id="horizontal_buttons_delete"):
-                yield Button(
-                    "New Board",
-                    id="btn_create_board",
-                    variant="success",
-                )
-                yield Button("Edit", id="btn_edit_board", variant="warning")
-                yield Button("Delete", id="btn_delete_board", variant="error")
+            yield BoardList()
+            yield Button(
+                "New Board",
+                id="btn_create_board",
+                variant="success",
+            )
 
             yield Footer(show_command_palette=False)
         return super().compose()

src/kanban_tui/widgets/modal_board_widgets.py

@@ -0,0 +1,39 @@
+from typing import Iterable, TYPE_CHECKING
+
+if TYPE_CHECKING:
+    from kanban_tui.app import KanbanTui
+
+from textual.containers import VerticalScroll
+from textual.widget import Widget
+from textual.widgets import ListView, ListItem, Label
+
+from kanban_tui.classes.board import Board
+
+# Or use Datatable?
+
+
+class BoardList(VerticalScroll):
+    app: "KanbanTui"
+
+    def compose(self) -> Iterable[Widget]:
+        self.id = "board_list"
+
+        yield ListView(
+            *[BoardListItem(board=board) for board in self.app.board_list],
+        )
+
+        return super().compose()
+
+    def on_mount(self):
+        self.query_one(ListView).index = None
+
+
+class BoardListItem(ListItem):
+    def __init__(self, board: Board) -> None:
+        self.board = board
+        super().__init__(id=f"listitem_board_{self.board.board_id}")
+
+    def compose(self) -> Iterable[Widget]:
+        yield Label(self.board.name)
+
+        return super().compose()