add weekday labels

dist/index.css

@@ -478,6 +478,15 @@ body[showing-chat] #chat-page-wrapper {
 
 /* src/View/Components/monthGrid.css */
 .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);
   height: 100%;
@@ -485,14 +494,20 @@ body[showing-chat] #chat-page-wrapper {
   grid-template-columns: repeat(7, minmax(0px, 1fr));
   grid-auto-rows: 1fr;
 }
-.month-grid-wrapper .tile > div {
+.month-grid .tile {
+  animation: slide-up var(--animation-duration);
+}
+.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;
   }
 }

dist/index.js

@@ -659,6 +659,7 @@
       const daysInMonth = date.getDate() + 1;
       const grid = {
         offset,
+        firstDayOfWeek: parseInt(this.settingsModel.firstDayOfWeek),
         days: {}
       };
       for (let i = 0; i < daysInMonth; i++) {
@@ -2354,27 +2355,6 @@
     };
   };
 
-  // src/View/Components/monthGrid.tsx
-  function MonthGrid2(monthGrid) {
-    const offsetElements = [];
-    for (let i = 0; i < monthGrid.offset; i++) {
-      offsetElements.push(/* @__PURE__ */ createElement("div", null));
-    }
-    const converter = (taskViewModel) => {
-      return /* @__PURE__ */ createElement("span", { class: "ellipsis secondary" }, taskViewModel.task.name);
-    };
-    return /* @__PURE__ */ createElement("div", { class: "month-grid-wrapper" }, ...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(
-        "div",
-        {
-          class: "flex-column gap clip",
-          "children:append": [mapState, converter]
-        }
-      )));
-    }));
-  }
-
   // src/View/translations.ts
   var englishTranslations = {
     general: {
@@ -2525,6 +2505,36 @@
   var language = navigator.language.substring(0, 2);
   var translations = allTranslations[language] || allTranslations.en;
 
+  // src/View/Components/monthGrid.tsx
+  function MonthGrid2(monthGrid) {
+    const dayLabels = [];
+    let currentWeekday = monthGrid.firstDayOfWeek;
+    while (dayLabels.length < 7) {
+      dayLabels.push(
+        /* @__PURE__ */ createElement("span", { class: "secondary" }, translations.regional.weekdays.abbreviated[currentWeekday])
+      );
+      currentWeekday++;
+      if (currentWeekday == 7) currentWeekday = 0;
+    }
+    const offsetElements = [];
+    for (let i = 0; i < monthGrid.offset; i++) {
+      offsetElements.push(/* @__PURE__ */ createElement("div", null));
+    }
+    const converter = (taskViewModel) => {
+      return /* @__PURE__ */ createElement("span", { class: "ellipsis secondary" }, taskViewModel.task.name);
+    };
+    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(
+        "div",
+        {
+          class: "flex-column gap clip",
+          "children:append": [mapState, converter]
+        }
+      )));
+    })));
+  }
+
   // src/View/ChatPages/calendarPage.tsx
   function CalendarPage(calendarPageViewModel) {
     calendarPageViewModel.loadData();

src/Model/Files/calendarModel.ts

@@ -69,6 +69,7 @@ export default class CalendarModel {
 
     const grid: MonthGrid<T> = {
       offset,
+      firstDayOfWeek: parseInt(this.settingsModel.firstDayOfWeek),
       days: {},
     };
 
@@ -115,5 +116,6 @@ export enum CalendarModelSubPaths {
 // types
 export interface MonthGrid<T> {
   offset: number;
+  firstDayOfWeek: number;
   days: { [date: string]: T };
 }

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 {
+.month-grid .tile {
-    display: flex;
+  animation: slide-up var(--animation-duration);
-    flex-direction: column;
+}
 
-    height: 100%;
+.month-grid .tile > div {
-    width: 100%;
+  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}
+      <div class="day-labels">{...dayLabels}</div>
-      {...Object.entries(monthGrid.days).map((entry) => {
+      <div class="month-grid">
-        const [date, mapState] = entry;
+        {...offsetElements}
+        {...Object.entries(monthGrid.days).map((entry) => {
+          const [date, mapState] = entry;
 
-        return (
+          return (
-          <button class="tile">
+            <button class="tile">
-            <div>
+              <div>
-              <b>{date}</b>
+                <b>{date}</b>
-              <div
+                <div
-                class="flex-column gap clip"
+                  class="flex-column gap clip"
-                children:append={[mapState, converter]}
+                  children:append={[mapState, converter]}
-              ></div>
+                ></div>
-            </div>
+              </div>
-          </button>
+            </button>
-        );
+          );
-      })}
+        })}
+      </div>
     </div>
   );
 }

src/View/translations.ts

@@ -183,7 +183,7 @@ const englishTranslations = {
 
       ///
 
-      renameCategoryInputPlaceholder: "Rename category,"
+      renameCategoryInputPlaceholder: "Rename category,",
     },
 
     calendar: {
@@ -197,7 +197,7 @@ const englishTranslations = {
 
       yearInputPlaceholder: "2000",
       monthInputPlaceholder: "01",
-    }
+    },
   },
 };