feat: enhance onboarding tour and more pages UI

- Added a new joyride step for the upload button to guide users in uploading documents.
- Updated existing tour steps to reflect changes in document management and tool configuration.
- Adjusted tooltip styles for improved visibility and user experience.
- Enhanced MorePagesContent button styling for better interaction feedback.

surfsense_web/app/dashboard/[search_space_id]/documents/(manage)/components/DocumentsFilters.tsx

@@ -196,6 +196,7 @@ export function DocumentsFilters({
 
 				{/* Upload Button */}
 				<Button
+					data-joyride="upload-button"
 					onClick={openUploadDialog}
 					variant="outline"
 					size="sm"

surfsense_web/components/onboarding-tour.tsx

@@ -23,15 +23,15 @@ interface TourStep {
 const TOUR_STEPS: TourStep[] = [
 	{
 		target: '[data-joyride="connector-icon"]',
-		title: "Connect your data sources",
+		title: "Manage your tools",
-		content: "Connect and sync data from Gmail, Drive, Slack, Notion, Jira, Confluence, and more.",
+		content: "Enable or disable AI tools and configure capabilities.",
 		placement: "bottom",
 	},
 	{
-		target: '[data-joyride="documents-sidebar"]',
+		target: '[data-joyride="upload-button"]',
-		title: "Manage your documents",
+		title: "Upload documents",
-		content: "Access and manage all your uploaded documents.",
+		content: "Upload files to your search space.",
-		placement: "right",
+		placement: "left",
 	},
 	{
 		target: '[data-joyride="inbox-sidebar"]',
@@ -39,6 +39,12 @@ const TOUR_STEPS: TourStep[] = [
 		content: "View mentions and notifications in one place.",
 		placement: "right",
 	},
+	{
+		target: '[data-joyride="documents-sidebar"]',
+		title: "Manage your documents",
+		content: "Access and manage all your uploaded documents.",
+		placement: "right",
+	},
 ];
 
 interface TooltipPosition {
@@ -100,7 +106,7 @@ function Spotlight({
 }) {
 	const rect = targetEl.getBoundingClientRect();
 	const padding = 6;
-	const shadowColor = isDarkMode ? "#172554" : "#3b82f6";
+	const shadowColor = isDarkMode ? "#3f3f46" : "#3b82f6";
 
 	// Check if this is the connector icon step - verify both the selector matches AND the element matches
 	// This prevents the shape from changing before targetEl updates
@@ -187,7 +193,7 @@ function TourTooltip({
 		}
 	}, [stepIndex]);
 
-	const bgColor = isDarkMode ? "#18181b" : "#ffffff";
+	const bgColor = isDarkMode ? "#27272a" : "#ffffff";
 	const textColor = isDarkMode ? "#ffffff" : "#18181b";
 	const mutedTextColor = isDarkMode ? "#a1a1aa" : "#71717a";
 
@@ -195,9 +201,9 @@ function TourTooltip({
 	const getPointerStyles = (): React.CSSProperties => {
 		const lineLength = 16;
 		const dotSize = 6;
-		// Check if this is the documents step (stepIndex === 1) or inbox step (stepIndex === 2)
+		const isUploadStep = stepIndex === 1;
-		const isDocumentsStep = stepIndex === 1;
 		const isInboxStep = stepIndex === 2;
+		const isDocumentsStep = stepIndex === 3;
 
 		if (position.pointerPosition === "left") {
 			return {
@@ -209,6 +215,16 @@ function TourTooltip({
 				alignItems: "center",
 			};
 		}
+		if (position.pointerPosition === "right") {
+			return {
+				position: "absolute",
+				right: -lineLength - dotSize,
+				top: isUploadStep ? "calc(50% - 12px)" : "50%",
+				transform: "translateY(-50%)",
+				display: "flex",
+				alignItems: "center",
+			};
+		}
 		if (position.pointerPosition === "top") {
 			return {
 				position: "absolute",
@@ -224,7 +240,7 @@ function TourTooltip({
 	};
 
 	const renderPointer = () => {
-		const lineColor = isDarkMode ? "#18181B" : "#ffffff";
+		const lineColor = isDarkMode ? "#27272a" : "#ffffff";
 
 		if (position.pointerPosition === "left") {
 			return (
@@ -247,6 +263,27 @@ function TourTooltip({
 				</div>
 			);
 		}
+		if (position.pointerPosition === "right") {
+			return (
+				<div style={getPointerStyles()}>
+					<div
+						style={{
+							width: 16,
+							height: 2,
+							backgroundColor: lineColor,
+						}}
+					/>
+					<div
+						style={{
+							width: 6,
+							height: 6,
+							borderRadius: "50%",
+							backgroundColor: lineColor,
+						}}
+					/>
+				</div>
+			);
+		}
 		if (position.pointerPosition === "top") {
 			return (
 				<div style={getPointerStyles()}>

surfsense_web/components/settings/more-pages-content.tsx

@@ -100,7 +100,7 @@ export function MorePagesContent() {
 					{data?.tasks.map((task) => (
 						<Card
 							key={task.task_type}
-							className={cn("transition-colors", task.completed && "bg-muted/50")}
+							className={cn("transition-colors bg-transparent", task.completed && "bg-muted/50")}
 						>
 							<CardContent className="flex items-center gap-3 p-3">
 								<div
@@ -122,13 +122,14 @@ export function MorePagesContent() {
 									</p>
 									<p className="text-xs text-muted-foreground">+{task.pages_reward} pages</p>
 								</div>
-								<Button
+							<Button
-									variant={task.completed ? "ghost" : "outline"}
+								variant="ghost"
-									size="sm"
+								size="sm"
-									disabled={task.completed || completeMutation.isPending}
+								disabled={task.completed || completeMutation.isPending}
-									onClick={() => handleTaskClick(task)}
+								onClick={() => handleTaskClick(task)}
-									asChild={!task.completed}
+								asChild={!task.completed}
-								>
+								className="text-muted-foreground hover:text-foreground"
+							>
 									{task.completed ? (
 										<span>Done</span>
 									) : (
@@ -141,10 +142,7 @@ export function MorePagesContent() {
 											{completeMutation.isPending ? (
 												<Spinner size="xs" />
 											) : (
-												<>
+												<ExternalLink className="h-3 w-3" />
-													Go
-													<ExternalLink className="h-3 w-3" />
-												</>
 											)}
 										</a>
 									)}