From 5e0be4c26db6b048d71aa693e9198d65dac47038 Mon Sep 17 00:00:00 2001
From: Strider Wilson <strider.wilson@replay.io>
Date: Tue, 10 Jun 2025 14:13:14 -0400
Subject: [PATCH] lint

---
 .../header/DeployChat/DeployChatButton.tsx    |   2 +-
 .../DeployChat/components/DeployChatModal.tsx | 256 +++++++++---------
 .../components/DeploymentSuccessful.tsx       |  56 ++--
 3 files changed, 163 insertions(+), 151 deletions(-)

diff --git a/app/components/header/DeployChat/DeployChatButton.tsx b/app/components/header/DeployChat/DeployChatButton.tsx
index cc3cea6c..336f8977 100644
--- a/app/components/header/DeployChat/DeployChatButton.tsx
+++ b/app/components/header/DeployChat/DeployChatButton.tsx
@@ -53,7 +53,7 @@ export function DeployChatButton() {
 
         const zipContents = event.target.result as string;
         const directoryToFind = 'supabase';
-        
+
         if (zipContents.includes(directoryToFind)) {
           setDatabaseFound(true);
         } else {
diff --git a/app/components/header/DeployChat/components/DeployChatModal.tsx b/app/components/header/DeployChat/components/DeployChatModal.tsx
index 172ea525..e2510b17 100644
--- a/app/components/header/DeployChat/components/DeployChatModal.tsx
+++ b/app/components/header/DeployChat/components/DeployChatModal.tsx
@@ -35,16 +35,21 @@ const DeployChatModal = ({
           className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40 flex items-center justify-center"
           onClick={handleOverlayClick}
         >
-          <div className="bg-bolt-elements-background-depth-1 rounded-lg p-8 max-w-2xl w-full z-50 border border-bolt-elements-borderColor overflow-y-auto max-h-[95vh]" onClick={(e) => e.stopPropagation()}>
+          <div
+            className="bg-bolt-elements-background-depth-1 rounded-lg p-8 max-w-2xl w-full z-50 border border-bolt-elements-borderColor overflow-y-auto max-h-[95vh]"
+            onClick={(e) => e.stopPropagation()}
+          >
             {status === DeployStatus.Succeeded ? (
-                <DeploymentSuccessful deploySettings={deploySettings} setIsModalOpen={setIsModalOpen} />
-              ) : (
+              <DeploymentSuccessful deploySettings={deploySettings} setIsModalOpen={setIsModalOpen} />
+            ) : (
               <>
                 <h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">
                   Deploy Your Application
                 </h2>
                 <div className="text-center mb-6 text-bolt-elements-textSecondary">
-                  <p className="mb-2">Deploy your chat application to production using Netlify{databaseFound ? ' and Supabase' : ''}.</p>
+                  <p className="mb-2">
+                    Deploy your chat application to production using Netlify{databaseFound ? ' and Supabase' : ''}.
+                  </p>
                   <p className="mb-2">This process will:</p>
                   <div className="flex justify-center">
                     <ul className="text-left list-disc list-inside mb-4 inline-block">
@@ -59,25 +64,28 @@ const DeployChatModal = ({
                 <div className="mb-8 p-4 bg-bolt-elements-background-depth-2 rounded-lg border border-bolt-elements-borderColor">
                   <h3 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Before you begin:</h3>
                   <p className="text-xs text-bolt-elements-textSecondary mb-3 whitespace-pre-wrap">
-                    You'll need accounts with both Netlify and {databaseFound ? 'Supabase ' : ''}to deploy your application. If you haven't already, please sign up using the links below:
+                    You'll need accounts with both Netlify and {databaseFound ? 'Supabase ' : ''}to deploy your
+                    application. If you haven't already, please sign up using the links below:
                   </p>
                   <div className="flex flex-col gap-2">
-                    <a 
-                      href="https://app.netlify.com/signup" 
-                      target="_blank" 
+                    <a
+                      href="https://app.netlify.com/signup"
+                      target="_blank"
                       rel="noopener noreferrer"
                       className="text-xs text-green-500 hover:text-green-600 transition-colors"
                     >
                       → Sign up for Netlify
                     </a>
-                    {databaseFound && <a 
-                    href="https://supabase.com/dashboard/sign-up" 
-                    target="_blank" 
-                    rel="noopener noreferrer"
-                    className="text-xs text-green-500 hover:text-green-600 transition-colors"
-                    >
-                    → Sign up for Supabase
-                    </a>}
+                    {databaseFound && (
+                      <a
+                        href="https://supabase.com/dashboard/sign-up"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-xs text-green-500 hover:text-green-600 transition-colors"
+                      >
+                        → Sign up for Supabase
+                      </a>
+                    )}
                   </div>
                 </div>
 
@@ -215,121 +223,121 @@ const DeployChatModal = ({
 
                   {databaseFound && (
                     <>
-                        <div>
-                            <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
-                            Supabase Database URL
-                            </label>
-                            <div className="w-full mb-2">
-                            <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
-                                The URL of your Supabase project, used to connect to your database.
-                            </p>
-                            </div>
-                            <input
-                            name="supabaseDatabaseURL"
-                            className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
-                            value={deploySettings?.supabase?.databaseURL}
-                            placeholder="https://abc...def.supabase.co"
-                            onChange={(e) => {
-                                const supabase = {
-                                databaseURL: e.target.value,
-                                anonKey: deploySettings?.supabase?.anonKey || '',
-                                serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
-                                postgresURL: deploySettings?.supabase?.postgresURL || '',
-                                };
-                                setDeploySettings({
-                                ...deploySettings,
-                                supabase,
-                                });
-                            }}
-                            />
+                      <div>
+                        <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                          Supabase Database URL
+                        </label>
+                        <div className="w-full mb-2">
+                          <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                            The URL of your Supabase project, used to connect to your database.
+                          </p>
                         </div>
+                        <input
+                          name="supabaseDatabaseURL"
+                          className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                          value={deploySettings?.supabase?.databaseURL}
+                          placeholder="https://abc...def.supabase.co"
+                          onChange={(e) => {
+                            const supabase = {
+                              databaseURL: e.target.value,
+                              anonKey: deploySettings?.supabase?.anonKey || '',
+                              serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
+                              postgresURL: deploySettings?.supabase?.postgresURL || '',
+                            };
+                            setDeploySettings({
+                              ...deploySettings,
+                              supabase,
+                            });
+                          }}
+                        />
+                      </div>
 
-                        <div>
-                            <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
-                            Supabase Anonymous Key
-                            </label>
-                            <div className="w-full mb-2">
-                            <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
-                                Public API key for client-side database access with restricted permissions.
-                            </p>
-                            </div>
-                            <input
-                            name="supabaseAnonKey"
-                            className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
-                            value={deploySettings?.supabase?.anonKey}
-                            placeholder="ey..."
-                            onChange={(e) => {
-                                const supabase = {
-                                databaseURL: deploySettings?.supabase?.databaseURL || '',
-                                anonKey: e.target.value,
-                                serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
-                                postgresURL: deploySettings?.supabase?.postgresURL || '',
-                                };
-                                setDeploySettings({
-                                ...deploySettings,
-                                supabase,
-                                });
-                            }}
-                            />
+                      <div>
+                        <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                          Supabase Anonymous Key
+                        </label>
+                        <div className="w-full mb-2">
+                          <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                            Public API key for client-side database access with restricted permissions.
+                          </p>
                         </div>
+                        <input
+                          name="supabaseAnonKey"
+                          className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                          value={deploySettings?.supabase?.anonKey}
+                          placeholder="ey..."
+                          onChange={(e) => {
+                            const supabase = {
+                              databaseURL: deploySettings?.supabase?.databaseURL || '',
+                              anonKey: e.target.value,
+                              serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
+                              postgresURL: deploySettings?.supabase?.postgresURL || '',
+                            };
+                            setDeploySettings({
+                              ...deploySettings,
+                              supabase,
+                            });
+                          }}
+                        />
+                      </div>
 
-                        <div>
-                            <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
-                            Supabase Service Role Key
-                            </label>
-                            <div className="w-full mb-2">
-                            <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
-                                Admin API key for server-side operations with full database access.
-                            </p>
-                            </div>
-                            <input
-                            name="supabaseServiceRoleKey"
-                            className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
-                            value={deploySettings?.supabase?.serviceRoleKey}
-                            placeholder="ey..."
-                            onChange={(e) => {
-                                const supabase = {
-                                databaseURL: deploySettings?.supabase?.databaseURL || '',
-                                anonKey: deploySettings?.supabase?.anonKey || '',
-                                serviceRoleKey: e.target.value,
-                                postgresURL: deploySettings?.supabase?.postgresURL || '',
-                                };
-                                setDeploySettings({
-                                ...deploySettings,
-                                supabase,
-                                });
-                            }}
-                            />
+                      <div>
+                        <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                          Supabase Service Role Key
+                        </label>
+                        <div className="w-full mb-2">
+                          <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                            Admin API key for server-side operations with full database access.
+                          </p>
                         </div>
+                        <input
+                          name="supabaseServiceRoleKey"
+                          className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                          value={deploySettings?.supabase?.serviceRoleKey}
+                          placeholder="ey..."
+                          onChange={(e) => {
+                            const supabase = {
+                              databaseURL: deploySettings?.supabase?.databaseURL || '',
+                              anonKey: deploySettings?.supabase?.anonKey || '',
+                              serviceRoleKey: e.target.value,
+                              postgresURL: deploySettings?.supabase?.postgresURL || '',
+                            };
+                            setDeploySettings({
+                              ...deploySettings,
+                              supabase,
+                            });
+                          }}
+                        />
+                      </div>
 
-                        <div>
-                            <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
-                            Supabase Postgres URL
-                            </label>
-                            <div className="w-full mb-2">
-                            <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
-                                Direct connection URL to your Postgres database for advanced operations.
-                            </p>
-                            </div>
-                            <input
-                            name="supabasePostgresURL"
-                            className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
-                            value={deploySettings?.supabase?.postgresURL}
-                            placeholder="postgresql://postgres:<password>@db.abc...def.supabase.co:5432/postgres"
-                            onChange={(e) => {
-                                const supabase = {
-                                databaseURL: deploySettings?.supabase?.databaseURL || '',
-                                anonKey: deploySettings?.supabase?.anonKey || '',
-                                serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
-                                postgresURL: e.target.value,
-                                };
-                                setDeploySettings({
-                                ...deploySettings,
-                                supabase,
-                                });
-                            }}
-                            />
+                      <div>
+                        <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                          Supabase Postgres URL
+                        </label>
+                        <div className="w-full mb-2">
+                          <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                            Direct connection URL to your Postgres database for advanced operations.
+                          </p>
                         </div>
+                        <input
+                          name="supabasePostgresURL"
+                          className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                          value={deploySettings?.supabase?.postgresURL}
+                          placeholder="postgresql://postgres:<password>@db.abc...def.supabase.co:5432/postgres"
+                          onChange={(e) => {
+                            const supabase = {
+                              databaseURL: deploySettings?.supabase?.databaseURL || '',
+                              anonKey: deploySettings?.supabase?.anonKey || '',
+                              serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
+                              postgresURL: e.target.value,
+                            };
+                            setDeploySettings({
+                              ...deploySettings,
+                              supabase,
+                            });
+                          }}
+                        />
+                      </div>
                     </>
                   )}
                 </div>
diff --git a/app/components/header/DeployChat/components/DeploymentSuccessful.tsx b/app/components/header/DeployChat/components/DeploymentSuccessful.tsx
index fa6f7bcb..d56d986a 100644
--- a/app/components/header/DeployChat/components/DeploymentSuccessful.tsx
+++ b/app/components/header/DeployChat/components/DeploymentSuccessful.tsx
@@ -1,29 +1,33 @@
-const DeploymentSuccessful = ({ deploySettings, setIsModalOpen }: { deploySettings: any, setIsModalOpen: (isOpen: boolean) => void }) => {
-    return (
-        <>
-                <h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">
-                  Deployment Succeeded! 🎉
-                </h2>
-                <div className="text-center">
-                  <p className="text-bolt-elements-textSecondary mb-6">
-                    Your application has been successfully deployed. You can now access it at the URL below.
-                  </p>
-                  <div className="flex justify-center gap-2">
-                    <a href={deploySettings?.siteURL} target="_blank" rel="noopener noreferrer">
-                      <button className="px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium">
-                        {deploySettings?.siteURL}
-                      </button>
-                    </a>
-                    <button
-                      onClick={() => setIsModalOpen(false)}
-                      className="px-4 py-3 bg-gray-300 rounded-lg hover:bg-gray-400 transition-colors font-medium"
-                    >
-                      Close
-                    </button>
-                  </div>
-                </div>
-              </>
-    );
+const DeploymentSuccessful = ({
+  deploySettings,
+  setIsModalOpen,
+}: {
+  deploySettings: any;
+  setIsModalOpen: (isOpen: boolean) => void;
+}) => {
+  return (
+    <>
+      <h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">Deployment Succeeded! 🎉</h2>
+      <div className="text-center">
+        <p className="text-bolt-elements-textSecondary mb-6">
+          Your application has been successfully deployed. You can now access it at the URL below.
+        </p>
+        <div className="flex justify-center gap-2">
+          <a href={deploySettings?.siteURL} target="_blank" rel="noopener noreferrer">
+            <button className="px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium">
+              {deploySettings?.siteURL}
+            </button>
+          </a>
+          <button
+            onClick={() => setIsModalOpen(false)}
+            className="px-4 py-3 bg-gray-300 rounded-lg hover:bg-gray-400 transition-colors font-medium"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </>
+  );
 };
 
 export default DeploymentSuccessful;