Generate and apply git diffs in studio

client/src/components/Breadcrumbs/index.tsx

@@ -56,6 +56,7 @@ const Breadcrumbs = ({
 
   useEffect(() => {
     if (!containerRef.current || allowOverflow) {
+      setFormattedPathParts(pathParts);
       return;
     }
     const parentWidth = containerRef.current.parentElement!.clientWidth;

client/src/components/BreadcrumbsPath/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import Breadcrumbs, { PathParts } from '../Breadcrumbs';
 import {
   breadcrumbsItemPath,
@@ -30,7 +30,7 @@ const BreadcrumbsPath = ({
   ...rest
 }: Props) => {
   const { navigateRepoPath, navigateFullResult } = useAppNavigation();
-  const mapPath = useCallback(() => {
+  const pathParts: PathParts[] = useMemo(() => {
     return splitPathForBreadcrumbs(path, (e, item, index, pParts) => {
       if (onClick) {
         e.stopPropagation();
@@ -53,13 +53,7 @@ const BreadcrumbsPath = ({
         navigateFullResult(path);
       }
     });
-  }, [path, shouldGoToFile]);
-
-  const [pathParts, setPathParts] = useState<PathParts[]>(mapPath());
-
-  useEffect(() => {
-    setPathParts(mapPath());
-  }, [path]);
+  }, [path, shouldGoToFile, onClick, repo]);
 
   return (
     <div

client/src/components/CodeBlock/Code/CodeContainer.tsx

@@ -34,6 +34,34 @@ const CodeContainer = ({
   highlightLines,
   canWrap,
 }: Props) => {
+  const lineNumbersAdd = useMemo(() => {
+    let curr = lineStart;
+    return tokensMap.map((line, i) => {
+      if (
+        line.tokens[0]?.token?.content === '-' ||
+        line.tokens[1]?.token?.content === '-'
+      ) {
+        return null;
+      } else {
+        curr++;
+        return curr;
+      }
+    });
+  }, [tokensMap, lineStart]);
+  const lineNumbersRemove = useMemo(() => {
+    let curr = lineStart;
+    return tokensMap.map((line, i) => {
+      if (
+        line.tokens[0]?.token?.content === '+' ||
+        line.tokens[1]?.token?.content === '+'
+      ) {
+        return null;
+      } else {
+        curr++;
+        return curr;
+      }
+    });
+  }, [tokensMap, lineStart]);
   const getSymbols = (lineNumber: number) => {
     if (symbols?.length) {
       return symbols
@@ -50,6 +78,11 @@ const CodeContainer = ({
           key={lineNumber}
           lineNumber={lineStart + lineNumber}
           lineNumberToShow={line.lineNumber}
+          lineNumbersDiff={
+            isDiff
+              ? [lineNumbersRemove[lineNumber], lineNumbersAdd[lineNumber]]
+              : null
+          }
           showLineNumbers={showLines}
           symbols={getSymbols(lineStart + lineNumber)}
           lineHidden={
@@ -107,7 +140,7 @@ const CodeContainer = ({
           canWrap && codeLines.length < 2 ? '!whitespace-pre-wrap' : ''
         }`}
       >
-        <div>{codeLines}</div>
+        <div className="flex flex-col">{codeLines}</div>
       </pre>
     </div>
   );

client/src/components/CodeBlock/Code/CodeLine.tsx

@@ -17,6 +17,7 @@ import { markNode, unmark } from '../../../utils/textSearch';
 type Props = {
   lineNumber: number;
   lineNumberToShow?: number | null;
+  lineNumbersDiff?: [number | null, number | null] | null;
   children: ReactNode;
   showLineNumbers?: boolean;
   lineFoldable?: boolean;
@@ -64,6 +65,7 @@ const CodeLine = ({
   leftHighlight,
   removePaddings,
   hoveredBackground,
+  lineNumbersDiff,
 }: Props) => {
   const codeRef = useRef<HTMLTableCellElement>(null);
 
@@ -162,11 +164,13 @@ const CodeLine = ({
 
   return (
     <div
-      className={`flex transition-all duration-150 ease-in-bounce group ${
+      className={`flex w-full flex-1 transition-all duration-150 ease-in-bounce group ${
         lineHidden ? 'opacity-0' : ''
       } ${
         blameLine?.start && lineNumber !== 0 ? ' border-t border-bg-border' : ''
-      } ${hoveredBackground ? 'bg-bg-base' : ''}`}
+      } ${hoveredBackground ? 'bg-bg-base' : ''} ${
+        isNewLine ? 'bg-bg-success/30' : isRemovedLine ? 'bg-bg-danger/30' : ''
+      }`}
       data-line-number={lineNumber}
       style={style}
       onMouseDown={(e) => {
@@ -210,38 +214,44 @@ const CodeLine = ({
             )}
           </span>
         </div>
-      ) : (
-        <div
-          className={`${
-            showLineNumbers && !removePaddings ? 'px-1' : ''
-          } text-center ${lineHidden ? 'p-0' : ''} ${
-            isRemovedLine
-              ? 'bg-bg-danger/30'
-              : isNewLine
-              ? 'bg-bg-success/30'
-              : ''
-          }`}
-        />
-      )}
-      {showLineNumbers && (
-        <div
-          data-line={lineNumberToShow}
-          className={`min-w-[27px] text-right select-none pr-0 leading-5 ${blameStyle} ${
-            lineHidden ? 'p-0' : ''
-          } ${hoverEffect ? 'group-hover:text-label-base' : ''}
+      ) : null}
+      {showLineNumbers &&
+        (lineNumbersDiff ? (
+          lineNumbersDiff.map((ln, i) => (
+            <div
+              key={i}
+              data-line={ln}
+              className={`min-w-[27px] text-right select-none pr-0 leading-5 ${blameStyle} ${
+                lineHidden ? 'p-0' : ''
+              } ${hoverEffect ? 'group-hover:text-label-base' : ''}
+           ${lineHidden ? '' : 'before:content-[attr(data-line)]'} ${
+             isRemovedLine
+               ? 'text-label-base'
+               : isNewLine
+               ? 'text-label-base'
+               : 'text-label-muted'
+           }`}
+            />
+          ))
+        ) : (
+          <div
+            data-line={lineNumberToShow}
+            className={`min-w-[27px] text-right select-none pr-0 leading-5 ${blameStyle} ${
+              lineHidden ? 'p-0' : ''
+            } ${hoverEffect ? 'group-hover:text-label-base' : ''}
            ${
              lineHidden || !lineNumberToShow
                ? ''
                : 'before:content-[attr(data-line)]'
            } ${
              isRemovedLine
-               ? 'bg-bg-danger/30 text-label-base'
+               ? 'text-label-base'
                : isNewLine
-               ? 'bg-bg-success/30 text-label-base'
+               ? 'text-label-base'
                : 'text-label-muted'
            }`}
-        />
-      )}
+          />
+        ))}
       <div
         className={`text-label-muted ${lineHidden ? 'p-0' : ''} ${blameStyle}`}
       >
@@ -258,15 +268,8 @@ const CodeLine = ({
       <div
         className={`${showLineNumbers ? 'pl-2' : ''} ${
           lineHidden ? 'p-0' : ''
-        }`}
+        } flex-1`}
         ref={codeRef}
-        style={
-          isNewLine
-            ? { backgroundColor: 'rgba(var(--bg-success), 0.3)' }
-            : isRemovedLine
-            ? { backgroundColor: 'rgba(var(--bg-danger), 0.3)' }
-            : {}
-        }
       >
         {children}
       </div>