add weekday labels

src/View/Components/monthGrid.css

@@ -1,4 +1,17 @@
 .month-grid-wrapper {
+  display: flex;
+  flex-direction: column;
+
+  gap: var(--gap-between-tiles);
+
+  height: 100%;
+}
+
+.month-grid-wrapper .day-labels {
+    flex: 0;
+}
+
+.month-grid-wrapper > div {
   display: grid;
   gap: var(--gap-between-tiles);
 
@@ -10,16 +23,23 @@
   grid-auto-rows: 1fr;
 }
 
-.month-grid-wrapper .tile > div {
-    display: flex;
-    flex-direction: column;
+.month-grid .tile {
+  animation: slide-up var(--animation-duration);
+}
 
-    height: 100%;
-    width: 100%;
+.month-grid .tile > div {
+  display: flex;
+  flex-direction: column;
+
+  height: 100%;
+  width: 100%;
+}
+.month-grid .tile > div span {
+  animation: slide-up var(--animation-duration);
 }
 
 @media (max-width: 640px) {
-  .month-grid-wrapper .tile {
+  .month-grid .tile {
     padding: 4px;
   }
 }

src/View/Components/monthGrid.tsx

@@ -3,8 +3,21 @@ import "./monthGrid.css";
 import * as React from "bloatless-react";
 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>>) {
+  const dayLabels: HTMLElement[] = [];
+  let currentWeekday = monthGrid.firstDayOfWeek;
+  while (dayLabels.length < 7) {
+    dayLabels.push(
+      <span class="secondary">
+        {translations.regional.weekdays.abbreviated[currentWeekday]}
+      </span>
+    );
+    currentWeekday++;
+    if (currentWeekday == 7) currentWeekday = 0;
+  }
+
   const offsetElements: HTMLElement[] = [];
   for (let i = 0; i < monthGrid.offset; i++) {
     offsetElements.push(<div></div>);
@@ -18,22 +31,25 @@ export function MonthGrid<T>(monthGrid: MonthGrid<React.MapState<T>>) {
 
   return (
     <div class="month-grid-wrapper">
-      {...offsetElements}
-      {...Object.entries(monthGrid.days).map((entry) => {
-        const [date, mapState] = entry;
+      <div class="day-labels">{...dayLabels}</div>
+      <div class="month-grid">
+        {...offsetElements}
+        {...Object.entries(monthGrid.days).map((entry) => {
+          const [date, mapState] = entry;
 
-        return (
-          <button class="tile">
-            <div>
-              <b>{date}</b>
-              <div
-                class="flex-column gap clip"
-                children:append={[mapState, converter]}
-              ></div>
-            </div>
-          </button>
-        );
-      })}
+          return (
+            <button class="tile">
+              <div>
+                <b>{date}</b>
+                <div
+                  class="flex-column gap clip"
+                  children:append={[mapState, converter]}
+                ></div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
     </div>
   );
 }