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>
   );
 }

src/View/Components/chatMessage.tsx

@@ -1,16 +1,11 @@
 import * as React from "bloatless-react";
 
-import { ChatMessageInfoModal } from "./chatMessageInfoModal";
+import { ChatMessageInfoModal } from "../Modals/chatMessageInfoModal";
 import { ChatMessageStatus } from "../../Model/Chat/chatModel";
 import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { translations } from "../translations";
 
 export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
-  const isInfoModalOpen = new React.State(false);
-  function openModal() {
-    isInfoModalOpen.value = true;
-  }
-
   const statusIcon = React.createProxyState(
     [chatMessageViewModel.status],
     () => {
@@ -49,7 +44,7 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
         
         <div class="button-container">
           <button
-            on:click={openModal}
+            on:click={chatMessageViewModel.showInfoModal}
             aria-label={
               translations.chatPage.message.showMessageInfoButtonAudioLabel
             }
@@ -59,7 +54,7 @@ export function ChatMessage(chatMessageViewModel: ChatMessageViewModel) {
         </div>
       </div>
 
-      {ChatMessageInfoModal(chatMessageViewModel, isInfoModalOpen)}
+      {ChatMessageInfoModal(chatMessageViewModel)}
     </div>
   );
 }

src/View/Modals/boardSettingsModal.tsx

@@ -0,0 +1,22 @@
+import * as React from "bloatless-react";
+
+import BoardViewModel from "../../ViewModel/Pages/boardViewModel";
+import { translations } from "../translations";
+
+export function BoardSettingsModal(boardViewModel: BoardViewModel) {
+  return (
+    <div class="modal" toggle:open={boardViewModel.isPresentingSettingsModal}>
+      <div>
+        <main>
+          <h2>{translations.chatPage.message.messageInfoHeadline}</h2>
+        </main>
+        <button
+          on:click={boardViewModel.hideSettings}
+        >
+          {translations.general.closeButton}
+          <span class="icon">close</span>
+        </button>
+      </div>
+    </div>
+  );
+}

src/View/Modals/chatMessageInfoModal.tsx

@@ -4,15 +4,10 @@ import ChatMessageViewModel from "../../ViewModel/Chat/chatMessageViewModel";
 import { translations } from "../translations";
 
 export function ChatMessageInfoModal(
-  chatMessageViewModel: ChatMessageViewModel,
-  isOpen: React.State<boolean>
+  chatMessageViewModel: ChatMessageViewModel
 ) {
-  function closeModal() {
-    isOpen.value = false;
-  }
-
   return (
-    <div class="modal" toggle:open={isOpen}>
+    <div class="modal" toggle:open={chatMessageViewModel.isPresentingInfoModal}>
       <div>
         <main>
           <h2>{translations.chatPage.message.messageInfoHeadline}</h2>
@@ -71,10 +66,7 @@ export function ChatMessageInfoModal(
             </button>
           </div>
         </main>
-        <button
-          on:click={closeModal}
-          aria-label={translations.general.closeButton}
-        >
+        <button on:click={chatMessageViewModel.hideInfoModal}>
           {translations.general.closeButton}
           <span class="icon">close</span>
         </button>

src/View/chatPage.css

@@ -162,7 +162,7 @@ body[showing-chat] #chat-page-wrapper {
   height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
 }
 
-#chat-page > div > #ribbon button.ribbon-button > .icon,
+#chat-page > div > #ribbon button > .icon,
 #chat-page
   > div
   > #main
@@ -170,7 +170,7 @@ body[showing-chat] #chat-page-wrapper {
   > .pane-wrapper
   > .pane
   > .toolbar
-  button.ribbon-button
+  button
   > .icon {
   font-size: 1.1rem;
 }

src/View/translations.ts

@@ -106,9 +106,13 @@ const englishTranslations = {
     message: {
       messagesHeadline: "Messages",
 
+      ///
+
       composerInputPlaceholder: "Type a message...",
       sendMessageButtonAudioLabel: "send message",
 
+      ///
+
       showMessageInfoButtonAudioLabel: "show message info",
       messageInfoHeadline: "Message Info",
 
@@ -127,7 +131,20 @@ const englishTranslations = {
       newBoardNamePlaceholder: "Create a board",
       createBoardButtonAudioLabel: "create board",
 
+      ///
+      
       noBoardSelected: "No board selected",
+
+      ///
+
+      closeBoard: "close board",
+      showBoardSettingsButtonAudioLabel: "show board settigns",
+
+      ///
+
+      boardSettingsHeadline: "Board Settings",
+
+      boardNameInputLabel: "Board name",
     },
   },
 };