list events in side pane

dist/index.js

@@ -1587,13 +1587,14 @@
   // src/ViewModel/Pages/calendarPageViewModel.ts
   var CalendarPageViewModel = class {
     // init
-    constructor(coreViewModel, storageModel2, calendarModel, boardAndTasksModel) {
+    constructor(coreViewModel, storageModel2, calendarModel, boardAndTasksModel, chatViewModel) {
       this.coreViewModel = coreViewModel;
       this.storageModel = storageModel2;
       this.calendarModel = calendarModel;
       this.boardsAndTasksModel = boardAndTasksModel;
+      this.chatViewModel = chatViewModel;
       bulkSubscribe([this.selectedYear, this.selectedMonth], () => {
-        this.loadTasks();
+        this.loadMonthTasks();
       });
       boardAndTasksModel.taskHandlerManager.addHandler(
         (taskFileContent) => {
@@ -1604,6 +1605,7 @@
     storageModel;
     calendarModel;
     boardsAndTasksModel;
+    chatViewModel;
     // data
     get monthString() {
       return CalendarModel.getMonthString(
@@ -1620,7 +1622,7 @@
     selectedMonth = new State(0);
     selectedDate = new State(0);
     monthGrid = new State(void 0);
-    selectedTaskViewModel = new State(void 0);
+    taskViewModelsToShow = new ListState();
     // view
     getTaskMapState = (taskFileContent) => {
       if (this.monthGrid.value == null) return null;
@@ -1673,7 +1675,7 @@
     };
     // storage
     // load
-    loadTasks = () => {
+    loadMonthTasks = () => {
       this.monthGrid.value = this.calendarModel.generateMonthGrid(
         this.selectedYear.value,
         this.selectedMonth.value,
@@ -1687,7 +1689,7 @@
       }
     };
     loadData = () => {
-      this.loadTasks();
+      this.loadMonthTasks();
       this.showToday();
     };
   };
@@ -2217,7 +2219,8 @@
         coreViewModel,
         this.storageModel,
         this.chatModel.fileModel.boardsAndTasksModel.calendarModel,
-        this.chatModel.fileModel.boardsAndTasksModel
+        this.chatModel.fileModel.boardsAndTasksModel,
+        this
       );
       this.taskPageViewModel = new TaskPageViewModel(
         this.coreViewModel,
@@ -2572,6 +2575,51 @@
     })));
   }
 
+  // src/View/Components/taskEntry.tsx
+  function TaskEntry(taskViewModel) {
+    const details = {
+      description: taskViewModel.description.value || "---",
+      priority_high: taskViewModel.priority.value || "---",
+      category: taskViewModel.category.value || "---",
+      clock_loader_40: taskViewModel.status.value || "---",
+      calendar_month: taskViewModel.date.value || "---",
+      schedule: taskViewModel.time.value || "---"
+    };
+    const view = /* @__PURE__ */ createElement(
+      "button",
+      {
+        draggable: "true",
+        class: "tile flex-no",
+        style: "user-select: none; -webkit-user-select: none",
+        "on:click": taskViewModel.open,
+        "on:dragstart": taskViewModel.dragStart
+      },
+      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { "subscribe:innerText": taskViewModel.name }), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
+        "div",
+        {
+          class: "grid secondary",
+          style: "grid-template-columns: repeat(2, 1fr); column-gap: 1rem;  row-gap: .5rem"
+        },
+        ...Object.entries(details).map((entry) => /* @__PURE__ */ createElement(
+          "span",
+          {
+            class: "flex-row align-center width-100 flex-no clip",
+            style: "gap: 1rem"
+          },
+          /* @__PURE__ */ createElement("span", { class: "icon", style: "font-size: 1.1rem" }, entry[0]),
+          /* @__PURE__ */ createElement("span", { class: "ellipsis" }, entry[1])
+        ))
+      ))
+    );
+    taskViewModel.index.subscribe((newIndex) => {
+      view.style.order = newIndex;
+    });
+    return view;
+  }
+  var TaskViewModelToEntry = (taskViewModel) => {
+    return TaskEntry(taskViewModel);
+  };
+
   // src/View/ChatPages/calendarPage.tsx
   function CalendarPage(calendarPageViewModel) {
     calendarPageViewModel.loadData();
@@ -2588,6 +2636,27 @@
         }
       }
     );
+    const sidePaneContent = createProxyState(
+      [
+        calendarPageViewModel.selectedYear,
+        calendarPageViewModel.selectedMonth,
+        calendarPageViewModel.selectedDate
+      ],
+      () => {
+        const listState = calendarPageViewModel.monthGrid.value?.days[calendarPageViewModel.selectedDate.toString()];
+        if (listState == void 0) {
+          return /* @__PURE__ */ createElement("div", null);
+        } else {
+          return /* @__PURE__ */ createElement(
+            "div",
+            {
+              class: "flex-column gap",
+              "children:append": [listState, TaskViewModelToEntry]
+            }
+          );
+        }
+      }
+    );
     return /* @__PURE__ */ createElement("div", { id: "calendar-page" }, /* @__PURE__ */ createElement("div", { class: "pane-wrapper" }, /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "toolbar" }, /* @__PURE__ */ createElement("span", null, /* @__PURE__ */ createElement(
       "button",
       {
@@ -2637,7 +2706,14 @@
         "aria-label": translations.chatPage.task.createTaskButtonAudioLabel
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "add")
-    ))), /* @__PURE__ */ createElement("div", { class: "content", "children:set": mainContent }))), /* @__PURE__ */ createElement("div", { class: "pane-wrapper side" }, /* @__PURE__ */ createElement("div", { class: "pane" }, "hello")));
+    ))), /* @__PURE__ */ createElement("div", { class: "content", "children:set": mainContent }))), /* @__PURE__ */ createElement(
+      "div",
+      {
+        class: "pane-wrapper side background",
+        "set:color": calendarPageViewModel.chatViewModel.displayedColor
+      },
+      /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "content", "children:set": sidePaneContent }))
+    ));
   }
 
   // src/View/Components/ribbonButton.tsx
@@ -3026,51 +3102,6 @@
     }
   };
 
-  // src/View/Components/taskEntry.tsx
-  function TaskEntry(taskViewModel) {
-    const details = {
-      description: taskViewModel.description.value || "---",
-      priority_high: taskViewModel.priority.value || "---",
-      category: taskViewModel.category.value || "---",
-      clock_loader_40: taskViewModel.status.value || "---",
-      calendar_month: taskViewModel.date.value || "---",
-      schedule: taskViewModel.time.value || "---"
-    };
-    const view = /* @__PURE__ */ createElement(
-      "button",
-      {
-        draggable: "true",
-        class: "tile flex-no",
-        style: "user-select: none; -webkit-user-select: none",
-        "on:click": taskViewModel.open,
-        "on:dragstart": taskViewModel.dragStart
-      },
-      /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", { "subscribe:innerText": taskViewModel.name }), /* @__PURE__ */ createElement("hr", null), /* @__PURE__ */ createElement(
-        "div",
-        {
-          class: "grid secondary",
-          style: "grid-template-columns: repeat(2, 1fr); column-gap: 1rem;  row-gap: .5rem"
-        },
-        ...Object.entries(details).map((entry) => /* @__PURE__ */ createElement(
-          "span",
-          {
-            class: "flex-row align-center width-100 flex-no clip",
-            style: "gap: 1rem"
-          },
-          /* @__PURE__ */ createElement("span", { class: "icon", style: "font-size: 1.1rem" }, entry[0]),
-          /* @__PURE__ */ createElement("span", { class: "ellipsis" }, entry[1])
-        ))
-      ))
-    );
-    taskViewModel.index.subscribe((newIndex) => {
-      view.style.order = newIndex;
-    });
-    return view;
-  }
-  var TaskViewModelToEntry = (taskViewModel) => {
-    return TaskEntry(taskViewModel);
-  };
-
   // src/View/ChatPages/boardKanbanPage.tsx
   function BoardKanbanPage(boardViewModel) {
     return PropertyValueList(
@@ -3620,7 +3651,14 @@
           ]
         }
       )))
-    ), /* @__PURE__ */ createElement("div", { id: "board-content", class: "pane-wrapper", "children:set": paneContent }));
+    ), /* @__PURE__ */ createElement(
+      "div",
+      {
+        id: "board-content",
+        class: "pane-wrapper",
+        "children:set": paneContent
+      }
+    ));
   }
 
   // src/View/chatPage.tsx

src/View/ChatPages/calendarPage.tsx

@@ -4,6 +4,7 @@ import * as React from "bloatless-react";
 
 import CalendarPageViewModel from "../../ViewModel/Pages/calendarPageViewModel";
 import { MonthGrid } from "../Components/monthGrid";
+import { TaskViewModelToEntry } from "../Components/taskEntry";
 import { translations } from "../translations";
 
 export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
@@ -23,6 +24,31 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
     }
   );
 
+  const sidePaneContent = React.createProxyState(
+    [
+      calendarPageViewModel.selectedYear,
+      calendarPageViewModel.selectedMonth,
+      calendarPageViewModel.selectedDate,
+    ],
+    () => {
+      const listState =
+        calendarPageViewModel.monthGrid.value?.days[
+          calendarPageViewModel.selectedDate.toString()
+        ];
+
+      if (listState == undefined) {
+        return <div></div>;
+      } else {
+        return (
+          <div
+            class="flex-column gap"
+            children:append={[listState, TaskViewModelToEntry]}
+          ></div>
+        );
+      }
+    }
+  );
+
   return (
     <div id="calendar-page">
       <div class="pane-wrapper">
@@ -97,8 +123,13 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
           <div class="content" children:set={mainContent}></div>
         </div>
       </div>
-      <div class="pane-wrapper side">
-        <div class="pane">hello</div>
+      <div
+        class="pane-wrapper side background"
+        set:color={calendarPageViewModel.chatViewModel.displayedColor}
+      >
+        <div class="pane">
+          <div class="content" children:set={sidePaneContent}></div>
+        </div>
       </div>
     </div>
   );

src/View/ChatPages/taskPage.tsx

@@ -83,7 +83,11 @@ export function TaskPage(taskPageViewModel: TaskPageViewModel) {
           </div>
         </div>
       </div>
-      <div id="board-content" class="pane-wrapper" children:set={paneContent}></div>
+      <div
+        id="board-content"
+        class="pane-wrapper"
+        children:set={paneContent}
+      ></div>
     </div>
   );
 }

src/ViewModel/Chat/chatViewModel.ts

@@ -100,7 +100,8 @@ export default class ChatViewModel {
       coreViewModel,
       this.storageModel,
       this.chatModel.fileModel.boardsAndTasksModel.calendarModel,
-      this.chatModel.fileModel.boardsAndTasksModel
+      this.chatModel.fileModel.boardsAndTasksModel,
+      this
     );
     this.taskPageViewModel = new TaskPageViewModel(
       this.coreViewModel,

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -5,6 +5,7 @@ import BoardsAndTasksModel, {
 } from "../../Model/Files/boardsAndTasksModel";
 import CalendarModel, { MonthGrid } from "../../Model/Files/calendarModel";
 
+import ChatViewModel from "../Chat/chatViewModel";
 import CoreViewModel from "../Global/coreViewModel";
 import StorageModel from "../../Model/Global/storageModel";
 import TaskViewModel from "./taskViewModel";
@@ -14,6 +15,8 @@ export default class CalendarPageViewModel {
   calendarModel: CalendarModel;
   boardsAndTasksModel: BoardsAndTasksModel;
 
+  chatViewModel: ChatViewModel;
+
   // data
   get monthString(): string {
     return CalendarModel.getMonthString(
@@ -35,8 +38,7 @@ export default class CalendarPageViewModel {
   monthGrid: React.State<MonthGrid<React.MapState<TaskViewModel>> | undefined> =
     new React.State<any>(undefined);
 
-  selectedTaskViewModel: React.State<TaskViewModel | undefined> =
-    new React.State<any>(undefined);
+  taskViewModelsToShow: React.ListState<TaskViewModel> = new React.ListState();
 
   // view
   getTaskMapState = (
@@ -106,7 +108,7 @@ export default class CalendarPageViewModel {
   // storage
 
   // load
-  loadTasks = (): void => {
+  loadMonthTasks = (): void => {
     this.monthGrid.value = this.calendarModel.generateMonthGrid(
       this.selectedYear.value,
       this.selectedMonth.value,
@@ -123,7 +125,7 @@ export default class CalendarPageViewModel {
   };
 
   loadData = (): void => {
-    this.loadTasks();
+    this.loadMonthTasks();
     this.showToday();
   };
 
@@ -132,14 +134,17 @@ export default class CalendarPageViewModel {
     public coreViewModel: CoreViewModel,
     storageModel: StorageModel,
     calendarModel: CalendarModel,
-    boardAndTasksModel: BoardsAndTasksModel
+    boardAndTasksModel: BoardsAndTasksModel,
+    chatViewModel: ChatViewModel
   ) {
     this.storageModel = storageModel;
     this.calendarModel = calendarModel;
     this.boardsAndTasksModel = boardAndTasksModel;
 
+    this.chatViewModel = chatViewModel;
+
     React.bulkSubscribe([this.selectedYear, this.selectedMonth], () => {
-      this.loadTasks();
+      this.loadMonthTasks();
     });
 
     // handlers