YearInHog3000

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
             )

frontend/src/layout/navigation/TopBar/YearInHogButton.scss

@@ -0,0 +1,3 @@
+.YearInHog__mask {
+    background-color: var(--bg-3000);
+}

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'}

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={() => {