change handling of board content selection

dist/index.css

@@ -564,6 +564,22 @@ body[showing-chat] #chat-page-wrapper {
   text-align: right;
 }
 
+/* src/View/ChatPages/taskPage.css */
+@media (max-width: 1024px) {
+  #task-page #board-list {
+    display: false;
+  }
+  #task-page #board-content {
+    display: none;
+  }
+  #task-page[isshowingboard] #board-list {
+    display: none;
+  }
+  #task-page[isshowingboard] #board-content {
+    display: flex;
+  }
+}
+
 /* src/View/Components/fileBrowser.css */
 .file-browser {
   width: 100%;

dist/index.js

@@ -175,9 +175,6 @@
     );
     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)
@@ -2300,6 +2297,10 @@
   // src/View/ChatPages/taskPage.tsx
   function TaskPage(taskPageViewModel) {
     taskPageViewModel.loadData();
+    const isShowingBoard = createProxyState(
+      [taskPageViewModel.selectedBoardId],
+      () => taskPageViewModel.selectedBoardId.value != void 0
+    );
     const paneContent = createProxyState(
       [taskPageViewModel.selectedBoardId],
       () => {
@@ -2314,9 +2315,10 @@
         return BoardPage(selectedBoard);
       }
     );
-    const listPaneWrapper = /* @__PURE__ */ createElement(
+    return /* @__PURE__ */ createElement("div", { id: "task-page", "toggle:isshowingboard": isShowingBoard }, /* @__PURE__ */ createElement(
       "div",
       {
+        id: "board-list",
         class: "pane-wrapper side background",
         "set:color": taskPageViewModel.chatViewModel.displayedColor
       },
@@ -2347,21 +2349,7 @@
           ]
         }
       )))
-    );
+    ), /* @__PURE__ */ createElement("div", { id: "board-content", class: "pane-wrapper", "children:set": paneContent }));
-    const mainPageWrapper = /* @__PURE__ */ createElement("div", { class: "pane-wrapper", "children:set": paneContent });
-    function scroll() {
-      {
-        const selectedBoard = taskPageViewModel.selectedBoardId.value;
-        if (selectedBoard == void 0) {
-          listPaneWrapper.scrollIntoView();
-        } else {
-          mainPageWrapper.scrollIntoView();
-        }
-      }
-    }
-    bulkSubscribe([taskPageViewModel.selectedBoardId], scroll);
-    setTimeout(() => scroll(), 400);
-    return /* @__PURE__ */ createElement("div", { id: "task-page" }, listPaneWrapper, mainPageWrapper);
   }
 
   // src/View/chatPage.tsx

src/View/ChatPages/taskPage.css

@@ -0,0 +1,17 @@
+@media (max-width: 1024px) {
+    #task-page #board-list {
+        display: false;
+    }
+
+    #task-page #board-content {
+        display: none;
+    }
+
+    #task-page[isshowingboard] #board-list {
+        display: none;
+    }
+
+    #task-page[isshowingboard] #board-content {
+        display: flex;
+    }
+}

src/View/ChatPages/taskPage.tsx

@@ -1,3 +1,5 @@
+import "./taskPage.css";
+
 import * as React from "bloatless-react";
 
 import { BoardInfoToEntry } from "../Components/boardEntry";
@@ -8,6 +10,11 @@ import { translations } from "../translations";
 export function TaskPage(taskPageViewModel: TaskPageViewModel) {
   taskPageViewModel.loadData();
 
+  const isShowingBoard = React.createProxyState(
+    [taskPageViewModel.selectedBoardId],
+    () => taskPageViewModel.selectedBoardId.value != undefined
+  );
+
   const paneContent = React.createProxyState(
     [taskPageViewModel.selectedBoardId],
     () => {
@@ -37,8 +44,10 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
     }
   );
 
-  const listPaneWrapper = (
+  return (
+    <div id="task-page" toggle:isshowingboard={isShowingBoard}>
       <div
+        id="board-list"
         class="pane-wrapper side background"
         set:color={taskPageViewModel.chatViewModel.displayedColor}
       >
@@ -74,29 +83,7 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
           </div>
         </div>
       </div>
-  );
+      <div id="board-content" class="pane-wrapper" children:set={paneContent}></div>
-
-  const mainPageWrapper = (
-    <div class="pane-wrapper" children:set={paneContent}></div>
-  );
-
-  function scroll() {
-    {
-      const selectedBoard = taskPageViewModel.selectedBoardId.value;
-      if (selectedBoard == undefined) {
-        listPaneWrapper.scrollIntoView();
-      } else {
-        mainPageWrapper.scrollIntoView();
-      }
-    }
-  }
-  React.bulkSubscribe([taskPageViewModel.selectedBoardId], scroll);
-  setTimeout(() => scroll(), 400)
-
-  return (
-    <div id="task-page">
-      {listPaneWrapper}
-      {mainPageWrapper}
     </div>
   );
 }