added favicon and added timer to habits

components/habits/daily-tasks-countdown.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+import {
+  formatCountdownDuration,
+  getMillisecondsUntilLocalMidnight,
+  getNextLocalMidnight,
+} from "@/lib/date-keys";
+import { cn } from "@/lib/utils";
+
+type DailyTasksCountdownProps = {
+  className?: string;
+  onDayChange?: () => void;
+};
+
+export function DailyTasksCountdown({
+  className,
+  onDayChange,
+}: DailyTasksCountdownProps) {
+  const [remainingMs, setRemainingMs] = useState(() =>
+    getMillisecondsUntilLocalMidnight(),
+  );
+  const hasNotifiedRef = useRef(false);
+
+  useEffect(() => {
+    const tick = () => {
+      const nextRemainingMs = getMillisecondsUntilLocalMidnight();
+      setRemainingMs(nextRemainingMs);
+
+      if (nextRemainingMs === 0) {
+        if (!hasNotifiedRef.current) {
+          hasNotifiedRef.current = true;
+          onDayChange?.();
+        }
+        return;
+      }
+
+      hasNotifiedRef.current = false;
+    };
+
+    tick();
+    const intervalId = window.setInterval(tick, 1000);
+
+    return () => {
+      window.clearInterval(intervalId);
+    };
+  }, [onDayChange]);
+
+  const resetsAtLabel = getNextLocalMidnight().toLocaleTimeString(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+
+  return (
+    <div
+      className={cn(
+        "rounded-lg border border-border/60 bg-muted/30 px-3 py-2",
+        className,
+      )}
+    >
+      <p className="text-sm text-muted-foreground">
+        Time remaining today{" "}
+        <span className="font-medium tabular-nums text-foreground">
+          {formatCountdownDuration(remainingMs)}
+        </span>
+      </p>
+      <p className="text-xs text-muted-foreground">
+        Tasks reset at midnight ({resetsAtLabel})
+      </p>
+    </div>
+  );
+}

components/habits/habit-tracker.tsx

@@ -3,6 +3,7 @@
 import { Loader2 } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 
+import { DailyTasksCountdown } from "@/components/habits/daily-tasks-countdown";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
@@ -41,6 +42,29 @@ const reasonLabels = {
   suggested: "Suggested for you",
 } as const;
 
+function DailyTasksCardHeader({
+  description,
+  onDayChange,
+}: {
+  description: string;
+  onDayChange: () => void;
+}) {
+  return (
+    <CardHeader>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="min-w-0">
+          <CardTitle className="text-base">Today&apos;s tasks</CardTitle>
+          <CardDescription>{description}</CardDescription>
+        </div>
+        <DailyTasksCountdown
+          className="w-full shrink-0 sm:max-w-[14rem]"
+          onDayChange={onDayChange}
+        />
+      </div>
+    </CardHeader>
+  );
+}
+
 function DailyTaskList({
   tasks,
   getIsCompleted,
@@ -424,13 +448,12 @@ export function HabitTracker({ mode = "daily" }: HabitTrackerProps) {
     return (
       <div className="flex flex-col gap-6">
         <Card>
-          <CardHeader>
+          <DailyTasksCardHeader
-            <CardTitle className="text-base">Today&apos;s tasks</CardTitle>
+            description={`Personalized from your focus topics${
-            <CardDescription>
+              quizCompletedToday ? ", today's quiz," : ""
-              Personalized from your focus topics
+            } and custom habits.`}
-              {quizCompletedToday ? ", today's quiz," : ""} and custom habits.
+            onDayChange={refresh}
-            </CardDescription>
+          />
-          </CardHeader>
           <CardContent className="space-y-4">
             {error ? <p className="text-sm text-red-500">{error}</p> : null}
             {coinMessage ? (
@@ -572,12 +595,10 @@ export function HabitTracker({ mode = "daily" }: HabitTrackerProps) {
 
   return (
     <Card>
-      <CardHeader>
+      <DailyTasksCardHeader
-        <CardTitle className="text-base">Today&apos;s tasks</CardTitle>
+        description="Personalized from your profile, daily quiz, journal, and custom habits."
-        <CardDescription>
+        onDayChange={refresh}
-          Personalized from your profile, daily quiz, journal, and custom habits.
+      />
-        </CardDescription>
-      </CardHeader>
       <CardContent className="space-y-4">
         {error ? <p className="text-sm text-red-500">{error}</p> : null}
         {coinMessage ? (

lib/daily-quiz-storage.ts

@@ -6,6 +6,7 @@ import {
 } from "@/lib/avatar-state";
 import { notifyHabitPetDataUpdated } from "@/lib/app-events";
 import {
+  formatCountdownDuration,
   getMillisecondsUntilLocalMidnight,
   getNextLocalMidnight,
   getTodayDateKey,
@@ -36,12 +37,7 @@ export function getMillisecondsUntilNextDailyQuiz(from = new Date()) {
 }
 
 export function formatDailyQuizCountdown(milliseconds: number) {
-  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+  return formatCountdownDuration(milliseconds);
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const seconds = totalSeconds % 60;
-
-  return `${hours}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
 }
 
 export async function resetTodaysDailyQuiz() {

lib/date-keys.ts

@@ -17,3 +17,12 @@ export function getNextLocalMidnight(from = new Date()) {
 export function getMillisecondsUntilLocalMidnight(from = new Date()) {
   return Math.max(0, getNextLocalMidnight(from).getTime() - from.getTime());
 }
+
+export function formatCountdownDuration(milliseconds: number) {
+  const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
+  const hours = Math.floor(totalSeconds / 3600);
+  const minutes = Math.floor((totalSeconds % 3600) / 60);
+  const seconds = totalSeconds % 60;
+
+  return `${hours}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+}