Add diff viewer to git commit dialog (#374)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

src-web/components/git/GitCommitDialog.tsx

@@ -1,3 +1,4 @@
+import { useCachedNode } from '@dnd-kit/core/dist/hooks/utilities';
 import type { GitStatusEntry } from '@yaakapp-internal/git';
 import { useGit } from '@yaakapp-internal/git';
 import type {
@@ -9,14 +10,16 @@ import type {
   Workspace,
 } from '@yaakapp-internal/models';
 import classNames from 'classnames';
-
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { modelToYaml } from '../../lib/diffYaml';
+import { isSubEnvironment } from '../../lib/model_util';
 import { resolvedModelName } from '../../lib/resolvedModelName';
 import { showErrorToast } from '../../lib/toast';
 import { Banner } from '../core/Banner';
 import { Button } from '../core/Button';
 import type { CheckboxProps } from '../core/Checkbox';
 import { Checkbox } from '../core/Checkbox';
+import { DiffViewer } from '../core/Editor/DiffViewer';
 import { Icon } from '../core/Icon';
 import { InlineCode } from '../core/InlineCode';
 import { Input } from '../core/Input';
@@ -48,6 +51,7 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
   const [isPushing, setIsPushing] = useState(false);
   const [commitError, setCommitError] = useState<string | null>(null);
   const [message, setMessage] = useState<string>('');
+  const [selectedEntry, setSelectedEntry] = useState<GitStatusEntry | null>(null);
 
   const handleCreateCommit = async () => {
     setCommitError(null);
@@ -138,6 +142,35 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
     return next(workspace, []);
   }, [workspace, internalEntries]);
 
+  const checkNode = useCallback(
+    (treeNode: CommitTreeNode) => {
+      const checked = nodeCheckedStatus(treeNode);
+      const newChecked = checked === 'indeterminate' ? true : !checked;
+      setCheckedAndChildren(treeNode, newChecked, unstage.mutate, add.mutate);
+      // TODO: Also ensure parents are added properly
+    },
+    [add.mutate, unstage.mutate],
+  );
+
+  const checkEntry = useCallback(
+    (entry: GitStatusEntry) => {
+      if (entry.staged) unstage.mutate({ relaPaths: [entry.relaPath] });
+      else add.mutate({ relaPaths: [entry.relaPath] });
+    },
+    [add.mutate, unstage.mutate],
+  );
+
+  const handleSelectChild = useCallback(
+    (entry: GitStatusEntry) => {
+      if (entry === selectedEntry) {
+        setSelectedEntry(null);
+      } else {
+        setSelectedEntry(entry);
+      }
+    },
+    [selectedEntry],
+  );
+
   if (tree == null) {
     return null;
   }
@@ -146,77 +179,92 @@ export function GitCommitDialog({ syncDir, onDone, workspace }: Props) {
     return <EmptyStateText>No changes since last commit</EmptyStateText>;
   }
 
-  const checkNode = (treeNode: CommitTreeNode) => {
-    const checked = nodeCheckedStatus(treeNode);
-    const newChecked = checked === 'indeterminate' ? true : !checked;
-    setCheckedAndChildren(treeNode, newChecked, unstage.mutate, add.mutate);
-    // TODO: Also ensure parents are added properly
-  };
-
-  const checkEntry = (entry: GitStatusEntry) => {
-    if (entry.staged) unstage.mutate({ relaPaths: [entry.relaPath] });
-    else add.mutate({ relaPaths: [entry.relaPath] });
-  };
-
   return (
-    <div className="grid grid-rows-1 h-full">
+    <div className="h-full px-2 pb-4">
       <SplitLayout
-        name="commit"
-        layout="vertical"
-        defaultRatio={0.3}
+        name="commit-horizontal"
+        layout="horizontal"
+        defaultRatio={0.6}
         firstSlot={({ style }) => (
-          <div style={style} className="h-full overflow-y-auto pb-3">
-            <TreeNodeChildren node={tree} depth={0} onCheck={checkNode} />
-            {externalEntries.find((e) => e.status !== 'current') && (
-              <>
-                <Separator className="mt-3 mb-1">External file changes</Separator>
-                {externalEntries.map((entry) => (
-                  <ExternalTreeNode
-                    key={entry.relaPath + entry.status}
-                    entry={entry}
-                    onCheck={checkEntry}
+          <div style={style} className="h-full px-4">
+            <SplitLayout
+              name="commit-vertical"
+              layout="vertical"
+              defaultRatio={0.35}
+              firstSlot={({ style: innerStyle }) => (
+                <div
+                  style={innerStyle}
+                  className="h-full overflow-y-auto pb-3 pr-0.5 transform-cpu"
+                >
+                  <TreeNodeChildren
+                    node={tree}
+                    depth={0}
+                    onCheck={checkNode}
+                    onSelect={handleSelectChild}
+                    selectedPath={selectedEntry?.relaPath ?? null}
                   />
-                ))}
-              </>
-            )}
+                  {externalEntries.find((e) => e.status !== 'current') && (
+                    <>
+                      <Separator className="mt-3 mb-1">External file changes</Separator>
+                      {externalEntries.map((entry) => (
+                        <ExternalTreeNode
+                          key={entry.relaPath + entry.status}
+                          entry={entry}
+                          onCheck={checkEntry}
+                        />
+                      ))}
+                    </>
+                  )}
+                </div>
+              )}
+              secondSlot={({ style: innerStyle }) => (
+                <div style={innerStyle} className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2">
+                  <Input
+                    className="!text-base font-sans rounded-md"
+                    placeholder="Commit message..."
+                    onChange={setMessage}
+                    stateKey={null}
+                    label="Commit message"
+                    fullHeight
+                    multiLine
+                    hideLabel
+                  />
+                  {commitError && <Banner color="danger">{commitError}</Banner>}
+                  <HStack alignItems="center">
+                    <InlineCode>{status.data?.headRefShorthand}</InlineCode>
+                    <HStack space={2} className="ml-auto">
+                      <Button
+                        color="secondary"
+                        size="sm"
+                        onClick={handleCreateCommit}
+                        disabled={!hasAddedAnything}
+                        isLoading={isPushing}
+                      >
+                        Commit
+                      </Button>
+                      <Button
+                        color="primary"
+                        size="sm"
+                        disabled={!hasAddedAnything}
+                        onClick={handleCreateCommitAndPush}
+                        isLoading={isPushing}
+                      >
+                        Commit and Push
+                      </Button>
+                    </HStack>
+                  </HStack>
+                </div>
+              )}
+            />
           </div>
         )}
         secondSlot={({ style }) => (
-          <div style={style} className="grid grid-rows-[minmax(0,1fr)_auto] gap-3 pb-2">
-            <Input
-              className="!text-base font-sans rounded-md"
-              placeholder="Commit message..."
-              onChange={setMessage}
-              stateKey={null}
-              label="Commit message"
-              fullHeight
-              multiLine
-              hideLabel
-            />
-            {commitError && <Banner color="danger">{commitError}</Banner>}
-            <HStack alignItems="center">
-              <InlineCode>{status.data?.headRefShorthand}</InlineCode>
-              <HStack space={2} className="ml-auto">
-                <Button
-                  color="secondary"
-                  size="sm"
-                  onClick={handleCreateCommit}
-                  disabled={!hasAddedAnything}
-                  isLoading={isPushing}
-                >
-                  Commit
-                </Button>
-                <Button
-                  color="primary"
-                  size="sm"
-                  disabled={!hasAddedAnything}
-                  onClick={handleCreateCommitAndPush}
-                  isLoading={isPushing}
-                >
-                  Commit and Push
-                </Button>
-              </HStack>
-            </HStack>
+          <div style={style} className="h-full px-4 border-l border-l-border-subtle">
+            {selectedEntry ? (
+              <DiffPanel entry={selectedEntry} />
+            ) : (
+              <EmptyStateText>Select a change to view diff</EmptyStateText>
+            )}
           </div>
         )}
       />
@@ -228,61 +276,77 @@ function TreeNodeChildren({
   node,
   depth,
   onCheck,
+  onSelect,
+  selectedPath,
 }: {
   node: CommitTreeNode | null;
   depth: number;
   onCheck: (node: CommitTreeNode, checked: boolean) => void;
+  onSelect: (entry: GitStatusEntry) => void;
+  selectedPath: string | null;
 }) {
   if (node === null) return null;
   if (!isNodeRelevant(node)) return null;
 
   const checked = nodeCheckedStatus(node);
+  const isSelected = selectedPath === node.status.relaPath;
+
   return (
     <div
       className={classNames(
-        depth > 0 && 'pl-1 ml-[10px] border-l border-dashed border-border-subtle',
+        depth > 0 && 'pl-4 ml-2 border-l border-dashed border-border-subtle relative',
       )}
     >
-      <div className="flex gap-3 w-full h-xs">
+      <div
+        className={classNames(
+          'relative flex gap-1 w-full h-xs items-center',
+          isSelected ? 'text-text' : 'text-text-subtle',
+        )}
+      >
+        {isSelected && (
+          <div className="absolute -left-[100vw] right-0 top-0 bottom-0 bg-surface-active opacity-30 -z-10" />
+        )}
         <Checkbox
-          fullWidth
-          className="w-full hover:bg-surface-highlight rounded px-1 group"
           checked={checked}
+          title={checked ? 'Unstage change' : 'Stage change'}
+          hideLabel
           onChange={(checked) => onCheck(node, checked)}
-          title={
-            <div className="grid grid-cols-[auto_minmax(0,1fr)_auto] gap-1 w-full items-center">
-              {node.model.model !== 'http_request' &&
-              node.model.model !== 'grpc_request' &&
-              node.model.model !== 'websocket_request' ? (
-                <Icon
-                  color="secondary"
-                  icon={
-                    node.model.model === 'folder'
-                      ? 'folder'
-                      : node.model.model === 'environment'
-                        ? 'variable'
-                        : 'house'
-                  }
-                />
-              ) : (
-                <span aria-hidden />
-              )}
-              <div className="truncate">{resolvedModelName(node.model)}</div>
-              {node.status.status !== 'current' && (
-                <InlineCode
-                  className={classNames(
-                    'py-0 ml-auto bg-transparent w-[6rem] text-center',
-                    node.status.status === 'modified' && 'text-info',
-                    node.status.status === 'untracked' && 'text-success',
-                    node.status.status === 'removed' && 'text-danger',
-                  )}
-                >
-                  {node.status.status}
-                </InlineCode>
-              )}
-            </div>
-          }
         />
+        <button
+          type="button"
+          className={classNames('flex-1 min-w-0 flex items-center gap-1 px-1 py-0.5 text-left')}
+          onClick={() => node.status.status !== 'current' && onSelect(node.status)}
+        >
+          {node.model.model !== 'http_request' &&
+          node.model.model !== 'grpc_request' &&
+          node.model.model !== 'websocket_request' ? (
+            <Icon
+              color="secondary"
+              icon={
+                node.model.model === 'folder'
+                  ? 'folder'
+                  : node.model.model === 'environment'
+                    ? 'variable'
+                    : 'house'
+              }
+            />
+          ) : (
+            <span aria-hidden className="w-4" />
+          )}
+          <div className="truncate flex-1">{resolvedModelName(node.model)}</div>
+          {node.status.status !== 'current' && (
+            <InlineCode
+              className={classNames(
+                'py-0 bg-transparent w-[6rem] text-center shrink-0',
+                node.status.status === 'modified' && 'text-info',
+                node.status.status === 'untracked' && 'text-success',
+                node.status.status === 'removed' && 'text-danger',
+              )}
+            >
+              {node.status.status}
+            </InlineCode>
+          )}
+        </button>
       </div>
 
       {node.children.map((childNode) => {
@@ -292,6 +356,8 @@ function TreeNodeChildren({
             node={childNode}
             depth={depth + 1}
             onCheck={onCheck}
+            onSelect={onSelect}
+            selectedPath={selectedPath}
           />
         );
       })}
@@ -401,3 +467,17 @@ function isNodeRelevant(node: CommitTreeNode): boolean {
   // Recursively check children
   return node.children.some((c) => isNodeRelevant(c));
 }
+
+function DiffPanel({ entry }: { entry: GitStatusEntry }) {
+  const prevYaml = modelToYaml(entry.prev);
+  const nextYaml = modelToYaml(entry.next);
+
+  return (
+    <div className="h-full flex flex-col">
+      <div className="text-sm text-text-subtle mb-2 px-1">
+        {resolvedModelName(entry.next ?? entry.prev)} ({entry.status})
+      </div>
+      <DiffViewer original={prevYaml ?? ''} modified={nextYaml ?? ''} className="flex-1 min-h-0" />
+    </div>
+  );
+}

src-web/components/git/GitDropdown.tsx

@@ -211,7 +211,7 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
           id: 'commit',
           title: 'Commit Changes',
           size: 'full',
-          className: '!max-h-[min(80vh,40rem)] !max-w-[min(50rem,90vw)]',
+          noPadding: true,
           render: ({ hide }) => (
             <GitCommitDialog syncDir={syncDir} onDone={hide} workspace={workspace} />
           ),