fix(app): align diff headers with canvas borders

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",