feat(app): add filetree tooltips with diff labels

2 files changed, 43 insertions, 3 deletions

diff --git a/packages/app/src/components/file-tree.tsx b/packages/app/src/components/file-tree.tsx
index 3b6524b57..24b15483e 100644
--- a/packages/app/src/components/file-tree.tsx
+++ b/packages/app/src/components/file-tree.tsx
@@ -8,6 +8,7 @@ import {
   createMemo,
   For,
   Match,
+  Show,
   splitProps,
   Switch,
   untrack,
@@ -221,8 +222,49 @@ export default function FileTree(props: {
           const deep = () => deeps().get(node.path) ?? -1
           const Wrapper = (p: ParentProps) => {
             if (!tooltip()) return p.children
+
+            const parts = node.path.split("/")
+            const leaf = parts[parts.length - 1] ?? node.path
+            const head = parts.slice(0, -1).join("/")
+            const prefix = head ? `${head}/` : ""
+
+            const kind = () => (node.type === "file" ? kinds()?.get(node.path) : undefined)
+            const label = () => {
+              if (!marks()?.has(node.path)) return
+              const k = kind()
+              if (!k) return
+              if (k === "add") return "Additions"
+              if (k === "del") return "Deletions"
+              return "Modifications"
+            }
+
             return (
-              <Tooltip forceMount={false} openDelay={2000} value={node.path} placement="right" class="w-full">
+              <Tooltip
+                forceMount={false}
+                openDelay={2000}
+                placement="bottom-start"
+                class="w-full"
+                contentStyle={{ "max-width": "480px", width: "fit-content" }}
+                value={
+                  <div class="flex items-center min-w-0 whitespace-nowrap text-12-regular">
+                    <span
+                      class="min-w-0 truncate text-text-invert-base"
+                      style={{ direction: "rtl", "unicode-bidi": "plaintext" }}
+                    >
+                      {prefix}
+                    </span>
+                    <span class="shrink-0 text-text-invert-strong">{leaf}</span>
+                    <Show when={label()}>
+                      {(t: () => string) => (
+                        <>
+                          <span class="mx-1 font-bold text-text-invert-strong">•</span>
+                          <span class="shrink-0 text-text-invert-strong">{t()}</span>
+                        </>
+                      )}
+                    </Show>
+                  </div>
+                }
+              >
                 {p.children}
               </Tooltip>
             )
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index d16719d84..80a1ec703 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -2664,7 +2664,6 @@ export default function Page() {
                               allowed={diffFiles()}
                               kinds={kinds()}
                               draggable={false}
-                              tooltip={false}
                               onFileClick={(node) => focusReviewDiff(node.path)}
                             />
                           </Show>
@@ -2681,7 +2680,6 @@ export default function Page() {
                         path=""
                         modified={diffFiles()}
                         kinds={kinds()}
-                        tooltip={false}
                         onFileClick={(node) => openTab(file.tab(node.path))}
                       />
                     </Tabs.Content>