add month grid

src/Views/Objects/calendarView.tsx

@@ -2,8 +2,8 @@ import * as React from "bloatless-react";
 
 import { Chat, MessageObject } from "../../Model/chatModel";
 
-import { ObjectGridView } from "./objectGridView";
 import { DayView } from "./dayView";
+import { MiniatureDayView } from "./miniatureDayView";
 import { dayInCalendar } from "../../Model/model";
 
 export function CalendarView(
@@ -12,10 +12,52 @@ export function CalendarView(
   selectedObject: React.State<MessageObject | undefined>,
   isShowingObjectModal: React.State<boolean>
 ) {
-  return <div class="calendar-wrapper">
-      <div class="month-grid">
+  let monthGridCells = new React.State<HTMLElement[]>([]);
+
+  let previousMonth = 0;
+  dayInCalendar.subscribe((newValue) => {
+    const selectedDate = new Date(newValue);
+    if (selectedDate.getMonth() == previousMonth) return;
+    
+    previousMonth = selectedDate.getMonth();
+    const currentDate = new Date();
+    monthGridCells.value = [];
+
+    // initialize to first day of month
+    currentDate.setDate(1);
+    currentDate.setMonth(selectedDate.getMonth());
+
+    // create blank dates starting sunday
+    const monthOffset = currentDate.getDay();
+    console.log(monthOffset);
+    for (let i = 0; i < monthOffset; i++) {
+      monthGridCells.value.push(<div></div>)
+    }
+
+    // add day views
+    while (currentDate.getMonth() == selectedDate.getMonth()) {
+      monthGridCells.value.push(
+        MiniatureDayView(
+          chat,
+          messageObjects,
+          new Date(currentDate),
+        )
+      );
+      currentDate.setDate(currentDate.getDate() + 1);
+    }
+  });
+
+  return (
+    <div class="calendar-wrapper">
+      <div class="month-grid padding scroll-v">
         <input type="date" bind:value={dayInCalendar}></input>
+        <div
+          class="grid gap"
+          style="grid-template-columns: repeat(7, 1fr)"
+          children:set={monthGridCells}
+        ></div>
       </div>
       {DayView(chat, messageObjects, selectedObject, isShowingObjectModal)}
     </div>
+  );
 }

src/Views/Objects/dayView.tsx

@@ -52,8 +52,8 @@ export function DayView(
 
   return (
     <div
-      class="day-view padding flex-column gap"
-      children:prepend={[objectsForDayView, objectConverter]}
+      class="day-view padding flex-column gap scroll-v"
+      children:append={[objectsForDayView, objectConverter]}
     ></div>
   );
 }

src/Views/Objects/miniatureDayView.tsx

@@ -0,0 +1,66 @@
+import * as React from "bloatless-react";
+
+import { Chat, MessageObject } from "../../Model/chatModel";
+
+import { dayInCalendar } from "../../Model/model";
+
+export function MiniatureDayView(
+  chat: Chat,
+  messageObjects:
+    | React.ListState<MessageObject>
+    | React.MapState<MessageObject>,
+  dayToShow: Date
+) {
+  const objectsForDayView = new React.ListState<MessageObject>();
+
+  const dateString = dayToShow.toISOString().split("T")[0];
+
+  function processObject(messageObject: MessageObject) {
+    const latest = chat.getMostRecentContent(messageObject);
+    if (!latest.date || latest.date != dateString) return;
+
+    objectsForDayView.add(messageObject);
+    messageObjects.handleRemoval(messageObject, () => {
+      objectsForDayView.remove(messageObject);
+    });
+  }
+
+  function select() {
+    dayInCalendar.value = dateString;
+  }
+
+  const isSelected = React.createProxyState(
+    [dayInCalendar],
+    () => dayInCalendar.value == dateString
+  );
+
+  messageObjects.handleAddition(processObject);
+
+  const objectConverter: React.StateItemConverter<MessageObject> = (
+    messageObject
+  ) => {
+    const latest = chat.getMostRecentContent(messageObject);
+    const timeString = latest.time ?? "00:00";
+    const [hour, minute] = timeString.split(":");
+    const hourInMinutes = parseInt(hour) * 60;
+    const minutesTotal = parseInt(minute) + hourInMinutes;
+
+    const view = <b class="ellipsis">{chat.getObjectTitle(messageObject)}</b>;
+    view.style.order = minutesTotal;
+    return view;
+  };
+
+  return (
+    <button
+      on:click={select}
+      toggle:selected={isSelected}
+      class="tile flex-column align-start"
+    >
+      <h3>{dayToShow.getDate()}</h3>
+      <div
+        class="flex-column gap"
+        children:append={[objectsForDayView, objectConverter]}
+      ></div>
+    </button>
+  );
+}