cleanup, prepare BoardSettingsModal

dist/index.css

@@ -335,8 +335,8 @@ body[showing-chat] #chat-page-wrapper {
   min-height: unset;
   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 > div > .pane-wrapper > .pane > .toolbar button.ribbon-button > .icon {
+#chat-page > div > #main > div > .pane-wrapper > .pane > .toolbar button > .icon {
   font-size: 1.1rem;
 }
 #chat-page > div > #ribbon > span {

dist/index.js

@@ -175,6 +175,9 @@
     );
     return proxyState;
   }
+  function bulkSubscribe(statesToSubscibe, fn) {
+    statesToSubscibe.forEach((state) => state.subscribeSilent(fn));
+  }
   function createElement(tagName, attributes = {}, ...children) {
     const element = document.createElement(tagName);
     if (attributes != null)
@@ -1206,6 +1209,8 @@
     body = new State("");
     status = new State(void 0);
     sentByUser;
+    // state
+    isPresentingInfoModal = new State(false);
     // methods
     copyMessage = () => {
       navigator.clipboard.writeText(this.body.value);
@@ -1216,6 +1221,13 @@
     decryptMessage = () => {
       this.messagePageViewModel.decryptMessage(this);
     };
+    // view
+    showInfoModal = () => {
+      this.isPresentingInfoModal.value = true;
+    };
+    hideInfoModal = () => {
+      this.isPresentingInfoModal.value = false;
+    };
     // load
     loadData = () => {
       this.channel = this.chatMessage.channel;
@@ -1379,11 +1391,12 @@
   // src/ViewModel/Pages/boardViewModel.ts
   var BoardViewModel = class {
     taskPageViewModel;
-    // data
+    // state
     boardInfo;
     name = new State("");
     color = new State("standard" /* Standard */);
     isSelected;
+    isPresentingSettingsModal = new State(false);
     // view
     select = () => {
       this.taskPageViewModel.selectBoard(this);
@@ -1391,6 +1404,12 @@
     close = () => {
       this.taskPageViewModel.closeBoard();
     };
+    showSettings = () => {
+      this.isPresentingSettingsModal.value = true;
+    };
+    hideSettings = () => {
+      this.isPresentingSettingsModal.value = false;
+    };
     // load
     loadListRelevantData = () => {
       this.name.value = this.boardInfo.name;
@@ -1699,8 +1718,10 @@
       },
       message: {
         messagesHeadline: "Messages",
+        ///
         composerInputPlaceholder: "Type a message...",
         sendMessageButtonAudioLabel: "send message",
+        ///
         showMessageInfoButtonAudioLabel: "show message info",
         messageInfoHeadline: "Message Info",
         sentBy: "Sent by",
@@ -1715,7 +1736,14 @@
       task: {
         newBoardNamePlaceholder: "Create a board",
         createBoardButtonAudioLabel: "create board",
-        noBoardSelected: "No board selected"
+        ///
+        noBoardSelected: "No board selected",
+        ///
+        closeBoard: "close board",
+        showBoardSettingsButtonAudioLabel: "show board settigns",
+        ///
+        boardSettingsHeadline: "Board Settings",
+        boardNameInputLabel: "Board name"
       }
     }
   };
@@ -1725,34 +1753,19 @@
   var language = navigator.language.substring(0, 2);
   var translations = allTranslations[language] || allTranslations.en;
 
-  // src/View/Components/chatMessageInfoModal.tsx
+  // src/View/Modals/chatMessageInfoModal.tsx
-  function ChatMessageInfoModal(chatMessageViewModel, isOpen) {
+  function ChatMessageInfoModal(chatMessageViewModel) {
-    function closeModal() {
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": chatMessageViewModel.isPresentingInfoModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.sentBy), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.sender))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.timeSent), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.dateSent))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.channel), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.channel))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messageContent), /* @__PURE__ */ createElement(
-      isOpen.value = false;
-    }
-    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isOpen }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "account_circle"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.sentBy), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.sender))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "schedule"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.timeSent), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.dateSent))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "forum"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.channel), /* @__PURE__ */ createElement("b", { class: "break-word" }, chatMessageViewModel.channel))), /* @__PURE__ */ createElement("div", { class: "tile" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "description"), /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("span", null, translations.chatPage.message.messageContent), /* @__PURE__ */ createElement(
       "b",
       {
         class: "break-word",
         "subscribe:innerText": chatMessageViewModel.body
       }
-    )))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key")))), /* @__PURE__ */ createElement(
+    )))), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement("div", { class: "flex-column gap" }, /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.copyMessage }, translations.chatPage.message.copyMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "content_copy")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.resendMessage }, translations.chatPage.message.resendMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "redo")), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.decryptMessage }, translations.chatPage.message.decryptMessageButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "key")))), /* @__PURE__ */ createElement("button", { "on:click": chatMessageViewModel.hideInfoModal }, translations.general.closeButton, /* @__PURE__ */ createElement("span", { class: "icon" }, "close"))));
-      "button",
-      {
-        "on:click": closeModal,
-        "aria-label": translations.general.closeButton
-      },
-      translations.general.closeButton,
-      /* @__PURE__ */ createElement("span", { class: "icon" }, "close")
-    )));
   }
 
   // src/View/Components/chatMessage.tsx
   function ChatMessage(chatMessageViewModel) {
-    const isInfoModalOpen = new State(false);
-    function openModal() {
-      isInfoModalOpen.value = true;
-    }
     const statusIcon = createProxyState(
       [chatMessageViewModel.status],
       () => {
@@ -1783,12 +1796,12 @@
       ), /* @__PURE__ */ createElement("span", { class: "timestamp ellipsis" }, /* @__PURE__ */ createElement("span", { class: "icon", "subscribe:innerText": statusIcon }), chatMessageViewModel.dateSent)), /* @__PURE__ */ createElement("div", { class: "button-container" }, /* @__PURE__ */ createElement(
         "button",
         {
-          "on:click": openModal,
+          "on:click": chatMessageViewModel.showInfoModal,
           "aria-label": translations.chatPage.message.showMessageInfoButtonAudioLabel
         },
         /* @__PURE__ */ createElement("span", { class: "icon" }, "info")
       ))),
-      ChatMessageInfoModal(chatMessageViewModel, isInfoModalOpen)
+      ChatMessageInfoModal(chatMessageViewModel)
     );
   }
   var ChatMessageViewModelToView = (chatMessageViewModel) => {
@@ -2003,9 +2016,37 @@
     return BoardEntry(boardViewModel);
   };
 
+  // src/View/Modals/boardSettingsModal.tsx
+  function BoardSettingsModal(boardViewModel) {
+    return /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": boardViewModel.isPresentingSettingsModal }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("h2", null, translations.chatPage.message.messageInfoHeadline)), /* @__PURE__ */ createElement(
+      "button",
+      {
+        "on:click": boardViewModel.hideSettings
+      },
+      translations.general.closeButton,
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "close")
+    )));
+  }
+
   // src/View/ChatPages/boardPage.tsx
   function BoardPage(boardViewModel) {
-    return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }), /* @__PURE__ */ createElement("div", { class: "content" }));
+    return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "ghost",
+        "aria-label": translations.chatPage.task.closeBoard,
+        "on:click": boardViewModel.close
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "ghost",
+        "aria-label": translations.chatPage.task.boardSettingsHeadline,
+        "on:click": boardViewModel.showSettings
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "settings")
+    )), /* @__PURE__ */ createElement("div", { class: "content" }), BoardSettingsModal(boardViewModel));
   }
 
   // src/View/ChatPages/taskPage.tsx
@@ -2024,7 +2065,7 @@
         }
       }
     );
-    return /* @__PURE__ */ createElement("div", { id: "task-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper side" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
+    const listPaneWrapper = /* @__PURE__ */ createElement("div", { class: "pane-wrapper side" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("div", { class: "flex-row width-input" }, /* @__PURE__ */ createElement(
       "input",
       {
         "bind:value": taskPageViewModel.newBoardNameInput,
@@ -2050,7 +2091,17 @@
           BoardInfoToEntry
         ]
       }
-    )))), /* @__PURE__ */ createElement("div", { class: "pane-wrapper", "children:set": paneContent }));
+    ))));
+    const mainPageWrapper = /* @__PURE__ */ createElement("div", { class: "pane-wrapper", "children:set": paneContent });
+    bulkSubscribe([taskPageViewModel.selectedBoard], () => {
+      const selectedBoard = taskPageViewModel.selectedBoard.value;
+      if (selectedBoard == void 0) {
+        listPaneWrapper.scrollIntoView();
+      } else {
+        mainPageWrapper.scrollIntoView();
+      }
+    });
+    return /* @__PURE__ */ createElement("div", { id: "task-page" }, listPaneWrapper, mainPageWrapper);
   }
 
   // src/View/chatPage.tsx

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">
+  return (
-    <div class="toolbar"></div>
+    <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>
-  </div>;
+
+      {BoardSettingsModal(boardViewModel)}
+    </div>
+  );
 }

src/View/ChatPages/taskPage.tsx

@@ -26,8 +26,7 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
     }
   );
 
-  return (
+  const listPaneWrapper = (
-    <div id="task-page">
     <div class="pane-wrapper side">
       <div class="pane">
         <div class="toolbar">
@@ -61,8 +60,25 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
         </div>
       </div>
     </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,
+  chatMessageViewModel: ChatMessageViewModel
-  isOpen: React.State<boolean>
 ) {
-  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
+        <button on:click={chatMessageViewModel.hideInfoModal}>
-          on:click={closeModal}
-          aria-label={translations.general.closeButton}
-        >
           {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",
     },
   },
 };

src/ViewModel/Chat/chatMessageViewModel.ts

@@ -18,6 +18,9 @@ export default class ChatMessageViewModel {
   >(undefined);
   sentByUser: boolean;
   
+  // state
+  isPresentingInfoModal: React.State<boolean> = new React.State(false);
+
   // methods
   copyMessage = (): void => {
     navigator.clipboard.writeText(this.body.value);
@@ -29,6 +32,15 @@ export default class ChatMessageViewModel {
     this.messagePageViewModel.decryptMessage(this);
   };
 
+  // view
+  showInfoModal = (): void => {
+    this.isPresentingInfoModal.value = true;
+  }
+
+  hideInfoModal = (): void => {
+    this.isPresentingInfoModal.value = false;
+  }
+
   // load
   loadData = (): void => {
     this.channel = this.chatMessage.channel;

src/ViewModel/Pages/boardViewModel.ts

@@ -7,13 +7,14 @@ import TaskPageViewModel from "./taskPageViewModel";
 export default class BoardViewModel {
   taskPageViewModel: TaskPageViewModel;
 
-  // data
+  // state
   boardInfo: BoardInfoFileContent;
 
   name: React.State<string> = new React.State("");
   color: React.State<Color> = new React.State<Color>(Color.Standard);
 
   isSelected: React.State<boolean>;
+  isPresentingSettingsModal: React.State<boolean> = new React.State(false);
 
   // view
   select = (): void => {
@@ -24,6 +25,14 @@ export default class BoardViewModel {
     this.taskPageViewModel.closeBoard();
   };
 
+  showSettings = (): void => {
+    this.isPresentingSettingsModal.value = true;
+  };
+
+  hideSettings = (): void => {
+    this.isPresentingSettingsModal.value = false;
+  };
+
   // load
   loadListRelevantData = (): void => {
     this.name.value = this.boardInfo.name;