Add team-goals shortcuts to the toolbar and page header

When the team select has a team chosen, a "View team goals" button beside it opens that team's drawer. The page header gains a "Jump to this quarter's team goals" control that scrolls the Editor viewport to the teams grid, respecting reduced motion.

Generated-By: PostHog Code
Task-Id: 9ecd4529-67fb-4091-9d52-2f321cccc016

Author: joethreepwood

src/components/Roadmap/EarlyAccessFeaturesSection.tsx

@@ -1003,6 +1003,7 @@ export default function EarlyAccessFeaturesSection(): JSX.Element | null {
             teamFilter === 'all' ? true : teamFilter === 'unassigned' ? false : team.slug === teamFilter
         return matchesQuery && matchesTeamSelect
     })
+    const filterGridTeam = gridTeams.find((team) => team.slug === teamFilter)
 
     const openFeature = (feature: EarlyAccessFeature) => {
         setSelectedFlagKey(feature.flagKey)
@@ -1070,6 +1071,18 @@ export default function EarlyAccessFeaturesSection(): JSX.Element | null {
                             className="!h-10 w-full max-w-full overflow-hidden !rounded-[8px] px-3 [&>span]:min-w-0 [&>span]:truncate"
                         />
                     </div>
+                    {filterGridTeam && (
+                        <OSButton
+                            data-roadmap-item=""
+                            type="button"
+                            size="md"
+                            variant="secondary"
+                            className="!h-10 shrink-0"
+                            onClick={() => openTeam(filterGridTeam.slug)}
+                        >
+                            View team goals
+                        </OSButton>
+                    )}
                     <span className="ml-auto shrink-0 whitespace-nowrap text-sm text-secondary">
                         {filteredTotal} of {total} features
                     </span>

src/components/Roadmap/README.md

@@ -35,7 +35,7 @@ Below the board, `TeamQuarterSection` renders one compact card per team: mini cr
 
 ## Filtering
 
-One search query is applied before grouping into lanes. It matches the title, full description, flag key, and owning team name — and, for the team grid, the team name. Search is cleared directly from the search field. The team selector is applied at the same time and filters both surfaces: it lists every grid team (with its feature count, zero allowed) plus any feature-owning slugs without a grid card, includes an `Unassigned` option when necessary (which matches no grid card), and resets through its `All teams` option. Neither control adds a redundant filter chip below the toolbar. The toolbar uses the same primary surface as each lane header, and its rounded search and team controls share one height. Counts always reflect both filters. Empty lanes stay visually empty rather than adding a redundant no-results message; their zero count already communicates the state.
+One search query is applied before grouping into lanes. It matches the title, full description, flag key, and owning team name — and, for the team grid, the team name. Search is cleared directly from the search field. The team selector is applied at the same time and filters both surfaces: it lists every grid team (with its feature count, zero allowed) plus any feature-owning slugs without a grid card, includes an `Unassigned` option when necessary (which matches no grid card), and resets through its `All teams` option. When the selected team has a grid card, a `View team goals` button appears beside the selector and opens that team's drawer; it carries `data-roadmap-item` so the outside-click closer ignores it. The page header (in `src/pages/roadmap/index.js`) offers a matching jump control that scrolls the Editor viewport to the grid's `#teams` heading, respecting reduced motion. Neither control adds a redundant filter chip below the toolbar. The toolbar uses the same primary surface as each lane header, and its rounded search and team controls share one height. Counts always reflect both filters. Empty lanes stay visually empty rather than adding a redundant no-results message; their zero count already communicates the state.
 
 Featured ordering is preserved within each lane: new cards lead, and joinable alpha/concept items lead their stage. There are no stage or sorting controls because the lanes themselves communicate stage.
 

src/pages/roadmap/index.js

@@ -1,10 +1,21 @@
 import React from 'react'
+import { IconChevronDown } from '@posthog/icons'
 import Editor from 'components/Editor'
+import OSButton from 'components/OSButton'
 import SEO from 'components/seo'
 import EarlyAccessFeaturesSection from 'components/Roadmap/EarlyAccessFeaturesSection'
 import { ROADMAP_STAGE_STYLES } from 'components/Roadmap/roadmapStageStyles'
 
 const RoadmapPage = () => {
+    const scrollToTeamGoals = () => {
+        const target = document.getElementById('teams')
+        if (!target) {
+            return
+        }
+        const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        target.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth', block: 'start' })
+    }
+
     return (
         <>
             <SEO
@@ -32,8 +43,7 @@ const RoadmapPage = () => {
                             <h1 className="m-0 text-2xl @xl:text-3xl">Roadmap</h1>
                             <p className="mb-0 mt-2 max-w-5xl text-base leading-relaxed text-secondary">
                                 Here's what we're building. Betas are ready to enable today, and anything coming soon
-                                has a waitlist. Drop your email and we'll let you know the moment it ships. Further
-                                down, see what every team is working on this quarter.
+                                has a waitlist. Drop your email and we'll let you know the moment it ships.
                             </p>
                             <p className="mb-0 mt-3 max-w-5xl text-sm leading-relaxed text-secondary">
                                 Every feature moves through stages:{' '}
@@ -56,6 +66,17 @@ const RoadmapPage = () => {
                                 </span>{' '}
                                 is ready to try, and then it reaches general availability.
                             </p>
+                            <div className="mt-3">
+                                <OSButton
+                                    type="button"
+                                    size="sm"
+                                    variant="secondary"
+                                    icon={<IconChevronDown />}
+                                    onClick={scrollToTeamGoals}
+                                >
+                                    Jump to this quarter's team goals
+                                </OSButton>
+                            </div>
                         </div>
                         <img
                             src="https://res.cloudinary.com/dmukukwp6/image/upload/w_1000,c_limit,q_auto,f_auto/self_driving_with_road_3ff29b8dc3.png"