Merge remote-tracking branch 'upstream/main' into feature/blocknote-editor

surfsense_web/app/dashboard/[search_space_id]/client-layout.tsx

@@ -18,6 +18,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Separator } from "@/components/ui/separator";
 import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { useLLMPreferences } from "@/hooks/use-llm-configs";
+import { useUserAccess } from "@/hooks/use-rbac";
 import { cn } from "@/lib/utils";
 
 export function DashboardClientLayout({
@@ -60,11 +61,15 @@ export function DashboardClientLayout({
 	}, [activeChatId, isChatPannelOpen]);
 
 	const { loading, error, isOnboardingComplete } = useLLMPreferences(searchSpaceIdNum);
+	const { access, loading: accessLoading } = useUserAccess(searchSpaceIdNum);
 	const [hasCheckedOnboarding, setHasCheckedOnboarding] = useState(false);
 
 	// Skip onboarding check if we're already on the onboarding page
 	const isOnboardingPage = pathname?.includes("/onboard");
 
+	// Only owners should see onboarding - invited members use existing config
+	const isOwner = access?.is_owner ?? false;
+
 	// Translate navigation items
 	const tNavMenu = useTranslations("nav_menu");
 	const translatedNavMain = useMemo(() => {
@@ -102,11 +107,13 @@ export function DashboardClientLayout({
 			return;
 		}
 
-		// Only check once after preferences have loaded
-		if (!loading && !hasCheckedOnboarding) {
+		// Wait for both preferences and access data to load
+		if (!loading && !accessLoading && !hasCheckedOnboarding) {
 			const onboardingComplete = isOnboardingComplete();
 
-			if (!onboardingComplete) {
+			// Only redirect to onboarding if user is the owner and onboarding is not complete
+			// Invited members (non-owners) should skip onboarding and use existing config
+			if (!onboardingComplete && isOwner) {
 				router.push(`/dashboard/${searchSpaceId}/onboard`);
 			}
 
@@ -114,8 +121,10 @@ export function DashboardClientLayout({
 		}
 	}, [
 		loading,
+		accessLoading,
 		isOnboardingComplete,
 		isOnboardingPage,
+		isOwner,
 		router,
 		searchSpaceId,
 		hasCheckedOnboarding,
@@ -145,7 +154,7 @@ export function DashboardClientLayout({
 	}, [chat_id, search_space_id]);
 
 	// Show loading screen while checking onboarding status (only on first load)
-	if (!hasCheckedOnboarding && loading && !isOnboardingPage) {
+	if (!hasCheckedOnboarding && (loading || accessLoading) && !isOnboardingPage) {
 		return (
 			<div className="flex flex-col items-center justify-center min-h-screen space-y-4">
 				<Card className="w-[350px] bg-background/60 backdrop-blur-sm">

surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/edit/page.tsx

@@ -18,7 +18,16 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@/components/ui/card";
-import { Form } from "@/components/ui/form";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Textarea } from "@/components/ui/textarea";
 import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
 import { useConnectorEditPage } from "@/hooks/use-connector-edit-page";
 // Import Utils, Types, Hook, and Components
@@ -282,6 +291,40 @@ export default function EditConnectorPage() {
 										placeholder="Your Elasticsearch API Key"
 									/>
 								)}
+
+								{/* == Webcrawler == */}
+								{connector.connector_type === "WEBCRAWLER_CONNECTOR" && (
+									<div className="space-y-4">
+										<EditSimpleTokenForm
+											control={editForm.control}
+											fieldName="FIRECRAWL_API_KEY"
+											fieldLabel="Firecrawl API Key (Optional)"
+											fieldDescription="Add a Firecrawl API key for enhanced crawling capabilities. If not provided, will use AsyncChromiumLoader as fallback."
+											placeholder="fc-xxxxxxxxxxxxx"
+										/>
+										<FormField
+											control={editForm.control}
+											name="INITIAL_URLS"
+											render={({ field }) => (
+												<FormItem>
+													<FormLabel>URLs to Crawl</FormLabel>
+													<FormControl>
+														<Textarea
+															placeholder="https://example.com&#10;https://docs.example.com&#10;https://blog.example.com"
+															className="min-h-[150px] font-mono text-sm"
+															{...field}
+														/>
+													</FormControl>
+													<FormDescription>
+														Enter URLs to crawl (one per line). These URLs will be indexed when you
+														trigger indexing.
+													</FormDescription>
+													<FormMessage />
+												</FormItem>
+											)}
+										/>
+									</div>
+								)}
 							</CardContent>
 							<CardFooter className="border-t pt-6">
 								<Button type="submit" disabled={isSaving} className="w-full sm:w-auto">

surfsense_web/app/dashboard/[search_space_id]/connectors/[connector_id]/page.tsx

@@ -55,6 +55,7 @@ const getConnectorTypeDisplay = (type: string): string => {
 		AIRTABLE_CONNECTOR: "Airtable Connector",
 		LUMA_CONNECTOR: "Luma Connector",
 		ELASTICSEARCH_CONNECTOR: "Elasticsearch Connector",
+		WEBCRAWLER_CONNECTOR: "Web Page Connector",
 		// Add other connector types here as needed
 	};
 	return typeMap[type] || type;
@@ -75,6 +76,7 @@ const getApiKeyFieldName = (connectorType: string): string => {
 		LINKUP_API: "LINKUP_API_KEY",
 		LUMA_CONNECTOR: "LUMA_API_KEY",
 		ELASTICSEARCH_CONNECTOR: "ELASTICSEARCH_API_KEY",
+		WEBCRAWLER_CONNECTOR: "FIRECRAWL_API_KEY",
 	};
 	return fieldMap[connectorType] || "";
 };

surfsense_web/app/dashboard/[search_space_id]/connectors/add/webcrawler-connector/page.tsx

@@ -0,0 +1,331 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { ArrowLeft, Check, Globe, Loader2 } from "lucide-react";
+import { motion } from "motion/react";
+import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod";
+import { Button } from "@/components/ui/button";
+import {
+	Card,
+	CardContent,
+	CardDescription,
+	CardFooter,
+	CardHeader,
+	CardTitle,
+} from "@/components/ui/card";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { EnumConnectorName } from "@/contracts/enums/connector";
+import { getConnectorIcon } from "@/contracts/enums/connectorIcons";
+import {
+	type SearchSourceConnector,
+	useSearchSourceConnectors,
+} from "@/hooks/use-search-source-connectors";
+
+// Define the form schema with Zod
+const webcrawlerConnectorFormSchema = z.object({
+	name: z.string().min(3, {
+		message: "Connector name must be at least 3 characters.",
+	}),
+	api_key: z.string().optional(),
+	initial_urls: z.string().optional(),
+});
+
+// Define the type for the form values
+type WebcrawlerConnectorFormValues = z.infer<typeof webcrawlerConnectorFormSchema>;
+
+export default function WebcrawlerConnectorPage() {
+	const router = useRouter();
+	const params = useParams();
+	const searchSpaceId = params.search_space_id as string;
+	const [isSubmitting, setIsSubmitting] = useState(false);
+	const [doesConnectorExist, setDoesConnectorExist] = useState(false);
+
+	const { fetchConnectors, createConnector } = useSearchSourceConnectors(
+		true,
+		parseInt(searchSpaceId)
+	);
+
+	// Initialize the form
+	const form = useForm<WebcrawlerConnectorFormValues>({
+		resolver: zodResolver(webcrawlerConnectorFormSchema),
+		defaultValues: {
+			name: "Web Pages",
+			api_key: "",
+			initial_urls: "",
+		},
+	});
+
+	useEffect(() => {
+		fetchConnectors(parseInt(searchSpaceId))
+			.then((data) => {
+				if (data && Array.isArray(data)) {
+					const connector = data.find(
+						(c: SearchSourceConnector) =>
+							c.connector_type === EnumConnectorName.WEBCRAWLER_CONNECTOR
+					);
+					if (connector) {
+						setDoesConnectorExist(true);
+					}
+				}
+			})
+			.catch((error) => {
+				console.error("Error fetching connectors:", error);
+			});
+	}, [fetchConnectors, searchSpaceId]);
+
+	// Handle form submission
+	const onSubmit = async (values: WebcrawlerConnectorFormValues) => {
+		setIsSubmitting(true);
+		try {
+			const config: Record<string, string> = {};
+
+			// Only add API key to config if provided
+			if (values.api_key && values.api_key.trim()) {
+				config.FIRECRAWL_API_KEY = values.api_key;
+			}
+
+			// Parse initial URLs if provided
+			if (values.initial_urls && values.initial_urls.trim()) {
+				config.INITIAL_URLS = values.initial_urls;
+			}
+
+			await createConnector(
+				{
+					name: values.name,
+					connector_type: EnumConnectorName.WEBCRAWLER_CONNECTOR,
+					config: config,
+					is_indexable: true,
+					last_indexed_at: null,
+					periodic_indexing_enabled: false,
+					indexing_frequency_minutes: null,
+					next_scheduled_at: null,
+				},
+				parseInt(searchSpaceId)
+			);
+
+			toast.success("Webcrawler connector created successfully!");
+
+			// Navigate back to connectors page
+			router.push(`/dashboard/${searchSpaceId}/connectors`);
+		} catch (error) {
+			console.error("Error creating connector:", error);
+			toast.error(error instanceof Error ? error.message : "Failed to create connector");
+		} finally {
+			setIsSubmitting(false);
+		}
+	};
+
+	return (
+		<div className="container mx-auto py-8 max-w-2xl">
+			<motion.div
+				initial={{ opacity: 0, y: 20 }}
+				animate={{ opacity: 1, y: 0 }}
+				transition={{ duration: 0.5 }}
+			>
+				{/* Header */}
+				<div className="mb-8">
+					<Link
+						href={`/dashboard/${searchSpaceId}/connectors/add`}
+						className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground mb-4"
+					>
+						<ArrowLeft className="mr-2 h-4 w-4" />
+						Back to connectors
+					</Link>
+					<div className="flex items-center gap-4">
+						<div className="flex h-12 w-12 items-center justify-center rounded-lg">
+							{getConnectorIcon(EnumConnectorName.WEBCRAWLER_CONNECTOR, "h-6 w-6")}
+						</div>
+						<div>
+							<h1 className="text-3xl font-bold tracking-tight">Connect Web Pages</h1>
+							<p className="text-muted-foreground">Crawl and index web pages for search.</p>
+						</div>
+					</div>
+				</div>
+
+				{/* Connection Card */}
+				{!doesConnectorExist ? (
+					<Card>
+						<CardHeader>
+							<CardTitle>Set Up Web Page crawler</CardTitle>
+							<CardDescription>
+								Configure your web page crawler to index web pages. Optionally add a Firecrawl API
+								key for enhanced crawling capabilities.
+							</CardDescription>
+						</CardHeader>
+						<Form {...form}>
+							<form onSubmit={form.handleSubmit(onSubmit)}>
+								<CardContent className="space-y-4">
+									<FormField
+										control={form.control}
+										name="name"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Connector Name</FormLabel>
+												<FormControl>
+													<Input placeholder="My Web Crawler" {...field} />
+												</FormControl>
+												<FormDescription>
+													A friendly name to identify this connector.
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									<FormField
+										control={form.control}
+										name="api_key"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Firecrawl API Key (Optional)</FormLabel>
+												<FormControl>
+													<Input type="password" placeholder="fc-xxxxxxxxxxxxx" {...field} />
+												</FormControl>
+												<FormDescription>
+													Add a Firecrawl API key for enhanced crawling. If not provided, will use
+													AsyncChromiumLoader as fallback.
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									<FormField
+										control={form.control}
+										name="initial_urls"
+										render={({ field }) => (
+											<FormItem>
+												<FormLabel>Initial URLs (Optional)</FormLabel>
+												<FormControl>
+													<Textarea
+														placeholder="https://example.com&#10;https://docs.example.com&#10;https://blog.example.com"
+														className="min-h-[100px] font-mono text-sm"
+														{...field}
+													/>
+												</FormControl>
+												<FormDescription>
+													Enter URLs to crawl (one per line). You can add more URLs later.
+												</FormDescription>
+												<FormMessage />
+											</FormItem>
+										)}
+									/>
+
+									<div className="space-y-2 pt-2">
+										<div className="flex items-center space-x-2 text-sm text-muted-foreground">
+											<Check className="h-4 w-4 text-green-500" />
+											<span>Crawl any public web page</span>
+										</div>
+										<div className="flex items-center space-x-2 text-sm text-muted-foreground">
+											<Check className="h-4 w-4 text-green-500" />
+											<span>Extract markdown content automatically</span>
+										</div>
+										<div className="flex items-center space-x-2 text-sm text-muted-foreground">
+											<Check className="h-4 w-4 text-green-500" />
+											<span>Detect content changes and update documents</span>
+										</div>
+										<div className="flex items-center space-x-2 text-sm text-muted-foreground">
+											<Check className="h-4 w-4 text-green-500" />
+											<span>Works with or without Firecrawl API key</span>
+										</div>
+									</div>
+								</CardContent>
+								<CardFooter className="flex justify-between">
+									<Button
+										type="button"
+										variant="outline"
+										onClick={() => router.push(`/dashboard/${searchSpaceId}/connectors/add`)}
+									>
+										Cancel
+									</Button>
+									<Button type="submit" disabled={isSubmitting}>
+										{isSubmitting ? (
+											<>
+												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+												Setting up...
+											</>
+										) : (
+											<>
+												<Globe className="mr-2 h-4 w-4" />
+												Create Crawler
+											</>
+										)}
+									</Button>
+								</CardFooter>
+							</form>
+						</Form>
+					</Card>
+				) : (
+					/* Success Card */
+					<Card>
+						<CardHeader>
+							<CardTitle>✅ Your web page crawler is successfully set up!</CardTitle>
+							<CardDescription>
+								You can now add URLs to crawl from the connector management page.
+							</CardDescription>
+						</CardHeader>
+					</Card>
+				)}
+
+				{/* Help Section */}
+				{!doesConnectorExist && (
+					<Card className="mt-6">
+						<CardHeader>
+							<CardTitle className="text-lg">How It Works</CardTitle>
+						</CardHeader>
+						<CardContent className="space-y-4">
+							<div>
+								<h4 className="font-medium mb-2">1. Choose Your Crawler Method</h4>
+								<p className="text-sm text-muted-foreground">
+									<strong>With Firecrawl (Recommended):</strong> Get your API key from{" "}
+									<a
+										href="https://firecrawl.dev"
+										target="_blank"
+										rel="noopener noreferrer"
+										className="text-primary hover:underline"
+									>
+										firecrawl.dev
+									</a>{" "}
+									for faster, more reliable crawling with better content extraction.
+								</p>
+								<p className="text-sm text-muted-foreground mt-2">
+									<strong>Without Firecrawl:</strong> The crawler will use AsyncChromiumLoader as a
+									free fallback option. This works well for most websites but may be slower.
+								</p>
+							</div>
+							<div>
+								<h4 className="font-medium mb-2">2. Add URLs to Crawl (Optional)</h4>
+								<p className="text-sm text-muted-foreground">
+									You can add initial URLs now or add them later from the connector management page.
+									Enter one URL per line.
+								</p>
+							</div>
+							<div>
+								<h4 className="font-medium mb-2">3. Manage Your Crawler</h4>
+								<p className="text-sm text-muted-foreground">
+									After setup, you can add more URLs, trigger manual crawls, or set up periodic
+									indexing to keep your content up-to-date.
+								</p>
+							</div>
+						</CardContent>
+					</Card>
+				)}
+			</motion.div>
+		</div>
+	);
+}

surfsense_web/app/dashboard/[search_space_id]/documents/webpage/page.tsx

@@ -1,201 +0,0 @@
-"use client";
-
-import { type Tag, TagInput } from "emblor";
-import { Globe, Loader2 } from "lucide-react";
-import { useParams, useRouter } from "next/navigation";
-import { useTranslations } from "next-intl";
-import { useState } from "react";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
-
-// URL validation regex
-const urlRegex = /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
-
-export default function WebpageCrawler() {
-	const t = useTranslations("add_webpage");
-	const params = useParams();
-	const router = useRouter();
-	const search_space_id = params.search_space_id as string;
-
-	const [urlTags, setUrlTags] = useState<Tag[]>([]);
-	const [activeTagIndex, setActiveTagIndex] = useState<number | null>(null);
-	const [isSubmitting, setIsSubmitting] = useState(false);
-	const [error, setError] = useState<string | null>(null);
-
-	// Function to validate a URL
-	const isValidUrl = (url: string): boolean => {
-		return urlRegex.test(url);
-	};
-
-	// Function to handle URL submission
-	const handleSubmit = async () => {
-		// Validate that we have at least one URL
-		if (urlTags.length === 0) {
-			setError(t("error_no_url"));
-			return;
-		}
-
-		// Validate all URLs
-		const invalidUrls = urlTags.filter((tag) => !isValidUrl(tag.text));
-		if (invalidUrls.length > 0) {
-			setError(t("error_invalid_urls", { urls: invalidUrls.map((tag) => tag.text).join(", ") }));
-			return;
-		}
-
-		setError(null);
-		setIsSubmitting(true);
-
-		try {
-			toast(t("crawling_toast"), {
-				description: t("crawling_toast_desc"),
-			});
-
-			// Extract URLs from tags
-			const urls = urlTags.map((tag) => tag.text);
-
-			// Make API call to backend
-			const response = await fetch(
-				`${process.env.NEXT_PUBLIC_FASTAPI_BACKEND_URL}/api/v1/documents`,
-				{
-					method: "POST",
-					headers: {
-						"Content-Type": "application/json",
-						Authorization: `Bearer ${localStorage.getItem("surfsense_bearer_token")}`,
-					},
-					body: JSON.stringify({
-						document_type: "CRAWLED_URL",
-						content: urls,
-						search_space_id: parseInt(search_space_id),
-					}),
-				}
-			);
-
-			if (!response.ok) {
-				throw new Error("Failed to crawl URLs");
-			}
-
-			await response.json();
-
-			toast(t("success_toast"), {
-				description: t("success_toast_desc"),
-			});
-
-			// Redirect to documents page
-			router.push(`/dashboard/${search_space_id}/documents`);
-		} catch (error: any) {
-			setError(error.message || t("error_generic"));
-			toast(t("error_toast"), {
-				description: `${t("error_toast_desc")}: ${error.message}`,
-			});
-		} finally {
-			setIsSubmitting(false);
-		}
-	};
-
-	// Function to add a new URL tag
-	const handleAddTag = (text: string) => {
-		// Basic URL validation
-		if (!isValidUrl(text)) {
-			toast(t("invalid_url_toast"), {
-				description: t("invalid_url_toast_desc"),
-			});
-			return;
-		}
-
-		// Check for duplicates
-		if (urlTags.some((tag) => tag.text === text)) {
-			toast(t("duplicate_url_toast"), {
-				description: t("duplicate_url_toast_desc"),
-			});
-			return;
-		}
-
-		// Add the new tag
-		const newTag: Tag = {
-			id: Date.now().toString(),
-			text: text,
-		};
-
-		setUrlTags([...urlTags, newTag]);
-	};
-
-	return (
-		<div className="container mx-auto py-8">
-			<Card className="max-w-2xl mx-auto">
-				<CardHeader>
-					<CardTitle className="flex items-center gap-2">
-						<Globe className="h-5 w-5" />
-						{t("title")}
-					</CardTitle>
-					<CardDescription>{t("subtitle")}</CardDescription>
-				</CardHeader>
-				<CardContent>
-					<div className="space-y-4">
-						<div className="space-y-2">
-							<Label htmlFor="url-input">{t("label")}</Label>
-							<TagInput
-								id="url-input"
-								tags={urlTags}
-								setTags={setUrlTags}
-								placeholder={t("placeholder")}
-								onAddTag={handleAddTag}
-								styleClasses={{
-									inlineTagsContainer:
-										"border-input rounded-lg bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 p-1 gap-1",
-									input: "w-full min-w-[80px] focus-visible:outline-none shadow-none px-2 h-7",
-									tag: {
-										body: "h-7 relative bg-background border border-input hover:bg-background rounded-md font-medium text-xs ps-2 pe-7 flex",
-										closeButton:
-											"absolute -inset-y-px -end-px p-0 rounded-e-lg flex size-7 transition-colors outline-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 text-muted-foreground/80 hover:text-foreground",
-									},
-								}}
-								activeTagIndex={activeTagIndex}
-								setActiveTagIndex={setActiveTagIndex}
-							/>
-							<p className="text-xs text-muted-foreground mt-1">{t("hint")}</p>
-						</div>
-
-						{error && <div className="text-sm text-red-500 mt-2">{error}</div>}
-
-						<div className="bg-muted/50 rounded-lg p-4 text-sm">
-							<h4 className="font-medium mb-2">{t("tips_title")}</h4>
-							<ul className="list-disc pl-5 space-y-1 text-muted-foreground">
-								<li>{t("tip_1")}</li>
-								<li>{t("tip_2")}</li>
-								<li>{t("tip_3")}</li>
-								<li>{t("tip_4")}</li>
-							</ul>
-						</div>
-					</div>
-				</CardContent>
-				<CardFooter className="flex justify-between">
-					<Button
-						variant="outline"
-						onClick={() => router.push(`/dashboard/${search_space_id}/documents`)}
-					>
-						{t("cancel")}
-					</Button>
-					<Button onClick={handleSubmit} disabled={isSubmitting || urlTags.length === 0}>
-						{isSubmitting ? (
-							<>
-								<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-								{t("submitting")}
-							</>
-						) : (
-							t("submit")
-						)}
-					</Button>
-				</CardFooter>
-			</Card>
-		</div>
-	);
-}

surfsense_web/app/dashboard/[search_space_id]/layout.tsx

@@ -52,6 +52,12 @@ export default function DashboardLayout({
 				},
 			],
 		},
+		{
+			title: "Team",
+			url: `/dashboard/${search_space_id}/team`,
+			icon: "Users",
+			items: [],
+		},
 		{
 			title: "Settings",
 			url: `/dashboard/${search_space_id}/settings`,

surfsense_web/app/dashboard/[search_space_id]/logs/(manage)/page.tsx

@@ -1126,7 +1126,7 @@ function LogRowActions({ row, t }: { row: Row<Log>; t: (key: string) => string }
 		setIsDeleting(true);
 		try {
 			await deleteLog(log.id);
-			toast.success(t("log_deleted_success"));
+			// toast.success(t("log_deleted_success"));
 			await refreshLogs();
 		} catch (error) {
 			console.error("Error deleting log:", error);

surfsense_web/app/dashboard/[search_space_id]/sources/add/page.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { IconBrandYoutube } from "@tabler/icons-react";
-import { Cable, Database, Upload } from "lucide-react";
+import { Cable, Database, Globe, Upload } from "lucide-react";
 import { motion } from "motion/react";
-import { useParams, useSearchParams } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { ConnectorsTab } from "@/components/sources/ConnectorsTab";
 import { DocumentUploadTab } from "@/components/sources/DocumentUploadTab";
@@ -12,6 +12,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 export default function AddSourcesPage() {
 	const params = useParams();
+	const router = useRouter();
 	const searchParams = useSearchParams();
 	const search_space_id = params.search_space_id as string;
 	const [activeTab, setActiveTab] = useState("documents");
@@ -24,6 +25,14 @@ export default function AddSourcesPage() {
 		}
 	}, [searchParams]);
 
+	const handleTabChange = (value: string) => {
+		if (value === "webpages") {
+			router.push(`/dashboard/${search_space_id}/connectors/add/webcrawler-connector`);
+		} else {
+			setActiveTab(value);
+		}
+	};
+
 	return (
 		<div className="container mx-auto py-8 px-4">
 			<motion.div
@@ -42,19 +51,26 @@ export default function AddSourcesPage() {
 				</div>
 
 				{/* Tabs */}
-				<Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
-					<TabsList className="grid w-full max-w-2xl mx-auto grid-cols-3 h-12">
+				<Tabs value={activeTab} onValueChange={handleTabChange} className="w-full">
+					<TabsList className="grid w-full max-w-3xl mx-auto grid-cols-4 h-12">
 						<TabsTrigger value="documents" className="flex items-center gap-2">
 							<Upload className="h-4 w-4" />
-							Documents
+							<span className="hidden sm:inline">Documents</span>
+							<span className="sm:hidden">Docs</span>
 						</TabsTrigger>
 						<TabsTrigger value="youtube" className="flex items-center gap-2">
 							<IconBrandYoutube className="h-4 w-4" />
 							YouTube
 						</TabsTrigger>
+						<TabsTrigger value="webpages" className="flex items-center gap-2">
+							<Globe className="h-4 w-4" />
+							<span className="hidden sm:inline">Web Pages</span>
+							<span className="sm:hidden">Web</span>
+						</TabsTrigger>
 						<TabsTrigger value="connectors" className="flex items-center gap-2">
 							<Cable className="h-4 w-4" />
-							Connectors
+							<span className="hidden sm:inline">Connectors</span>
+							<span className="sm:hidden">More</span>
 						</TabsTrigger>
 					</TabsList>
 

surfsense_web/app/dashboard/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { AlertCircle, Loader2, Plus, Search, Trash2 } from "lucide-react";
+import { AlertCircle, Loader2, Plus, Search, Trash2, UserCheck, Users } from "lucide-react";
 import { motion, type Variants } from "motion/react";
 import Image from "next/image";
 import Link from "next/link";
@@ -22,6 +22,7 @@ import {
 	AlertDialogTitle,
 	AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
 	Card,
@@ -308,16 +309,30 @@ const DashboardPage = () => {
 											>
 												<div className="flex flex-1 flex-col justify-between p-1">
 													<div>
-														<h3 className="font-medium text-lg">{space.name}</h3>
+														<div className="flex items-center gap-2">
+															<h3 className="font-medium text-lg">{space.name}</h3>
+															{!space.is_owner && (
+																<Badge variant="secondary" className="text-xs font-normal">
+																	{t("shared")}
+																</Badge>
+															)}
+														</div>
 														<p className="mt-1 text-sm text-muted-foreground">
 															{space.description}
 														</p>
 													</div>
-													<div className="mt-4  text-xs text-muted-foreground">
-														{/* <span>{space.title}</span> */}
+													<div className="mt-4 flex items-center justify-between text-xs text-muted-foreground">
 														<span>
 															{t("created")} {formatDate(space.created_at)}
 														</span>
+														<div className="flex items-center gap-1">
+															{space.is_owner ? (
+																<UserCheck className="h-3.5 w-3.5" />
+															) : (
+																<Users className="h-3.5 w-3.5" />
+															)}
+															<span>{space.member_count}</span>
+														</div>
 													</div>
 												</div>
 											</Link>