add list to BoardPage

src/View/ChatPages/taskPage.tsx

@@ -1,9 +1,12 @@
 import * as React from "bloatless-react";
 
+import { BoardInfoToEntry } from "../Components/boardEntry";
 import TaskPageViewModel from "../../ViewModel/Pages/taskPageViewModel";
 import { translations } from "../translations";
 
 export function TaskPage(taskPageViewModel: TaskPageViewModel) {
+  taskPageViewModel.loadData();
+
   return (
     <div id="task-page">
       <div class="pane side">
@@ -26,7 +29,13 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
             </button>
           </div>
 
-          <div class="flex-row gap"></div>
+          <hr></hr>
+
+          <div
+            class="grid gap"
+            style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
+            children:append={[taskPageViewModel.boards, BoardInfoToEntry]}
+          ></div>
         </div>
       </div>
       <div class="pane">

src/View/Components/boardEntry.tsx

@@ -0,0 +1,21 @@
+import "./chatEntry.css";
+
+import * as React from "bloatless-react";
+
+import { BoardInfoFileContent } from "../../Model/Files/taskModel";
+
+export function BoardEntry(boardInfo: BoardInfoFileContent) {
+  const view = (
+    <button color={boardInfo.color} class="tile">
+      <b>{boardInfo.name}</b>
+    </button>
+  );
+
+  return view;
+}
+
+export const BoardInfoToEntry: React.StateItemConverter<
+  BoardInfoFileContent
+> = (boardInfo: BoardInfoFileContent) => {
+  return BoardEntry(boardInfo);
+};

src/ViewModel/Pages/taskPageViewModel.ts

@@ -1,8 +1,6 @@
 import * as React from "bloatless-react";
 
-import TaskModel, {
-  BoardInfoFileContent,
-} from "../../Model/Files/taskModel";
+import TaskModel, { BoardInfoFileContent } from "../../Model/Files/taskModel";
 
 import StorageModel from "../../Model/Global/storageModel";
 
@@ -26,6 +24,22 @@ export default class TaskPageViewModel {
 
     this.taskModel.createBoard(this.newBoardNameInput.value);
     this.newBoardNameInput.value = "";
+
+    this.loadData();
+  };
+
+  // load
+  loadData = (): void => {
+    this.boards.clear();
+
+    const boardIds: string[] = this.taskModel.listBoardIds();
+    for (const boardId of boardIds) {
+      const boardInfo: BoardInfoFileContent | null =
+        this.taskModel.getBoardInfo(boardId);
+        if (boardInfo == null) continue;
+        
+      this.boards.add(boardInfo);
+    }
   };
 
   // init