refactor: enhance connector card and status badge components

- Updated `ConnectorCard` to prioritize displaying status messages over indexed dates and warnings.
- Modified `ConnectorStatusBadge` to use a span instead of a div for better inline flexibility.
- Adjusted styles in `ConnectorAccountsListView` for improved layout and spacing.
- Cleaned up example status messages in the configuration file for clarity.

surfsense_web/components/assistant-ui/connector-popup/components/connector-card.tsx

@@ -140,13 +140,14 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 			);
 		}
 
-		// Show status message if available and connector is not connected
+		// Priority 1: Show status message if available (for both connected and disconnected connectors)
-		if (!isConnected && statusMessage) {
+		// This takes precedence over indexed dates and warnings
+		if (statusMessage) {
 			return <span className="text-[10px] text-muted-foreground">{statusMessage}</span>;
 		}
 
 		if (isConnected) {
-			// Show last indexed date for connected connectors
+			// Show last indexed date for connected connectors (only if no status message)
 			if (lastIndexedAt) {
 				return (
 					<span className="whitespace-nowrap text-[10px]">
@@ -158,7 +159,7 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 			return <span className="whitespace-nowrap text-[10px]">Never indexed</span>;
 		}
 
-		// Show warning message if available and warnings are enabled
+		// Show warning message if available and warnings are enabled (only if no status message)
 		if (warning && showWarnings) {
 			return <span className="text-[10px] text-yellow-600 dark:text-yellow-500">{warning}</span>;
 		}
@@ -196,10 +197,10 @@ export const ConnectorCard: FC<ConnectorCardProps> = ({
 				)}
 			</div>
 			<div className="flex-1 min-w-0">
-				<div className="flex items-center gap-2">
+				<div className="flex items-center gap-1.5">
 					<span className="text-[14px] font-semibold leading-tight truncate">{title}</span>
 					{showWarnings && status.status !== "active" && (
-						<ConnectorStatusBadge status={status.status} />
+						<ConnectorStatusBadge status={status.status} className="flex-shrink-0" />
 					)}
 				</div>
 				<div className="text-[10px] text-muted-foreground mt-1">{getStatusContent()}</div>

surfsense_web/components/assistant-ui/connector-popup/components/connector-status-badge.tsx

@@ -52,11 +52,11 @@ export const ConnectorStatusBadge: FC<ConnectorStatusBadgeProps> = ({ status, cl
 	const Icon = config.icon;
 
 	return (
-		<div
+		<span
-			className={cn("flex items-center justify-center shrink-0", className)}
+			className={cn("inline-flex items-center justify-center shrink-0", className)}
 			title={config.title}
 		>
 			<Icon className={cn("size-3.5", config.className)} />
-		</div>
+		</span>
 	);
 };

surfsense_web/components/assistant-ui/connector-popup/config/connector-status-config.ts

@@ -48,23 +48,20 @@ export type ConnectorStatusConfigFile = z.infer<typeof connectorStatusConfigFile
  */
 const rawConnectorStatusConfig = {
 	connectorStatuses: {
-		// Example: Disabled connector
 		// "SLACK_CONNECTOR": {
 		// 	enabled: false,
 		// 	status: "disabled",
 		// 	warning: null,
-		// 	statusMessage: "Slack connector is currently unavailable due to API changes",
+		// 	statusMessage: "Unavailable due to API changes",
 		// 	disableReason: "maintenance",
 		// },
-		// Example: Connector with warning
 		// "NOTION_CONNECTOR": {
 		// 	enabled: true,
 		// 	status: "warning",
 		// 	warning: "Rate limits may apply",
-		// 	statusMessage: "Notion API rate limits are currently active. Some requests may be delayed.",
+		// 	statusMessage: "Some requests may be delayed due to Notion API rate limits",
 		// 	disableReason: null,
 		// },
-		// Example: Connector in maintenance
 		// "TEAMS_CONNECTOR": {
 		// 	enabled: false,
 		// 	status: "maintenance",

surfsense_web/components/assistant-ui/connector-popup/views/connector-accounts-list-view.tsx

@@ -82,7 +82,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 	return (
 		<div className="flex flex-col h-full">
 			{/* Header */}
-			<div className="px-6 sm:px-12 pt-8 sm:pt-10 pb-4 border-b border-border/50 bg-muted">
+			<div className="px-6 sm:px-12 pt-8 sm:pt-10 pb-1 sm:pb-4 border-b border-border/50 bg-muted">
 				{/* Back button */}
 				<button
 					type="button"
@@ -114,21 +114,21 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 						onClick={onAddAccount}
 						disabled={isConnecting || !isEnabled}
 						className={cn(
-							"flex items-center gap-2 px-3 py-2 rounded-lg border-2 border-dashed text-left transition-all duration-200 shrink-0 self-center sm:self-auto sm:w-auto",
+							"flex items-center gap-1.5 sm:gap-2 px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg border-2 border-dashed text-left transition-all duration-200 shrink-0 self-center sm:self-auto sm:w-auto",
 							!isEnabled
 								? "border-border/30 opacity-50 cursor-not-allowed"
 								: "border-primary/50 hover:bg-primary/5",
 							isConnecting && "opacity-50 cursor-not-allowed"
 						)}
 					>
-						<div className="flex h-6 w-6 items-center justify-center rounded-md bg-primary/10 shrink-0">
+						<div className="flex h-5 w-5 sm:h-6 sm:w-6 items-center justify-center rounded-md bg-primary/10 shrink-0">
 							{isConnecting ? (
-								<Loader2 className="size-3.5 animate-spin text-primary" />
+								<Loader2 className="size-3 sm:size-3.5 animate-spin text-primary" />
 							) : (
-								<Plus className="size-3.5 text-primary" />
+								<Plus className="size-3 sm:size-3.5 text-primary" />
 							)}
 						</div>
-						<span className="text-[12px] font-medium">
+						<span className="text-[11px] sm:text-[12px] font-medium">
 							{isConnecting ? "Connecting..." : "Add Account"}
 						</span>
 					</button>
@@ -136,7 +136,7 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 			</div>
 
 			{/* Content */}
-			<div className="flex-1 overflow-y-auto px-6 sm:px-12 py-6 sm:py-8">
+			<div className="flex-1 overflow-y-auto px-6 sm:px-12 pt-0 sm:pt-6 pb-6 sm:pb-8">
 				{/* Warning Banner */}
 				{warning && showWarnings && (
 					<ConnectorWarningBanner warning={warning} statusMessage={statusMessage} />