fix: render dashboard greeting and date client-side to respect local timezone

src/app/d/[slug]/page.tsx

@@ -9,6 +9,7 @@ import { DashboardEditor } from "@/components/dashboard-editor";
 import { EditDashboardButton } from "@/components/edit-dashboard-button";
 import { DashboardSwitcher } from "@/components/dashboard-switcher";
 import { DashboardTab } from "@/components/dashboard-tab";
+import { DashboardGreeting } from "@/components/dashboard-greeting";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { auth } from "@/lib/auth";
 import { db } from "@/lib/db";
@@ -31,9 +32,6 @@ const smColSpan: Record<number, string> = {
   12: "sm:col-span-12",
 };
 
-const greetingForHour = (h: number) =>
-  h < 5 ? "Up early" : h < 12 ? "Good morning" : h < 18 ? "Good afternoon" : "Good evening";
-
 export default async function DashboardPage({
   params,
   searchParams,
@@ -83,12 +81,6 @@ export default async function DashboardPage({
   const dashLayout = (user.themeDashLayout as DashLayout) ?? "classic";
   const containerCls =
     dashLayout === "glance" ? "max-w-[760px] mx-auto" : dashLayout === "split" ? "" : "";
-  const greeting = greetingForHour(new Date().getHours());
-  const today = new Date().toLocaleDateString(undefined, {
-    weekday: "long",
-    month: "long",
-    day: "numeric",
-  });
   const firstName = (user.name ?? "").split(" ")[0] ?? "";
 
   return (
@@ -103,13 +95,7 @@ export default async function DashboardPage({
       )}
 
       <div className="mb-6 flex items-end justify-between gap-4 flex-wrap">
-        <div>
+        <DashboardGreeting firstName={firstName} />
-          <h1 className="serif text-[26px] sm:text-[30px] leading-tight tracking-tight">
-            {greeting}
-            {firstName && `, ${firstName}`}.
-          </h1>
-          <p className="muted mt-1 text-[13px]">{today}</p>
-        </div>
         <EditDashboardButton />
       </div>
 

src/components/dashboard-greeting.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+const greetingForHour = (h: number) =>
+  h < 5 ? "Up early" : h < 12 ? "Good morning" : h < 18 ? "Good afternoon" : "Good evening";
+
+export function DashboardGreeting({ firstName }: { firstName: string }) {
+  const now = new Date();
+  const greeting = greetingForHour(now.getHours());
+  const today = now.toLocaleDateString(undefined, {
+    weekday: "long",
+    month: "long",
+    day: "numeric",
+  });
+
+  return (
+    <div>
+      <h1 className="serif text-[26px] sm:text-[30px] leading-tight tracking-tight">
+        {greeting}
+        {firstName && `, ${firstName}`}.
+      </h1>
+      <p className="muted mt-1 text-[13px]">{today}</p>
+    </div>
+  );
+}