refactor: updated remove button ux

Signed-off-by: Abhijay007 <Abhijay007j@gmail.com>

Author: Abhijay007

ui/desktop/src/components/settings/dictation/DictationSettings.tsx

@@ -14,7 +14,6 @@ export const DictationSettings = () => {
   );
   const [apiKey, setApiKey] = useState('');
   const [isEditingKey, setIsEditingKey] = useState(false);
-  const [keyValidationError, setKeyValidationError] = useState('');
   const { read, upsert, remove } = useConfig();
 
   useEffect(() => {
@@ -58,49 +57,33 @@ export const DictationSettings = () => {
     if (!providerConfig || providerConfig.uses_provider_config) return;
 
     const trimmedKey = apiKey.trim();
-    if (!trimmedKey) {
-      setKeyValidationError('API key is required');
-      return;
-    }
+    if (!trimmedKey) return;
 
-    try {
-      const keyName = providerConfig.config_key!;
-      await upsert(keyName, trimmedKey, true);
-      setApiKey('');
-      setKeyValidationError('');
-      setIsEditingKey(false);
+    const keyName = providerConfig.config_key!;
+    await upsert(keyName, trimmedKey, true);
+    setApiKey('');
+    setIsEditingKey(false);
 
-      const audioConfig = await getDictationConfig();
-      setProviderStatuses(audioConfig.data || {});
-    } catch (error) {
-      console.error('Error saving API key:', error);
-      setKeyValidationError('Failed to save API key');
-    }
+    const audioConfig = await getDictationConfig();
+    setProviderStatuses(audioConfig.data || {});
   };
 
   const handleRemoveKey = async () => {
     if (!provider) return;
     const providerConfig = providerStatuses[provider];
     if (!providerConfig || providerConfig.uses_provider_config) return;
 
-    try {
-      const keyName = providerConfig.config_key!;
-      await remove(keyName, true);
-      setApiKey('');
-      setKeyValidationError('');
-      setIsEditingKey(false);
+    const keyName = providerConfig.config_key!;
+    await remove(keyName, true);
+    setApiKey('');
+    setIsEditingKey(false);
 
-      const audioConfig = await getDictationConfig();
-      setProviderStatuses(audioConfig.data || {});
-    } catch (error) {
-      console.error('Error removing API key:', error);
-      setKeyValidationError('Failed to remove API key');
-    }
+    const audioConfig = await getDictationConfig();
+    setProviderStatuses(audioConfig.data || {});
   };
 
   const handleCancelEdit = () => {
     setApiKey('');
-    setKeyValidationError('');
     setIsEditingKey(false);
   };
 
@@ -192,37 +175,33 @@ export const DictationSettings = () => {
               </div>
 
               {!isEditingKey ? (
-                <Button variant="outline" size="sm" onClick={() => setIsEditingKey(true)}>
-                  {providerStatuses[provider]?.configured ? 'Update API Key' : 'Add API Key'}
-                </Button>
+                <div className="flex gap-2 flex-wrap">
+                  <Button variant="outline" size="sm" onClick={() => setIsEditingKey(true)}>
+                    {providerStatuses[provider]?.configured ? 'Update API Key' : 'Add API Key'}
+                  </Button>
+                  {providerStatuses[provider]?.configured && (
+                    <Button variant="destructive" size="sm" onClick={handleRemoveKey}>
+                      Remove API Key
+                    </Button>
+                  )}
+                </div>
               ) : (
                 <div className="space-y-2">
                   <Input
                     type="password"
                     value={apiKey}
-                    onChange={(e) => {
-                      setApiKey(e.target.value);
-                      if (keyValidationError) setKeyValidationError('');
-                    }}
+                    onChange={(e) => setApiKey(e.target.value)}
                     placeholder="Enter your API key"
                     className="max-w-md"
                     autoFocus
                   />
-                  {keyValidationError && (
-                    <p className="text-xs text-red-600 mt-1">{keyValidationError}</p>
-                  )}
                   <div className="flex gap-2">
                     <Button size="sm" onClick={handleSaveKey}>
                       Save
                     </Button>
                     <Button variant="outline" size="sm" onClick={handleCancelEdit}>
                       Cancel
                     </Button>
-                    {providerStatuses[provider]?.configured && (
-                      <Button variant="destructive" size="sm" onClick={handleRemoveKey}>
-                        Remove
-                      </Button>
-                    )}
                   </div>
                 </div>
               )}