Make home page greeting dynamic based on user initials and time of day

apps/web/src/ui/app/AppShell.tsx

@@ -603,6 +603,7 @@ export function App() {
               onSelectCompany={selectCompany}
               onRemoveHolding={removeHolding}
               pendingTicker={settingActiveTicker ?? removingTicker ?? addingTicker}
+              profile={profile}
               onRunResearch={() => runPipeline("research")}
               runningResearch={runningPipeline === "research"}
               addToast={addToast}
@@ -1157,17 +1158,28 @@ function Home(props: {
   onSelectCompany: (tickerOrId: string, screen?: Screen) => void;
   onRemoveHolding: (ticker: string) => void;
   pendingTicker: string | null;
+  profile: Partial<UserProfile>;
   onRunResearch: () => void | Promise<void>;
   runningResearch: boolean;
   addToast: (t: Omit<Toast, "id">) => void;
 }) {
   const holdings = props.holdings;
+  const hour = new Date().getHours();
+  const timeGreeting = hour < 12 ? "Good morning" : hour < 17 ? "Good afternoon" : "Good evening";
+  const initials = props.profile.name
+    ? props.profile.name
+        .split(" ")
+        .map((n) => n[0])
+        .join("")
+        .toUpperCase()
+        .slice(0, 2)
+    : null;
   return (
     <section className={ui.screen}>
       <div className="mb-5 flex items-start justify-between gap-4">
         <div>
-          <p className={ui.eyebrow}>Morning Briefing</p>
-          <h1 className={ui.h1}>Good morning, JD</h1>
+          <p className={ui.eyebrow}>{timeGreeting.replace("Good ", "")} Briefing</p>
+          <h1 className={ui.h1}>{timeGreeting}{initials ? `, ${initials}` : ""}</h1>
         </div>
         <button
           className={cx(ui.btn, ui.btnPrimary)}