feat: enhance channel configuration UI and validation

- Updated ChannelInstructionsPanel to include a button for viewing documentation, improving user guidance.
- Enhanced ChannelTokenField to support showing/hiding secret values with appropriate labels and icons.
- Refined ChannelTypeSelector to display connection type icons and improved layout for better user experience.
- Added new messages for documentation links, validation feedback, and secret management in i18n.
- Extended ChannelMeta to include optional documentation URLs for better context on configuration fields.
- Implemented credential validation logic in ChannelsPage to ensure user inputs are validated before saving.
- Introduced ChannelLogo component to display channel icons in the UI.
- Added tests for channel credential validation to ensure proper error handling and feedback.

src/components/channels/ChannelTokenField.tsx

@@ -1,3 +1,5 @@
+import { Eye, EyeOff } from 'lucide-react';
+
 type ChannelTokenFieldProps = {
   label: string;
   value: string;
@@ -5,6 +7,11 @@ type ChannelTokenFieldProps = {
   placeholder?: string;
   helpText?: string;
   disabled?: boolean;
+  showSecret?: boolean;
+  onToggleSecret?: () => void;
+  showSecretLabel?: string;
+  hideSecretLabel?: string;
+  required?: boolean;
 };
 
 export default function ChannelTokenField({
@@ -14,20 +21,49 @@ export default function ChannelTokenField({
   placeholder,
   helpText,
   disabled,
+  showSecret,
+  onToggleSecret,
+  showSecretLabel,
+  hideSecretLabel,
+  required,
 }: ChannelTokenFieldProps) {
+  const isSecretField = typeof showSecret === 'boolean' && typeof onToggleSecret === 'function';
+
   return (
-    <div className="space-y-2">
-      <div className="text-[13px] font-medium text-[#525866] dark:text-gray-300">{label}</div>
-      <input
-        value={value}
-        onChange={(event) => onChange(event.target.value)}
-        placeholder={placeholder}
-        disabled={disabled}
-        autoComplete="off"
-        className="h-[44px] w-full rounded-[12px] border border-[#E5E8EE] bg-white px-3 text-[13px] text-[#171717] outline-none transition-colors placeholder:text-[#99A0AE] focus:border-[#2B7FFF] disabled:cursor-not-allowed disabled:opacity-60 dark:border-[#2a2a2d] dark:bg-[#101013] dark:text-gray-100"
-      />
+    <div className="space-y-3">
+      <label className="block text-[15px] font-semibold text-[#171717] dark:text-[#f3f4f6]">
+        {label}
+        {required ? <span className="ml-1 text-[#d14343]">*</span> : null}
+      </label>
+
+      <div className="flex items-center gap-3">
+        <div className="min-w-0 flex-1">
+          <input
+            value={value}
+            onChange={(event) => onChange(event.target.value)}
+            placeholder={placeholder}
+            disabled={disabled}
+            autoComplete="off"
+            type={isSecretField && !showSecret ? 'password' : 'text'}
+            className="h-[56px] w-full rounded-[18px] border border-black/10 bg-[#fbf8f1] px-5 text-[15px] text-[#171717] outline-none transition-colors placeholder:text-[#98a2b3] focus:border-[#8ea8ff] disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#1a1a1e] dark:text-gray-100 dark:placeholder:text-gray-500"
+          />
+        </div>
+
+        {isSecretField ? (
+          <button
+            type="button"
+            onClick={onToggleSecret}
+            disabled={disabled}
+            className="inline-flex h-[56px] w-[56px] shrink-0 items-center justify-center rounded-[18px] border border-black/10 bg-[#fbf8f1] text-[#667085] transition-colors hover:bg-black/5 hover:text-[#171717] disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#1a1a1e] dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-gray-100"
+            aria-label={showSecret ? (hideSecretLabel ?? 'Hide secret') : (showSecretLabel ?? 'Show secret')}
+          >
+            {showSecret ? <EyeOff className="h-5 w-5" /> : <Eye className="h-5 w-5" />}
+          </button>
+        ) : null}
+      </div>
+
       {helpText ? (
-        <div className="text-[12px] leading-[18px] text-[#99A0AE] dark:text-gray-500">{helpText}</div>
+        <div className="text-[14px] leading-7 text-[#667085] dark:text-gray-400">{helpText}</div>
       ) : null}
     </div>
   );