From 1effbf1313d9ce165d5faecbe29a58e414e19d4e Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Tue, 6 Jan 2026 12:09:34 +0100
Subject: [PATCH] style: refactor dialog components to use OGDialogFooter for
 improved layout consistency

---
 .../ConvoOptions/DeleteButton.tsx             |   5 +-
 .../ConvoOptions/SharedLinkButton.tsx         |  21 +--
 .../SidePanel/Agents/Code/ApiKeyDialog.tsx    | 150 ++++++++++--------
 .../client/src/components/OriginalDialog.tsx  |   2 +-
 4 files changed, 96 insertions(+), 82 deletions(-)

diff --git a/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx b/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
index 17691b4a08..f68049c962 100644
--- a/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/DeleteButton.tsx
@@ -10,6 +10,7 @@ import {
   OGDialogClose,
   OGDialogTitle,
   OGDialogHeader,
+  OGDialogFooter,
   OGDialogContent,
   useToastContext,
 } from '@librechat/client';
@@ -96,7 +97,7 @@ export function DeleteConversationDialog({
           components={{ strong: <strong /> }}
         />
       </div>
-      <div className="flex justify-end gap-4 pt-4">
+      <OGDialogFooter className="pt-4">
         <OGDialogClose asChild>
           <Button aria-label="cancel" variant="outline">
             {localize('com_ui_cancel')}
@@ -105,7 +106,7 @@ export function DeleteConversationDialog({
         <Button variant="destructive" onClick={confirmDelete} disabled={deleteMutation.isLoading}>
           {deleteMutation.isLoading ? <Spinner /> : localize('com_ui_delete')}
         </Button>
-      </div>
+      </OGDialogFooter>
     </OGDialogContent>
   );
 }
diff --git a/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx b/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
index 7c53cab64c..44d896c3cf 100644
--- a/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
+++ b/client/src/components/Conversations/ConvoOptions/SharedLinkButton.tsx
@@ -10,8 +10,9 @@ import {
   TooltipAnchor,
   OGDialogTitle,
   OGDialogHeader,
-  useToastContext,
+  OGDialogFooter,
   OGDialogContent,
+  useToastContext,
 } from '@librechat/client';
 import type { TSharedLinkGetResponse } from 'librechat-data-provider';
 import {
@@ -132,12 +133,6 @@ export default function SharedLinkButton({
   return (
     <>
       <div className="flex gap-2">
-        {!shareId && (
-          <Button disabled={isCreateLoading} variant="submit" onClick={createShareLink}>
-            {!isCreateLoading && localize('com_ui_create_link')}
-            {isCreateLoading && <Spinner className="size-4" />}
-          </Button>
-        )}
         {shareId && (
           <div className="flex items-center gap-2">
             <TooltipAnchor
@@ -194,6 +189,14 @@ export default function SharedLinkButton({
             />
           </div>
         )}
+        {!shareId && (
+          <OGDialogFooter>
+            <Button disabled={isCreateLoading} variant="submit" onClick={createShareLink}>
+              {!isCreateLoading && localize('com_ui_create_link')}
+              {isCreateLoading && <Spinner className="size-4" />}
+            </Button>
+          </OGDialogFooter>
+        )}
         <OGDialog
           open={showDeleteDialog}
           triggerRef={deleteButtonRef}
@@ -214,7 +217,7 @@ export default function SharedLinkButton({
                 </Label>
               </div>
             </div>
-            <div className="flex justify-end gap-4 pt-4">
+            <OGDialogFooter className="pt-4">
               <OGDialogClose asChild>
                 <Button variant="outline">{localize('com_ui_cancel')}</Button>
               </OGDialogClose>
@@ -229,7 +232,7 @@ export default function SharedLinkButton({
                   localize('com_ui_delete')
                 )}
               </Button>
-            </div>
+            </OGDialogFooter>
           </OGDialogContent>
         </OGDialog>
       </div>
diff --git a/client/src/components/SidePanel/Agents/Code/ApiKeyDialog.tsx b/client/src/components/SidePanel/Agents/Code/ApiKeyDialog.tsx
index 70f114ae44..282f17b0d3 100644
--- a/client/src/components/SidePanel/Agents/Code/ApiKeyDialog.tsx
+++ b/client/src/components/SidePanel/Agents/Code/ApiKeyDialog.tsx
@@ -1,9 +1,32 @@
-import { OGDialogTemplate, Input, Button, OGDialog } from '@librechat/client';
+import {
+  Button,
+  OGDialog,
+  SecretInput,
+  OGDialogClose,
+  OGDialogTitle,
+  OGDialogFooter,
+  OGDialogHeader,
+  OGDialogContent,
+  OGDialogDescription,
+} from '@librechat/client';
 import type { UseFormRegister, UseFormHandleSubmit } from 'react-hook-form';
 import type { ApiKeyFormData } from '~/common';
 import type { RefObject } from 'react';
 import { useLocalize } from '~/hooks';
 
+const languageIcons = [
+  'python.svg',
+  'nodedotjs.svg',
+  'tsnode.svg',
+  'rust.svg',
+  'go.svg',
+  'c.svg',
+  'cplusplus.svg',
+  'php.svg',
+  'fortran.svg',
+  'r.svg',
+];
+
 export default function ApiKeyDialog({
   isOpen,
   onSubmit,
@@ -28,18 +51,6 @@ export default function ApiKeyDialog({
   triggerRefs?: RefObject<HTMLInputElement | HTMLButtonElement>[];
 }) {
   const localize = useLocalize();
-  const languageIcons = [
-    'python.svg',
-    'nodedotjs.svg',
-    'tsnode.svg',
-    'rust.svg',
-    'go.svg',
-    'c.svg',
-    'cplusplus.svg',
-    'php.svg',
-    'fortran.svg',
-    'r.svg',
-  ];
 
   return (
     <OGDialog
@@ -48,70 +59,69 @@ export default function ApiKeyDialog({
       triggerRef={triggerRef}
       triggerRefs={triggerRefs}
     >
-      <OGDialogTemplate
-        className="w-11/12 sm:w-[450px]"
-        title=""
-        main={
-          <>
-            <div className="mb-4 text-center font-medium">
-              {localize('com_ui_librechat_code_api_title')}
-            </div>
-            <div className="mb-4 text-center text-sm">
-              {localize('com_ui_librechat_code_api_subtitle')}
-            </div>
-            {/* Language Icons Stack */}
-            <div className="mb-6">
-              <div className="mx-auto mb-4 flex max-w-[400px] flex-wrap justify-center gap-3">
-                {languageIcons.map((icon) => (
-                  <div key={icon} className="h-6 w-6">
-                    <img
-                      src={`assets/${icon}`}
-                      alt=""
-                      className="h-full w-full object-contain opacity-[0.85] dark:invert"
-                    />
-                  </div>
-                ))}
+      <OGDialogContent
+        showCloseButton={false}
+        className="w-11/12 max-w-md border-none bg-surface-primary"
+      >
+        <OGDialogHeader className="gap-2 py-2">
+          <OGDialogTitle className="text-center text-lg font-semibold">
+            {localize('com_ui_librechat_code_api_title')}
+          </OGDialogTitle>
+          <div className="mx-auto flex max-w-[350px] flex-wrap justify-center gap-3">
+            {languageIcons.map((icon) => (
+              <div key={icon} className="size-6">
+                <img
+                  src={`assets/${icon}`}
+                  alt=""
+                  className="size-full object-contain opacity-85 dark:invert"
+                />
               </div>
-              <a
-                href="https://code.librechat.ai/pricing"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="block text-center text-[15px] font-medium text-blue-500 underline decoration-1 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
-              >
-                {localize('com_ui_librechat_code_api_key')}
-              </a>
-            </div>
-            <form onSubmit={handleSubmit(onSubmit)}>
-              <Input
-                type="password"
-                placeholder={localize('com_ui_enter_api_key')}
-                autoComplete="one-time-code"
-                readOnly={true}
-                onFocus={(e) => (e.target.readOnly = false)}
-                {...register('apiKey', { required: true })}
-              />
-            </form>
-          </>
-        }
-        selection={{
-          selectHandler: handleSubmit(onSubmit),
-          selectClasses: 'bg-green-500 hover:bg-green-600 text-white',
-          selectText: localize('com_ui_save'),
-        }}
-        buttons={
-          isUserProvided &&
-          isToolAuthenticated && (
+            ))}
+          </div>
+          <OGDialogDescription className="text-center">
+            {localize('com_ui_librechat_code_api_subtitle')}
+          </OGDialogDescription>
+        </OGDialogHeader>
+
+        <div className="space-y-4">
+          <a
+            href="https://code.librechat.ai/pricing"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="block text-center text-sm font-medium text-blue-500 underline decoration-1 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-300"
+          >
+            {localize('com_ui_librechat_code_api_key')}
+          </a>
+
+          <form onSubmit={handleSubmit(onSubmit)}>
+            <SecretInput
+              placeholder={localize('com_ui_enter_api_key')}
+              {...register('apiKey', { required: true })}
+            />
+          </form>
+        </div>
+
+        <OGDialogFooter className="mt-6">
+          <OGDialogClose asChild>
+            <Button variant="outline" className="h-10">
+              {localize('com_ui_cancel')}
+            </Button>
+          </OGDialogClose>
+          {isUserProvided && isToolAuthenticated && (
             <Button
+              variant="destructive"
               onClick={onRevoke}
-              className="bg-destructive text-white transition-all duration-200 hover:bg-destructive/80"
+              className="h-10"
               aria-label={localize('com_ui_revoke')}
             >
               {localize('com_ui_revoke')}
             </Button>
-          )
-        }
-        showCancelButton={true}
-      />
+          )}
+          <Button variant="submit" onClick={handleSubmit(onSubmit)} className="h-10">
+            {localize('com_ui_save')}
+          </Button>
+        </OGDialogFooter>
+      </OGDialogContent>
     </OGDialog>
   );
 }
diff --git a/packages/client/src/components/OriginalDialog.tsx b/packages/client/src/components/OriginalDialog.tsx
index e870cbc8c0..dd5772c126 100644
--- a/packages/client/src/components/OriginalDialog.tsx
+++ b/packages/client/src/components/OriginalDialog.tsx
@@ -168,7 +168,7 @@ DialogHeader.displayName = 'DialogHeader';
 
 const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    className={cn('flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
     {...props}
   />
 );