From 007c13a2128feeeb06f1c9e62af82e3c930a2ecb Mon Sep 17 00:00:00 2001
From: Camiel van Schoonhoven <camiel.vanschoonhoven@shopify.com>
Date: Tue, 19 May 2026 17:21:00 -0700
Subject: [PATCH] feat: Learning Hub Tip of the Day

---
 src/components/Learn/TipOfTheDay.tsx          | 93 ++++++++++++-------
 src/routes/Dashboard/DashboardHomeView.tsx    |  6 +-
 src/routes/v2/pages/Editor/EditorV2.tsx       |  2 +
 .../Editor/hooks/useTipOfTheDayWindow.tsx     | 21 +++++
 src/routes/v2/shared/windows/viewPresets.ts   |  3 +
 5 files changed, 93 insertions(+), 32 deletions(-)
 create mode 100644 src/routes/v2/pages/Editor/hooks/useTipOfTheDayWindow.tsx

diff --git a/src/components/Learn/TipOfTheDay.tsx b/src/components/Learn/TipOfTheDay.tsx
index 2c1bc3e8f..21b543058 100644
--- a/src/components/Learn/TipOfTheDay.tsx
+++ b/src/components/Learn/TipOfTheDay.tsx
@@ -4,50 +4,81 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Icon } from "@/components/ui/icon";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
-import { Heading, Paragraph } from "@/components/ui/typography";
+import { Heading, Text } from "@/components/ui/typography";
 import { tracking } from "@/utils/tracking";
 
-const STUB_TIP = {
-  id: "subgraph-navigation",
-  category: "Editor",
-  title: "Use subgraphs to keep complex pipelines readable",
-  body: "Double-click any task to dive into its subgraph. Use the breadcrumbs at the top of the editor to navigate back up — perfect for organising large pipelines without clutter.",
-};
+import { tips } from "./tips";
+
+function getDayOfYear(date: Date) {
+  const start = Date.UTC(date.getUTCFullYear(), 0, 0);
+
+  const now = Date.UTC(
+    date.getUTCFullYear(),
+    date.getUTCMonth(),
+    date.getUTCDate(),
+  );
+
+  return Math.floor((now - start) / 86_400_000);
+}
+
+interface TipOfTheDayProps {
+  variant?: "card" | "compact";
+}
+
+export function TipOfTheDay({ variant = "card" }: TipOfTheDayProps = {}) {
+  const index = getDayOfYear(new Date()) % tips.length;
+  const tip = tips[index];
+  const isCompact = variant === "compact";
+  const textSize = isCompact ? "xs" : "sm";
+
+  const badge = (
+    <Badge size="sm" variant="secondary">
+      {tip.category}
+    </Badge>
+  );
 
-export function TipOfTheDay() {
   return (
-    <div className="h-full rounded-xl border border-border bg-card p-5">
-      <BlockStack gap="3" className="h-full">
-        <InlineStack gap="2" blockAlign="center" align="space-between">
-          <InlineStack gap="2" blockAlign="center">
-            <Icon
-              name="Lightbulb"
-              size="md"
-              className="text-amber-500"
-              aria-hidden="true"
-            />
-            <Heading level={3}>Tip of the day</Heading>
+    <div
+      className={
+        isCompact
+          ? "h-full p-2"
+          : "h-full rounded-xl border border-border bg-card p-5"
+      }
+    >
+      <BlockStack gap={isCompact ? "2" : "3"} className="h-full">
+        {!isCompact && (
+          <InlineStack gap="2" blockAlign="center" align="space-between">
+            <InlineStack gap="2" blockAlign="center">
+              <Icon
+                name="Lightbulb"
+                size="md"
+                className="text-amber-500"
+                aria-hidden="true"
+              />
+              <Heading level={3}>Tip of the day</Heading>
+            </InlineStack>
+            {badge}
           </InlineStack>
-          <Badge size="sm" variant="secondary">
-            {STUB_TIP.category}
-          </Badge>
-        </InlineStack>
+        )}
 
         <BlockStack gap="1" className="flex-1">
-          <Paragraph size="sm" weight="semibold">
-            {STUB_TIP.title}
-          </Paragraph>
-          <Paragraph size="sm" tone="subdued">
-            {STUB_TIP.body}
-          </Paragraph>
+          <InlineStack gap="2" blockAlign="center" align="space-between">
+            <Text as="p" size={textSize} weight="semibold">
+              {tip.title}
+            </Text>
+            {isCompact && badge}
+          </InlineStack>
+          <Text as="p" size={textSize} tone="subdued">
+            {tip.body}
+          </Text>
         </BlockStack>
 
-        <InlineStack gap="2" align="space-between" blockAlign="center">
+        <InlineStack gap="2" blockAlign="center">
           <Button
             asChild
             size="sm"
             variant="link"
-            className="px-0"
+            className={isCompact ? "px-0 text-xs" : "px-0"}
             {...tracking("learning_hub.tip.browse_all")}
           >
             <Link to="/learn/tips">
diff --git a/src/routes/Dashboard/DashboardHomeView.tsx b/src/routes/Dashboard/DashboardHomeView.tsx
index b71c39fbc..427336f55 100644
--- a/src/routes/Dashboard/DashboardHomeView.tsx
+++ b/src/routes/Dashboard/DashboardHomeView.tsx
@@ -1,6 +1,7 @@
 import { Link } from "@tanstack/react-router";
 
 import { RunSection } from "@/components/Home/RunSection/RunSection";
+import { TipOfTheDay } from "@/components/Learn/TipOfTheDay";
 import { AnnouncementBanners } from "@/components/shared/AnnouncementBanners";
 import { BlockStack, InlineStack } from "@/components/ui/layout";
 import {
@@ -170,10 +171,13 @@ export function DashboardHomeView() {
     <BlockStack gap="6">
       <AnnouncementBanners />
 
-      <div className="grid grid-cols-3 gap-6 overflow-hidden">
+      <div className="w-full grid grid-cols-6 gap-6 overflow-hidden">
         <FavoritesPreview />
         <RecentlyViewedPreview />
         <RecentComponentsPreview />
+        <div className="col-span-3 max-w-4xl mx-auto">
+          <TipOfTheDay />
+        </div>
       </div>
 
       <BlockStack gap="3">
diff --git a/src/routes/v2/pages/Editor/EditorV2.tsx b/src/routes/v2/pages/Editor/EditorV2.tsx
index 94bac1e71..1ebf67a6f 100644
--- a/src/routes/v2/pages/Editor/EditorV2.tsx
+++ b/src/routes/v2/pages/Editor/EditorV2.tsx
@@ -45,6 +45,7 @@ import { useRunsAndSubmissionWindow } from "./hooks/useRunsAndSubmissionWindow";
 import { useSeedInitialDockLayoutFromPreset } from "./hooks/useSeedInitialDockLayoutFromPreset";
 import { useSelectionWindowSync } from "./hooks/useSelectionWindowSync";
 import { useSpecLifecycle } from "./hooks/useSpecLifecycle";
+import { useTipOfTheDayWindow } from "./hooks/useTipOfTheDayWindow";
 import { useUndoRedoKeyboard } from "./hooks/useUndoRedoKeyboard";
 import { editorRegistry } from "./nodes";
 import { EditorSessionProvider } from "./store/EditorSessionContext";
@@ -88,6 +89,7 @@ const PipelineEditor = withSuspenseWrapper(
     useShortcutListener();
     useEditorEscapeShortcut();
     useDebugPanelWindow();
+    useTipOfTheDayWindow();
     useSeedInitialDockLayoutFromPreset();
 
     const activeSpec = navigation.activeSpec;
diff --git a/src/routes/v2/pages/Editor/hooks/useTipOfTheDayWindow.tsx b/src/routes/v2/pages/Editor/hooks/useTipOfTheDayWindow.tsx
new file mode 100644
index 000000000..ad00a38a9
--- /dev/null
+++ b/src/routes/v2/pages/Editor/hooks/useTipOfTheDayWindow.tsx
@@ -0,0 +1,21 @@
+import { useEffect } from "react";
+
+import { TipOfTheDay } from "@/components/Learn/TipOfTheDay";
+import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
+
+const TIP_OF_THE_DAY_WINDOW_ID = "tip-of-the-day";
+
+export function useTipOfTheDayWindow() {
+  const { windows } = useSharedStores();
+  useEffect(() => {
+    if (windows.getWindowById(TIP_OF_THE_DAY_WINDOW_ID)) return;
+    windows.openWindow(<TipOfTheDay variant="compact" />, {
+      id: TIP_OF_THE_DAY_WINDOW_ID,
+      title: "Tip of the Day",
+      position: { x: 0, y: 820 },
+      size: { width: 280, height: 240 },
+      persisted: true,
+      defaultDockState: "left",
+    });
+  }, [windows]);
+}
diff --git a/src/routes/v2/shared/windows/viewPresets.ts b/src/routes/v2/shared/windows/viewPresets.ts
index 7036d52c4..f30a1ba59 100644
--- a/src/routes/v2/shared/windows/viewPresets.ts
+++ b/src/routes/v2/shared/windows/viewPresets.ts
@@ -14,6 +14,7 @@ export interface ViewPreset {
 
 export const DEFAULT_DOCK_AREAS: PresetDockAreas = {
   left: [
+    "tip-of-the-day",
     "runs-and-submission",
     "component-library",
     "pipeline-tree",
@@ -46,6 +47,7 @@ export const DEFAULT_VIEW_PRESET: ViewPreset = {
     "recent-runs",
     "component-library",
     "pipeline-details",
+    "tip-of-the-day",
   ]),
   dockAreas: DEFAULT_DOCK_AREAS,
 };
@@ -64,6 +66,7 @@ export const VIEW_PRESETS: ViewPreset[] = [
       "pipeline-details",
       "debug-panel",
       "recent-runs",
+      "tip-of-the-day",
     ]),
     dockAreas: DEFAULT_DOCK_AREAS,
   },