fix: connector card UI improvements

This commit is contained in:
CREDO23 2026-01-07 15:18:31 +02:00
parent 5f0013c109
commit 4de28152d5
3 changed files with 15 additions and 8 deletions

View file

@ -17,6 +17,7 @@ interface ConnectorCardProps {
isConnected?: boolean;
isConnecting?: boolean;
documentCount?: number;
accountCount?: number;
lastIndexedAt?: string | null;
isIndexing?: boolean;
activeTask?: LogActiveTask;
@ -96,6 +97,7 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
isConnected = false,
isConnecting = false,
documentCount,
accountCount,
lastIndexedAt,
isIndexing = false,
activeTask,
@ -154,8 +156,14 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
</div>
<div className="text-[10px] text-muted-foreground mt-1">{getStatusContent()}</div>
{isConnected && documentCount !== undefined && (
<p className="text-[10px] text-muted-foreground mt-0.5">
{formatDocumentCount(documentCount)}
<p className="text-[10px] text-muted-foreground mt-0.5 flex items-center gap-1.5">
<span>{formatDocumentCount(documentCount)}</span>
{accountCount !== undefined && accountCount > 0 && (
<>
<span className="text-muted-foreground/50"></span>
<span>{accountCount} {accountCount === 1 ? "Account" : "Accounts"}</span>
</>
)}
</p>
)}
</div>

View file

@ -200,10 +200,6 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
: "bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
)}
>
{/* Account count badge */}
<div className="absolute -top-2 -right-2 flex h-5 items-center justify-center rounded-md bg-primary px-2 text-[10px] font-semibold text-primary-foreground whitespace-nowrap">
{accountCount > 99 ? "99+" : accountCount} {accountCount === 1 ? "Account" : "Accounts"}
</div>
<div
className={cn(
"flex h-12 w-12 items-center justify-center rounded-lg border shrink-0",
@ -230,8 +226,10 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
: "Never indexed"}
</p>
)}
<p className="text-[10px] text-muted-foreground mt-0.5">
{formatDocumentCount(documentCount)}
<p className="text-[10px] text-muted-foreground mt-0.5 flex items-center gap-1.5">
<span>{formatDocumentCount(documentCount)}</span>
<span className="text-muted-foreground/50"></span>
<span>{accountCount} {accountCount === 1 ? "Account" : "Accounts"}</span>
</p>
</div>
<Button

View file

@ -147,6 +147,7 @@ export const AllConnectorsTab: FC<AllConnectorsTabProps> = ({
isConnected={isConnected}
isConnecting={isConnecting}
documentCount={documentCount}
accountCount={typeConnectors.length}
lastIndexedAt={mostRecentLastIndexed}
isIndexing={isIndexing}
activeTask={activeTask}