refactor: show api key status

source/Options/Form.module.scss

@@ -120,6 +120,12 @@
   color: $red-500;
 }
 
+.validateSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
 .validateButton {
   display: inline-flex;
   align-items: center;
@@ -127,7 +133,6 @@
   gap: 0.5rem;
   padding: 0.625rem 1rem;
   margin-top: 1rem;
-  margin-bottom: 0.25rem;
   font-size: 0.8125rem;
   font-weight: $semibold;
   text-align: center;
@@ -175,6 +180,68 @@
   }
 }
 
+.validationFeedback {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.875rem;
+  border-radius: $radius-md;
+  animation: slideIn $transition-normal ease-out;
+
+  &.error {
+    background-color: rgba($red-500, 0.1);
+    border: 1px solid rgba($red-500, 0.2);
+  }
+
+  &.success {
+    background-color: rgba($green-500, 0.1);
+    border: 1px solid rgba($green-500, 0.2);
+  }
+}
+
+.feedbackIcon {
+  flex-shrink: 0;
+
+  svg {
+    stroke-width: 2;
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .error & svg {
+    stroke: $red-500;
+  }
+
+  .success & svg {
+    stroke: $green-500;
+  }
+}
+
+.feedbackMessage {
+  font-size: 0.8125rem;
+  font-weight: $medium;
+  line-height: 1.4;
+
+  .error & {
+    color: $red-500;
+  }
+
+  .success & {
+    color: $green-500;
+  }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
 .toggleSection {
   display: flex;
   flex-direction: column;

source/Options/Form.tsx

@@ -170,7 +170,7 @@ function Form() {
     setTimeout(() => {
       // Reset status
       setErrored({error: null, message: ''});
-    }, 1000);
+    }, 3000);
   }
 
   return (
@@ -228,7 +228,7 @@ function Form() {
         </div>
       </div>
 
-      <div>
+      <div className={styles.validateSection}>
         <button
           type="submit"
           disabled={submitting || !isFormValid}
@@ -248,6 +248,16 @@ function Form() {
             className={styles.validateIcon}
           />
         </button>
+
+        {!isNull(errored.error) && (
+          <div className={clsx(styles.validationFeedback, errored.error ? styles.error : styles.success)}>
+            <Icon
+              className={styles.feedbackIcon}
+              name={errored.error ? 'cross' : 'tick'}
+            />
+            <span className={styles.feedbackMessage}>{errored.message}</span>
+          </div>
+        )}
       </div>
 
       <div className={styles.toggleSection}>