implement day selection

dist/index.js

@@ -1609,6 +1609,7 @@
     // state
     selectedYear = new State(0);
     selectedMonth = new State(0);
+    selectedDate = new State(0);
     monthGrid = new State(void 0);
     // view
     getTaskMapState = (taskFileContent) => {
@@ -1638,6 +1639,7 @@
       const today = /* @__PURE__ */ new Date();
       this.selectedYear.value = today.getFullYear();
       this.selectedMonth.value = today.getMonth() + 1;
+      this.selectedDate.value = today.getDate();
     };
     showPreviousMonth = () => {
       this.selectedMonth.value -= 1;
@@ -2495,7 +2497,9 @@
         yearInputAudioLabel: "year",
         monthInputAudioLabel: "month",
         yearInputPlaceholder: "2000",
-        monthInputPlaceholder: "01"
+        monthInputPlaceholder: "01",
+        ///
+        searchEventsHeadline: "Search Events"
       }
     }
   };
@@ -2506,7 +2510,7 @@
   var translations = allTranslations[language] || allTranslations.en;
 
   // src/View/Components/monthGrid.tsx
-  function MonthGrid2(monthGrid) {
+  function MonthGrid2(monthGrid, selectedDate) {
     const dayLabels = [];
     let currentWeekday = monthGrid.firstDayOfWeek;
     while (dayLabels.length < 7) {
@@ -2525,7 +2529,14 @@
     };
     return /* @__PURE__ */ createElement("div", { class: "month-grid-wrapper" }, /* @__PURE__ */ createElement("div", { class: "day-labels" }, ...dayLabels), /* @__PURE__ */ createElement("div", { class: "month-grid" }, ...offsetElements, ...Object.entries(monthGrid.days).map((entry) => {
       const [date, mapState] = entry;
-      return /* @__PURE__ */ createElement("button", { class: "tile" }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("b", null, date), /* @__PURE__ */ createElement(
+      const isSelected = createProxyState(
+        [selectedDate],
+        () => selectedDate.value == parseInt(date)
+      );
+      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",
         {
           class: "flex-column gap clip",
@@ -2544,7 +2555,10 @@
         if (calendarPageViewModel.monthGrid.value == void 0) {
           return /* @__PURE__ */ createElement("div", null);
         } else {
-          return MonthGrid2(calendarPageViewModel.monthGrid.value);
+          return MonthGrid2(
+            calendarPageViewModel.monthGrid.value,
+            calendarPageViewModel.selectedDate
+          );
         }
       }
     );

src/View/ChatPages/calendarPage.tsx

@@ -4,8 +4,6 @@ import * as React from "bloatless-react";
 
 import CalendarPageViewModel from "../../ViewModel/Pages/calendarPageViewModel";
 import { MonthGrid } from "../Components/monthGrid";
-import { TaskViewModelToEntry } from "../Components/taskEntry";
-import { createPropertyValueIndexState } from "../Components/propertyValueList";
 import { translations } from "../translations";
 
 export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
@@ -17,7 +15,10 @@ export function CalendarPage(calendarPageViewModel: CalendarPageViewModel) {
       if (calendarPageViewModel.monthGrid.value == undefined) {
         return <div></div>;
       } else {
-        return MonthGrid(calendarPageViewModel.monthGrid.value);
+        return MonthGrid(
+          calendarPageViewModel.monthGrid.value,
+          calendarPageViewModel.selectedDate
+        );
       }
     }
   );

src/View/Components/monthGrid.tsx

@@ -5,7 +5,10 @@ import { MonthGrid } from "../../Model/Files/calendarModel";
 import TaskViewModel from "../../ViewModel/Pages/taskViewModel";
 import { translations } from "../translations";
 
-export function MonthGrid<T>(monthGrid: MonthGrid<React.MapState<T>>) {
+export function MonthGrid<T>(
+  monthGrid: MonthGrid<React.MapState<T>>,
+  selectedDate: React.State<number>
+) {
   const dayLabels: HTMLElement[] = [];
   let currentWeekday = monthGrid.firstDayOfWeek;
   while (dayLabels.length < 7) {
@@ -37,8 +40,17 @@ export function MonthGrid<T>(monthGrid: MonthGrid<React.MapState<T>>) {
         {...Object.entries(monthGrid.days).map((entry) => {
           const [date, mapState] = entry;
 
+          const isSelected = React.createProxyState(
+            [selectedDate],
+            () => selectedDate.value == parseInt(date)
+          );
+
+          function select() {
+            selectedDate.value = parseInt(date);
+          }
+
           return (
-            <button class="tile">
+            <button class="tile" on:click={select} toggle:selected={isSelected}>
               <div>
                 <b>{date}</b>
                 <div

src/View/translations.ts

@@ -197,6 +197,10 @@ const englishTranslations = {
 
       yearInputPlaceholder: "2000",
       monthInputPlaceholder: "01",
+
+      ///
+
+      searchEventsHeadline: "Search Events"
     },
   },
 };

src/ViewModel/Pages/calendarPageViewModel.ts

@@ -30,6 +30,7 @@ export default class CalendarPageViewModel {
   // state
   selectedYear: React.State<number> = new React.State(0);
   selectedMonth: React.State<number> = new React.State(0);
+  selectedDate: React.State<number> = new React.State(0);
 
   monthGrid: React.State<MonthGrid<React.MapState<TaskViewModel>> | undefined> =
     new React.State<any>(undefined);
@@ -70,6 +71,7 @@ export default class CalendarPageViewModel {
     const today: Date = new Date();
     this.selectedYear.value = today.getFullYear();
     this.selectedMonth.value = today.getMonth() + 1;
+    this.selectedDate.value = today.getDate();
   };
 
   showPreviousMonth = (): void => {
@@ -119,7 +121,7 @@ export default class CalendarPageViewModel {
     public coreViewModel: CoreViewModel,
     storageModel: StorageModel,
     calendarModel: CalendarModel,
-    boardAndTasksModel: BoardsAndTasksModel
+    boardAndTasksModel: BoardsAndTasksModel,
   ) {
     this.storageModel = storageModel;
     this.calendarModel = calendarModel;