fix imports

src/View/ChatPages/taskPage.tsx

@@ -1,15 +1,17 @@
 import * as React from "bloatless-react";
 
-import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
+import TaskViewModel from "../../ViewModel/Files/taskViewModel";
 import { translations } from "../translations";
 
-export function TaskPage(chatViewModel: ChatViewModel) {
+export function TaskPage(taskViewModel: TaskViewModel) {
   return (
     <div id="task-page">
       <div class="pane side">
         <div class="content">
           <div class="flex-row width-input">
             <input
+              bind:value={taskViewModel.newBoardNameInput}
+              on:enter={taskViewModel.createBoard}
               placeholder={translations.chatPage.task.newBoardNamePlaceholder}
             ></input>
             <button
@@ -17,6 +19,8 @@ export function TaskPage(chatViewModel: ChatViewModel) {
               aria-label={
                 translations.chatPage.task.createBoardButtonAudioLabel
               }
+              on:click={taskViewModel.createBoard}
+              toggle:disabled={taskViewModel.cannotCreateBoard}
             >
               <span class="icon">add</span>
             </button>
@@ -26,9 +30,7 @@ export function TaskPage(chatViewModel: ChatViewModel) {
         </div>
       </div>
       <div class="pane">
-        <div class="toolbar">
+        <div class="toolbar"></div>
-          <span subscribe:innerText={chatViewModel.primaryChannel}></span>
-        </div>
         <div class="content"></div>
       </div>
     </div>

src/View/Components/chatEntry.tsx

@@ -2,7 +2,7 @@ import "./chatEntry.css";
 
 import * as React from "bloatless-react";
 
-import ChatViewModel from "../../ViewModel/chatViewModel";
+import ChatViewModel from "../../ViewModel/Chat/chatViewModel";
 
 export function ChatEntry(chatViewModel: ChatViewModel) {
   const view = (

src/View/chatPage.tsx

@@ -2,7 +2,7 @@ import "./homePage.css";
 
 import * as React from "bloatless-react";
 
-import ChatViewModel, { ChatPageType } from "../ViewModel/chatViewModel";
+import ChatViewModel, { ChatPageType } from "../ViewModel/Chat/chatViewModel";
 
 import { ChatViewToggleButton } from "./Components/chatViewToggleButton";
 import { MessagePage } from "./ChatPages/messagePage";

src/ViewModel/Files/taskViewModel.ts

@@ -1,3 +1,38 @@
 import * as React from "bloatless-react";
 
-export default class TaskViewModel {}
+import TaskModel, {
+  BoardInfoFileContent,
+  TaskFileContent,
+} from "../../Model/Files/taskModel";
+
+import StorageModel from "../../Model/Global/storageModel";
+
+export default class TaskViewModel {
+  taskModel: TaskModel;
+  storageModel: StorageModel;
+
+  // state
+  newBoardNameInput: React.State<string> = new React.State("");
+
+  boards: React.ListState<BoardInfoFileContent> = new React.ListState();
+
+  // guards
+  cannotCreateBoard: React.State<boolean> = React.createProxyState(
+    [this.newBoardNameInput],
+    () => this.newBoardNameInput.value == ""
+  );
+
+  // methods
+  createBoard = (): void => {
+    if (this.cannotCreateBoard.value == true) return;
+
+    this.taskModel.createBoard(this.newBoardNameInput.value);
+    this.newBoardNameInput.value = "";
+  };
+
+  // init
+  constructor(taskModel: TaskModel, storageModel: StorageModel) {
+    this.taskModel = taskModel;
+    this.storageModel = storageModel;
+  }
+}