Started month view!

apps/web/app/dashboard/timeline/[view]/page.tsx

@@ -0,0 +1,76 @@
+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 { useUpdateHour } from "@lifetracker/shared-react/hooks/days";
+import { useToast } from "@/components/ui/use-toast";
+import { getHourFromTime } from "@lifetracker/shared/utils/hours";
+
+async function fetchDays(view: string, dateQuery: string) {
+    const timezone = await api.users.getTimezone();
+
+    const today = spacetime(dateQuery ?? "today");
+    const firstDay = today.subtract(3, "day").last("week").startOf("week");
+
+    const days = [];
+    for (let i = 0; i < 20; i++) {
+        const dayDate = firstDay.add(i, "day").format("iso-short");
+        console.log(dayDate);
+        const dayRes = await api.days.get({
+            dateQuery: dayDate,
+            timezone: timezone,
+        });
+        days.push(dayRes);
+    }
+
+    return days;
+}
+
+export default async function TimelinePage({ params }: { params: { view: string, dateQuery: string }; }) {
+    const { view = "month", dateQuery } = await params;
+    const days = await fetchDays(view, dateQuery);
+
+    return (
+        <>
+            <div className="grid" style={{ "gridTemplateColumns": "repeat(25, 1fr)" }}>
+                <div className="flex items-center">Date</div>
+                {Array.from({ length: 24 }, (_, i) => (
+                    <div key={i} className="flex text-center items-center justify-center font-mono">
+                        {getHourFromTime(i, "twelves")}
+                    </div>
+                ))}
+            </div>
+            {days.map((day, index) => (
+                <div
+                    key={index}
+                    className="grid"
+                    style={{ "gridTemplateColumns": "repeat(25, 1fr)" }}
+                >
+                    <div className="text-right font-mono">
+                        {spacetime(day.date).format("{iso-month}/{date-pad}")}
+                    </div>
+                    {day.hours.map((hour, i) => (
+                        <EditableHourCode
+                            key={i}
+                            originalText={hour.categoryCode}
+                            hour={hour}
+                            i={i}
+                        />
+                        // <div key={i}
+                        //     datetime={day.date + "T" + hour.time + ":00:00"}
+                        //     className="flex items-center justify-center font-mono"
+                        //     style={{
+                        //         backgroundColor: hour.background ?? "white",
+                        //         color: hour.foreground ?? "black",
+                        //     }}
+                        // >
+                        //     {hour.categoryCode ?? "_"}
+                        // </div>
+                    ))}
+                </div>
+
+            ))}
+        </>
+    );
+}

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, Home, Search, Tag } from "lucide-react";
+import { Archive, Calendar, Home, Search, Tag } from "lucide-react";
 import serverConfig from "@lifetracker/shared/config";
 
 import AllLists from "./AllLists";
@@ -33,10 +33,15 @@ export default async function Sidebar() {
     path: string;
   }[] = [
       {
-        name: "Home",
+        name: "Day View",
         icon: <Home size={18} />,
         path: "/dashboard/day/today",
       },
+      {
+        name: "Month View",
+        icon: <Calendar size={18} />,
+        path: "/dashboard/timeline/month",
+      },
       ...searchItem,
       {
         name: "Categories",

apps/web/components/dashboard/timelines/MonthView.tsx

@@ -0,0 +1,57 @@
+import { redirect } from "next/navigation";
+import { Separator } from "@/components/ui/separator";
+import { getServerAuthSession } from "@/server/auth";
+import { ZDay } from "@lifetracker/shared/types/days";
+import EditableDayComment from "./EditableDayComment";
+import { MoodStars } from "./MoodStars";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { ArrowLeftSquare, ArrowRightSquare } from "lucide-react";
+import spacetime from "spacetime";
+import EditableHour from "@/components/dashboard/hours/EditableHour";
+
+export default async function MonthView({
+    dateRange,
+}: {
+    dateRange: string[];
+}) {
+    const session = await getServerAuthSession();
+    if (!session) {
+        redirect("/");
+    }
+
+
+    return (
+        <div className="flex flex-col gap-3">
+            <div className="flex justify-between pr-4">
+                <div className="flex">
+                    <Link
+                        href={`/dashboard/timeline/month/last`}
+                        className={cn(
+                            "flex-0 items-center rounded-[inherit] px-3 py-2",
+                        )}
+                    >
+                        <div className="flex w-full justify-between">
+                            <ArrowLeftSquare size={18} />
+                        </div>
+                    </Link>
+                    <span className="text-2xl flex-1">
+                        {spacetime().format("{day}, {month} {date}, {year}")}
+                    </span>
+                    <Link
+                        href={`/dashboard/timeline/month/next`}
+                        className={cn(
+                            "flex-0 items-center rounded-[inherit] px-3 py-2",
+                        )}
+                    >
+                        <div className="flex w-full justify-between">
+                            <ArrowRightSquare size={18} />
+                        </div>
+                    </Link>
+                </div>
+            </div>
+
+            <Separator />
+        </div>
+    );
+}

apps/web/components/shared/sidebar/SidebarItem.tsx

@@ -24,12 +24,13 @@ export default function SidebarItem({
   right?: React.ReactNode;
   collapseButton?: React.ReactNode;
 }) {
-  const currentPath = usePathname();
+  const currentPath = usePathname().split("/").slice(0, 3).join("/");
+  // console.log(currentPath);
   return (
     <li
       className={cn(
         "relative rounded-lg hover:bg-accent",
-        path == currentPath ? "bg-accent/50" : "",
+        path.split("/").slice(0, 3).join("/") == currentPath ? "bg-accent/50" : "",
         className,
       )}
       style={style}

packages/trpc/routers/days.ts

@@ -148,7 +148,6 @@ export const daysAppRouter = router({
                 return hourJoinsQuery(ctx, dayId, map.time);
             }));
 
-
             return {
                 ...await getDay(input, ctx, date),
                 hours: dayHours.flat(),