add toggle to hide/show list of boards

dist/index.css

@@ -715,6 +715,15 @@ body[showing-chat] #chat-page-wrapper {
   content: "";
   display: flex;
 }
+#chat-page > div > #main > #task-page .board-close-button {
+  display: none;
+}
+#chat-page > div > #main > #task-page .board-toggle-button {
+  display: flex;
+}
+#chat-page > div > #main > #task-page[isshowingboard][showingboardlist=false] #board-list {
+  display: none;
+}
 @media (min-width: 640px) {
   #chat-page > div > #main > #task-page .task-grid {
     display: grid;
@@ -734,6 +743,12 @@ body[showing-chat] #chat-page-wrapper {
   #chat-page > div > #main > #task-page[isshowingboard] #board-content {
     display: flex;
   }
+  #chat-page > div > #main > #task-page .board-close-button {
+    display: flex;
+  }
+  #chat-page > div > #main > #task-page .board-toggle-button {
+    display: none;
+  }
 }
 
 /* src/View/Components/fileBrowser.css */

dist/index.js

@@ -2353,6 +2353,7 @@
     // state
     newBoardNameInput = new State("");
     boardViewModels = new MapState();
+    isShowingBoadList = new State(true);
     selectedBoardId = new State(
       void 0
     );
@@ -2380,6 +2381,9 @@
       this.updateBoardIndices();
     };
     // view
+    toggleBoardList = () => {
+      this.isShowingBoadList.value = !this.isShowingBoadList.value;
+    };
     showBoardInList = (boardInfo) => {
       const boardViewModel = new BoardViewModel(
         this.coreViewModel,
@@ -2578,7 +2582,8 @@
         noBoardSelected: "No board selected",
         boardNotFound: "Board not found",
         ///
-        closeBoard: "close board",
+        closeBoardButtonAudioLabel: "close board",
+        toggleBoardButtonAudioLabel: "toggle board list",
         showBoardSettingsButtonAudioLabel: "show board settigns",
         listViewButtonAudioLabel: "list view",
         kanbanViewButtonAudioLabel: "kanban view",
@@ -2685,10 +2690,10 @@
       },
       dataTransferModal: {
         transferDataHeadline: "Daten\xFCbertragung",
-        selectionDescription: "W\xE4hlen Sie die Daten aus, die Sie \xFCbertragen m\xF6chten.",
+        selectionDescription: "W\xE4hle die Daten aus, die du \xFCbertragen m\xF6chtest.",
-        dataEntryDescription: "Geben Sie diese Informationen auf dem anderen Ger\xE4t ein.",
+        dataEntryDescription: "Gib diese Informationen auf dem anderen Ger\xE4t ein.",
-        dataEntryInputDescription: "Geben Sie die auf dem anderen Ger\xE4t angezeigten Informationen ein.",
+        dataEntryInputDescription: "Gib die auf dem anderen Ger\xE4t angezeigten Informationen ein.",
-        readyToReceiveDescription: "Klicken Sie auf dem anderen Ger\xE4t auf 'Senden'.",
+        readyToReceiveDescription: "Klicke auf dem anderen Ger\xE4t auf 'Senden'.",
         fromThisDeviceButton: "Von diesem Ger\xE4t",
         toThisDeviceButton: "An dieses Ger\xE4t",
         generalHeadline: "Allgemein",
@@ -2752,7 +2757,8 @@
           createBoardButtonAudioLabel: "board erstellen",
           noBoardSelected: "Kein Board ausgew\xE4hlt",
           boardNotFound: "Board nicht gefunden",
-          closeBoard: "Board schlie\xDFen",
+          closeBoardButtonAudioLabel: "board schlie\xDFen",
+          toggleBoardButtonAudioLabel: "board-liste ein/ausblenden",
           showBoardSettingsButtonAudioLabel: "Board-Einstellungen anzeigen",
           listViewButtonAudioLabel: "Listenansicht",
           kanbanViewButtonAudioLabel: "Kanban-Ansicht",
@@ -2918,7 +2924,8 @@
           createBoardButtonAudioLabel: "crear tablero",
           noBoardSelected: "Ning\xFAn tablero seleccionado",
           boardNotFound: "Tablero no encontrado",
-          closeBoard: "cerrar tablero",
+          closeBoardButtonAudioLabel: "cerrar tablero",
+          toggleBoardButtonAudioLabel: "mostrar o ocultar lista de tableros",
           showBoardSettingsButtonAudioLabel: "mostrar configuraci\xF3n del tablero",
           listViewButtonAudioLabel: "vista de lista",
           kanbanViewButtonAudioLabel: "vista kanban",
@@ -4176,11 +4183,20 @@
     return /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
       "button",
       {
-        class: "ghost",
+        class: "ghost board-close-button",
-        "aria-label": translations.chatPage.task.closeBoard,
+        "aria-label": translations.chatPage.task.closeBoardButtonAudioLabel,
         "on:click": boardViewModel.close
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "arrow_back")
+    ), /* @__PURE__ */ createElement(
+      "button",
+      {
+        class: "ghost board-toggle-button",
+        "aria-label": translations.chatPage.task.toggleBoardButtonAudioLabel,
+        "on:click": boardViewModel.taskPageViewModel.toggleBoardList,
+        "toggle:selected": boardViewModel.taskPageViewModel.isShowingBoadList
+      },
+      /* @__PURE__ */ createElement("span", { class: "icon" }, "dock_to_left")
     ), /* @__PURE__ */ createElement(
       "button",
       {
@@ -4273,7 +4289,7 @@
         return BoardPage(selectedBoard);
       }
     );
-    return /* @__PURE__ */ createElement("div", { id: "task-page", "toggle:isshowingboard": isShowingBoard }, /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "task-page", "toggle:isshowingboard": isShowingBoard, "set:showingboardlist": taskPageViewModel.isShowingBoadList }, /* @__PURE__ */ createElement(
       "div",
       {
         id: "board-list",

src/View/ChatPages/boardPage.tsx

@@ -10,7 +10,6 @@ import { BoardStatusGridPage } from "./boardStatusGridPage";
 import { BoardViewToggleButton } from "../Components/boardViewToggleButton";
 import { SearchModal } from "../Modals/searchModal";
 import { TaskSettingsModal } from "../Modals/taskSettingsModal";
-import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { translations } from "../translations";
 
@@ -60,12 +59,20 @@ export function BoardPage(boardViewModel: BoardViewModel) {
       <div class="toolbar">
         <span>
           <button
-            class="ghost"
+            class="ghost board-close-button"
-            aria-label={translations.chatPage.task.closeBoard}
+            aria-label={translations.chatPage.task.closeBoardButtonAudioLabel}
             on:click={boardViewModel.close}
           >
             <span class="icon">arrow_back</span>
           </button>
+          <button
+            class="ghost board-toggle-button"
+            aria-label={translations.chatPage.task.toggleBoardButtonAudioLabel}
+            on:click={boardViewModel.taskPageViewModel.toggleBoardList}
+            toggle:selected={boardViewModel.taskPageViewModel.isShowingBoadList}
+          >
+            <span class="icon">dock_to_left</span>
+          </button>
           <button
             class="ghost"
             aria-label={translations.chatPage.task.boardSettingsHeadline}

src/View/ChatPages/taskPage.css

@@ -76,6 +76,22 @@
   display: flex;
 }
 
+#chat-page > div > #main > #task-page .board-close-button {
+  display: none;
+}
+
+#chat-page > div > #main > #task-page .board-toggle-button {
+  display: flex;
+}
+
+#chat-page
+  > div
+  > #main
+  > #task-page[isshowingboard][showingboardlist="false"]
+  #board-list {
+  display: none;
+}
+
 @media (min-width: 640px) {
   #chat-page > div > #main > #task-page .task-grid {
     display: grid;
@@ -99,4 +115,12 @@
   #chat-page > div > #main > #task-page[isshowingboard] #board-content {
     display: flex;
   }
+
+  #chat-page > div > #main > #task-page .board-close-button {
+    display: flex;
+  }
+
+  #chat-page > div > #main > #task-page .board-toggle-button {
+    display: none;
+  }
 }

src/View/ChatPages/taskPage.tsx

@@ -45,7 +45,7 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
   );
 
   return (
-    <div id="task-page" toggle:isshowingboard={isShowingBoard}>
+    <div id="task-page" toggle:isshowingboard={isShowingBoard}  set:showingboardlist={taskPageViewModel.isShowingBoadList}>
       <div
         id="board-list"
         class="pane-wrapper side background"

src/View/translations.ts

@@ -193,7 +193,8 @@ const englishTranslations = {
 
       ///
 
-      closeBoard: "close board",
+      closeBoardButtonAudioLabel: "close board",
+      toggleBoardButtonAudioLabel: "toggle board list",
       showBoardSettingsButtonAudioLabel: "show board settigns",
 
       listViewButtonAudioLabel: "list view",
@@ -444,7 +445,8 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
         noBoardSelected: "Kein Board ausgewählt",
         boardNotFound: "Board nicht gefunden",
 
-        closeBoard: "Board schließen",
+        closeBoardButtonAudioLabel: "board schließen",
+        toggleBoardButtonAudioLabel: "board-liste ein/ausblenden",
         showBoardSettingsButtonAudioLabel: "Board-Einstellungen anzeigen",
 
         listViewButtonAudioLabel: "Listenansicht",
@@ -676,7 +678,8 @@ const allTranslations: { [language: string]: typeof englishTranslations } = {
         noBoardSelected: "Ningún tablero seleccionado",
         boardNotFound: "Tablero no encontrado",
 
-        closeBoard: "cerrar tablero",
+        closeBoardButtonAudioLabel: "cerrar tablero",
+        toggleBoardButtonAudioLabel: "mostrar o ocultar lista de tableros",
         showBoardSettingsButtonAudioLabel: "mostrar configuración del tablero",
 
         listViewButtonAudioLabel: "vista de lista",

src/ViewModel/Pages/taskPageViewModel.ts

@@ -37,6 +37,8 @@ export default class TaskPageViewModel {
 
   boardViewModels: React.MapState<BoardViewModel> = new React.MapState();
 
+  isShowingBoadList: React.State<boolean> = new React.State(true);
+
   selectedBoardId: React.State<string | undefined> = new React.State<any>(
     undefined
   );
@@ -72,6 +74,10 @@ export default class TaskPageViewModel {
   };
 
   // view
+  toggleBoardList = (): void => {
+    this.isShowingBoadList.value = !this.isShowingBoadList.value;
+  };
+
   showBoardInList = (boardInfo: BoardInfoFileContent): void => {
     const boardViewModel: BoardViewModel = new BoardViewModel(
       this.coreViewModel,