Improve diff panel. Fix switching to code tab when we apply changes

packages/web/src/components/apps/diff-modal.tsx

@@ -6,7 +6,7 @@ import {
   DialogTitle,
   DialogDescription,
 } from '@srcbook/components/src/components/ui/dialog';
-import { Undo2Icon, XIcon } from 'lucide-react';
+import { Undo2Icon } from 'lucide-react';
 import type { FileDiffType } from '@srcbook/shared';
 import { DiffSquares, DiffStats } from './diff-stats';
 import { DiffEditor } from './editor';
@@ -33,7 +33,7 @@ export default function DiffModal({ files, onClose, onUndoAll }: PropsType) {
       >
         {/* Got browser console warnings without this */}
         <DialogDescription className="sr-only">View diff of files changed</DialogDescription>
-        <DiffModalHeader onClose={onClose} onUndoAll={onUndoAll} />
+        <DiffModalHeader numFiles={files.length} onClose={onClose} onUndoAll={onUndoAll} />
         <div className="flex-1 overflow-y-auto p-6 flex flex-col gap-6">
           {files.map((file) => (
             <FileDiff key={file.path} file={file} />
@@ -44,21 +44,26 @@ export default function DiffModal({ files, onClose, onUndoAll }: PropsType) {
   );
 }
 
-function DiffModalHeader({ onClose, onUndoAll }: { onClose: () => void; onUndoAll: () => void }) {
+function DiffModalHeader({
+  numFiles,
+  onClose,
+  onUndoAll,
+}: {
+  numFiles: number;
+  onClose: () => void;
+  onUndoAll: () => void;
+}) {
   return (
     <div className="h-12 px-4 flex items-center justify-between border-b border-border">
       <div>
-        <DialogTitle className="font-semibold">Files changed</DialogTitle>
+        <DialogTitle className="font-semibold">{`${numFiles} files changed`}</DialogTitle>
       </div>
       <div className="flex items-center space-x-3">
         <Button variant="secondary" className="flex items-center space-x-1.5" onClick={onUndoAll}>
           <Undo2Icon size={16} />
           <span>Undo all</span>
         </Button>
-        <Button variant="icon" className="h-8 w-8 p-1.5 border-none" onClick={onClose}>
-          <XIcon size={16} />
-          <span className="sr-only">Close</span>
-        </Button>
+        <Button onClick={onClose}>Done</Button>
       </div>
     </div>
   );

packages/web/src/components/apps/panels/explorer.tsx

@@ -189,8 +189,9 @@ function FileTree(props: {
         <EditNameNode
           depth={depth}
           name={newEntry.basename}
-          onSubmit={(name) => {
-            createFile(tree.path, name);
+          onSubmit={async (name) => {
+            const diskEntry = await createFile(tree.path, name);
+            openFile(diskEntry);
             setNewEntry(null);
           }}
           onCancel={() => setNewEntry(null)}

packages/web/src/components/apps/use-files.tsx

@@ -25,7 +25,7 @@ export interface FilesContextValue {
   fileTree: DirEntryType;
   openedFile: FileType | null;
   openFile: (entry: FileEntryType) => Promise<void>;
-  createFile: (dirname: string, basename: string, source?: string) => Promise<void>;
+  createFile: (dirname: string, basename: string, source?: string) => Promise<FileEntryType>;
   updateFile: (file: FileType, attrs: Partial<FileType>) => void;
   renameFile: (entry: FileEntryType, name: string) => Promise<void>;
   deleteFile: (entry: FileEntryType) => Promise<void>;
@@ -74,9 +74,9 @@ export function FilesProvider({ app, channel, rootDirEntries, children }: Provid
       const { data: fileEntry } = await doCreateFile(app.id, dirname, basename, source);
       fileTreeRef.current = createNode(fileTreeRef.current, fileEntry);
       forceComponentRerender(); // required
-      openFile(fileEntry);
+      return fileEntry;
     },
-    [app.id, openFile],
+    [app.id],
   );
 
   const updateFile = useCallback(

packages/web/src/components/chat.tsx

@@ -2,7 +2,16 @@ import { Button, cn, ScrollArea } from '@srcbook/components';
 import Markdown from './apps/markdown.js';
 import { diffFiles } from './apps/lib/diff.js';
 import TextareaAutosize from 'react-textarea-autosize';
-import { ArrowUp, X, Paperclip, History, LoaderCircle, ViewIcon, Undo2Icon } from 'lucide-react';
+import {
+  ArrowUp,
+  X,
+  Paperclip,
+  History,
+  LoaderCircle,
+  ViewIcon,
+  Undo2Icon,
+  Redo2Icon,
+} from 'lucide-react';
 import * as React from 'react';
 import { aiEditApp, loadHistory, appendToHistory } from '@/clients/http/apps.js';
 import { AppType } from '@srcbook/shared';
@@ -25,15 +34,19 @@ function Chat({
   onClose,
   app,
   fileDiffs,
+  diffApplied,
   revertDiff,
+  reApplyDiff,
   openDiffModal,
 }: {
   history: HistoryType;
   isLoading: boolean;
   onClose: () => void;
   app: AppType;
   fileDiffs: FileDiffType[];
+  diffApplied: boolean;
   revertDiff: () => void;
+  reApplyDiff: () => void;
   openDiffModal: () => void;
 }) {
   return (
@@ -82,11 +95,11 @@ function Chat({
           <div className={cn('flex gap-2 w-full', fileDiffs.length > 0 ? '' : 'hidden')}>
             <Button
               variant="ai-secondary"
-              onClick={revertDiff}
+              onClick={diffApplied ? revertDiff : reApplyDiff}
               className="flex-1 flex items-center gap-1.5"
             >
-              <Undo2Icon size={16} />
-              <span>Undo</span>
+              {diffApplied ? <Undo2Icon size={16} /> : <Redo2Icon size={16} />}
+              <span>{diffApplied ? 'Undo' : 'Re-apply'}</span>
             </Button>
             <Button
               variant="ai"
@@ -199,6 +212,7 @@ export function ChatPanel(props: PropsType): React.JSX.Element {
   const [fileDiffs, setFileDiffs] = React.useState<FileDiffType[]>([]);
   const [visible, setVisible] = React.useState(false);
   const [isLoading, setIsLoading] = React.useState(false);
+  const [diffApplied, setDiffApplied] = React.useState(false);
   const { createFile, deleteFile } = useFiles();
 
   // Initialize history from the DB
@@ -261,6 +275,7 @@ export function ChatPanel(props: PropsType): React.JSX.Element {
     appendToHistory(props.app.id, diffMessage);
 
     setFileDiffs(fileDiffs);
+    setDiffApplied(true);
     setIsLoading(false);
   };
 
@@ -281,7 +296,14 @@ export function ChatPanel(props: PropsType): React.JSX.Element {
         });
       }
     }
-    setFileDiffs([]);
+    setDiffApplied(false);
+  };
+
+  const reApplyDiff = () => {
+    for (const file of fileDiffs) {
+      createFile(file.dirname, file.basename, file.modified);
+    }
+    setDiffApplied(true);
   };
 
   const handleClose = () => {
@@ -312,6 +334,8 @@ export function ChatPanel(props: PropsType): React.JSX.Element {
           isLoading={isLoading}
           onClose={handleClose}
           app={props.app}
+          diffApplied={diffApplied}
+          reApplyDiff={reApplyDiff}
           revertDiff={revertDiff}
           fileDiffs={fileDiffs}
           openDiffModal={openDiffModal}