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/ChannelAccountIdField.tsx

@@ -1,3 +1,5 @@
+import { Hash } from 'lucide-react';
+
 type ChannelAccountIdFieldProps = {
   label: string;
   value: string;
@@ -16,18 +18,23 @@ export default function ChannelAccountIdField({
   disabled,
 }: ChannelAccountIdFieldProps) {
   return (
-    <div className="space-y-2">
-      <div className="text-[13px] font-medium text-[#525866] dark:text-gray-300">{label}</div>
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 text-[13px] font-medium text-foreground/80">
+        <Hash className="h-3.5 w-3.5 text-foreground/55" />
+        <span>{label}</span>
+      </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"
+        className="h-[44px] w-full rounded-[14px] border border-black/10 bg-white px-3 text-[13px] text-foreground outline-none transition-colors placeholder:text-foreground/35 focus:border-blue-500 disabled:cursor-not-allowed disabled:opacity-60 dark:border-white/10 dark:bg-[#101013] dark:text-gray-100"
       />
+
       {helpText ? (
-        <div className="text-[12px] leading-[18px] text-[#99A0AE] dark:text-gray-500">{helpText}</div>
+        <div className="text-[12px] leading-[18px] text-foreground/55 dark:text-gray-500">{helpText}</div>
       ) : null}
     </div>
   );