feat(app): rename providers to connection, enhance UX

src/components/Settings/Sections/Models/AddProviderDialog.tsx

@@ -82,10 +82,10 @@ const AddProvider = ({
 
       setProviders((prev) => [...prev, data]);
 
-      toast.success('Provider added successfully.');
+      toast.success('Connection added successfully.');
     } catch (error) {
       console.error('Error adding provider:', error);
-      toast.error('Failed to add provider.');
+      toast.error('Failed to add connection.');
     } finally {
       setLoading(false);
       setOpen(false);
@@ -99,7 +99,7 @@ const AddProvider = ({
         className="px-3 md:px-4 py-1.5 md:py-2 rounded-lg text-xs sm:text-sm border border-light-200 dark:border-dark-200 text-black dark:text-white bg-light-secondary/50 dark:bg-dark-secondary/50 hover:bg-light-secondary hover:dark:bg-dark-secondary hover:border-light-300 hover:dark:border-dark-300 flex flex-row items-center space-x-1 active:scale-95 transition duration-200"
       >
         <Plus className="w-3.5 h-3.5 md:w-4 md:h-4" />
-        <span>Add Provider</span>
+        <span>Add Connection</span>
       </button>
       <AnimatePresence>
         {open && (
@@ -120,7 +120,7 @@ const AddProvider = ({
                 <form onSubmit={handleSubmit} className="flex flex-col flex-1">
                   <div className="px-6 pt-6 pb-4">
                     <h3 className="text-black/90 dark:text-white/90 font-medium">
-                      Add new provider
+                      Add new connection
                     </h3>
                   </div>
                   <div className="border-t border-light-200 dark:border-dark-200" />
@@ -128,7 +128,7 @@ const AddProvider = ({
                     <div className="flex flex-col space-y-4">
                       <div className="flex flex-col items-start space-y-2">
                         <label className="text-xs text-black/70 dark:text-white/70">
-                          Select provider type
+                          Select connection type
                         </label>
                         <Select
                           value={selectedProvider ?? ''}
@@ -149,13 +149,13 @@ const AddProvider = ({
                         className="flex flex-col items-start space-y-2"
                       >
                         <label className="text-xs text-black/70 dark:text-white/70">
-                          Name*
+                          Connection Name*
                         </label>
                         <input
                           value={name}
                           onChange={(e) => setName(e.target.value)}
                           className="w-full rounded-lg border border-light-200 dark:border-dark-200 bg-light-primary dark:bg-dark-primary px-4 py-3 pr-10 text-sm text-black/80 dark:text-white/80 placeholder:text-black/40 dark:placeholder:text-white/40 focus-visible:outline-none focus-visible:border-light-300 dark:focus-visible:border-dark-300 transition-colors disabled:cursor-not-allowed disabled:opacity-60"
-                          placeholder={'Provider Name'}
+                          placeholder={'e.g., My OpenAI Connection'}
                           type="text"
                           required={true}
                         />
@@ -199,7 +199,7 @@ const AddProvider = ({
                       {loading ? (
                         <Loader2 className="animate-spin" size={16} />
                       ) : (
-                        'Add Provider'
+                        'Add Connection'
                       )}
                     </button>
                   </div>