From 0f22421ccab7dfde1c63b00a36627c3477de7b82 Mon Sep 17 00:00:00 2001
From: marlon-erler <viridian035@gmail.com>
Date: Tue, 23 Jul 2024 23:32:49 +0200
Subject: [PATCH] change handling of board content selection

---
 dist/index.css                  |  16 +++++
 dist/index.js                   |  26 +++-----
 src/View/ChatPages/taskPage.css |  17 ++++++
 src/View/ChatPages/taskPage.tsx | 101 ++++++++++++++------------------
 4 files changed, 84 insertions(+), 76 deletions(-)
 create mode 100644 src/View/ChatPages/taskPage.css

diff --git a/dist/index.css b/dist/index.css
index 7148817f..55438e7d 100644
--- a/dist/index.css
+++ b/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%;
diff --git a/dist/index.js b/dist/index.js
index aaa5543d..5793701d 100644
--- a/dist/index.js
+++ b/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 @@
           ]
         }
       )))
-    );
-    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);
+    ), /* @__PURE__ */ createElement("div", { id: "board-content", class: "pane-wrapper", "children:set": paneContent }));
   }
 
   // src/View/chatPage.tsx
diff --git a/src/View/ChatPages/taskPage.css b/src/View/ChatPages/taskPage.css
new file mode 100644
index 00000000..c6d41db4
--- /dev/null
+++ b/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;
+    }
+}
\ No newline at end of file
diff --git a/src/View/ChatPages/taskPage.tsx b/src/View/ChatPages/taskPage.tsx
index 06dc4880..ca649a1a 100644
--- a/src/View/ChatPages/taskPage.tsx
+++ b/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 = (
-    <div
-      class="pane-wrapper side background"
-      set:color={taskPageViewModel.chatViewModel.displayedColor}
-    >
-      <div class="pane">
-        <div class="toolbar">
-          <div class="flex-row width-input">
-            <input
-              bind:value={taskPageViewModel.newBoardNameInput}
-              on:enter={taskPageViewModel.createBoard}
-              placeholder={translations.chatPage.task.newBoardNamePlaceholder}
-            ></input>
-            <button
-              class="primary"
-              aria-label={
-                translations.chatPage.task.createBoardButtonAudioLabel
-              }
-              on:click={taskPageViewModel.createBoard}
-              toggle:disabled={taskPageViewModel.cannotCreateBoard}
-            >
-              <span class="icon">add</span>
-            </button>
+  return (
+    <div id="task-page" toggle:isshowingboard={isShowingBoard}>
+      <div
+        id="board-list"
+        class="pane-wrapper side background"
+        set:color={taskPageViewModel.chatViewModel.displayedColor}
+      >
+        <div class="pane">
+          <div class="toolbar">
+            <div class="flex-row width-input">
+              <input
+                bind:value={taskPageViewModel.newBoardNameInput}
+                on:enter={taskPageViewModel.createBoard}
+                placeholder={translations.chatPage.task.newBoardNamePlaceholder}
+              ></input>
+              <button
+                class="primary"
+                aria-label={
+                  translations.chatPage.task.createBoardButtonAudioLabel
+                }
+                on:click={taskPageViewModel.createBoard}
+                toggle:disabled={taskPageViewModel.cannotCreateBoard}
+              >
+                <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>
-  );
-
-  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 id="board-content" class="pane-wrapper" children:set={paneContent}></div>
     </div>
   );
 }