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>
   );