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,66 +44,46 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
     }
   );
 
-  const listPaneWrapper = (
+  return (
-    <div
+    <div id="task-page" toggle:isshowingboard={isShowingBoard}>
-      class="pane-wrapper side background"
+      <div
-      set:color={taskPageViewModel.chatViewModel.displayedColor}
+        id="board-list"
-    >
+        class="pane-wrapper side background"
-      <div class="pane">
+        set:color={taskPageViewModel.chatViewModel.displayedColor}
-        <div class="toolbar">
+      >
-          <div class="flex-row width-input">
+        <div class="pane">
-            <input
+          <div class="toolbar">
-              bind:value={taskPageViewModel.newBoardNameInput}
+            <div class="flex-row width-input">
-              on:enter={taskPageViewModel.createBoard}
+              <input
-              placeholder={translations.chatPage.task.newBoardNamePlaceholder}
+                bind:value={taskPageViewModel.newBoardNameInput}
-            ></input>
+                on:enter={taskPageViewModel.createBoard}
-            <button
+                placeholder={translations.chatPage.task.newBoardNamePlaceholder}
-              class="primary"
+              ></input>
-              aria-label={
+              <button
-                translations.chatPage.task.createBoardButtonAudioLabel
+                class="primary"
-              }
+                aria-label={
-              on:click={taskPageViewModel.createBoard}
+                  translations.chatPage.task.createBoardButtonAudioLabel
-              toggle:disabled={taskPageViewModel.cannotCreateBoard}
+                }
-            >
+                on:click={taskPageViewModel.createBoard}
-              <span class="icon">add</span>
+                toggle:disabled={taskPageViewModel.cannotCreateBoard}
-            </button>
+              >
+                <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 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 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>
   );
 }