Hide outdated comments in PR overview with minimal timeline item

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

Author: Copilot

webviews/components/timeline.tsx

@@ -229,7 +229,8 @@ const ReviewEventView = (event: ReviewEvent) => {
 
 function CommentThread({ thread, event }: { thread: IComment[]; event: ReviewEvent }) {
 	const comment = thread[0];
-	const [revealed, setRevealed] = useState(!comment.isResolved);
+	const isOutdated = comment.position === null;
+	const [revealed, setRevealed] = useState(!comment.isResolved && !isOutdated);
 	const [resolved, setResolved] = useState(!!comment.isResolved);
 	const { openDiff, toggleResolveComment } = useContext(PullRequestContext);
 	const resolvePermission =
@@ -246,20 +247,26 @@ function CommentThread({ thread, event }: { thread: IComment[]; event: ReviewEve
 		}
 	};
 
+	// For outdated comments, show a minimal timeline item
+	if (isOutdated) {
+		return (
+			<div key={event.id} className="diff-container">
+				<div className="outdated-comment">
+					<span className="outdated-comment-label">This comment was marked as outdated.</span>
+					{nbsp}
+					<a href={comment.htmlUrl} target="_blank" rel="noopener noreferrer">View in GitHub</a>
+				</div>
+			</div>
+		);
+	}
+
 	return (
 		<div key={event.id} className="diff-container">
 			<div className="resolved-container">
 				<div>
-					{comment.position === null ? (
-						<span>
-							<span>{comment.path}</span>
-							<span className="outdatedLabel">Outdated</span>
-						</span>
-					) : (
-						<a className="diffPath" onClick={() => openDiff(comment)}>
-							{comment.path}
-						</a>
-					)}
+					<a className="diffPath" onClick={() => openDiff(comment)}>
+						{comment.path}
+					</a>
 					{!resolved && !revealed ? <span className="unresolvedLabel">Unresolved</span> : null}
 				</div>
 				<button className="secondary" onClick={() => setRevealed(!revealed)}>

webviews/editorWebview/index.css

@@ -418,6 +418,29 @@ body .resolved-container .unresolvedLabel {
 	margin-left: 5px;
 }
 
+body .outdated-comment {
+	padding: 12px 16px;
+	background: var(--vscode-editor-background);
+	border: 1px solid var(--vscode-panel-border);
+	border-radius: 4px;
+	margin: 8px 0;
+	color: var(--vscode-descriptionForeground);
+	font-size: 13px;
+}
+
+body .outdated-comment .outdated-comment-label {
+	font-style: italic;
+}
+
+body .outdated-comment a {
+	color: var(--vscode-textLink-foreground);
+	text-decoration: none;
+}
+
+body .outdated-comment a:hover {
+	text-decoration: underline;
+}
+
 body .diff .diffPath {
 	margin-right: 4px;
 }