Add sticky header functionality with compact mode

Co-authored-by: alexr00 <38270282+alexr00@users.noreply.github.com>

Author: Copilot

webviews/components/header.tsx

@@ -32,8 +32,9 @@ export function Header({
 	owner,
 	repo,
 	busy,
-	stateReason
-}: PullRequest) {
+	stateReason,
+	isCompact
+}: PullRequest & { isCompact?: boolean }) {
 	const [currentTitle, setCurrentTitle] = useStateProp(title);
 	const [inEditMode, setEditMode] = useState(false);
 	const codingAgentEvent = mostRecentCopilotEvent(events);
@@ -51,9 +52,16 @@ export function Header({
 				canEdit={canEdit}
 				owner={owner}
 				repo={repo}
+				isCompact={isCompact}
 			/>
-			<Subtitle state={state} stateReason={stateReason} head={head} base={base} author={author} isIssue={isIssue} isDraft={isDraft} codingAgentEvent={codingAgentEvent} />
+			{!isCompact && <Subtitle state={state} stateReason={stateReason} head={head} base={base} author={author} isIssue={isIssue} isDraft={isDraft} codingAgentEvent={codingAgentEvent} />}
 			<div className="header-actions">
+				{isCompact && (
+					<div id="status" className={`status-badge-${getStatus(state, !!isDraft, isIssue, stateReason).color}`}>
+						<span className='icon'>{getStatus(state, !!isDraft, isIssue, stateReason).icon}</span>
+						<span>{getStatus(state, !!isDraft, isIssue, stateReason).text}</span>
+					</div>
+				)}
 				<ButtonGroup
 					isCurrentlyCheckedOut={isCurrentlyCheckedOut}
 					isIssue={isIssue}
@@ -80,9 +88,10 @@ interface TitleProps {
 	canEdit: boolean;
 	owner: string;
 	repo: string;
+	isCompact?: boolean;
 }
 
-function Title({ title, titleHTML, number, url, inEditMode, setEditMode, setCurrentTitle, canEdit, owner, repo }: TitleProps): JSX.Element {
+function Title({ title, titleHTML, number, url, inEditMode, setEditMode, setCurrentTitle, canEdit, owner, repo, isCompact }: TitleProps): JSX.Element {
 	const { setTitle, copyPrLink } = useContext(PullRequestContext);
 
 	const titleForm = (
@@ -120,22 +129,24 @@ function Title({ title, titleHTML, number, url, inEditMode, setEditMode, setCurr
 	context['github:copyMenu'] = true;
 
 	const displayTitle = (
-		<div className="overview-title">
+		<div className={`overview-title ${isCompact ? 'compact' : ''}`}>
 			<h2>
 				<span dangerouslySetInnerHTML={{ __html: titleHTML }} />
 				{' '}
 				<a href={url} title={url} data-vscode-context={JSON.stringify(context)}>
 					#{number}
 				</a>
 			</h2>
-			{canEdit ?
+			{!isCompact && canEdit ?
 				<button title="Rename" onClick={() => setEditMode(true)} className="icon-button">
 					{editIcon}
 				</button>
 				: null}
-			<button title="Copy Link" onClick={copyPrLink} className="icon-button" aria-label="Copy Pull Request Link">
-				{copyIcon}
-			</button>
+			{!isCompact && (
+				<button title="Copy Link" onClick={copyPrLink} className="icon-button" aria-label="Copy Pull Request Link">
+					{copyIcon}
+				</button>
+			)}
 		</div>
 	);
 

webviews/editorWebview/index.css

@@ -53,6 +53,45 @@ textarea:focus,
 	margin: 20px 0 24px;
 	padding-bottom: 24px;
 	border-bottom: 1px solid var(--vscode-list-inactiveSelectionBackground);
+	transition: all 0.2s ease;
+}
+
+.title.sticky {
+	position: sticky;
+	top: 0;
+	z-index: 100;
+	background: var(--vscode-editor-background);
+	margin: 0;
+	padding: 8px 0;
+	border-bottom: 1px solid var(--vscode-panel-border);
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.title.sticky .details {
+	width: 100%;
+}
+
+.title.sticky .overview-title h2 {
+	font-size: 18px;
+	margin: 0;
+}
+
+.title.sticky .header-actions {
+	padding-top: 0;
+}
+
+.overview-title.compact {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.overview-title.compact h2 {
+	font-size: 18px;
+	margin: 0;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .title .pr-number {
@@ -563,6 +602,16 @@ small-button {
 	display: flex;
 	gap: 8px;
 	padding-top: 4px;
+	align-items: center;
+}
+
+.title.sticky .header-actions {
+	flex-wrap: nowrap;
+}
+
+.title.sticky .header-actions #status {
+	margin-right: 0;
+	flex-shrink: 0;
 }
 
 .header-actions>div:first-of-type {

webviews/editorWebview/overview.tsx

@@ -31,11 +31,23 @@ const useMediaQuery = (query: string) => {
 
 export const Overview = (pr: PullRequest) => {
 	const isSingleColumnLayout = useMediaQuery('(max-width: 768px)');
+	const [isSticky, setIsSticky] = React.useState(false);
+
+	React.useEffect(() => {
+		const handleScroll = () => {
+			// Make header sticky when scrolled past 80px
+			const scrolled = window.scrollY > 80;
+			setIsSticky(scrolled);
+		};
+
+		window.addEventListener('scroll', handleScroll);
+		return () => window.removeEventListener('scroll', handleScroll);
+	}, []);
 
 	return <>
-		<div id="title" className="title">
+		<div id="title" className={`title ${isSticky ? 'sticky' : ''}`}>
 			<div className="details">
-				<Header {...pr} />
+				<Header {...pr} isCompact={isSticky} />
 			</div>
 		</div>
 		{isSingleColumnLayout ?