make side pane toggle placeholder dynamically

dist/index.js

@@ -2790,7 +2790,7 @@
         }
       }
     );
-    const sidePaneContent = createProxyState(
+    const sidePaneContentWrapper = createProxyState(
       [
         calendarPageViewModel.selectedYear,
         calendarPageViewModel.selectedMonth,
@@ -2800,17 +2800,28 @@
         const listState = calendarPageViewModel.getEventsForDate();
         if (listState == void 0) {
           return /* @__PURE__ */ createElement("div", null);
-        } else if (listState.value.size == 0) {
-          return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 flex-column justify-center align-center" }, /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.chatPage.calendar.noEvents));
+        } else {
+          const sidePaneContent = createProxyState([listState], () => {
+            if (listState.value.size == 0) {
+              return /* @__PURE__ */ createElement("div", { class: "width-100 height-100 flex-column justify-center align-center" }, /* @__PURE__ */ createElement("span", { class: "secondary slide-up" }, translations.chatPage.calendar.noEvents));
             } else {
               return /* @__PURE__ */ createElement(
                 "div",
                 {
-              class: "flex-column gap slide-up",
+                  class: "flex-column gap slide-up padding-bottom",
                   "children:append": [listState, TaskViewModelToEntry]
                 }
               );
             }
+          });
+          return /* @__PURE__ */ createElement(
+            "div",
+            {
+              class: "width-100 height-100",
+              "children:set": sidePaneContent
+            }
+          );
+        }
       }
     );
     const taskSettingsModal = createProxyState(
@@ -2881,7 +2892,7 @@
         class: "pane-wrapper side background",
         "set:color": calendarPageViewModel.chatViewModel.displayedColor
       },
-      /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "content", "children:set": sidePaneContent }))
+      /* @__PURE__ */ createElement("div", { class: "pane" }, /* @__PURE__ */ createElement("div", { class: "content", "children:set": sidePaneContentWrapper }))
     ), /* @__PURE__ */ createElement("div", { "children:set": taskSettingsModal }));
   }
 

src/View/ChatPages/calendarPage.css

@@ -60,6 +60,7 @@
   width: 3.1rem;
 }
 
+
 @media (max-width: 1024px) {
   #chat-page > div > #main > #calendar-page {
     flex-direction: column;

src/View/ChatPages/calendarPage.tsx

@@ -33,7 +33,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
     }
   );
 
-  const sidePaneContent = React.createProxyState(
+  const sidePaneContentWrapper = React.createProxyState(
     [
       calendarPageViewModel.selectedYear,
       calendarPageViewModel.selectedMonth,
@@ -44,10 +44,12 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
 
       if (listState == undefined) {
         return <div></div>;
-      } else if (listState.value.size == 0) {
+      } else {
+        const sidePaneContent = React.createProxyState([listState], () => {
+          if (listState.value.size == 0) {
             return (
               <div class="width-100 height-100 flex-column justify-center align-center">
-            <span class="secondary">
+                <span class="secondary slide-up">
                   {translations.chatPage.calendar.noEvents}
                 </span>
               </div>
@@ -55,11 +57,20 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
           } else {
             return (
               <div
-            class="flex-column gap slide-up"
+                class="flex-column gap slide-up padding-bottom"
                 children:append={[listState, TaskViewModelToEntry]}
               ></div>
             );
           }
+        });
+
+        return (
+          <div
+            class="width-100 height-100"
+            children:set={sidePaneContent}
+          ></div>
+        );
+      }
     }
   );
 
@@ -156,7 +167,7 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
         set:color={calendarPageViewModel.chatViewModel.displayedColor}
       >
         <div class="pane">
-          <div class="content" children:set={sidePaneContent}></div>
+          <div class="content" children:set={sidePaneContentWrapper}></div>
         </div>
       </div>