Instant write-to-code support (#431)

* Track new write code actions * Add loading state for writing to code
onlook-dev · Oct 1, 2024 · ed2275e · ed2275e
1 parent 1fd96bb
commit ed2275e
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 7 deletions.
diff --git 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
@@ -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">