Add live git status indicators (#458)

packages/ui/package.json

@@ -4,5 +4,8 @@
   "private": true,
   "type": "module",
   "main": "src/index.ts",
-  "types": "src/index.ts"
+  "types": "src/index.ts",
+  "dependencies": {
+    "jotai-family": "^1.0.1"
+  }
 }

packages/ui/src/components/tree/TreeItem.tsx

@@ -81,7 +81,7 @@ function TreeItem_<T extends { id: string }>({
   const isLastSelected = useAtomValue(isLastFocusedFamily({ treeId, itemId: node.item.id }));
   const [editing, setEditing] = useState<boolean>(false);
   const [dropHover, setDropHover] = useState<null | "drop" | "animate">(null);
-  const startedHoverTimeout = useRef<NodeJS.Timeout>(undefined);
+  const startedHoverTimeout = useRef<ReturnType<typeof setTimeout>>(undefined);
   const handle = useMemo<TreeItemHandle>(
     () => ({
       focus: () => {
@@ -141,7 +141,13 @@ function TreeItem_<T extends { id: string }>({
 
   const handleSubmitNameEdit = useCallback(
     async (el: HTMLInputElement) => {
-      getEditOptions?.(node.item).onChange(node.item, el.value);
+      const editOptions = getEditOptions?.(node.item);
+      if (editOptions == null || el.value === editOptions.defaultValue) {
+        setEditing(false);
+        return;
+      }
+
+      editOptions.onChange(node.item, el.value);
       onClick?.(node.item, { shiftKey: false, ctrlKey: false, metaKey: false });
       // Slight delay for the model to propagate to the local store
       setTimeout(() => setEditing(false), 200);

packages/ui/src/components/tree/atoms.ts

@@ -1,5 +1,6 @@
 import { atom } from "jotai";
-import { atomFamily, selectAtom } from "jotai/utils";
+import { atomFamily } from "jotai-family";
+import { selectAtom } from "jotai/utils";
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const selectedIdsFamily = atomFamily((_treeId: string) => {