Show diff file paths in a tooltip (#1061)

* fix: add file path titles to diff headers

* Show diff file paths in a tooltip

* Fix workspace layout hydration

* Revert "Fix workspace layout hydration"

This reverts commit 05c89909b70b4724648a2464ea0bfa64e33655cd.

packages/app/src/git/diff-pane.tsx

@@ -842,37 +842,46 @@ const DiffFileHeader = memo(function DiffFileHeader({
 
   return (
     <View style={containerStyle} onLayout={handleLayout} testID={testID}>
-      <Pressable
+      <Tooltip delayDuration={300} enabledOnDesktop enabledOnMobile={false}>
-        testID={testID ? `${testID}-toggle` : undefined}
+        <TooltipTrigger asChild>
-        style={fileHeaderPressableStyle}
+          <Pressable
-        // Android: prevent parent pan/scroll gestures from canceling the tap release.
+            testID={testID ? `${testID}-toggle` : undefined}
-        cancelable={false}
+            style={fileHeaderPressableStyle}
-        onPressIn={handlePressIn}
+            // Android: prevent parent pan/scroll gestures from canceling the tap release.
-        onPressOut={handlePressOut}
+            cancelable={false}
-        onPress={toggleExpanded}
+            onPressIn={handlePressIn}
-      >
+            onPressOut={handlePressOut}
-        <View style={styles.fileHeaderLeft}>
+            onPress={toggleExpanded}
-          <Text style={styles.fileName} numberOfLines={1}>
+          >
-            {file.path.split("/").pop()}
+            <View style={styles.fileHeaderLeft}>
-          </Text>
+              <Text style={styles.fileName} numberOfLines={1}>
-          <Text style={styles.fileDir} numberOfLines={1}>
+                {file.path.split("/").pop()}
-            {file.path.includes("/") ? ` ${file.path.slice(0, file.path.lastIndexOf("/"))}` : ""}
+              </Text>
-          </Text>
+              <Text style={styles.fileDir} numberOfLines={1}>
-          {file.isNew && (
+                {file.path.includes("/")
-            <View style={styles.newBadge}>
+                  ? ` ${file.path.slice(0, file.path.lastIndexOf("/"))}`
-              <Text style={styles.newBadgeText}>New</Text>
+                  : ""}
+              </Text>
+              {file.isNew && (
+                <View style={styles.newBadge}>
+                  <Text style={styles.newBadgeText}>New</Text>
+                </View>
+              )}
+              {file.isDeleted && (
+                <View style={styles.deletedBadge}>
+                  <Text style={styles.deletedBadgeText}>Deleted</Text>
+                </View>
+              )}
             </View>
-          )}
+            <View style={styles.fileHeaderRight}>
-          {file.isDeleted && (
+              <DiffStat additions={file.additions} deletions={file.deletions} />
-            <View style={styles.deletedBadge}>
-              <Text style={styles.deletedBadgeText}>Deleted</Text>
             </View>
-          )}
+          </Pressable>
-        </View>
+        </TooltipTrigger>
-        <View style={styles.fileHeaderRight}>
+        <TooltipContent side="bottom" align="start" offset={6} maxWidth={520}>
-          <DiffStat additions={file.additions} deletions={file.deletions} />
+          <Text style={styles.tooltipText}>{file.path}</Text>
-        </View>
+        </TooltipContent>
-      </Pressable>
+      </Tooltip>
     </View>
   );
 });