Editable Mood Stars for Day

apps/cli/src/commands/days.ts

@@ -40,7 +40,7 @@ export const daysCmd = new Command()
             } else {
 
                 const moodStr = moodToStars(day.mood);
-                const dateStr = format(`${day.date}T00:00:00`, "EEEE, MMMM do");
+                const dateStr = format(day.date, "EEEE, MMMM do");
                 const data: string[][] = [[dateStr, moodStr], [day.comment ?? "No comment", '',]];
 
                 console.log(table(data, {

apps/web/components/dashboard/EditableText.tsx

@@ -32,6 +32,13 @@ function EditMode({
     if (ref.current) {
       ref.current.focus();
       ref.current.textContent = originalText;
+      const range = document.createRange();
+      range.selectNodeContents(ref.current);
+      const selection = window.getSelection();
+      if (selection) {
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
     }
   }, [ref]);
 

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

@@ -4,6 +4,7 @@ import { api } from "@/server/api/client";
 import { getServerAuthSession } from "@/server/auth";
 import { ZDay } from "@lifetracker/shared/types/days";
 import EditableDayComment from "./EditableDayComment";
+import { MoodStars } from "./MoodStars";
 import { format } from "date-fns";
 
 export default async function DayView({
@@ -29,13 +30,14 @@ export default async function DayView({
 
             <div className="flex justify-between">
                 <span className="text-2xl">
-                    {format(`${day.date}T00:00:00`, "EEEE, MMMM do")}
+                    {format(day.date, "EEEE, MMMM do")}
                 </span>
-
+                <div><MoodStars
+                    day={day}
+                /></div>
             </div>
 
             <Separator />
-            <div>Rating: {day.mood?.toString() ?? "-"}</div>
 
             <EditableDayComment day={day}
                 className="text-xl"

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

@@ -36,7 +36,7 @@ export default function EditableDayComment({
                 if (!newComment) { return }
                 updateDay(
                     {
-                        dateQuery: format(`${day.date}T00:00:00`, "yyyy-MM-dd"),
+                        dateQuery: format(day.date, "yyyy-MM-dd"),
                         comment: newComment,
                     },
                     {

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

@@ -0,0 +1,76 @@
+'use client';
+
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipPortal,
+} from "@/components/ui/tooltip";
+import { ButtonWithTooltip } from "@/components/ui/button";
+import { Star } from "lucide-react";
+import { useUpdateDay } from "@lifetracker/shared-react/hooks/days";
+import { format } from 'date-fns';
+import { useRouter } from "next/navigation";
+
+
+export function MoodStars({
+    day,
+    maximum = 10,
+}) {
+    const router = useRouter();
+    const { mutate: updateDay, isPending } = useUpdateDay({
+        onSuccess: () => {
+            toast({
+                description: "Rating updated!",
+            });
+            router.refresh();
+        },
+    });
+    const setStars = (newStars: number) => {
+        if (day.mood == newStars) {
+            // Nothing to do here
+            return;
+        }
+        updateDay(
+            {
+                dateQuery: format(day.date, "yyyy-MM-dd"),
+                mood: newStars,
+            },
+            {
+                onError: (e) => {
+                    toast({
+                        description: e.message,
+                        variant: "destructive",
+                    });
+                },
+            },
+        );
+    };
+
+    return (
+        <Tooltip delayDuration={500}>
+            <div className="flex max-w-full items-center gap-1">
+                {Array.from({ length: maximum }).map((_, i) => (
+                    <ButtonWithTooltip
+                        key={i}
+                        delayDuration={500}
+                        tooltip={`Set ${i + 1} star rating`}
+                        size="none"
+                        variant="ghost"
+                        className="align-middle text-gray-400"
+                        onClick={() => setStars(i + 1)}
+                    >
+                        {i < day.mood
+                            ? <Star fill="yellow" className="size-4" />
+                            : <Star className="size-4" />
+                        }
+                    </ButtonWithTooltip>
+                ))}
+            </div>
+            <TooltipPortal>
+                <TooltipContent side="bottom" className="max-w-[40ch] break-words">
+                    Hi
+                </TooltipContent>
+            </TooltipPortal>
+        </Tooltip >
+    )
+}

packages/trpc/routers/days.ts

@@ -14,7 +14,6 @@ import { TZDate } from "@date-fns/tz";
 
 function dateFromInput(input: { dateQuery: string }) {
     let t: string;
-    console.log(input.dateQuery);
     if (input.dateQuery == "today") {
         t = TZDate.tz("America/Los_Angeles");
     }
@@ -22,8 +21,7 @@ function dateFromInput(input: { dateQuery: string }) {
         t = new TZDate(input.dateQuery, "Etc/UTC");
     }
 
-    console.log(format(t, "yyyy-MM-dd"));
-    return format(t, "yyyy-MM-dd");
+    return format(t, "yyyy-MM-dd") + "T00:00:00";
 }
 
 async function createDay(date: string, ctx: Context) {