add month grid

src/View/ChatPages/boardPage.tsx

@@ -119,7 +119,7 @@ export function BoardPage(boardViewModel: BoardViewModel) {
         boardViewModel.taskViewModels,
         boardViewModel.filteredTaskViewModels,
         TaskViewModelToEntry,
-        boardViewModel.getStringsFromTaskViewModel,
+        TaskViewModel.getStringsForFilter,
         boardViewModel.isPresentingFilterModal
       )}
       <div children:set={taskSettingsModal}></div>

src/View/ChatPages/calendarPage.css

@@ -0,0 +1,61 @@
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper {
+  display: flex;
+
+  padding: var(--gap-between-tiles);
+  gap: var(--gap-between-tiles);
+}
+
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper
+  > input {
+  min-height: unset;
+  height: calc(var(--control-height) - 2 * var(--gap-between-tiles));
+
+  appearance: textfield;
+  -moz-appearance: textfield;
+}
+
+#calendar-page .input-wrapper > input::-webkit-outer-spin-button,
+#calendar-page .input-wrapper > input::-webkit-innner-spin-button {
+  appearance: none;
+  -webkit-appearance: none;
+
+  margin: 0px;
+}
+
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper
+  > .year-input {
+  width: 4.4rem;
+}
+
+#chat-page
+  > div
+  > #main
+  > #calendar-page
+  > .pane-wrapper
+  > .pane
+  > .toolbar
+  .input-wrapper
+  > .month-input {
+  width: 3.1rem;
+}

src/View/ChatPages/calendarPage.tsx

@@ -1,9 +1,101 @@
+import "./calendarPage.css";
+
 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) {
   calendarPageViewModel.loadData();
 
-  return <div id="calendar-page"></div>;
+  const mainContent = React.createProxyState(
+    [calendarPageViewModel.monthGrid],
+    () => {
+      if (calendarPageViewModel.monthGrid.value == undefined) {
+        return <div></div>;
+      } else {
+        return MonthGrid(calendarPageViewModel.monthGrid.value);
+      }
+    }
+  );
+
+  return (
+    <div id="calendar-page">
+      <div class="pane-wrapper">
+        <div class="pane">
+          <div class="toolbar">
+            <span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.calendar.todayButtonAudioLabel
+                }
+                on:click={calendarPageViewModel.showToday}
+              >
+                <span class="icon">today</span>
+              </button>
+            </span>
+            <span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.calendar.previousMonthButtonAudioLabel
+                }
+                on:click={calendarPageViewModel.showPreviousMonth}
+              >
+                <span class="icon">arrow_back</span>
+              </button>
+              <span class="input-wrapper">
+                <input
+                  class="year-input"
+                  type="number"
+                  aria-label={
+                    translations.chatPage.calendar.yearInputAudioLabel
+                  }
+                  placeholder={
+                    translations.chatPage.calendar.yearInputPlaceholder
+                  }
+                  bind:value={calendarPageViewModel.selectedYear}
+                ></input>
+                <input
+                  class="month-input"
+                  type="number"
+                  aria-label={
+                    translations.chatPage.calendar.monthInputAudioLabel
+                  }
+                  placeholder={
+                    translations.chatPage.calendar.monthInputPlaceholder
+                  }
+                  bind:value={calendarPageViewModel.selectedMonth}
+                ></input>
+              </span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.calendar.nextMonthButtonAudioLabel
+                }
+                on:click={calendarPageViewModel.showNextMonth}
+              >
+                <span class="icon">arrow_forward</span>
+              </button>
+            </span>
+            <span>
+              <button
+                class="ghost"
+                aria-label={
+                  translations.chatPage.task.createTaskButtonAudioLabel
+                }
+              >
+                <span class="icon">add</span>
+              </button>
+            </span>
+          </div>
+          <div class="content" children:set={mainContent}></div>
+        </div>
+      </div>
+    </div>
+  );
 }