Rename MonthView to TimelineView

apps/web/app/dashboard/timeline/page.tsx

@@ -1,12 +1,7 @@
-import { ZHour } from "@lifetracker/shared/types/days";
 import React from "react";
 import spacetime from "spacetime";
 import { api } from "@/server/api/client";
-import { EditableHourCode } from "@/components/dashboard/hours/EditableHourCode";
+import TimelineView from "@/components/dashboard/timeline/TimelineView";
-import { useUpdateHour } from "@lifetracker/shared-react/hooks/days";
-import { useToast } from "@/components/ui/use-toast";
-import { getHourFromTime } from "@lifetracker/shared/utils/hours";
-import MonthView from "@/components/dashboard/timelines/MonthView";
 
 async function fetchDays(view: string, dateQuery: string) {
     const timezone = await api.users.getTimezone();
@@ -34,7 +29,7 @@ export default async function TimelinePage({ params }: { params: { view: string,
 
     return (
         <>
-            <MonthView days={days} />
+            <TimelineView days={days} />
         </>
     );
 }

apps/web/components/dashboard/days/DayView.tsx

@@ -25,9 +25,42 @@ export default async function DayView({
     const prevDay = spacetime(day.date).subtract(1, "day").format("iso-short");
     const nextDay = spacetime(day.date).add(1, "day").format("iso-short");
 
-
     const userMetrics = await api.metrics.list();
 
+    const groupConsecutiveHours = (day: ZDay) => {
+        const result = [];
+        let currentGroup = [];
+
+        for (const hour of day.hours) {
+            if (hour.categoryCode === null) {
+                if (currentGroup.length > 0) {
+                    result.push(currentGroup);
+                    currentGroup = [];
+                }
+
+                result.push([hour]);
+
+                continue;
+            }
+
+            if (currentGroup.length === 0 || hour.categoryCode === currentGroup[currentGroup.length - 1].categoryCode) {
+                currentGroup.push(hour);
+            } else {
+                result.push(currentGroup);
+                currentGroup = [hour];
+            }
+        }
+
+        if (currentGroup.length > 0) {
+            result.push(currentGroup);
+        }
+
+        return result;
+    };
+
+    const consecutiveHours = groupConsecutiveHours(day);
+
+
     return (
         <div className="flex flex-col gap-3">
 
@@ -81,33 +114,26 @@ export default async function DayView({
             <Separator />
 
             <ul>
-                <li>
+                {/* {consecutiveHours.map((group, i) => (
-                    {/* 
+                    group.map((hour, j) => (
-                    TODO Possibly refactor with Table?
+                        j == 0 ? (
-                    <div className={cn(
-                        "p-4 grid justify-between",
-                    )}
-                        style={{
-                            fontFamily: "inherit",
-                            gridTemplateColumns: "100px  1fr 200px"
-                        }}
-                    >
-                        <span className="text-right">
-                            Time
-                        </span>
-                        <span className="text-center">
-                            Category
-                        </span>
-                        <div className="text-right">
-                            Actions
-                        </div>
-                    </div> */}
-                </li>
-                {day.hours.map((hour, i) => (
                             <li key={hour.time} id={"hour-" + i.toString()}>
-                        <EditableHour hour={hour} i={i} metrics={userMetrics} />
+                                <EditableHour hour={hour} i={i} j={j} hourGroup={group} metrics={userMetrics} />
-                    </li>
+                            </li>) : (
-                ))}
+                            ""
+                        )
+
+                    ))
+                ))} */}
+                {
+                    day.hours.map((hour, i) => (
+                        <li key={hour.time} id={"hour-" + i.toString()}>
+                            <EditableHour hour={hour} i={i} j={0} hourGroup={[]} metrics={userMetrics} />
+                        </li>)
+                    )
+
+
+                }
             </ul>
 
         </div>

apps/web/components/dashboard/hours/EditableHour.tsx

@@ -27,12 +27,18 @@ import { useDecrementCount } from "@lifetracker/shared-react/hooks/measurements"
 export default function EditableHour({
     hour: initialHour,
     i,
+    j,
+    hourGroup,
     metrics,
+    isConsecutiveHour = false,
     className,
 }: {
     hour: ZHour,
     i: number,
+    j: number,
+    hourGroup: ZHour[],
     metrics: ZMetric[],
+    isConsecutiveHour?: boolean,
     className?: string;
 }) {
     const [hour, setHour] = useState(initialHour);
@@ -92,8 +98,14 @@ export default function EditableHour({
 
 
     const tzOffset = spacetime().offset() / 60;
-    const localDateTime = spacetime(hour.date).add(hour.time + tzOffset, "hour");
+
-    hour.datetime = `${localDateTime.format('{hour} {ampm}')}`;
+
+    const localDateTime = (h) => {
+        return spacetime(h.date).add(h.time + tzOffset, "hour").format('{hour} {ampm}');
+    }
+    hour.datetime = localDateTime(hour);
+
+
 
     useEffect(() => {
         // console.log(hour.categoryDesc);
@@ -110,7 +122,6 @@ export default function EditableHour({
     function reload(newHour: ZHour) {
         setHour(newHour);
     }
-
     return (
         <div
             data-hourid={hour.id}
@@ -123,8 +134,16 @@ export default function EditableHour({
             }}
         >
             <span className="text-right">
-                {/* {isActiveHour(hour) && "--> "} */}
+                {hourGroup.length > 1
-                {hour.datetime}
+                    ? (
+                        <div className="flex flex-col items-center">
+                            <span>{hour.datetime}</span>
+                            <span>|</span>
+                            <span>{localDateTime(hourGroup[hourGroup.length - 1])}</span>
+                        </div>
+                    )
+                    : <div className="flex flex-col items-center">{hour.datetime}</div>
+                }
             </span>
             <div className="flex justify-center">
                 <EditableHourCode
@@ -158,7 +177,10 @@ export default function EditableHour({
                 {hour.categoryCode != undefined ?
 
                     <div className="flex items-center gap-2">
-                        {hour.measurements?.map(m =>
+                        {
+
+                            hour.measurements?.map(m =>
+
                                 Array.from({ length: m.value }).map((_, index) =>
                                     <div key={`${m.id}-${index}`} className="hover:cursor-no-drop" onClick={(e) => {
                                         decrementCount({ metricId: m.metricId, hourId: hour.id });
@@ -168,7 +190,10 @@ export default function EditableHour({
                                 )
                             )}
                         {(hour.measurements.length > 0) ?
-                            (<span className="mx-2 opacity-50">|</span>)
+                            (<span className="mx-2 opacity-50">
+                                {/* {JSON.stringify(hour.measurements.length)} */}
+                                |
+                            </span>)
                             : ""
                         }
 

apps/web/components/dashboard/sidebar/Sidebar.tsx

@@ -3,7 +3,7 @@ import SidebarItem from "@/components/shared/sidebar/SidebarItem";
 import { Separator } from "@/components/ui/separator";
 import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
-import { Archive, Calendar, CheckCheck, Gauge, Home, LineChart, Ruler, Search, Tag } from "lucide-react";
+import { Archive, Calendar, CheckCheck, Gauge, Home, LineChart, Ruler, Search, SunMoon, Tag } from "lucide-react";
 import serverConfig from "@lifetracker/shared/config";
 
 import AllLists from "./AllLists";
@@ -34,13 +34,13 @@ export default async function Sidebar() {
   }[] = [
       {
         name: "Day View",
-        icon: <Home size={18} />,
+        icon: <SunMoon size={18} />,
         path: "/dashboard/day/today",
       },
       {
-        name: "Month View",
+        name: "Timeline View",
         icon: <Calendar size={18} />,
-        path: "/dashboard/timeline/month",
+        path: "/dashboard/timeline",
       },
       ...searchItem,
       {

apps/web/components/dashboard/timeline/TimelineView.tsx

@@ -13,7 +13,7 @@ import EditableHour from "@/components/dashboard/hours/EditableHour";
 import { useUpdateHour } from "@lifetracker/shared-react/hooks/days";
 import { useState } from "react";
 
-export default function MonthView({
+export default function TimelineView({
     days: initialDays,
 }: {
     days: ZDay[];

packages/trpc/routers/measurements.ts

@@ -21,7 +21,7 @@ export const measurementsAppRouter = router({
                 .where(and(eq(measurements.userId, ctx.user.id),
                     eq(hours.id, input.hourId))
                 );
-
+            console.log(dbMeasurements.length);
             return dbMeasurements;
         }),
     incrementCount: authedProcedure