From 9cd42dc6bd244d2634da48eab1afab602348ed4e Mon Sep 17 00:00:00 2001
From: Paul D'Ambra <paul@posthog.com>
Date: Tue, 5 Dec 2023 15:37:10 +0000
Subject: [PATCH] YearInHog3000

---
 frontend/src/layout/navigation-3000/components/TopBar.tsx  | 4 ++--
 frontend/src/layout/navigation/TopBar/YearInHogButton.scss | 3 +++
 frontend/src/layout/navigation/TopBar/YearInHogButton.tsx  | 4 +++-
 frontend/src/scenes/project-homepage/ProjectHomepage.tsx   | 7 +++++++
 4 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/layout/navigation/TopBar/YearInHogButton.scss

diff --git a/frontend/src/layout/navigation-3000/components/TopBar.tsx b/frontend/src/layout/navigation-3000/components/TopBar.tsx
index f1a5507fe00c6..e0fbbcd0ea9b8 100644
--- a/frontend/src/layout/navigation-3000/components/TopBar.tsx
+++ b/frontend/src/layout/navigation-3000/components/TopBar.tsx
@@ -34,8 +34,8 @@ export function TopBar(): JSX.Element | null {
             const mainElement = document.getElementsByTagName('main')[0]
             const mainScrollTop = mainElement.scrollTop
             const compactionDistance = Math.min(
-                // This ensure that scrolling to the bottom of the scene will always result in the compact top bar state
-                // even if there's just a few pixels of scroll room. Otherwise the top bar would be halfway-compact then
+                // This ensures that scrolling to the bottom of the scene will always result in the compact top bar state
+                // even if there's just a few pixels of scroll room. Otherwise, the top bar would be halfway-compact then
                 mainElement.scrollHeight - mainElement.clientHeight,
                 BREADCRUMBS_HEIGHT_COMPACT
             )
diff --git a/frontend/src/layout/navigation/TopBar/YearInHogButton.scss b/frontend/src/layout/navigation/TopBar/YearInHogButton.scss
new file mode 100644
index 0000000000000..cb4238de55d0e
--- /dev/null
+++ b/frontend/src/layout/navigation/TopBar/YearInHogButton.scss
@@ -0,0 +1,3 @@
+.YearInHog__mask {
+    background-color: var(--bg-3000);
+}
diff --git a/frontend/src/layout/navigation/TopBar/YearInHogButton.tsx b/frontend/src/layout/navigation/TopBar/YearInHogButton.tsx
index 3e47de6ea5383..b39dabd27399e 100644
--- a/frontend/src/layout/navigation/TopBar/YearInHogButton.tsx
+++ b/frontend/src/layout/navigation/TopBar/YearInHogButton.tsx
@@ -1,3 +1,5 @@
+import './YearInHogButton.scss'
+
 import { LemonButton } from '@posthog/lemon-ui'
 import clsx from 'clsx'
 import { HeartHog } from 'lib/components/hedgehogs'
@@ -18,7 +20,7 @@ export function YearInHogButton({ url }: { url: string | null }): JSX.Element |
                 )}
             />
             {/*need to sync background color with button*/}
-            <div className={'absolute top-0 left-0 w-full h-full bg-white'} />
+            <div className={'rounded absolute top-0 left-0 w-full h-full YearInHog__mask'} />
             <LemonButton
                 icon={<XmasTree />}
                 type={'secondary'}
diff --git a/frontend/src/scenes/project-homepage/ProjectHomepage.tsx b/frontend/src/scenes/project-homepage/ProjectHomepage.tsx
index 88672c5a5008a..5969cdd661133 100644
--- a/frontend/src/scenes/project-homepage/ProjectHomepage.tsx
+++ b/frontend/src/scenes/project-homepage/ProjectHomepage.tsx
@@ -7,10 +7,12 @@ import { PageHeader } from 'lib/components/PageHeader'
 import { SceneDashboardChoiceModal } from 'lib/components/SceneDashboardChoice/SceneDashboardChoiceModal'
 import { sceneDashboardChoiceModalLogic } from 'lib/components/SceneDashboardChoice/sceneDashboardChoiceModalLogic'
 import { SceneDashboardChoiceRequired } from 'lib/components/SceneDashboardChoice/SceneDashboardChoiceRequired'
+import { FEATURE_FLAGS } from 'lib/constants'
 import { useFeatureFlag } from 'lib/hooks/useFeatureFlag'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { LemonDivider } from 'lib/lemon-ui/LemonDivider'
 import { LemonSkeleton } from 'lib/lemon-ui/LemonSkeleton'
+import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
 import { Dashboard } from 'scenes/dashboard/Dashboard'
 import { dashboardLogic } from 'scenes/dashboard/dashboardLogic'
 import { projectHomepageLogic } from 'scenes/project-homepage/projectHomepageLogic'
@@ -20,6 +22,7 @@ import { inviteLogic } from 'scenes/settings/organization/inviteLogic'
 import { teamLogic } from 'scenes/teamLogic'
 import { urls } from 'scenes/urls'
 
+import { YearInHogButton } from '~/layout/navigation/TopBar/YearInHogButton'
 import { DashboardPlacement } from '~/types'
 
 import { RecentInsights } from './RecentInsights'
@@ -34,11 +37,15 @@ export function ProjectHomepage(): JSX.Element {
     const { showSceneDashboardChoiceModal } = useActions(
         sceneDashboardChoiceModalLogic({ scene: Scene.ProjectHomepage })
     )
+    const { featureFlags } = useValues(featureFlagLogic)
 
     const is3000 = useFeatureFlag('POSTHOG_3000', 'test')
 
     const headerButtons = (
         <>
+            {is3000 && !!featureFlags[FEATURE_FLAGS.YEAR_IN_HOG] && window.POSTHOG_APP_CONTEXT?.year_in_hog_url && (
+                <YearInHogButton url={`${window.location.origin}${window.POSTHOG_APP_CONTEXT.year_in_hog_url}`} />
+            )}
             <LemonButton
                 data-attr="project-home-invite-team-members"
                 onClick={() => {