refactor: Enhance connector form submission and tooltip styling

- Updated the handleSubmitConnectForm function to accept an additional parameter for indexing start notification, improving the connector form submission process.
- Adjusted tooltip styling across various components for consistency and improved visual clarity.
- Simplified conditional rendering in ActiveConnectorsTab and ConnectorAccountsListView to enhance UI responsiveness during indexing operations.

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

@@ -191,7 +191,7 @@ export const ConnectorIndicator: FC = () => {
 				) : connectingConnectorType ? (
 					<ConnectorConnectView
 						connectorType={connectingConnectorType}
-						onSubmit={handleSubmitConnectForm}
+						onSubmit={(formData) => handleSubmitConnectForm(formData, startIndexing)}
 						onBack={handleBackFromConnect}
 						isSubmitting={isCreatingConnector}
 					/>

surfsense_web/components/assistant-ui/connector-popup/hooks/use-connector-dialog.ts

@@ -491,20 +491,23 @@ export const useConnectorDialog = () => {
 
 	// Handle submitting connect form
 	const handleSubmitConnectForm = useCallback(
-		async (formData: {
+		async (
-			name: string;
+			formData: {
-			connector_type: string;
+				name: string;
-			config: Record<string, unknown>;
+				connector_type: string;
-			is_indexable: boolean;
+				config: Record<string, unknown>;
-			last_indexed_at: null;
+				is_indexable: boolean;
-			periodic_indexing_enabled: boolean;
+				last_indexed_at: null;
-			indexing_frequency_minutes: number | null;
+				periodic_indexing_enabled: boolean;
-			next_scheduled_at: null;
+				indexing_frequency_minutes: number | null;
-			startDate?: Date;
+				next_scheduled_at: null;
-			endDate?: Date;
+				startDate?: Date;
-			periodicEnabled?: boolean;
+				endDate?: Date;
-			frequencyMinutes?: string;
+				periodicEnabled?: boolean;
-		}) => {
+				frequencyMinutes?: string;
+			},
+			onIndexingStart?: (connectorId: number) => void
+		) => {
 			if (!searchSpaceId || !connectingConnectorType) return;
 
 			// Prevent multiple submissions using ref for immediate check
@@ -603,6 +606,11 @@ export const useConnectorDialog = () => {
 									});
 								}
 
+								// Notify caller that indexing is starting (for UI syncing state)
+								if (onIndexingStart) {
+									onIndexingStart(connector.id);
+								}
+
 								// Start indexing (backend will use defaults if dates are undefined)
 								const startDateStr = startDateForIndexing
 									? format(startDateForIndexing, "yyyy-MM-dd")

surfsense_web/components/assistant-ui/connector-popup/tabs/active-connectors-tab.tsx

@@ -174,10 +174,10 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 										<div
 											key={`oauth-type-${connectorType}`}
 											className={cn(
-												"relative flex items-center gap-4 p-4 rounded-xl border border-border transition-all",
+												"relative flex items-center gap-4 p-4 rounded-xl transition-all",
 												isAnyIndexing
-													? "bg-primary/5 border-primary/20"
+													? "bg-primary/5 border-0"
-													: "bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
+													: "bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 border border-border"
 											)}
 										>
 											<div
@@ -231,10 +231,10 @@ export const ActiveConnectorsTab: FC<ActiveConnectorsTabProps> = ({
 										<div
 											key={`connector-${connector.id}`}
 											className={cn(
-												"flex items-center gap-4 p-4 rounded-xl border border-border transition-all",
+												"flex items-center gap-4 p-4 rounded-xl transition-all",
 												isIndexing
-													? "bg-primary/5 border-primary/20"
+													? "bg-primary/5 border-0"
-													: "bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
+													: "bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 border border-border"
 											)}
 										>
 											<div

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

@@ -139,10 +139,10 @@ export const ConnectorAccountsListView: FC<ConnectorAccountsListViewProps> = ({
 							<div
 								key={connector.id}
 								className={cn(
-									"flex items-center gap-4 p-4 rounded-xl border border-border transition-all",
+									"flex items-center gap-4 p-4 rounded-xl transition-all",
 									isIndexing
-										? "bg-primary/5 border-primary/20"
+										? "bg-primary/5 border-0"
-										: "bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10"
+										: "bg-slate-400/5 dark:bg-white/5 hover:bg-slate-400/10 dark:hover:bg-white/10 border border-border"
 								)}
 							>
 								<div

surfsense_web/components/assistant-ui/tooltip-icon-button.tsx

@@ -29,7 +29,6 @@ export const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButton
 				</TooltipTrigger>
 				<TooltipContent
 					side={side}
-					className="bg-black text-white font-medium shadow-xl px-3 py-1.5 dark:bg-zinc-800 dark:text-zinc-50 border-none"
 				>
 					{tooltip}
 				</TooltipContent>

surfsense_web/components/ui/tooltip.tsx

@@ -42,7 +42,7 @@ function TooltipContent({
 				data-slot="tooltip-content"
 				sideOffset={sideOffset}
 				className={cn(
-					"bg-popover text-popover-foreground fill-popover shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md px-3 py-1.5 text-xs text-balance",
+					"bg-black text-white font-medium shadow-xl px-3 py-1.5 dark:bg-zinc-800 dark:text-zinc-50 border-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit rounded-md text-xs text-balance",
 					className
 				)}
 				{...props}