prepare side pane, highlight today

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