Increase click area for file tree nodes (#56)

Also reduce the blue-500 spam

* Increase click area for file tree nodes

* fixes

* Fix cursor inconsistency

* Revert misleading cursor change

* Passthrough pointer events on dir headers

Author: jpenilla

web/src/lib/components/diff/concise-diff-view.svelte.ts

@@ -10,13 +10,13 @@ import {
     type ThemeRegistration,
     bundledThemes,
 } from "shiki";
-import { guessLanguageFromExtension, type MutableValue, type ReadableBoxedValues } from "$lib/util";
+import { guessLanguageFromExtension, type MutableValue } from "$lib/util";
 import type { IRawThemeSetting } from "shiki/textmate";
 import chroma from "chroma-js";
 import { getEffectiveGlobalTheme } from "$lib/theme.svelte";
 import { onDestroy } from "svelte";
 import { DEFAULT_THEME_LIGHT } from "$lib/global-options.svelte";
-import type { WritableBoxedValues } from "svelte-toolbelt";
+import type { ReadableBoxedValues, WritableBoxedValues } from "svelte-toolbelt";
 import type { Attachment } from "svelte/attachments";
 import { on } from "svelte/events";
 import { watch } from "runed";

web/src/lib/components/tree/index.svelte.ts

@@ -11,6 +11,7 @@ export type TreeNode<T> = {
 export interface TreeNodeView<T> extends TreeNode<T> {
     backingNode: TreeNode<T>;
     visibleChildren: TreeNodeView<T>[];
+    depth: number;
 }
 
 export interface TreeProps<T> {
@@ -115,18 +116,18 @@ export function collectAllNodes<T>(roots: TreeNode<T>[]): Set<TreeNode<T>> {
 // Keep any nodes where the filter passes and all their parents
 export function filteredView<T>(roots: TreeNode<T>[], filter: ((node: TreeNode<T>) => boolean) | null): Set<TreeNodeView<T>> {
     if (filter === null) {
-        function walkDirect(node: TreeNode<T>): TreeNodeView<T> {
-            return { ...node, backingNode: node, visibleChildren: node.children.map(walkDirect) };
+        function walkDirect(node: TreeNode<T>, depth: number): TreeNodeView<T> {
+            return { ...node, backingNode: node, visibleChildren: node.children.map((child) => walkDirect(child, depth + 1)), depth };
         }
-        return new Set(roots.map((root) => walkDirect(root)));
+        return new Set(roots.map((root) => walkDirect(root, 0)));
     }
 
-    function walkFiltered(node: TreeNode<T>): TreeNodeView<T> | null {
+    function walkFiltered(node: TreeNode<T>, depth: number): TreeNodeView<T> | null {
         let pass = filter!(node);
-        const nodeView: TreeNodeView<T> = { ...node, backingNode: node, visibleChildren: [] };
+        const nodeView: TreeNodeView<T> = { ...node, backingNode: node, visibleChildren: [], depth };
 
         for (const child of node.children) {
-            const newChild = walkFiltered(child);
+            const newChild = walkFiltered(child, depth + 1);
             if (newChild) {
                 pass = true;
                 nodeView.visibleChildren.push(newChild);
@@ -139,7 +140,7 @@ export function filteredView<T>(roots: TreeNode<T>[], filter: ((node: TreeNode<T
     const filtered: Set<TreeNodeView<T>> = new Set<TreeNodeView<T>>();
 
     for (const root of roots) {
-        const rootView = walkFiltered(root);
+        const rootView = walkFiltered(root, 0);
         if (rootView) {
             filtered.add(rootView);
         }

web/src/lib/diff-viewer.svelte.ts

@@ -231,7 +231,7 @@ const modifyStatusProps: FileStatusProps = {
     title: "Modified",
 };
 const renamedStatusProps: FileStatusProps = {
-    iconClasses: "iconify octicon--file-moved-16 text-gray-600",
+    iconClasses: "iconify octicon--file-moved-16 text-em-med",
     title: "Renamed",
 };
 const renamedModifiedStatusProps: FileStatusProps = {

web/src/lib/util.ts

@@ -3,7 +3,6 @@ import type { FileStatus } from "./github.svelte";
 import type { TreeNode } from "$lib/components/tree/index.svelte";
 import type { BundledLanguage, SpecialLanguage } from "shiki";
 import { onMount } from "svelte";
-import type { ReadableBox } from "svelte-toolbelt";
 import { on } from "svelte/events";
 import { type Attachment } from "svelte/attachments";
 
@@ -191,10 +190,15 @@ export function splitMultiFilePatch(patchContent: string): [BasicHeader, string]
     return patches;
 }
 
-export type FileTreeNodeData = {
-    data: FileDetails | string;
-    type: "file" | "directory";
-};
+export type FileTreeNodeData =
+    | {
+          type: "file";
+          file: FileDetails;
+      }
+    | {
+          type: "directory";
+          name: string;
+      };
 
 export function makeFileTree(paths: FileDetails[]): TreeNode<FileTreeNodeData>[] {
     if (paths.length === 0) {
@@ -203,24 +207,30 @@ export function makeFileTree(paths: FileDetails[]): TreeNode<FileTreeNodeData>[]
 
     const root: TreeNode<FileTreeNodeData> = {
         children: [],
-        data: { type: "directory", data: "" },
+        data: { type: "directory", name: "" },
     };
 
     for (const details of paths) {
         const parts = details.toFile.split("/");
         let current = root;
         for (let i = 0; i < parts.length; i++) {
             const part = parts[i];
-            const existingChild = current.children.find((child) => child.data.data === part);
+            const existingChild = current.children.find((child) => child.data.type === "directory" && child.data.name === part);
             if (existingChild) {
                 current = existingChild;
             } else {
                 const file = i === parts.length - 1;
-                const data: FileDetails | string = file ? details : part;
-                const type = file ? "file" : "directory";
                 const newChild: TreeNode<FileTreeNodeData> = {
                     children: [],
-                    data: { data, type },
+                    data: file
+                        ? {
+                              type: "file",
+                              file: details,
+                          }
+                        : {
+                              type: "directory",
+                              name: part,
+                          },
                 };
                 current.children.push(newChild);
                 current = newChild;
@@ -234,18 +244,18 @@ export function makeFileTree(paths: FileDetails[]): TreeNode<FileTreeNodeData>[]
         }
 
         if (node.children.length === 1 && node.data.type === "directory" && node.children[0].data.type === "directory") {
-            if (node.data.data !== "") {
-                node.data.data = `${node.data.data}/${node.children[0].data.data}`;
+            if (node.data.name !== "") {
+                node.data.name = `${node.data.name}/${node.children[0].data.name}`;
             } else {
-                node.data.data = node.children[0].data.data;
+                node.data.name = node.children[0].data.name;
             }
             node.children = node.children[0].children;
         }
     }
 
     mergeRedundantDirectories(root);
 
-    if (root.data.type === "directory" && root.data.data === "") {
+    if (root.data.type === "directory" && root.data.name === "") {
         return root.children;
     }
     return [root];
@@ -482,8 +492,3 @@ export function animationFramePromise() {
 export async function yieldToBrowser() {
     await new Promise((resolve) => setTimeout(resolve, 0));
 }
-
-// from bits-ui internals
-export type ReadableBoxedValues<T> = {
-    [K in keyof T]: ReadableBox<T[K]>;
-};

web/src/routes/DiffSearch.svelte

@@ -61,7 +61,7 @@
         autocomplete="off"
         style="padding-inline-end: {0.5 + controlsWidth / 16}rem;"
     />
-    <span aria-hidden="true" class="absolute top-1/2 left-1 iconify size-4 -translate-y-1/2 text-em-med octicon--search-16"></span>
+    <span aria-hidden="true" class="absolute top-1/2 left-1.25 iconify size-4 -translate-y-1/2 text-em-med octicon--search-16"></span>
     <div class="absolute top-1/2 right-1 flex -translate-y-1/2 flex-row" bind:clientWidth={controlsWidth}>
         {#if viewer.searchQueryDebounced.current}
             {#await viewer.searchResults}

web/src/routes/FileHeader.svelte

@@ -25,7 +25,7 @@
         const fileTreeElement = document.getElementById("file-tree-file-" + index);
         if (fileTreeElement) {
             popoverOpen = false;
-            viewer.tree?.expandParents((node) => node.data === value);
+            viewer.tree?.expandParents((node) => node.type === "file" && node.file === value);
             requestAnimationFrame(() => {
                 fileTreeElement.focus();
             });