admin/DeskClaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(ui): refactor style ui & add Models page with provider settings (#379)

Browse Source
This commit is contained in:
DigHuang
2026-03-10 11:39:56 +08:00
committed by GitHub
Unverified
parent 3d664c017a
commit 905ce02b0b
21 changed files with 2277 additions and 2204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

477
src/pages/Channels/index.tsx
View File

@@ -4,12 +4,8 @@
*/
import { useState, useEffect, useCallback, useRef } from 'react';
import {
Plus,
Radio,
RefreshCw,
Trash2,
Power,
PowerOff,
QrCode,
Loader2,
X,
@@ -31,11 +27,11 @@ import { Badge } from '@/components/ui/badge';
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
import { useChannelsStore } from '@/stores/channels';
import { useGatewayStore } from '@/stores/gateway';
import { StatusBadge, type Status } from '@/components/common/StatusBadge';
import { LoadingSpinner } from '@/components/common/LoadingSpinner';
import { hostApiFetch } from '@/lib/host-api';
import { subscribeHostEvent } from '@/lib/host-events';
import { invokeIpc } from '@/lib/api-client';
import { cn } from '@/lib/utils';
import {
CHANNEL_ICONS,
CHANNEL_NAMES,
@@ -49,6 +45,12 @@ import {
import { toast } from 'sonner';
import { useTranslation } from 'react-i18next';
import telegramIcon from '@/assets/channels/telegram.svg';
import discordIcon from '@/assets/channels/discord.svg';
import whatsappIcon from '@/assets/channels/whatsapp.svg';
import dingtalkIcon from '@/assets/channels/dingtalk.svg';
import feishuIcon from '@/assets/channels/feishu.svg';
export function Channels() {
const { t } = useTranslation('channels');
const { channels, loading, error, fetchChannels, deleteChannel } = useChannelsStore();
@@ -99,171 +101,131 @@ export function Channels() {
// Get channel types to display
const displayedChannelTypes = getPrimaryChannels();
// Connected/disconnected channel counts
const connectedCount = channels.filter((c) => c.status === 'connected').length;
if (loading) {
return (
<div className="flex h-96 items-center justify-center">
<div className="flex flex-col -m-6 dark:bg-background min-h-[calc(100vh-2.5rem)] items-center justify-center">
<LoadingSpinner size="lg" />
</div>
);
}
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold">{t('title')}</h1>
<p className="text-muted-foreground">
{t('subtitle')}
</p>
<div className="flex flex-col -m-6 dark:bg-background h-[calc(100vh-2.5rem)] overflow-hidden">
<div className="w-full max-w-5xl mx-auto flex flex-col h-full p-10 pt-16">
{/* Header */}
<div className="flex flex-col md:flex-row md:items-start justify-between mb-12 shrink-0 gap-4">
<div>
<h1 className="text-5xl md:text-6xl font-serif text-foreground mb-3 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
{t('title', 'Messaging Channels')}
</h1>
<p className="text-[17px] text-foreground/80 font-medium">
{t('subtitle', 'Manage your messaging channels and connections')}
</p>
</div>
<div className="flex items-center gap-3 md:mt-2">
<Button
variant="outline"
onClick={fetchChannels}
className="h-9 text-[13px] font-medium rounded-full px-4 border-black/10 dark:border-white/10 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 shadow-none text-foreground/80 hover:text-foreground transition-colors"
>
<RefreshCw className="h-3.5 w-3.5 mr-2" />
{t('refresh')}
</Button>
</div>
</div>
<div className="flex gap-2">
<Button variant="outline" onClick={fetchChannels}>
<RefreshCw className="h-4 w-4 mr-2" />
{t('refresh')}
</Button>
<Button onClick={() => setShowAddDialog(true)}>
<Plus className="h-4 w-4 mr-2" />
{t('addChannel')}
</Button>
</div>
</div>
{/* Stats */}
<div className="grid grid-cols-3 gap-4">
<Card>
<CardContent className="pt-6">
<div className="flex items-center gap-4">
<div className="rounded-full bg-primary/10 p-3">
<Radio className="h-6 w-6 text-primary" />
</div>
<div>
<p className="text-2xl font-bold">{channels.length}</p>
<p className="text-sm text-muted-foreground">{t('stats.total')}</p>
{/* Content Area */}
<div className="flex-1 overflow-y-auto pr-2 pb-10 min-h-0 -mr-2">
{/* Gateway Warning */}
{gatewayStatus.state !== 'running' && (
<div className="mb-8 p-4 rounded-xl border border-yellow-500/50 bg-yellow-500/10 flex items-center gap-3">
<AlertCircle className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
<span className="text-yellow-700 dark:text-yellow-400 text-sm font-medium">
{t('gatewayWarning')}
</span>
</div>
)}
{/* Error Display */}
{error && (
<div className="mb-8 p-4 rounded-xl border border-destructive/50 bg-destructive/10 flex items-center gap-3">
<AlertCircle className="h-5 w-5 text-destructive" />
<span className="text-destructive text-sm font-medium">
{error}
</span>
</div>
)}
{/* Available Channels (Configured) */}
{channels.length > 0 && (
<div className="mb-12">
<h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
Available Channels
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
{channels.map((channel) => (
<ChannelCard
key={channel.id}
channel={channel}
onDelete={() => setChannelToDelete({ id: channel.id })}
/>
))}
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="pt-6">
<div className="flex items-center gap-4">
<div className="rounded-full bg-green-100 p-3 dark:bg-green-900">
<Power className="h-6 w-6 text-green-600" />
</div>
<div>
<p className="text-2xl font-bold">{connectedCount}</p>
<p className="text-sm text-muted-foreground">{t('stats.connected')}</p>
</div>
</div>
</CardContent>
</Card>
<Card>
<CardContent className="pt-6">
<div className="flex items-center gap-4">
<div className="rounded-full bg-slate-100 p-3 dark:bg-slate-800">
<PowerOff className="h-6 w-6 text-slate-600" />
</div>
<div>
<p className="text-2xl font-bold">{channels.length - connectedCount}</p>
<p className="text-sm text-muted-foreground">{t('stats.disconnected')}</p>
</div>
</div>
</CardContent>
</Card>
</div>
)}
{/* Gateway Warning */}
{gatewayStatus.state !== 'running' && (
<Card className="border-yellow-500 bg-yellow-50 dark:bg-yellow-900/10">
<CardContent className="py-4 flex items-center gap-3">
<AlertCircle className="h-5 w-5 text-yellow-500" />
<span className="text-yellow-700 dark:text-yellow-400">
{t('gatewayWarning')}
</span>
</CardContent>
</Card>
)}
{/* Error Display */}
{error && (
<Card className="border-destructive">
<CardContent className="py-4 text-destructive">
{error}
</CardContent>
</Card>
)}
{/* Configured Channels */}
{channels.length > 0 && (
<Card>
<CardHeader>
<CardTitle>{t('configured')}</CardTitle>
<CardDescription>{t('configuredDesc')}</CardDescription>
</CardHeader>
<CardContent>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
{channels.map((channel) => (
<ChannelCard
key={channel.id}
channel={channel}
onDelete={() => setChannelToDelete({ id: channel.id })}
/>
))}
</div>
</CardContent>
</Card>
)}
{/* Available Channels */}
<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div>
<CardTitle>{t('available')}</CardTitle>
<CardDescription>
{t('availableDesc')}
</CardDescription>
{/* Supported Channels (Not yet configured) */}
<div className="mb-8">
<h2 className="text-3xl font-serif text-foreground mb-6 font-normal tracking-tight" style={{ fontFamily: 'Georgia, Cambria, "Times New Roman", Times, serif' }}>
Supported Channels
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
{displayedChannelTypes.map((type) => {
const meta = CHANNEL_META[type];
const isConfigured = channels.some(c => c.type === type) || configuredTypes.includes(type);
// Hide already configured channels from "Supported Channels" section
if (isConfigured) return null;
return (
<button
key={type}
onClick={() => {
setSelectedChannelType(type);
setShowAddDialog(true);
}}
className={cn(
"group flex items-start gap-4 p-4 rounded-2xl transition-all text-left border relative overflow-hidden bg-transparent border-transparent hover:bg-black/5 dark:hover:bg-white/5"
)}
>
<div className="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-foreground bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-full shadow-sm mb-3">
<ChannelLogo type={type} />
</div>
<div className="flex flex-col flex-1 min-w-0 py-0.5 mt-1">
<div className="flex items-center gap-2 mb-1">
<h3 className="text-[16px] font-semibold text-foreground truncate">{meta.name}</h3>
{meta.isPlugin && (
<Badge variant="secondary" className="font-mono text-[10px] font-medium px-2 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] border-0 shadow-none text-foreground/70">
{t('pluginBadge', 'Plugin')}
</Badge>
)}
</div>
<p className="text-[13.5px] text-muted-foreground line-clamp-2 leading-[1.5]">
{t(meta.description.replace('channels:', ''))}
</p>
</div>
</button>
);
})}
</div>
</div>
</CardHeader>
<CardContent>
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
{displayedChannelTypes.map((type) => {
const meta = CHANNEL_META[type];
const isConfigured = configuredTypes.includes(type);
return (
<button
key={type}
className={`p-4 rounded-lg border hover:bg-accent transition-colors text-left relative ${isConfigured ? 'border-green-500/50 bg-green-500/5' : ''}`}
onClick={() => {
setSelectedChannelType(type);
setShowAddDialog(true);
}}
>
<span className="text-3xl">{meta.icon}</span>
<p className="font-medium mt-2">{meta.name}</p>
<p className="text-xs text-muted-foreground mt-1 line-clamp-2">
{meta.description}
</p>
{isConfigured && (
<Badge className="absolute top-2 right-2 text-xs bg-green-600 hover:bg-green-600">
{t('configuredBadge')}
</Badge>
)}
{!isConfigured && meta.isPlugin && (
<Badge variant="secondary" className="absolute top-2 right-2 text-xs">
{t('pluginBadge')}
</Badge>
)}
</button>
);
})}
</div>
</CardContent>
</Card>
</div>
</div>
{/* Add Channel Dialog */}
{showAddDialog && (
@@ -293,6 +255,9 @@ export function Channels() {
onConfirm={async () => {
if (channelToDelete) {
await deleteChannel(channelToDelete.id);
// Immediately update configuredTypes state so it disappears from available and appears in supported
const channelType = channelToDelete.id.split('-')[0];
setConfiguredTypes((prev) => prev.filter((type) => type !== channelType));
setChannelToDelete(null);
}
}}
@@ -302,6 +267,24 @@ export function Channels() {
);
}
// ==================== Channel Logo Component ====================
function ChannelLogo({ type }: { type: ChannelType }) {
switch (type) {
case 'telegram':
return <img src={telegramIcon} alt="Telegram" className="w-[22px] h-[22px] dark:invert" />;
case 'discord':
return <img src={discordIcon} alt="Discord" className="w-[22px] h-[22px] dark:invert" />;
case 'whatsapp':
return <img src={whatsappIcon} alt="WhatsApp" className="w-[22px] h-[22px] dark:invert" />;
case 'dingtalk':
return <img src={dingtalkIcon} alt="DingTalk" className="w-[22px] h-[22px] dark:invert" />;
case 'feishu':
return <img src={feishuIcon} alt="Feishu" className="w-[22px] h-[22px] dark:invert" />;
default:
return <span className="text-[22px]">{CHANNEL_ICONS[type] || '💬'}</span>;
}
}
// ==================== Channel Card Component ====================
interface ChannelCardProps {
@@ -310,40 +293,59 @@ interface ChannelCardProps {
}
function ChannelCard({ channel, onDelete }: ChannelCardProps) {
const { t } = useTranslation('channels');
const meta = CHANNEL_META[channel.type];
return (
<Card>
<CardHeader className="pb-3">
<div className="flex items-start justify-between">
<div className="flex items-center gap-3">
<span className="text-2xl">
{CHANNEL_ICONS[channel.type]}
</span>
<div>
<CardTitle className="text-base">{channel.name}</CardTitle>
<CardDescription className="text-xs">
{CHANNEL_NAMES[channel.type]}
</CardDescription>
</div>
<div className="group flex items-start gap-4 p-4 rounded-2xl transition-all text-left border relative overflow-hidden bg-transparent border-transparent hover:bg-black/5 dark:hover:bg-white/5">
<div className="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-foreground bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-full shadow-sm mb-3">
<ChannelLogo type={channel.type} />
</div>
<div className="flex flex-col flex-1 min-w-0 py-0.5 mt-1">
<div className="flex items-center justify-between gap-2 mb-1">
<div className="flex items-center gap-2 min-w-0">
<h3 className="text-[16px] font-semibold text-foreground truncate">{channel.name}</h3>
{meta?.isPlugin && (
<Badge variant="secondary" className="font-mono text-[10px] font-medium px-2 py-0.5 rounded-full bg-black/[0.04] dark:bg-white/[0.08] border-0 shadow-none text-foreground/70">
{t('pluginBadge', 'Plugin')}
</Badge>
)}
<div
className={cn(
"w-2 h-2 rounded-full shrink-0",
channel.status === 'connected' ? "bg-green-500" :
channel.status === 'connecting' ? "bg-yellow-500 animate-pulse" :
channel.status === 'error' ? "bg-destructive" :
"bg-muted-foreground"
)}
title={channel.status}
/>
</div>
<StatusBadge status={channel.status as Status} />
</div>
</CardHeader>
<CardContent className="pt-0">
{channel.error && (
<p className="text-xs text-destructive mb-3">{channel.error}</p>
)}
<div className="flex gap-2">
<Button
variant="ghost"
size="sm"
className="text-destructive hover:text-destructive"
onClick={onDelete}
size="icon"
className="opacity-0 group-hover:opacity-100 h-7 w-7 text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-all shrink-0 -mr-2"
onClick={(e) => {
e.stopPropagation();
onDelete();
}}
>
<Trash2 className="h-4 w-4" />
</Button>
</div>
</CardContent>
</Card>
{channel.error ? (
<p className="text-[13.5px] text-destructive line-clamp-2 leading-[1.5]">
{channel.error}
</p>
) : (
<p className="text-[13.5px] text-muted-foreground line-clamp-2 leading-[1.5]">
{meta ? t(meta.description.replace('channels:', '')) : CHANNEL_NAMES[channel.type]}
</p>
)}
</div>
</div>
);
}
@@ -638,7 +640,7 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
const openDocs = () => {
if (meta?.docsUrl) {
const url = t(meta.docsUrl);
const url = t(meta.docsUrl.replace('channels:', ''));
try {
if (window.electron?.openExternal) {
window.electron.openExternal(url);
@@ -674,27 +676,27 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
return (
<div className="fixed inset-0 z-50 bg-black/50 flex items-center justify-center p-4">
<Card className="w-full max-w-lg max-h-[90vh] overflow-y-auto">
<CardHeader className="flex flex-row items-start justify-between">
<Card className="w-full max-w-lg max-h-[90vh] flex flex-col rounded-3xl border-0 shadow-2xl bg-[#f3f1e9] dark:bg-[#1a1a19] overflow-hidden">
<CardHeader className="flex flex-row items-start justify-between pb-2 shrink-0">
<div>
<CardTitle>
<CardTitle className="text-2xl font-serif font-normal">
{selectedType
? isExistingConfig
? t('dialog.updateTitle', { name: CHANNEL_NAMES[selectedType] })
: t('dialog.configureTitle', { name: CHANNEL_NAMES[selectedType] })
: t('dialog.addTitle')}
</CardTitle>
<CardDescription>
<CardDescription className="text-[15px] mt-1 text-foreground/70">
{selectedType && isExistingConfig
? t('dialog.existingDesc')
: meta ? t(meta.description) : t('dialog.selectDesc')}
: meta ? t(meta.description.replace('channels:', '')) : t('dialog.selectDesc')}
</CardDescription>
</div>
<Button variant="ghost" size="icon" onClick={onClose}>
<Button variant="ghost" size="icon" onClick={onClose} className="rounded-full h-8 w-8 -mr-2 -mt-2 text-muted-foreground hover:text-foreground hover:bg-black/5 dark:hover:bg-white/5">
<X className="h-4 w-4" />
</Button>
</CardHeader>
<CardContent className="space-y-4">
<CardContent className="space-y-6 pt-4 overflow-y-auto flex-1 p-6">
{!selectedType ? (
// Channel type selection
<div className="grid grid-cols-2 gap-4">
@@ -704,11 +706,13 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
<button
key={type}
onClick={() => onSelectType(type)}
className="p-4 rounded-lg border hover:bg-accent transition-colors text-left"
className="p-4 rounded-2xl border border-black/5 dark:border-white/5 hover:bg-black/5 dark:hover:bg-white/5 transition-all text-left group"
>
<span className="text-3xl">{channelMeta.icon}</span>
<p className="font-medium mt-2">{channelMeta.name}</p>
<p className="text-xs text-muted-foreground mt-1">
<div className="h-[46px] w-[46px] shrink-0 flex items-center justify-center text-foreground bg-black/5 dark:bg-white/5 border border-black/5 dark:border-white/10 rounded-full shadow-sm mb-3 group-hover:scale-105 transition-transform">
<ChannelLogo type={type} />
</div>
<p className="font-semibold text-[15px]">{channelMeta.name}</p>
<p className="text-[13px] text-muted-foreground mt-0.5">
{channelMeta.connectionType === 'qr' ? t('dialog.qrCode') : t('dialog.token')}
</p>
</button>
@@ -717,75 +721,76 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
</div>
) : qrCode ? (
// QR Code display
<div className="text-center space-y-4">
<div className="bg-white p-4 rounded-lg inline-block shadow-sm border">
<div className="text-center space-y-5 py-4">
<div className="bg-white p-5 rounded-3xl inline-block shadow-sm border border-black/5">
{qrCode.startsWith('data:image') ? (
<img src={qrCode} alt="Scan QR Code" className="w-64 h-64 object-contain" />
) : (
<div className="w-64 h-64 bg-gray-100 flex items-center justify-center">
<QrCode className="h-32 w-32 text-gray-400" />
<div className="w-64 h-64 bg-gray-50 rounded-2xl flex items-center justify-center">
<QrCode className="h-24 w-24 text-gray-300" />
</div>
)}
</div>
<p className="text-sm text-muted-foreground">
<p className="text-[14px] text-muted-foreground font-medium">
{t('dialog.scanQR', { name: meta?.name })}
</p>
<div className="flex justify-center gap-2">
<div className="flex justify-center gap-2 pt-2">
<Button variant="outline" onClick={() => {
setQrCode(null);
handleConnect(); // Retry
}}>
}} className="rounded-full px-6 h-[42px] text-[13px] font-semibold border-black/20 dark:border-white/20 bg-transparent hover:bg-black/5 dark:hover:bg-white/5 text-foreground/80 hover:text-foreground shadow-sm">
{t('dialog.refreshCode')}
</Button>
</div>
</div>
) : loadingConfig ? (
// Loading saved config
<div className="flex items-center justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
<span className="ml-2 text-sm text-muted-foreground">{t('dialog.loadingConfig')}</span>
<div className="flex flex-col items-center justify-center py-12 space-y-4">
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground/50" />
<span className="text-[14px] font-medium text-muted-foreground">{t('dialog.loadingConfig')}</span>
</div>
) : (
// Connection form
<div className="space-y-4">
{/* Existing config hint */}
{isExistingConfig && (
<div className="bg-blue-500/10 text-blue-600 dark:text-blue-400 p-3 rounded-lg text-sm flex items-center gap-2">
<CheckCircle className="h-4 w-4 shrink-0" />
<div className="bg-[#eeece3] dark:bg-[#151514] text-foreground/80 font-medium p-4 rounded-2xl text-[13.5px] flex items-center gap-2.5 shadow-sm border border-black/5 dark:border-white/5">
<CheckCircle className="h-4 w-4 shrink-0 text-blue-500" />
<span>{t('dialog.existingHint')}</span>
</div>
)}
{/* Instructions */}
<div className="bg-muted p-4 rounded-lg space-y-3">
<div className="bg-[#eeece3] dark:bg-[#151514] p-5 rounded-2xl space-y-3 shadow-sm border border-black/5 dark:border-white/5">
<div className="flex items-center justify-between">
<p className="font-medium text-sm">{t('dialog.howToConnect')}</p>
<p className="font-semibold text-[14px] text-foreground/80">{t('dialog.howToConnect')}</p>
<Button
variant="link"
className="p-0 h-auto text-sm"
className="p-0 h-auto text-[13px] text-muted-foreground hover:text-foreground"
onClick={openDocs}
>
<BookOpen className="h-3 w-3 mr-1" />
<BookOpen className="h-3.5 w-3.5 mr-1.5" />
{t('dialog.viewDocs')}
<ExternalLink className="h-3 w-3 ml-1" />
</Button>
</div>
<ol className="list-decimal list-inside text-sm text-muted-foreground space-y-1">
<ol className="list-decimal list-inside text-[13.5px] text-muted-foreground space-y-1.5 leading-relaxed">
{meta?.instructions.map((instruction, i) => (
<li key={i}>{t(instruction)}</li>
<li key={i}>{t(instruction.replace('channels:', ''))}</li>
))}
</ol>
</div>
{/* Channel name */}
<div className="space-y-2">
<Label htmlFor="name">{t('dialog.channelName')}</Label>
<div className="space-y-2.5">
<Label htmlFor="name" className="text-[14px] text-foreground/80 font-bold">{t('dialog.channelName')}</Label>
<Input
ref={firstInputRef}
id="name"
placeholder={t('dialog.channelNamePlaceholder', { name: meta?.name })}
value={channelName}
onChange={(e) => setChannelName(e.target.value)}
className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"
/>
</div>
@@ -803,35 +808,35 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
{/* Validation Results */}
{validationResult && (
<div className={`p-4 rounded-lg text-sm ${validationResult.valid ? 'bg-green-500/10 text-green-600 dark:text-green-400' : 'bg-destructive/10 text-destructive'
<div className={`p-4 rounded-2xl text-[13.5px] shadow-sm border border-black/5 dark:border-white/5 ${validationResult.valid ? 'bg-[#eeece3] dark:bg-[#151514] text-foreground/80' : 'bg-destructive/10 text-destructive'
}`}>
<div className="flex items-start gap-2">
<div className="flex items-start gap-2.5">
{validationResult.valid ? (
<CheckCircle className="h-4 w-4 mt-0.5 shrink-0" />
<CheckCircle className="h-4 w-4 mt-0.5 shrink-0 text-green-500" />
) : (
<AlertCircle className="h-4 w-4 mt-0.5 shrink-0" />
)}
<div className="min-w-0">
<h4 className="font-medium mb-1">
<h4 className="font-bold mb-1">
{validationResult.valid ? t('dialog.credentialsVerified') : t('dialog.validationFailed')}
</h4>
{validationResult.errors.length > 0 && (
<ul className="list-disc list-inside space-y-0.5">
<ul className="list-disc list-inside space-y-0.5 font-medium">
{validationResult.errors.map((err, i) => (
<li key={i}>{err}</li>
))}
</ul>
)}
{validationResult.valid && validationResult.warnings.length > 0 && (
<div className="mt-1 text-green-600 dark:text-green-400 space-y-0.5">
<div className="mt-1 text-green-600 dark:text-green-500 space-y-0.5 font-medium">
{validationResult.warnings.map((info, i) => (
<p key={i} className="text-xs">{info}</p>
<p key={i} className="text-[13px]">{info}</p>
))}
</div>
)}
{!validationResult.valid && validationResult.warnings.length > 0 && (
<div className="mt-2 text-yellow-600 dark:text-yellow-500">
<p className="font-medium text-xs uppercase mb-1">{t('dialog.warnings')}</p>
<div className="mt-2 text-yellow-600 dark:text-yellow-500 font-medium">
<p className="font-bold text-[12px] uppercase mb-1">{t('dialog.warnings')}</p>
<ul className="list-disc list-inside space-y-0.5">
{validationResult.warnings.map((warn, i) => (
<li key={i}>{warn}</li>
@@ -844,19 +849,17 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
</div>
)}
<Separator />
<Separator className="bg-black/10 dark:bg-white/10" />
<div className="flex justify-between">
<Button variant="outline" onClick={() => onSelectType(null)}>
{t('dialog.back')}
</Button>
<div className="flex gap-2">
<div className="flex justify-end pt-4">
<div className="flex gap-3">
{/* Validation Button - Only for token-based channels for now */}
{meta?.connectionType === 'token' && (
<Button
variant="secondary"
onClick={handleValidate}
disabled={validating}
className="rounded-full px-6 h-[42px] text-[13px] font-semibold bg-black/5 dark:bg-white/5 hover:bg-black/10 dark:hover:bg-white/10 text-foreground shadow-sm"
>
{validating ? (
<>
@@ -874,6 +877,7 @@ function AddChannelDialog({ selectedType, onSelectType, onClose, onChannelAdded
<Button
onClick={handleConnect}
disabled={connecting || !isFormValid()}
className="rounded-full px-6 h-[42px] text-[13px] font-semibold bg-[#0a84ff] hover:bg-[#007aff] text-white shadow-sm border border-transparent transition-all"
>
{connecting ? (
<>
@@ -914,19 +918,19 @@ function ConfigField({ field, value, onChange, showSecret, onToggleSecret }: Con
const isPassword = field.type === 'password';
return (
<div className="space-y-2">
<Label htmlFor={field.key}>
{t(field.label)}
<div className="space-y-2.5">
<Label htmlFor={field.key} className="text-[14px] text-foreground/80 font-bold">
{t(field.label.replace('channels:', ''))}
{field.required && <span className="text-destructive ml-1">*</span>}
</Label>
<div className="flex gap-2">
<Input
id={field.key}
type={isPassword && !showSecret ? 'password' : 'text'}
placeholder={field.placeholder ? t(field.placeholder) : undefined}
placeholder={field.placeholder ? t(field.placeholder.replace('channels:', '')) : undefined}
value={value}
onChange={(e) => onChange(e.target.value)}
className="font-mono text-sm"
className="h-[44px] rounded-xl font-mono text-[13px] bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 focus-visible:ring-2 focus-visible:ring-blue-500/50 focus-visible:border-blue-500 shadow-sm transition-all text-foreground placeholder:text-foreground/40"
/>
{isPassword && (
<Button
@@ -934,18 +938,19 @@ function ConfigField({ field, value, onChange, showSecret, onToggleSecret }: Con
variant="outline"
size="icon"
onClick={onToggleSecret}
className="h-[44px] w-[44px] rounded-xl bg-[#eeece3] dark:bg-[#151514] border-black/10 dark:border-white/10 text-muted-foreground hover:text-foreground shrink-0 shadow-sm"
>
{showSecret ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
</Button>
)}
</div>
{field.description && (
<p className="text-xs text-muted-foreground">
{t(field.description)}
<p className="text-[13px] text-muted-foreground leading-relaxed">
{t(field.description.replace('channels:', ''))}
</p>
)}
{field.envVar && (
<p className="text-xs text-muted-foreground">
<p className="text-[12px] text-muted-foreground/70 font-mono">
{t('dialog.envVar', { var: field.envVar })}
</p>
)}