add toggle to hide/show list of boards

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"
-            aria-label={translations.chatPage.task.closeBoard}
+            class="ghost board-close-button"
+            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"