From ed2275e243f7e9fdac958d62505f5281b2aca9ab Mon Sep 17 00:00:00 2001
From: Kiet <31864905+Kitenite@users.noreply.github.com>
Date: Tue, 1 Oct 2024 13:12:28 -0400
Subject: [PATCH] Instant write-to-code support (#431)

* Track new write code actions

* Add loading state for writing to code
---
 app/src/lib/editor/engine/code/index.ts |  3 ++-
 app/src/routes/editor/TopBar/index.tsx  | 28 +++++++++++++++++++------
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/src/lib/editor/engine/code/index.ts b/app/src/lib/editor/engine/code/index.ts
index 865b73d3..23bd2e10 100644
--- a/app/src/lib/editor/engine/code/index.ts
+++ b/app/src/lib/editor/engine/code/index.ts
@@ -48,6 +48,7 @@ export class CodeManager {
             this.isQueued = true;
             return;
         }
+        this.isExecuting = true;
         const codeDiffs = await this.generateCodeDiffs();
         if (codeDiffs.length === 0) {
             console.error('No code diffs found.');
@@ -59,7 +60,7 @@ export class CodeManager {
                 webview.send(WebviewChannels.CLEAN_AFTER_WRITE_TO_CODE);
             });
         }
-
+        sendAnalytics('write code');
         this.isExecuting = false;
         if (this.isQueued) {
             this.isQueued = false;
diff --git a/app/src/routes/editor/TopBar/index.tsx b/app/src/routes/editor/TopBar/index.tsx
index 4ae3c90c..490c3841 100644
--- a/app/src/routes/editor/TopBar/index.tsx
+++ b/app/src/routes/editor/TopBar/index.tsx
@@ -2,7 +2,7 @@ import { useEditorEngine } from '@/components/Context';
 import { Button } from '@/components/ui/button';
 import { HotKeyLabel } from '@/components/ui/hotkeys-label';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
-import { ResetIcon } from '@radix-ui/react-icons';
+import { CheckCircledIcon, ResetIcon, ShadowIcon } from '@radix-ui/react-icons';
 import { observer } from 'mobx-react-lite';
 import ModeToggle from './ModeToggle';
 import OpenCode from './OpenCode';
@@ -53,11 +53,27 @@ const EditorTopBar = observer(() => {
                         </Tooltip>
                     ))}
                 </div>
-                <p className="text-xs text-text">
-                    {editorEngine.history.length === 0
-                        ? ''
-                        : `${editorEngine.history.length} change${editorEngine.history.length > 1 ? 's' : ''}`}
-                </p>
+                {editorEngine.history.length > 0 && (
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <div className="flex flex-row items-center gap-2 text-xs text-text">
+                                {editorEngine.code.isExecuting ? (
+                                    <ShadowIcon className="h-3.5 w-3.5 animate-spin" />
+                                ) : (
+                                    <CheckCircledIcon className="h-3 w-3" />
+                                )}
+                                <p>{`${editorEngine.history.length} change${editorEngine.history.length > 1 ? 's' : ''}`}</p>
+                            </div>
+                        </TooltipTrigger>
+                        <TooltipContent side="bottom">
+                            <p>
+                                {editorEngine.code.isExecuting
+                                    ? 'Writing code'
+                                    : 'Edits written to code'}
+                            </p>
+                        </TooltipContent>
+                    </Tooltip>
+                )}
             </div>
             <ModeToggle />
             <div className="flex space-x-2 flex-grow basis-0 justify-end">