From 77cf2d8205f89de7f0c1e14a6b4d2054ead71c46 Mon Sep 17 00:00:00 2001
From: Michael Truell <mntruell@gmail.com>
Date: Thu, 30 Mar 2023 00:04:29 -0700
Subject: [PATCH] Cleanup OAI / Login

---
 src/components/errors.tsx       |   2 +-
 src/components/settingsPane.tsx | 112 ++++++++++++++++++--------------
 src/index.css                   |   1 +
 src/main/main.ts                |   1 +
 4 files changed, 68 insertions(+), 48 deletions(-)

diff --git a/src/components/errors.tsx b/src/components/errors.tsx
index 823660d..b95e6f1 100644
--- a/src/components/errors.tsx
+++ b/src/components/errors.tsx
@@ -51,6 +51,7 @@ const loginStyles = {
         marginLeft: 'auto',
         marginRight: 'auto',
         maxWidth: '450px',
+        overflow: 'none',
     },
 }
 
@@ -177,7 +178,6 @@ export function ErrorPopup() {
                                 Upgrade
                             </div>
                         </div>
-                        <div className="signup__signup_button">Upgrade</div>
                     </div>
                     <div className="signup__module signup__last_module">
                         <div className="signup__subtitle">
diff --git a/src/components/settingsPane.tsx b/src/components/settingsPane.tsx
index 846895a..677b83a 100644
--- a/src/components/settingsPane.tsx
+++ b/src/components/settingsPane.tsx
@@ -162,6 +162,7 @@ export function SettingsPopup() {
                                 />
                             </div>
 
+                            <CursorLogin />
                             <OpenAIPanel />
                             <CopilotPanel />
                             {/* REMOVED CODEBASE-WIDE FEATURES!
@@ -172,7 +173,6 @@ export function SettingsPopup() {
                                     languageName={name}
                                 />
                             ))}
-                            <CursorLogin />
                         </div>
                     </div>
                     <div className="cover-bar"></div>
@@ -209,7 +209,6 @@ export function OpenAILoginPanel({ onSubmit }: { onSubmit: () => void }) {
 
     const handleNewAPIKey = useCallback(async () => {
         const { models, isValidKey } = await ssel.getModels(localAPIKey)
-        console.log({ models, isValidKey })
         if (!isValidKey) {
             // Error, and we let them know
             showKeyError(true)
@@ -219,11 +218,12 @@ export function OpenAILoginPanel({ onSubmit }: { onSubmit: () => void }) {
             dispatch(
                 changeSettings({
                     openAIKey: localAPIKey,
-                })
-            )
+                    useOpenAIKey: true,
+                    openAIModel: models.at(0) ?? null
+                }))
             onSubmit()
         }
-    }, [localAPIKey])
+    }, [dispatch, localAPIKey])
 
     return (
         <div className="settings__item">
@@ -267,17 +267,17 @@ export function OpenAILoginPanel({ onSubmit }: { onSubmit: () => void }) {
                                     ? 'bg-green-500'
                                     : 'bg-red-500'
                             }
-                                            mt-2 relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
+                                            mt-2 relative inline-flex h-[25px] w-[52px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
                         >
                             <span className="sr-only">Use setting</span>
                             <span
                                 aria-hidden="true"
                                 className={`${
                                     settings.useOpenAIKey
-                                        ? 'translate-x-9'
+                                        ? 'translate-x-7'
                                         : 'translate-x-0'
                                 }
-                pointer-events-none inline-block h-[34px] w-[34px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
+                pointer-events-none inline-block h-[20px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
                             />
                         </Switch>
                         {settings.useOpenAIKey ? (
@@ -331,28 +331,32 @@ export function OpenAIPanel() {
     }, [localAPIKey])
 
     const handleNewAPIKey = useCallback(async () => {
+        console.log('here 2')
         const { models, isValidKey } = await ssel.getModels(localAPIKey)
         console.log({ models, isValidKey })
         if (!isValidKey) {
             // Error, and we let them know
+            console.log('here 3')
             showKeyError(true)
             setAvailableModels([])
         } else {
             setAvailableModels(models)
+            console.log('here')
             dispatch(
                 changeSettings({
                     openAIKey: localAPIKey,
-                })
-            )
+                    useOpenAIKey: true,
+                    openAIModel: models.at(0) ?? null
+                }))
         }
-    }, [localAPIKey])
+    }, [dispatch, localAPIKey])
+
 
     return (
         <div className="settings__item">
             <div className="settings__item_title">OpenAI API Key</div>
             <div className="settings__item_description">
-                We'll use your key for any requests to OpenAI. This will help
-                you avoid "maximum capacity" limits.
+                You can enter an OpenAI API key to use Cursor at-cost
             </div>
             <div className="flex">
                 <input
@@ -394,17 +398,17 @@ export function OpenAIPanel() {
                                     ? 'bg-green-500'
                                     : 'bg-red-500'
                             }
-                                            mt-2 relative inline-flex h-[38px] w-[74px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
+                                            mt-2 relative inline-flex h-[24px] w-[52px] shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus-visible:ring-2  focus-visible:ring-white focus-visible:ring-opacity-75`}
                         >
                             <span className="sr-only">Use setting</span>
                             <span
                                 aria-hidden="true"
                                 className={`${
                                     settings.useOpenAIKey
-                                        ? 'translate-x-9'
+                                        ? 'translate-x-7'
                                         : 'translate-x-0'
                                 }
-                pointer-events-none inline-block h-[34px] w-[34px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
+                pointer-events-none inline-block h-[20px] w-[20px] transform rounded-full bg-white shadow-lg ring-0 transition duration-200 ease-in-out`}
                             />
                         </Switch>
                         {settings.useOpenAIKey ? (
@@ -467,47 +471,61 @@ export function CursorLogin({
     } else {
         if (proVersion) {
             currentPanel = (
-                <div className="copilot__signin">
-                    <button onClick={signOut}>Log out</button>
-                    {showSettings && (
-                        <>
-                            <br />
-                            <button onClick={openAccountSettings}>
-                                Manage settings
-                            </button>
-                        </>
-                    )}
+                <div className="settings__item">
+                    <div className="settings__item_title">Cursor Account</div>
+                    <div className="settings__item_description">
+                        Login to use the AI without an API key
+                    </div>
+                    <div className="copilot__signin">
+                        <button onClick={signOut}>Log out</button>
+                        {showSettings && (
+                    <>
+                        <br />
+                        <button onClick={openAccountSettings}>
+                            Manage settings
+                        </button>
+                    </>
+                )}
+                    </div>
                 </div>
             )
         } else {
             currentPanel = (
-                <div className="copilot__signin">
-                    <br />
-                    <button onClick={signOut}>Log out</button>
-                    {showSettings && (
-                        <>
+                <>
+                    <div className="settings__item">
+                        <div className="settings__item_title">Cursor Account</div>
+                        <div className="settings__item_description">
+                            Login to use the AI without an API key
+                        </div>
+                        <div className="copilot__signin">
+                            <button onClick={signOut}>Log out</button>
+                            {showSettings && (
+                    <>
+                        <br />
+                        <button onClick={openAccountSettings}>
+                            Manage settings
+                        </button>
+                    </>
+                )}
                             <br />
-                            <button onClick={openAccountSettings}>
-                                Manage settings
-                            </button>
-                        </>
-                    )}
-                    <br />
-                    Upgrade for unlimited generations
-                    <button onClick={upgrade}>Upgrade to Pro</button>
-                </div>
+                        </div>
+                    </div>
+                    <div className="settings__item">
+                        <div className="settings__item_title">Cursor Pro</div>
+                        <div className="settings__item_description">
+                            Upgrade for unlimited generations
+                        </div>
+                        <div className="copilot__signin">
+                        <button onClick={upgrade}>Upgrade to Pro</button>
+                        </div>
+                    </div>
+                </>
             )
         }
     }
 
     return (
-        <div className="settings__item">
-            <div className="settings__item_title">Cursor Account</div>
-            <div className="settings__item_description">
-                Login to use the AI without an API key
-            </div>
-            {currentPanel}
-        </div>
+            currentPanel
     )
 }
 
diff --git a/src/index.css b/src/index.css
index c6653ce..634f581 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2550,6 +2550,7 @@ free servers .disabled_command .shortcut__block {
 
 .signup__last_module {
     margin-bottom: 0px;
+    text-align: center;
 }
 
 .error-message {
diff --git a/src/main/main.ts b/src/main/main.ts
index fadeca4..671fb7d 100644
--- a/src/main/main.ts
+++ b/src/main/main.ts
@@ -40,6 +40,7 @@ import todesktop from '@todesktop/runtime'
 todesktop.init()
 
 const store = new Store()
+store.clear()
 
 let main_window: Electron.BrowserWindow