From a29746598900e8c5429f24228ac361f73ff11f00 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 7 Apr 2025 15:35:06 -0700
Subject: [PATCH] move cta save buttons to top of workspace setting screens

---
 .../WorkspaceSettings/ChatSettings/index.jsx  | 19 +++----
 .../GeneralAppearance/index.jsx               | 20 +++----
 .../VectorDatabase/index.jsx                  | 55 ++++++++++---------
 3 files changed, 49 insertions(+), 45 deletions(-)

diff --git a/frontend/src/pages/WorkspaceSettings/ChatSettings/index.jsx b/frontend/src/pages/WorkspaceSettings/ChatSettings/index.jsx
index 5a8347eb103..d551183e08a 100644
--- a/frontend/src/pages/WorkspaceSettings/ChatSettings/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/ChatSettings/index.jsx
@@ -9,6 +9,7 @@ import ChatTemperatureSettings from "./ChatTemperatureSettings";
 import ChatModeSelection from "./ChatModeSelection";
 import WorkspaceLLMSelection from "./WorkspaceLLMSelection";
 import ChatQueryRefusalResponse from "./ChatQueryRefusalResponse";
+import CTAButton from "@/components/lib/CTAButton";
 
 export default function ChatSettings({ workspace }) {
   const [settings, setSettings] = useState({});
@@ -45,13 +46,20 @@ export default function ChatSettings({ workspace }) {
 
   if (!workspace) return null;
   return (
-    <div id="workspace-chat-settings-container">
+    <div id="workspace-chat-settings-container" className="relative">
       <form
         ref={formEl}
         onSubmit={handleUpdate}
         id="chat-settings-form"
         className="w-1/2 flex flex-col gap-y-6"
       >
+        {hasChanges && (
+          <div className="absolute top-0 right-0">
+            <CTAButton type="submit">
+              {saving ? "Updating..." : "Update Workspace"}
+            </CTAButton>
+          </div>
+        )}
         <WorkspaceLLMSelection
           settings={settings}
           workspace={workspace}
@@ -78,15 +86,6 @@ export default function ChatSettings({ workspace }) {
           workspace={workspace}
           setHasChanges={setHasChanges}
         />
-        {hasChanges && (
-          <button
-            type="submit"
-            form="chat-settings-form"
-            className="w-fit transition-all duration-300 border border-slate-200 px-5 py-2.5 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-          >
-            {saving ? "Updating..." : "Update workspace"}
-          </button>
-        )}
       </form>
     </div>
   );
diff --git a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/index.jsx b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/index.jsx
index 101a3a9b89f..6b47da93cd3 100644
--- a/frontend/src/pages/WorkspaceSettings/GeneralAppearance/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/GeneralAppearance/index.jsx
@@ -6,6 +6,7 @@ import WorkspaceName from "./WorkspaceName";
 import SuggestedChatMessages from "./SuggestedChatMessages";
 import DeleteWorkspace from "./DeleteWorkspace";
 import WorkspacePfp from "./WorkspacePfp";
+import CTAButton from "@/components/lib/CTAButton";
 
 export default function GeneralInfo({ slug }) {
   const [workspace, setWorkspace] = useState(null);
@@ -44,29 +45,28 @@ export default function GeneralInfo({ slug }) {
 
   if (!workspace || loading) return null;
   return (
-    <>
+    <div className="w-full relative">
       <form
         ref={formEl}
         onSubmit={handleUpdate}
         className="w-1/2 flex flex-col gap-y-6"
       >
+        {hasChanges && (
+          <div className="absolute top-0 right-0">
+            <CTAButton type="submit">
+              {saving ? "Updating..." : "Update Workspace"}
+            </CTAButton>
+          </div>
+        )}
         <WorkspaceName
           key={workspace.slug}
           workspace={workspace}
           setHasChanges={setHasChanges}
         />
-        {hasChanges && (
-          <button
-            type="submit"
-            className="transition-all w-fit duration-300 border border-slate-200 px-5 py-2.5 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-          >
-            {saving ? "Updating..." : "Update workspace"}
-          </button>
-        )}
       </form>
       <SuggestedChatMessages slug={workspace.slug} />
       <WorkspacePfp workspace={workspace} slug={slug} />
       <DeleteWorkspace workspace={workspace} />
-    </>
+    </div>
   );
 }
diff --git a/frontend/src/pages/WorkspaceSettings/VectorDatabase/index.jsx b/frontend/src/pages/WorkspaceSettings/VectorDatabase/index.jsx
index 7d7d44e8f44..a780669278c 100644
--- a/frontend/src/pages/WorkspaceSettings/VectorDatabase/index.jsx
+++ b/frontend/src/pages/WorkspaceSettings/VectorDatabase/index.jsx
@@ -8,6 +8,7 @@ import DocumentSimilarityThreshold from "./DocumentSimilarityThreshold";
 import ResetDatabase from "./ResetDatabase";
 import VectorCount from "./VectorCount";
 import VectorSearchMode from "./VectorSearchMode";
+import CTAButton from "@/components/lib/CTAButton";
 
 export default function VectorDatabase({ workspace }) {
   const [hasChanges, setHasChanges] = useState(false);
@@ -35,30 +36,34 @@ export default function VectorDatabase({ workspace }) {
 
   if (!workspace) return null;
   return (
-    <form
-      ref={formEl}
-      onSubmit={handleUpdate}
-      className="w-1/2 flex flex-col gap-y-6"
-    >
-      <div className="flex items-start gap-x-5">
-        <VectorDBIdentifier workspace={workspace} />
-        <VectorCount reload={true} workspace={workspace} />
-      </div>
-      <VectorSearchMode workspace={workspace} setHasChanges={setHasChanges} />
-      <MaxContextSnippets workspace={workspace} setHasChanges={setHasChanges} />
-      <DocumentSimilarityThreshold
-        workspace={workspace}
-        setHasChanges={setHasChanges}
-      />
-      <ResetDatabase workspace={workspace} />
-      {hasChanges && (
-        <button
-          type="submit"
-          className="w-fit transition-all duration-300 border border-slate-200 px-5 py-2.5 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
-        >
-          {saving ? "Updating..." : "Update workspace"}
-        </button>
-      )}
-    </form>
+    <div className="w-full relative">
+      <form
+        ref={formEl}
+        onSubmit={handleUpdate}
+        className="w-1/2 flex flex-col gap-y-6"
+      >
+        {hasChanges && (
+          <div className="absolute top-0 right-0">
+            <CTAButton type="submit">
+              {saving ? "Updating..." : "Update Workspace"}
+            </CTAButton>
+          </div>
+        )}
+        <div className="flex items-start gap-x-5">
+          <VectorDBIdentifier workspace={workspace} />
+          <VectorCount reload={true} workspace={workspace} />
+        </div>
+        <VectorSearchMode workspace={workspace} setHasChanges={setHasChanges} />
+        <MaxContextSnippets
+          workspace={workspace}
+          setHasChanges={setHasChanges}
+        />
+        <DocumentSimilarityThreshold
+          workspace={workspace}
+          setHasChanges={setHasChanges}
+        />
+        <ResetDatabase workspace={workspace} />
+      </form>
+    </div>
   );
 }