Skip to content

Navigation and content-layout redesign #2016

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
GregorShear wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Navigation and content-layout redesign #2016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0e58510
Navigation and content-layout redesign (rebased onto main)
GregorShear Jun 26, 2026
0aa045d
Align navigation/layout chrome with the agent2 redesign
GregorShear Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

50 changes: 28 additions & 22 deletions src/app/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { useEffect, useState } from 'react';

import { Box, Toolbar, useMediaQuery, useTheme } from '@mui/material';
import { Box, useMediaQuery, useTheme } from '@mui/material';

import { useShallow } from 'zustand/react/shallow';

import { ReflexContainer, ReflexElement, ReflexSplitter } from 'react-reflex';
import { Outlet } from 'react-router';
import { useLocalStorage } from 'react-use';

import { Toast } from 'src/components/AgentSkills/Toast';
import { AgentSkillsToast } from 'src/components/AgentSkills/Toast';
import Navigation from 'src/components/navigation/Navigation';
import ErrorBoundryWrapper from 'src/components/shared/ErrorBoundryWrapper';
import PageContainer from 'src/components/shared/PageContainer';
Expand Down Expand Up @@ -75,38 +75,44 @@ function AppLayout() {
};

return (
<Box sx={{ height: '100vh' }}>
<Box>
<Navigation
open={navigationOpen}
width={navigationWidth}
onNavigationToggle={toggleNavigationDrawer}
/>
</Box>

<Toast docsPanelOpen={displaySidePanel} />

<Box
sx={{
ml: `${navigationWidth}px`,
height: '100%',
}}
>
<Box
sx={{
display: 'grid',
gridTemplateColumns: `${navigationWidth}px 1fr`,
gridTemplateRows: '1fr',
height: '100vh',
transition: (t) =>
`grid-template-columns ${t.transitions.duration.shortest}ms`,
}}
>
<Navigation
open={navigationOpen}
width={navigationWidth}
onNavigationToggle={toggleNavigationDrawer}
/>

<AgentSkillsToast docsPanelOpen={displaySidePanel} />

{/* Top strip the removed top bar used to occupy. Padding the whole
content column (not just PageContainer) keeps the docs side panel
top-aligned with the page content, and lines the breadcrumb bar up
with the first sidebar nav item below the logo header. */}
<Box sx={{ overflow: 'hidden', minWidth: 0, pt: 6 }}>
<ReflexContainer orientation="vertical">
<ReflexElement
className="left-pane"
minSize={theme.breakpoints.values.sm / 2}
flex={leftPaneFlex}
style={{
overflow: 'hidden',
transitionDuration: animateOpening
? `${theme.transitions.duration.shortest}ms`
: undefined,
}}
>
<Box className="pane-content">
<Box className="pane-content" sx={{ height: '100%' }}>
<ErrorBoundryWrapper>
<Toolbar />
<PageContainer>
<PageContainer navigationOpen={navigationOpen}>
<Outlet />
</PageContainer>
</ErrorBoundryWrapper>
Expand Down
83 changes: 23 additions & 60 deletions src/components/AgentSkills/HeaderPill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,24 @@
import { Box, Link, Paper, Tooltip, Typography, useTheme } from '@mui/material';

import { usePostHog } from '@posthog/react';
import { NavArrowRight } from 'iconoir-react';
import { useIntl } from 'react-intl';

import {
AGENT_SKILLS_URL,
BG_GRADIENT,
GRADIENT,
LINK_COLOR,
SECONDARY_TEXT_COLOR,
SHIMMER_STYLES,
useAgentSkillsStore,
} from 'src/components/AgentSkills/shared';
import { SparkleIcon } from 'src/components/AgentSkills/SparkleIcon';

function TooltipContent({ onClick }: { onClick: () => void }) {
function TooltipContent() {
const theme = useTheme();
const mode = theme.palette.mode;
const intl = useIntl();

return (
<Paper
elevation={0}
onClick={onClick}
sx={{
width: 320,
borderRadius: '12px',
Expand Down Expand Up @@ -79,43 +74,26 @@ function TooltipContent({ onClick }: { onClick: () => void }) {
{intl.formatMessage({
id: 'agentSkills.cta',
})}
<NavArrowRight width={16} height={16} />
<NavArrowRight style={{ fontSize: 16 }} />
</Box>
</Box>
</Paper>
);
}

export function HeaderPill() {
const theme = useTheme();
const mode = theme.palette.mode;
const intl = useIntl();
const postHog = usePostHog();
const toastDismissed = useAgentSkillsStore((s) => s.toastDismissed);
interface HeaderPillProps {
isOpen?: boolean;
}

if (!toastDismissed) {
return null;
}
export function HeaderPill({ isOpen = true }: HeaderPillProps) {
const intl = useIntl();

return (
<Tooltip
title={
<TooltipContent
onClick={() => {
postHog.capture('AgentSkills:Click', {
source: 'popover',
});
window.open(
AGENT_SKILLS_URL,
'_blank',
'noopener,noreferrer'
);
}}
/>
}
placement="bottom-end"
title={<TooltipContent />}
placement={isOpen ? 'bottom-start' : 'right'}
enterDelay={200}
leaveDelay={150}
leaveDelay={100}
slotProps={{
tooltip: {
sx: {
Expand All @@ -131,51 +109,36 @@ export function HeaderPill() {
target="_blank"
rel="noopener noreferrer"
underline="none"
onClick={() =>
postHog.capture('AgentSkills:Click', {
source: 'pill',
})
}
sx={{
'display': 'inline-flex',
'display': 'flex',
'width': '100%',
'alignItems': 'center',
'justifyContent': 'flex-start',
'gap': 1,
'height': 36,
'px': '14px',
'pl': '10px',
'py': '6px',
'px': '10px',
'borderRadius': '999px',
'background': BG_GRADIENT[mode],
'border': '1px solid rgba(46,100,235,0.22)',
'fontSize': 13,
'fontWeight': 600,
'transition': 'transform 200ms ease',
'cursor': 'pointer',
'transition':
'background 180ms ease, transform 180ms ease, box-shadow 180ms ease',
'&:hover': {
background:
'linear-gradient(135deg, rgba(46,100,235,0.14) 0%, rgba(54,197,176,0.16) 100%)',
borderColor: 'rgba(46,100,235,0.42)',
boxShadow: '0 6px 16px -6px rgba(46,100,235,0.35)',
transform: 'translateY(-1px)',
},
}}
>
<Box
<SparkleIcon
sx={{
width: 22,
height: 22,
borderRadius: '999px',
background: GRADIENT[mode],
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
boxShadow:
'inset 0 0 0 1px rgba(255,255,255,0.25), 0 2px 6px -2px rgba(46,100,235,0.55)',
width: 18,
height: 18,
color: 'text.primary',
flexShrink: 0,
}}
>
<SparkleIcon
sx={{ width: 14, height: 14, color: 'common.white' }}
/>
</Box>
/>
<Typography
component="span"
sx={{
Expand Down
Loading
Loading