fix(app): align diff headers with canvas borders

packages/app/e2e/browser/changes-pane.spec.ts

@@ -967,7 +967,7 @@ test("the first click after a canvas selection only dismisses the selection", as
   await expect(page.getByTestId("inline-review-editor")).toBeVisible();
 });
 
-test("canvas diff copies exact multiline text forwards and backwards", async ({
+test("canvas diff replaces a selection with forward and backward drags", async ({
   context,
   page,
 }) => {
@@ -975,19 +975,13 @@ test("canvas diff copies exact multiline text forwards and backwards", async ({
   await context.grantPermissions(["clipboard-read", "clipboard-write"]);
   await useUnwrappedDiffLines(page);
   await openSelectionWorkspaceChanges(page, workspace);
-  for (const [start, end] of [
-    [
-      { line: 0, offset: 2 },
-      { line: 1, offset: 3 },
-    ],
-    [
-      { line: 1, offset: 3 },
-      { line: 0, offset: 2 },
-    ],
+  for (const [start, end, expectedText] of [
+    [{ line: 0, offset: 2 }, { line: 1, offset: 3 }, "CDE\nFGH"],
+    [{ line: 1, offset: 5 }, { line: 0, offset: 3 }, "DE\nFGHIJ"],
   ] as const) {
     await dragAddedTextRange(page, { lines: ["ABCDE", "FGHIJ"], start, end });
     await page.keyboard.press("ControlOrMeta+C");
-    await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe("CDE\nFGH");
+    await expect.poll(() => page.evaluate(() => navigator.clipboard.readText())).toBe(expectedText);
   }
 });
 

packages/app/src/git/diff-document/document-file-header.tsx

@@ -9,7 +9,6 @@ interface DocumentFileHeaderProps {
   mode: DiffDocumentProps["mode"];
   onToggleFile: (path: string) => void;
   onSelectPath: (path: string) => void;
-  showTopBorder: boolean;
 }
 
 export const DocumentFileHeader = memo(function DocumentFileHeader({
@@ -18,7 +17,6 @@ export const DocumentFileHeader = memo(function DocumentFileHeader({
   mode,
   onToggleFile,
   onSelectPath,
-  showTopBorder,
 }: DocumentFileHeaderProps) {
   const activate = useCallback(
     (path: string) => {
@@ -35,7 +33,6 @@ export const DocumentFileHeader = memo(function DocumentFileHeader({
       bodyVisible={!file.isCollapsed}
       isSelected={selectedPath === file.path}
       interactive={mode.kind === "working"}
-      showTopBorder={showTopBorder}
       workspaceFileDragScope={working?.workspaceFileDragScope}
       onActivate={activate}
       onSelect={onSelectPath}
@@ -82,7 +79,6 @@ function documentFileHeaderIdentityMatches(
     previous.file.file !== next.file.file ||
     previous.file.fileIndex !== next.file.fileIndex ||
     previous.file.isCollapsed !== next.file.isCollapsed ||
-    previous.showTopBorder !== next.showTopBorder ||
     (previous.selectedPath === previous.file.path) !== (next.selectedPath === next.file.path) ||
     previous.onToggleFile !== next.onToggleFile ||
     previous.onSelectPath !== next.onSelectPath ||

packages/app/src/git/file-header.tsx

@@ -29,7 +29,6 @@ export interface FileHeaderProps {
   depth?: number;
   showDir?: boolean;
   interactive?: boolean;
-  showTopBorder?: boolean;
   onActivate?: (path: string) => void;
   onSelect?: (path: string) => void;
   onOpenFile?: (path: string) => void;
@@ -100,9 +99,9 @@ function fileHeaderPressFeedbackStyle(showsBodyState: boolean) {
   return showsBodyState ? styles.documentPressFeedback : workspaceTreeRowStyles.active;
 }
 
-function fileHeaderContainerStyle(showsBodyState: boolean, showTopBorder: boolean) {
+function fileHeaderContainerStyle(showsBodyState: boolean) {
   if (!showsBodyState) return null;
-  return [styles.documentContainer, !showTopBorder && styles.documentContainerWithoutTopBorder];
+  return styles.documentContainer;
 }
 
 function fileHeaderNameStyle(showsBodyState: boolean, isHovered: boolean) {
@@ -189,7 +188,6 @@ export const FileHeader = memo(function FileHeader({
   depth = 0,
   showDir = true,
   interactive = true,
-  showTopBorder = true,
   onActivate,
   onSelect,
   onHeaderHeightChange,
@@ -301,7 +299,7 @@ export const FileHeader = memo(function FileHeader({
   }
   return (
     <View
-      style={[styles.container, fileHeaderContainerStyle(showsBodyState, showTopBorder)]}
+      style={[styles.container, fileHeaderContainerStyle(showsBodyState)]}
       onLayout={interaction.onLayout}
       onPointerEnter={hover.handlePointerEnter}
       onPointerLeave={hover.handlePointerLeave}
@@ -327,12 +325,9 @@ const styles = StyleSheet.create((theme) => ({
   documentContainer: {
     height: 30,
     backgroundColor: theme.colors.surface0,
-    borderTopWidth: theme.borderWidth[1],
-    borderTopColor: theme.colors.borderAccent,
     borderBottomWidth: theme.borderWidth[1],
     borderBottomColor: theme.colors.borderAccent,
   },
-  documentContainerWithoutTopBorder: { borderTopColor: "transparent" },
   header: {
     flexDirection: "row",
     alignItems: "center",