make side pane toggle placeholder dynamically

dist/index.js

@@ -2790,7 +2790,7 @@
         }
       }
     );
-    const sidePaneContent = createProxyState(
+    const sidePaneContentWrapper = createProxyState(
       [
         calendarPageViewModel.selectedYear,
         calendarPageViewModel.selectedMonth,
@@ -2800,14 +2800,25 @@
         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 padding-bottom",
+                  "children:append": [listState, TaskViewModelToEntry]
+                }
+              );
+            }
+          });
           return /* @__PURE__ */ createElement(
             "div",
             {
-              class: "flex-column gap slide-up",
+              class: "width-100 height-100",
-              "children:append": [listState, TaskViewModelToEntry]
+              "children:set": sidePaneContent
             }
           );
         }
@@ -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,19 +44,30 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
 
       if (listState == undefined) {
         return <div></div>;
-      } else if (listState.value.size == 0) {
-        return (
-          <div class="width-100 height-100 flex-column justify-center align-center">
-            <span class="secondary">
-              {translations.chatPage.calendar.noEvents}
-            </span>
-          </div>
-        );
       } 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 slide-up">
+                  {translations.chatPage.calendar.noEvents}
+                </span>
+              </div>
+            );
+          } else {
+            return (
+              <div
+                class="flex-column gap slide-up padding-bottom"
+                children:append={[listState, TaskViewModelToEntry]}
+              ></div>
+            );
+          }
+        });
+
         return (
           <div
-            class="flex-column gap slide-up"
+            class="width-100 height-100"
-            children:append={[listState, TaskViewModelToEntry]}
+            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>