cleanup, prepare BoardSettingsModal

src/View/ChatPages/boardPage.tsx

@@ -1,10 +1,31 @@
 import * as React from "bloatless-react";
 
+import { BoardSettingsModal } from "../Modals/boardSettingsModal";
 import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
+import { translations } from "../translations";
 
 export function BoardPage(boardViewModel: BoardViewModel) {
-  return <div class="pane">
-    <div class="toolbar"></div>
-    <div class="content"></div>
-  </div>;
+  return (
+    <div class="pane">
+      <div class="toolbar">
+        <button
+          class="ghost"
+          aria-label={translations.chatPage.task.closeBoard}
+          on:click={boardViewModel.close}
+        >
+          <span class="icon">arrow_back</span>
+        </button>
+        <button
+          class="ghost"
+          aria-label={translations.chatPage.task.boardSettingsHeadline}
+          on:click={boardViewModel.showSettings}
+        >
+          <span class="icon">settings</span>
+        </button>
+      </div>
+      <div class="content"></div>
+
+      {BoardSettingsModal(boardViewModel)}
+    </div>
+  );
 }

src/View/ChatPages/taskPage.tsx

@@ -26,43 +26,59 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
     }
   );
 
-  return (
-    <div id="task-page">
-      <div class="pane-wrapper side">
-        <div class="pane">
-          <div class="toolbar">
-            <div class="flex-row width-input">
-              <input
-                bind:value={taskPageViewModel.newBoardNameInput}
-                on:enter={taskPageViewModel.createBoard}
-                placeholder={translations.chatPage.task.newBoardNamePlaceholder}
-              ></input>
-              <button
-                class="primary"
-                aria-label={
-                  translations.chatPage.task.createBoardButtonAudioLabel
-                }
-                on:click={taskPageViewModel.createBoard}
-                toggle:disabled={taskPageViewModel.cannotCreateBoard}
-              >
-                <span class="icon">add</span>
-              </button>
-            </div>
-          </div>
-          <div class="content">
-            <div
-              class="grid gap"
-              style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
-              children:append={[
-                taskPageViewModel.boardViewModels,
-                BoardInfoToEntry,
-              ]}
-            ></div>
+  const listPaneWrapper = (
+    <div class="pane-wrapper side">
+      <div class="pane">
+        <div class="toolbar">
+          <div class="flex-row width-input">
+            <input
+              bind:value={taskPageViewModel.newBoardNameInput}
+              on:enter={taskPageViewModel.createBoard}
+              placeholder={translations.chatPage.task.newBoardNamePlaceholder}
+            ></input>
+            <button
+              class="primary"
+              aria-label={
+                translations.chatPage.task.createBoardButtonAudioLabel
+              }
+              on:click={taskPageViewModel.createBoard}
+              toggle:disabled={taskPageViewModel.cannotCreateBoard}
+            >
+              <span class="icon">add</span>
+            </button>
           </div>
         </div>
+        <div class="content">
+          <div
+            class="grid gap"
+            style="grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr))"
+            children:append={[
+              taskPageViewModel.boardViewModels,
+              BoardInfoToEntry,
+            ]}
+          ></div>
+        </div>
       </div>
+    </div>
+  );
 
-      <div class="pane-wrapper" children:set={paneContent}></div>
+  const mainPageWrapper = (
+    <div class="pane-wrapper" children:set={paneContent}></div>
+  );
+
+  React.bulkSubscribe([taskPageViewModel.selectedBoard], () => {
+    const selectedBoard = taskPageViewModel.selectedBoard.value;
+    if (selectedBoard == undefined) {
+      listPaneWrapper.scrollIntoView();
+    } else {
+      mainPageWrapper.scrollIntoView();
+    }
+  });
+
+  return (
+    <div id="task-page">
+      {listPaneWrapper}
+      {mainPageWrapper}
     </div>
   );
 }