list events in side pane

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