From 106833328b9a1f6aa65f2612b2939028ab843149 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Wed, 13 Aug 2025 17:48:44 -0700
Subject: [PATCH 1/2] improvement: make commit popover animated

---
 .../components/CommitForm/CommitForm.tsx      | 95 +++++++++++--------
 1 file changed, 55 insertions(+), 40 deletions(-)

diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
index 9bf9e3a15..28a10ea92 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
@@ -8,6 +8,7 @@ import {
   faSave
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { AnimatePresence, motion } from "framer-motion";
 
 import { Badge, Button, Input, Modal, ModalContent } from "@app/components/v2";
 import { PendingAction } from "@app/hooks/api/secretFolders/types";
@@ -302,47 +303,61 @@ export const CommitForm: React.FC<CommitFormProps> = ({
     <>
       {/* Floating Panel */}
       {!isModalOpen && (
-        <div className="fixed bottom-4 left-1/2 z-40 w-full max-w-3xl -translate-x-1/2 self-center rounded-lg border border-yellow/30 bg-mineshaft-800 shadow-2xl lg:left-auto lg:translate-x-0">
-          <div className="flex items-center justify-between p-4">
-            {/* Left Content */}
-            <div className="flex-1">
-              {/* Header */}
-              <div className="flex items-center gap-2">
-                <div className="h-2 w-2 rounded-full bg-yellow-500" />
-                <span className="font-medium text-mineshaft-100">Pending Changes</span>
-                <Badge variant="primary" className="text-xs">
-                  {totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
-                </Badge>
+        <div className="fixed bottom-4 left-1/2 z-40 w-full max-w-3xl -translate-x-1/2 self-center lg:left-auto lg:translate-x-0">
+          <AnimatePresence mode="wait">
+            <motion.div
+              key="select-type-step"
+              transition={{ duration: 0.3 }}
+              initial={{ opacity: 0, translateY: 30 }}
+              animate={{ opacity: 1, translateY: 0 }}
+              exit={{ opacity: 0, translateY: -30 }}
+            >
+              <div className="rounded-lg border border-yellow/30 bg-mineshaft-800 shadow-2xl">
+                <div className="flex items-center justify-between p-4">
+                  {/* Left Content */}
+                  <div className="flex-1">
+                    {/* Header */}
+                    <div className="flex items-center gap-2">
+                      <div className="h-2 w-2 rounded-full bg-yellow-500" />
+                      <span className="font-medium text-mineshaft-100">Pending Changes</span>
+                      <Badge variant="primary" className="text-xs">
+                        {totalChangesCount} Change{totalChangesCount !== 1 ? "s" : ""}
+                      </Badge>
+                    </div>
+
+                    {/* Description */}
+                    <p className="text-sm leading-5 text-mineshaft-400">
+                      Review pending changes and commit them to apply the updates.
+                    </p>
+                  </div>
+
+                  {/* Right Buttons */}
+                  <div className="ml-6 mt-0.5 flex items-center gap-3">
+                    <Button
+                      size="sm"
+                      onClick={() =>
+                        clearAllPendingChanges({ workspaceId, environment, secretPath })
+                      }
+                      isDisabled={totalChangesCount === 0}
+                      variant="outline_bg"
+                      className="px-4 hover:border-red/40 hover:bg-red/[0.1]"
+                    >
+                      Discard
+                    </Button>
+                    <Button
+                      variant="solid"
+                      leftIcon={<FontAwesomeIcon icon={faSave} />}
+                      onClick={() => setIsModalOpen(true)}
+                      isDisabled={totalChangesCount === 0}
+                      className="px-6"
+                    >
+                      Save Changes
+                    </Button>
+                  </div>
+                </div>
               </div>
-
-              {/* Description */}
-              <p className="text-sm leading-5 text-mineshaft-400">
-                Review pending changes and commit them to apply the updates.
-              </p>
-            </div>
-
-            {/* Right Buttons */}
-            <div className="ml-6 mt-0.5 flex items-center gap-3">
-              <Button
-                size="sm"
-                onClick={() => clearAllPendingChanges({ workspaceId, environment, secretPath })}
-                isDisabled={totalChangesCount === 0}
-                variant="outline_bg"
-                className="px-4 hover:border-red/40 hover:bg-red/[0.1]"
-              >
-                Discard
-              </Button>
-              <Button
-                variant="solid"
-                leftIcon={<FontAwesomeIcon icon={faSave} />}
-                onClick={() => setIsModalOpen(true)}
-                isDisabled={totalChangesCount === 0}
-                className="px-6"
-              >
-                Save Changes
-              </Button>
-            </div>
-          </div>
+            </motion.div>
+          </AnimatePresence>
         </div>
       )}
 

From b986ff9a21ec58e4f5f76880a8842f26c835ee24 Mon Sep 17 00:00:00 2001
From: Scott Wilson <scottraywilson@gmail.com>
Date: Wed, 13 Aug 2025 17:51:14 -0700
Subject: [PATCH 2/2] improvement: adjust key

---
 .../SecretDashboardPage/components/CommitForm/CommitForm.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
index 28a10ea92..c3f5e74ee 100644
--- a/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
+++ b/frontend/src/pages/secret-manager/SecretDashboardPage/components/CommitForm/CommitForm.tsx
@@ -306,7 +306,7 @@ export const CommitForm: React.FC<CommitFormProps> = ({
         <div className="fixed bottom-4 left-1/2 z-40 w-full max-w-3xl -translate-x-1/2 self-center lg:left-auto lg:translate-x-0">
           <AnimatePresence mode="wait">
             <motion.div
-              key="select-type-step"
+              key="commit-panel"
               transition={{ duration: 0.3 }}
               initial={{ opacity: 0, translateY: 30 }}
               animate={{ opacity: 1, translateY: 0 }}