Improve settings modal and build with script (#1645)

* Remove built with script for Pro users

* Handle subscriptions better

* Improve imports

* Update settings modal usage

* Update pro plan description

Author: Kitenite

apps/studio/electron/main/index.ts

@@ -148,17 +148,22 @@ const setupAppEventListeners = () => {
             ]);
         } catch (error) {
             console.error('Cleanup failed or timed out:', error);
-        } finally {
-            cleanupComplete = true;
         }
     }
 
     app.on('before-quit', (event) => {
         if (!cleanupComplete) {
+            cleanupComplete = false;
             event.preventDefault();
-            cleanUp().then(() => {
-                app.quit();
-            });
+            cleanUp()
+                .catch((error) => {
+                    console.error('Cleanup failed:', error);
+                    app.quit();
+                })
+                .finally(() => {
+                    cleanupComplete = true;
+                    app.quit();
+                });
         }
     });
 

apps/studio/src/App.tsx

@@ -3,11 +3,10 @@ import { Toaster } from '@onlook/ui/toaster';
 import { TooltipProvider } from '@onlook/ui/tooltip';
 import { I18nextProvider } from 'react-i18next';
 import { AppBar } from './components/AppBar';
+import { Modals } from './components/Modals';
 import { ThemeProvider } from './components/ThemeProvider';
 import i18n from './i18n';
 import { Routes } from './routes';
-import { QuittingModal } from './routes/modals/Quitting';
-import { SettingsModal } from './routes/modals/Settings';
 
 function App() {
     return (
@@ -16,8 +15,7 @@ function App() {
                 <TooltipProvider>
                     <AppBar />
                     <Routes />
-                    <SettingsModal />
-                    <QuittingModal />
+                    <Modals />
                     <Toaster />
                 </TooltipProvider>
             </ThemeProvider>

apps/studio/src/routes/modals/Quitting/index.tsx renamed to apps/studio/src/components/Modals/Quitting/index.tsx

@@ -14,7 +14,7 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PricingCard } from './PricingCard';
 
-export const PricingModal = observer(() => {
+export const SubscriptionModal = observer(() => {
     const userManager = useUserManager();
     const editorEngine = useEditorEngine();
     const { t } = useTranslation();
@@ -117,6 +117,11 @@ export const PricingModal = observer(() => {
             setIsCheckingOut(null);
         } catch (error) {
             console.error('Error managing subscription:', error);
+            toast({
+                variant: 'destructive',
+                title: 'Error managing subscription',
+                description: `${error}`,
+            });
             setIsCheckingOut(null);
         }
     };
@@ -238,5 +243,3 @@ export const PricingModal = observer(() => {
         </AnimatePresence>
     );
 });
-
-export default PricingModal;

apps/studio/src/routes/modals/Settings/Advance/index.tsx renamed to apps/studio/src/components/Modals/Settings/Advance/index.tsx

@@ -0,0 +1,13 @@
+import { QuittingModal } from './Quitting';
+import { SettingsModal } from './Settings';
+import { SubscriptionModal } from './Subscription/PricingPage';
+
+export const Modals = () => {
+    return (
+        <>
+            <SettingsModal />
+            <QuittingModal />
+            <SubscriptionModal />
+        </>
+    );
+};

apps/studio/src/routes/modals/Settings/Domain/Base.tsx renamed to apps/studio/src/components/Modals/Settings/Domain/Base.tsx

@@ -12,7 +12,6 @@ import { AstManager } from './ast';
 import { CanvasManager } from './canvas';
 import { ChatManager } from './chat';
 import { CodeManager } from './code';
-import { ThemeManager } from './theme';
 import { CopyManager } from './copy';
 import { ElementManager } from './element';
 import { ErrorManager } from './error';
@@ -26,6 +25,7 @@ import { PagesManager } from './pages';
 import { ProjectInfoManager } from './projectinfo';
 import { StyleManager } from './style';
 import { TextEditingManager } from './text';
+import { ThemeManager } from './theme';
 import { WebviewManager } from './webview';
 
 export class EditorEngine {
@@ -36,7 +36,7 @@ export class EditorEngine {
 
     private _editorMode: EditorMode = EditorMode.DESIGN;
     private _editorPanelTab: EditorTabValue = EditorTabValue.CHAT;
-    private _settingsTab: SettingsTabValue = SettingsTabValue.DOMAIN;
+    private _settingsTab: SettingsTabValue = SettingsTabValue.PREFERENCES;
 
     private canvasManager: CanvasManager;
     private chatManager: ChatManager;

apps/studio/src/routes/modals/Settings/Domain/Custom/RecordField.tsx renamed to apps/studio/src/components/Modals/Settings/Domain/Custom/RecordField.tsx

@@ -9,6 +9,7 @@ export class SubscriptionManager {
     constructor() {
         makeAutoObservable(this);
         this.restoreCachedPlan();
+        this.getPlanFromServer();
     }
 
     private restoreCachedPlan() {

apps/studio/src/routes/modals/Settings/Domain/Custom/Verification.tsx renamed to apps/studio/src/components/Modals/Settings/Domain/Custom/Verification.tsx

@@ -117,7 +117,7 @@
                     "Unlimited projects",
                     "Unlimited AI chat messages a day",
                     "Unlimited monthly chats",
-                    "Multiple screenshots per chat",
+                    "Remove built with Onlook watermark",
                     "1 free custom domain hosted with Onlook",
                     "Priority support"
                 ]

apps/studio/src/routes/modals/Settings/Domain/Custom/Verified.tsx renamed to apps/studio/src/components/Modals/Settings/Domain/Custom/Verified.tsx

@@ -22,7 +22,7 @@
                     "無制限のプロジェクト",
                     "無制限のAIチャットメッセージ（1日あたり）",
                     "無制限の月間チャット",
-                    "1つのチャットで複数のスクリーンショットが可能",
+                    "ビルド時にOnlookの透かしを削除",
                     "Onlookでホスティングされた1つの無料カスタムドメイン",
                     "優先サポート"
                 ]

apps/studio/src/routes/modals/Settings/Domain/Custom/index.tsx renamed to apps/studio/src/components/Modals/Settings/Domain/Custom/index.tsx

@@ -117,7 +117,7 @@
                     "无限制项目",
                     "每日无限制 AI 聊天消息",
                     "每月无限制聊天",
-                    "每次聊天可使用多张截图",
+                    "移除 Onlook 水印",
                     "1 个免费使用 Onlook 托管的自定义域名",
                     "优先支持"
                 ]

apps/studio/src/routes/modals/Settings/Domain/DangerZone.tsx renamed to apps/studio/src/components/Modals/Settings/Domain/DangerZone.tsx

@@ -1,4 +1,5 @@
 import { useEditorEngine, useProjectsManager, useRouteManager } from '@/components/Context';
+import { SettingsTabValue } from '@/lib/models';
 import { ProjectTabs } from '@/lib/projects';
 import { Route } from '@/lib/routes';
 import { invokeMainChannel } from '@/lib/utils';
@@ -173,6 +174,7 @@ const ProjectBreadcrumb = observer(() => {
                     <DropdownMenuItem
                         onClick={() => {
                             editorEngine.isSettingsOpen = true;
+                            editorEngine.settingsTab = SettingsTabValue.PROJECT;
                         }}
                     >
                         {t('projects.actions.settings')}

apps/studio/src/routes/modals/Settings/Domain/UpgradePrompt.tsx renamed to apps/studio/src/components/Modals/Settings/Domain/UpgradePrompt.tsx

@@ -79,7 +79,7 @@ export const DomainSection = observer(
                 return;
             }
             domainManager.publish({
-                skipBadge: type === DomainType.CUSTOM,
+                skipBadge: type === DomainType.CUSTOM || plan === UsagePlanType.PRO,
                 buildFlags: userManager.settings.settings?.editor?.buildFlags,
             });
         };

apps/studio/src/routes/modals/Settings/Domain/index.tsx renamed to apps/studio/src/components/Modals/Settings/Domain/index.tsx

@@ -1,14 +1,12 @@
-import { SettingsModal } from '../modals/Settings';
 import { Canvas } from './Canvas';
 import { EditPanel } from './EditPanel';
 import { HotkeysModal } from './HotkeysModal';
 import { LayersPanel } from './LayersPanel';
 import { Toolbar } from './Toolbar';
 import { EditorTopBar } from './TopBar';
-import { PricingModal } from './TopBar/Subscription/PricingPage';
 import { WebviewArea } from './WebviewArea';
 
-function ProjectEditor() {
+export function ProjectEditor() {
     return (
         <>
             <div className="relative flex flex-row h-[calc(100vh-2.60rem)] select-none">
@@ -32,11 +30,7 @@ function ProjectEditor() {
                     <EditorTopBar />
                 </div>
             </div>
-            <PricingModal />
-            <SettingsModal />
             <HotkeysModal />
         </>
     );
 }
-
-export default ProjectEditor;

apps/studio/src/routes/modals/Settings/Preferences/index.tsx renamed to apps/studio/src/components/Modals/Settings/Preferences/index.tsx

@@ -1,9 +1,9 @@
 import { useAuthManager, useProjectsManager, useRouteManager } from '@/components/Context';
 import { Route } from '@/lib/routes';
 import { observer } from 'mobx-react-lite';
-import ProjectEditor from './editor';
-import Projects from './projects';
-import SignIn from './signin';
+import { ProjectEditor } from './editor';
+import { Projects } from './projects';
+import { SignIn } from './signin';
 
 export const Routes = observer(() => {
     const routeManager = useRouteManager();

apps/studio/src/routes/modals/Settings/Project/ReinstallButon.tsx renamed to apps/studio/src/components/Modals/Settings/Project/ReinstallButon.tsx

@@ -1,6 +1,13 @@
-import { useAuthManager, useEditorEngine, useProjectsManager } from '@/components/Context';
+import {
+    useAuthManager,
+    useEditorEngine,
+    useProjectsManager,
+    useUserManager,
+} from '@/components/Context';
 import UserProfileDropdown from '@/components/ui/UserProfileDropdown';
+import { SettingsTabValue } from '@/lib/models';
 import { ProjectTabs } from '@/lib/projects';
+import { UsagePlanType } from '@onlook/models/usage';
 import { Button } from '@onlook/ui/button';
 import {
     DropdownMenu,
@@ -16,6 +23,8 @@ export const TopBar = observer(() => {
     const editorEngine = useEditorEngine();
     const projectsManager = useProjectsManager();
     const authManager = useAuthManager();
+    const userManager = useUserManager();
+    const plan = userManager.subscription?.plan;
 
     function signOut() {
         authManager.signOut();
@@ -73,6 +82,25 @@ export const TopBar = observer(() => {
                     </DropdownMenuContent>
                 </DropdownMenu>
                 <UserProfileDropdown>
+                    {plan === UsagePlanType.PRO && (
+                        <DropdownMenuItem
+                            onSelect={() => {
+                                editorEngine.isPlansOpen = true;
+                            }}
+                        >
+                            <Icons.Person className="w-4 h-4 mr-2" />
+                            Subscription
+                        </DropdownMenuItem>
+                    )}
+                    <DropdownMenuItem
+                        onSelect={() => {
+                            editorEngine.isSettingsOpen = true;
+                            editorEngine.settingsTab = SettingsTabValue.PREFERENCES;
+                        }}
+                    >
+                        <Icons.Gear className="w-4 h-4 mr-2" />
+                        Settings
+                    </DropdownMenuItem>
                     <DropdownMenuItem disabled={!authManager.isAuthEnabled} onSelect={signOut}>
                         <Icons.Exit className="w-4 h-4 mr-2" />
                         Sign out

apps/studio/src/routes/modals/Settings/Project/index.tsx renamed to apps/studio/src/components/Modals/Settings/Project/index.tsx

@@ -7,7 +7,7 @@ import PromptCreation from './PromptCreation';
 import TopBar from './TopBar';
 import { CreateMethod } from './helpers';
 
-const Projects = observer(() => {
+export const Projects = observer(() => {
     const projectsManager = useProjectsManager();
     const renderTab = () => {
         switch (projectsManager.projectsTab) {
@@ -38,5 +38,3 @@ const Projects = observer(() => {
         </div>
     );
 });
-
-export default Projects;

apps/studio/src/routes/modals/Settings/Versions/EmptyState/Saved.tsx renamed to apps/studio/src/components/Modals/Settings/Versions/EmptyState/Saved.tsx

@@ -13,7 +13,7 @@ enum SignInMethod {
     GOOGLE = 'google',
 }
 
-const SignIn = observer(() => {
+export const SignIn = observer(() => {
     const { t } = useTranslation();
     const authManager = useAuthManager();
     const userManager = useUserManager();
@@ -109,5 +109,3 @@ const SignIn = observer(() => {
         </div>
     );
 });
-
-export default SignIn;

apps/studio/src/routes/modals/Settings/Versions/EmptyState/Version.tsx renamed to apps/studio/src/components/Modals/Settings/Versions/EmptyState/Version.tsx

@@ -1,8 +1,8 @@
 import { anthropic } from '@ai-sdk/anthropic';
 import { tool, type ToolSet } from 'ai';
 import { readFile } from 'fs/promises';
-import { ONLOOK_PROMPT } from 'src/prompt/onlook';
 import { z } from 'zod';
+import { ONLOOK_PROMPT } from '../prompt/onlook';
 import { getAllFiles } from './helpers';
 
 export const listFilesTool = tool({