prepare side pane, highlight today

dist/index.css

@@ -497,6 +497,9 @@ body[showing-chat] #chat-page-wrapper {
 .month-grid .tile {
   animation: slide-up var(--animation-duration);
 }
+.month-grid .tile[today] b {
+  color: var(--primary);
+}
 .month-grid .tile > div {
   display: flex;
   flex-direction: column;

dist/index.js

@@ -650,6 +650,7 @@
     };
     generateMonthGrid = (year, month, defaultValueCreator) => {
       const date = /* @__PURE__ */ new Date();
+      const isCurrentMonth = year == date.getFullYear() && month == date.getMonth() + 1;
       date.setFullYear(year);
       date.setMonth(month - 1);
       date.setDate(1);
@@ -660,6 +661,7 @@
       const grid = {
         offset,
         firstDayOfWeek: parseInt(this.settingsModel.firstDayOfWeek),
+        isCurrentMonth,
         days: {}
       };
       for (let i = 0; i < daysInMonth; i++) {
@@ -1618,6 +1620,7 @@
     selectedMonth = new State(0);
     selectedDate = new State(0);
     monthGrid = new State(void 0);
+    selectedTaskViewModel = new State(void 0);
     // view
     getTaskMapState = (taskFileContent) => {
       if (this.monthGrid.value == null) return null;
@@ -2546,16 +2549,26 @@
         [selectedDate],
         () => selectedDate.value == parseInt(date)
       );
+      const isToday = monthGrid.isCurrentMonth == true && parseInt(date) == (/* @__PURE__ */ new Date()).getDate();
       function select() {
         selectedDate.value = parseInt(date);
       }
-      return /* @__PURE__ */ createElement("button", { class: "tile", "on:click": select, "toggle:selected": isSelected }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, date), /* @__PURE__ */ createElement(
-        "div",
+      return /* @__PURE__ */ createElement(
+        "button",
         {
-          class: "flex-column gap clip",
-          "children:append": [mapState, converter]
-        }
-      )));
+          class: "tile",
+          "on:click": select,
+          "toggle:selected": isSelected,
+          "toggle:today": isToday
+        },
+        /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, date), /* @__PURE__ */ createElement(
+          "div",
+          {
+            class: "flex-column gap clip",
+            "children:append": [mapState, converter]
+          }
+        ))
+      );
     })));
   }
 
@@ -2624,7 +2637,7 @@
         "aria-label": translations.chatPage.task.createTaskButtonAudioLabel
       },
       /* @__PURE__ */ createElement("span", { class: "icon" }, "add")
-    ))), /* @__PURE__ */ createElement("div", { class: "content", "children:set": mainContent }))));
+    ))), /* @__PURE__ */ createElement("div", { class: "content", "children:set": mainContent }))), /* @__PURE__ */ createElement("div", { class: "pane-wrapper side" }, /* @__PURE__ */ createElement("div", { class: "pane" }, "hello")));
   }
 
   // src/View/Components/ribbonButton.tsx

src/Model/Files/calendarModel.ts

@@ -52,8 +52,12 @@ export default class CalendarModel {
     month: number,
     defaultValueCreator: () => T
   ): MonthGrid<T> => {
-    // get first day of month
+    // get today
     const date: Date = new Date();
+    const isCurrentMonth: boolean =
+      year == date.getFullYear() && month == date.getMonth() + 1;
+
+    // get first day of month
     date.setFullYear(year);
     date.setMonth(month - 1);
     date.setDate(1);
@@ -70,6 +74,7 @@ export default class CalendarModel {
     const grid: MonthGrid<T> = {
       offset,
       firstDayOfWeek: parseInt(this.settingsModel.firstDayOfWeek),
+      isCurrentMonth,
       days: {},
     };
 
@@ -117,5 +122,6 @@ export enum CalendarModelSubPaths {
 export interface MonthGrid<T> {
   offset: number;
   firstDayOfWeek: number;
+  isCurrentMonth: boolean;
   days: { [date: string]: T };
 }

src/View/ChatPages/calendarPage.tsx

@@ -97,6 +97,9 @@ 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>
     </div>
   );
 }

src/View/Components/monthGrid.css

@@ -27,6 +27,10 @@
   animation: slide-up var(--animation-duration);
 }
 
+.month-grid .tile[today] b {
+    color: var(--primary)
+}
+
 .month-grid .tile > div {
   display: flex;
   flex-direction: column;

src/View/Components/monthGrid.tsx

@@ -45,12 +45,21 @@ export function MonthGrid<T>(
             () => selectedDate.value == parseInt(date)
           );
 
+          const isToday: boolean =
+            monthGrid.isCurrentMonth == true &&
+            parseInt(date) == new Date().getDate();
+
           function select() {
             selectedDate.value = parseInt(date);
           }
 
           return (
-            <button class="tile" on:click={select} toggle:selected={isSelected}>
+            <button
+              class="tile"
+              on:click={select}
+              toggle:selected={isSelected}
+              toggle:today={isToday}
+            >
               <div>
                 <b>{date}</b>
                 <div

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -35,6 +35,9 @@ 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);
+
   // view
   getTaskMapState = (
     taskFileContent: TaskFileContent