Implement sticky header for PR overview and add related tests

Author: mrleemurray

webviews/editorWebview/index.css

@@ -43,6 +43,91 @@ textarea:focus,
 	outline: 1px solid var(--vscode-focusBorder);
 }
 
+/* Sticky Header */
+
+.sticky-header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 200;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 8px 32px;
+	background: var(--vscode-editor-background);
+	border-bottom: 1px solid var(--vscode-editorWidget-border);
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+	transform: translateY(-100%);
+	opacity: 0;
+	transition: transform 0.2s ease, opacity 0.2s ease;
+	pointer-events: none;
+}
+
+.sticky-header.visible {
+	transform: translateY(0);
+	opacity: 1;
+	pointer-events: auto;
+}
+
+.sticky-header-left {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	min-width: 0;
+}
+
+.sticky-header-left #sticky-status {
+	flex-shrink: 0;
+	box-sizing: border-box;
+	line-height: 18px;
+	color: var(--vscode-button-foreground);
+	border-radius: 18px;
+	padding: 2px 10px;
+	font-weight: 600;
+	font-size: 12px;
+	display: flex;
+	gap: 4px;
+	align-items: center;
+}
+
+.sticky-header-left #sticky-status svg path {
+	fill: var(--vscode-button-foreground);
+}
+
+.sticky-header-title {
+	font-weight: 600;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	min-width: 0;
+}
+
+.sticky-header-number {
+	flex-shrink: 0;
+	color: var(--vscode-textLink-foreground);
+	white-space: nowrap;
+}
+
+.sticky-header-number:hover {
+	color: var(--vscode-textLink-activeForeground);
+}
+
+.sticky-header .icon-button {
+	color: var(--vscode-foreground);
+}
+
+.sticky-header .icon-button:hover,
+.sticky-header .icon-button:focus {
+	background-color: var(--vscode-toolbar-hoverBackground);
+	cursor: pointer;
+}
+
+.sticky-header .icon-button:focus {
+	outline: 1px solid var(--vscode-focusBorder);
+	outline-offset: 1px;
+}
+
 .title-text {
 	margin-right: 5px;
 }

webviews/editorWebview/overview.tsx

@@ -6,8 +6,10 @@
 import * as React from 'react';
 import { PullRequest } from '../../src/github/views';
 
+import PullRequestContext from '../common/context';
 import { AddComment, CommentView } from '../components/comment';
-import { Header } from '../components/header';
+import { getStatus, Header  } from '../components/header';
+import { copyIcon } from '../components/icon';
 import { StatusChecksSection } from '../components/merge';
 import Sidebar, { CollapsibleSidebar } from '../components/sidebar';
 import { Timeline } from '../components/timeline';
@@ -29,11 +31,35 @@ const useMediaQuery = (query: string) => {
 	return matches;
 };
 
+function useStickyHeader(titleRef: React.RefObject<HTMLDivElement | null>): boolean {
+	const [isStuck, setIsStuck] = React.useState(false);
+
+	React.useEffect(() => {
+		const el = titleRef.current;
+		if (!el) {
+			return;
+		}
+
+		const observer = new IntersectionObserver(
+			([entry]) => setIsStuck(!entry.isIntersecting),
+			{ threshold: 0 },
+		);
+		observer.observe(el);
+
+		return () => observer.disconnect();
+	}, [titleRef]);
+
+	return isStuck;
+}
+
 export const Overview = (pr: PullRequest) => {
 	const isSingleColumnLayout = useMediaQuery('(max-width: 768px)');
+	const titleRef = React.useRef<HTMLDivElement>(null);
+	const isStuck = useStickyHeader(titleRef);
 
 	return <>
-		<div id="title" className="title">
+		<StickyHeader pr={pr} visible={isStuck} />
+		<div id="title" className="title" ref={titleRef}>
 			<div className="details">
 				<Header {...pr} />
 			</div>
@@ -52,6 +78,27 @@ export const Overview = (pr: PullRequest) => {
 	</>;
 };
 
+function StickyHeader({ pr, visible }: { pr: PullRequest; visible: boolean }): JSX.Element {
+	const { text, color, icon } = getStatus(pr.state, !!pr.isDraft, pr.isIssue, pr.stateReason);
+	const { copyPrLink } = React.useContext(PullRequestContext);
+
+	return (
+		<div className={`sticky-header${visible ? ' visible' : ''}`}>
+			<div className="sticky-header-left">
+				<div id="sticky-status" className={`status-badge-${color}`}>
+					<span className="icon">{icon}</span>
+					<span>{text}</span>
+				</div>
+				<span className="sticky-header-title" dangerouslySetInnerHTML={{ __html: pr.titleHTML }} />
+				<a className="sticky-header-number" href={pr.url}>#{pr.number}</a>
+				<button title="Copy Link" onClick={copyPrLink} className="icon-button sticky-header-copy" aria-label="Copy Pull Request Link">
+					{copyIcon}
+				</button>
+			</div>
+		</div>
+	);
+}
+
 const Main = (pr: PullRequest) => (
 	<div id="main">
 		<div id="description">

webviews/editorWebview/test/overview.test.tsx

@@ -53,5 +53,10 @@ describe('Overview', function () {
 
 		// Initial state should not have sticky class
 		assert(!titleElement.classList.contains('sticky'));
+
+		// Sticky header should exist but not be visible initially
+		const stickyHeader = out.container.querySelector('.sticky-header');
+		assert(stickyHeader);
+		assert(!stickyHeader.classList.contains('visible'));
 	});
 });