feat: integrate sync eng (#2924)

Author: Kitenite

apps/web/client/src/app/_components/auth-modal.tsx

@@ -10,7 +10,9 @@ import {
 import { Button } from '@onlook/ui/button';
 import { useTranslations } from 'next-intl';
 import { useAuthContext } from '../auth/auth-context';
-import { GithubLoginButton, GoogleLoginButton } from './login-button';
+import { LoginButton } from './login-button';
+import { SignInMethod } from '@onlook/models/auth';
+import { Icons } from '@onlook/ui/icons';
 
 export function AuthModal() {
     const { setIsAuthModalOpen, isAuthModalOpen } = useAuthContext();
@@ -28,8 +30,20 @@ export function AuthModal() {
                     </AlertDialogDescription>
                 </AlertDialogHeader>
                 <div className="space-y-2 flex flex-col">
-                    <GithubLoginButton className="!bg-black" />
-                    <GoogleLoginButton className="!bg-black" />
+                    <LoginButton
+                        className="!bg-black"
+                        method={SignInMethod.GITHUB}
+                        icon={<Icons.GitHubLogo className="w-4 h-4 mr-2" />}
+                        translationKey="github"
+                        providerName="GitHub"
+                    />
+                    <LoginButton
+                        className="!bg-black"
+                        method={SignInMethod.GOOGLE}
+                        icon={<Icons.GoogleLogo viewBox="0 0 24 24" className="w-4 h-4 mr-2" />}
+                        translationKey="google"
+                        providerName="Google"
+                    />
                 </div>
                 <AlertDialogFooter className="flex !justify-center w-full">
                     <Button variant={'ghost'} onClick={() => setIsAuthModalOpen(false)}>

apps/web/client/src/app/_components/login-button.tsx

@@ -4,58 +4,41 @@ import { Button } from '@onlook/ui/button';
 import { Icons } from '@onlook/ui/icons';
 import { cn } from '@onlook/ui/utils';
 import { useTranslations } from 'next-intl';
+import { toast } from 'sonner';
 import { useAuthContext } from '../auth/auth-context';
 
-export const GithubLoginButton = ({
-    className,
-    returnUrl,
-}: {
+interface LoginButtonProps {
     className?: string;
     returnUrl?: string | null;
-}) => {
-    const t = useTranslations();
-    const { lastSignInMethod, handleLogin, signingInMethod } = useAuthContext();
-    const isLastSignInMethod = lastSignInMethod === SignInMethod.GITHUB;
-    const isSigningIn = signingInMethod === SignInMethod.GITHUB;
-
-    return (
-        <div className={cn('flex flex-col items-center w-full', className)}>
-            <Button
-                variant="outline"
-                className={cn(
-                    'w-full items-center justify-center text-active text-small',
-                    isLastSignInMethod
-                        ? 'bg-teal-100 dark:bg-teal-950 border-teal-300 dark:border-teal-700 text-teal-900 dark:text-teal-100 text-small hover:bg-teal-200/50 dark:hover:bg-teal-800 hover:border-teal-500/70 dark:hover:border-teal-500'
-                        : 'bg-background-onlook',
-                )}
-                onClick={() => handleLogin(SignInMethod.GITHUB, returnUrl ?? null)}
-                disabled={!!signingInMethod}
-            >
-                {isSigningIn ? (
-                    <Icons.LoadingSpinner className="w-4 h-4 mr-2 animate-spin" />
-                ) : (
-                    <Icons.GitHubLogo className="w-4 h-4 mr-2" />
-                )}
-                {t(transKeys.welcome.login.github)}
-            </Button>
-            {isLastSignInMethod && (
-                <p className="text-teal-500 text-small mt-1">{t(transKeys.welcome.login.lastUsed)}</p>
-            )}
-        </div>
-    );
-};
+    method: SignInMethod.GITHUB | SignInMethod.GOOGLE;
+    icon: React.ReactNode;
+    translationKey: keyof typeof transKeys.welcome.login;
+    providerName: string;
+}
 
-export const GoogleLoginButton = ({
+export const LoginButton = ({
     className,
     returnUrl,
-}: {
-    className?: string;
-    returnUrl?: string | null;
-}) => {
+    method,
+    icon,
+    translationKey,
+    providerName,
+}: LoginButtonProps) => {
     const t = useTranslations();
     const { lastSignInMethod, handleLogin, signingInMethod } = useAuthContext();
-    const isLastSignInMethod = lastSignInMethod === SignInMethod.GOOGLE;
-    const isSigningIn = signingInMethod === SignInMethod.GOOGLE;
+    const isLastSignInMethod = lastSignInMethod === method;
+    const isSigningIn = signingInMethod === method;
+
+    const handleLoginClick = async () => {
+        try {
+            await handleLogin(method, returnUrl ?? null);
+        } catch (error) {
+            console.error(`Error signing in with ${providerName}:`, error);
+            toast.error(`Error signing in with ${providerName}`, {
+                description: error instanceof Error ? error.message : 'Please try again.',
+            });
+        }
+    };
 
     return (
         <div className={cn('flex flex-col items-center w-full', className)}>
@@ -67,15 +50,15 @@ export const GoogleLoginButton = ({
                         ? 'bg-teal-100 dark:bg-teal-950 border-teal-300 dark:border-teal-700 text-teal-900 dark:text-teal-100 text-small hover:bg-teal-200/50 dark:hover:bg-teal-800 hover:border-teal-500/70 dark:hover:border-teal-500'
                         : 'bg-background-onlook',
                 )}
-                onClick={() => handleLogin(SignInMethod.GOOGLE, returnUrl ?? null)}
+                onClick={handleLoginClick}
                 disabled={!!signingInMethod}
             >
                 {isSigningIn ? (
                     <Icons.LoadingSpinner className="w-4 h-4 mr-2 animate-spin" />
                 ) : (
-                    <Icons.GoogleLogo viewBox="0 0 24 24" className="w-4 h-4 mr-2" />
+                    icon
                 )}
-                {t(transKeys.welcome.login.google)}
+{t(transKeys.welcome.login[translationKey])}
             </Button>
             {isLastSignInMethod && (
                 <p className="text-teal-500 text-small mt-1">{t(transKeys.welcome.login.lastUsed)}</p>
@@ -84,6 +67,7 @@ export const GoogleLoginButton = ({
     );
 };
 
+
 export const DevLoginButton = ({
     className,
     returnUrl,

apps/web/client/src/app/auth/auth-context.tsx

@@ -2,7 +2,6 @@
 
 import { LocalForageKeys } from '@/utils/constants';
 import { SignInMethod } from '@onlook/models/auth';
-import { toast } from '@onlook/ui/sonner';
 import localforage from 'localforage';
 import type { ReactNode } from 'react';
 import { createContext, useContext, useEffect, useState } from 'react';
@@ -43,11 +42,8 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
             await localforage.setItem(LAST_SIGN_IN_METHOD_KEY, method);
             await login(method);
         } catch (error) {
-            toast.error('Error signing in with password', {
-                description: error instanceof Error ? error.message : 'Please try again.',
-            });
-            console.error('Error signing in with password:', error);
-            throw new Error('Error signing in with password');
+            console.error('Error signing in with method:', method, error);
+            throw error;
         } finally {
             setSigningInMethod(null);
         }

apps/web/client/src/app/login/page.tsx

@@ -3,12 +3,13 @@
 import { useGetBackground } from '@/hooks/use-get-background';
 import { transKeys } from '@/i18n/keys';
 import { LocalForageKeys, Routes } from '@/utils/constants';
+import { SignInMethod } from '@onlook/models/auth';
 import { Icons } from '@onlook/ui/icons';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
-import { DevLoginButton, GithubLoginButton, GoogleLoginButton } from '../_components/login-button';
+import { DevLoginButton, LoginButton } from '../_components/login-button';
 
 export default function LoginPage() {
     const isDev = process.env.NODE_ENV === 'development';
@@ -34,8 +35,20 @@ export default function LoginPage() {
                         </p>
                     </div>
                     <div className="space-y-2 md:space-y-0 md:space-x-2 flex flex-col md:flex-row">
-                        <GithubLoginButton returnUrl={returnUrl} />
-                        <GoogleLoginButton returnUrl={returnUrl} />
+                        <LoginButton
+                            returnUrl={returnUrl}
+                            method={SignInMethod.GITHUB}
+                            icon={<Icons.GitHubLogo className="w-4 h-4 mr-2" />}
+                            translationKey="github"
+                            providerName="GitHub"
+                        />
+                        <LoginButton
+                            returnUrl={returnUrl}
+                            method={SignInMethod.GOOGLE}
+                            icon={<Icons.GoogleLogo viewBox="0 0 24 24" className="w-4 h-4 mr-2" />}
+                            translationKey="google"
+                            providerName="Google"
+                        />
                     </div>
                     {isDev && <DevLoginButton returnUrl={returnUrl} />}
                     <p className="text-small text-foreground-onlook">

apps/web/client/src/app/project/[id]/_components/canvas/frame/gesture.tsx

@@ -8,7 +8,7 @@ import { cn } from '@onlook/ui/utils';
 import throttle from 'lodash/throttle';
 import { observer } from 'mobx-react-lite';
 import { useCallback, useEffect, useMemo } from 'react';
-import { RightClickMenu } from './right-click';
+import { RightClickMenu } from '../../right-click-menu';
 
 export const GestureScreen = observer(({ frame, isResizing }: { frame: Frame, isResizing: boolean }) => {
     const editorEngine = useEditorEngine();

apps/web/client/src/app/project/[id]/_components/canvas/frame/index.tsx

@@ -6,9 +6,9 @@ import { colors } from '@onlook/ui/tokens';
 import { debounce } from 'lodash';
 import { observer } from 'mobx-react-lite';
 import { useEffect, useRef, useState } from 'react';
+import { RightClickMenu } from '../../right-click-menu';
 import { GestureScreen } from './gesture';
 import { ResizeHandles } from './resize-handles';
-import { RightClickMenu } from './right-click';
 import { TopBar } from './top-bar';
 import { FrameComponent, type IFrameView } from './view';
 
@@ -20,11 +20,12 @@ export const FrameView = observer(({ frame, isInDragSelection = false }: { frame
     const [hasTimedOut, setHasTimedOut] = useState(false);
     const isSelected = editorEngine.frames.isSelected(frame.id);
 
-    // Check if sandbox is connecting for this frame's branch
     const branchData = editorEngine.branches.getBranchDataById(frame.branchId);
-    const isConnecting = branchData?.sandbox?.session?.isConnecting || branchData?.sandbox?.isIndexing || false;
+    const isConnecting = branchData?.sandbox?.session?.isConnecting ?? false;
+
+    const preloadScriptReady = branchData?.sandbox?.preloadScriptInjected ?? false;
+    const isFrameReady = preloadScriptReady && !(isConnecting && !hasTimedOut);
 
-    // Timeout for connection attempts
     useEffect(() => {
         if (!isConnecting) {
             setHasTimedOut(false);
@@ -33,7 +34,7 @@ export const FrameView = observer(({ frame, isInDragSelection = false }: { frame
 
         const timeoutId = setTimeout(() => {
             const currentBranchData = editorEngine.branches.getBranchDataById(frame.branchId);
-            const stillConnecting = currentBranchData?.sandbox?.session?.isConnecting || currentBranchData?.sandbox?.isIndexing || false;
+            const stillConnecting = currentBranchData?.sandbox?.session?.isConnecting ?? false;
 
             if (stillConnecting) {
                 setHasTimedOut(true);
@@ -70,12 +71,12 @@ export const FrameView = observer(({ frame, isInDragSelection = false }: { frame
                 <FrameComponent key={reloadKey} frame={frame} reloadIframe={reloadIframe} isInDragSelection={isInDragSelection} ref={iFrameRef} />
                 <GestureScreen frame={frame} isResizing={isResizing} />
 
-                {isConnecting && !hasTimedOut && (
+                {!isFrameReady && (
                     <div
                         className="absolute inset-0 bg-background/80 backdrop-blur-sm flex items-center justify-center z-50 rounded-md"
                         style={{ width: frame.dimension.width, height: frame.dimension.height }}
                     >
-                        <div className="flex flex-col items-center gap-3 text-foreground" style={{ transform: `scale(${1 / editorEngine.canvas.scale})` }}>
+                        <div className="flex items-center gap-3 text-foreground" style={{ transform: `scale(${1 / editorEngine.canvas.scale})` }}>
                             <Icons.LoadingSpinner className="animate-spin h-8 w-8" />
                         </div>
                     </div>