Merge pull request #412 from CREDO23/feature/github-stars-hook

[Feature]  Fetch github repo starts dynamically

Author: MODSetter

surfsense_web/app/dashboard/[search_space_id]/connectors/add/baidu-search-api/page.tsx

@@ -153,8 +153,8 @@ export default function BaiduSearchApiPage() {
 					<CardHeader>
 						<CardTitle className="text-2xl font-bold">Connect Baidu Search</CardTitle>
 						<CardDescription>
-							Integrate with Baidu AI Search to enhance your search capabilities with
-							intelligent Chinese web search results.
+							Integrate with Baidu AI Search to enhance your search capabilities with intelligent
+							Chinese web search results.
 						</CardDescription>
 					</CardHeader>
 					<CardContent>
@@ -224,13 +224,9 @@ export default function BaiduSearchApiPage() {
 												<SelectContent>
 													<SelectItem value="ernie-3.5-8k">ERNIE 3.5 8K</SelectItem>
 													<SelectItem value="ernie-4.5-turbo-32k">ERNIE 4.5 Turbo 32K</SelectItem>
-													<SelectItem value="ernie-4.5-turbo-128k">
-														ERNIE 4.5 Turbo 128K
-													</SelectItem>
+													<SelectItem value="ernie-4.5-turbo-128k">ERNIE 4.5 Turbo 128K</SelectItem>
 													<SelectItem value="deepseek-v3">DeepSeek V3</SelectItem>
-													<SelectItem value="qwen3-235b-a22b-instruct-2507">
-														Qwen3 235B
-													</SelectItem>
+													<SelectItem value="qwen3-235b-a22b-instruct-2507">Qwen3 235B</SelectItem>
 												</SelectContent>
 											</Select>
 											<FormDescription>
@@ -255,7 +251,9 @@ export default function BaiduSearchApiPage() {
 												</FormControl>
 												<SelectContent>
 													<SelectItem value="baidu_search_v1">Baidu Search V1</SelectItem>
-													<SelectItem value="baidu_search_v2">Baidu Search V2 (Recommended)</SelectItem>
+													<SelectItem value="baidu_search_v2">
+														Baidu Search V2 (Recommended)
+													</SelectItem>
 												</SelectContent>
 											</Select>
 											<FormDescription>

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

@@ -65,7 +65,7 @@ const connectorCategories: ConnectorCategory[] = [
 				description: "Connect to Elasticsearch to index and search documents, logs and metrics.",
 				icon: getConnectorIcon(EnumConnectorName.ELASTICSEARCH_CONNECTOR, "h-6 w-6"),
 				status: "available",
-			},	
+			},
 			{
 				id: "baidu-search-api",
 				title: "Baidu Search",

surfsense_web/components/chat/SourceDetailSheet.tsx

@@ -53,9 +53,9 @@ export function SourceDetailSheet({
 
 	// Check if this is a source type that should render directly from node
 	const isDirectRenderSource =
-		sourceType === "TAVILY_API" || 
-		sourceType === "LINKUP_API" || 
-		sourceType === "SEARXNG_API" || 
+		sourceType === "TAVILY_API" ||
+		sourceType === "LINKUP_API" ||
+		sourceType === "SEARXNG_API" ||
 		sourceType === "BAIDU_SEARCH_API";
 
 	useEffect(() => {

surfsense_web/components/contact/contact-form.tsx

@@ -339,7 +339,7 @@ export function GridPattern({ width, height, x, y, squares, ...props }: any) {
 			</defs>
 			<rect width="100%" height="100%" strokeWidth={0} fill={`url(#${patternId})`} />
 			{squares && (
-				<svg x={x} y={y} className="overflow-visible">
+				<svg aria-hidden="true" x={x} y={y} className="overflow-visible">
 					{squares.map(([x, y]: any, idx: number) => (
 						<rect
 							strokeWidth="0"

surfsense_web/components/homepage/navbar.tsx

@@ -5,6 +5,7 @@ import Link from "next/link";
 import React, { useEffect, useState } from "react";
 import { Logo } from "@/components/Logo";
 import { ThemeTogglerComponent } from "@/components/theme/theme-toggle";
+import { useGithubStars } from "@/hooks/use-github-stars";
 import { cn } from "@/lib/utils";
 
 export const Navbar = () => {
@@ -36,6 +37,7 @@ export const Navbar = () => {
 
 const DesktopNav = ({ navItems, isScrolled }: any) => {
 	const [hovered, setHovered] = useState<number | null>(null);
+	const { compactFormat: githubStars, loading: loadingGithubStars } = useGithubStars();
 	return (
 		<motion.div
 			onMouseLeave={() => {
@@ -86,7 +88,13 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
 					className="hidden rounded-full px-3 py-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors md:flex items-center gap-1.5"
 				>
 					<IconBrandGithub className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
-					<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">9.5k</span>
+					{loadingGithubStars ? (
+						<div className="w-6 h-5 dark:bg-neutral-800 animate-pulse"></div>
+					) : (
+						<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
+							{githubStars}
+						</span>
+					)}
 				</Link>
 				<ThemeTogglerComponent />
 				<Link
@@ -102,6 +110,7 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
 
 const MobileNav = ({ navItems, isScrolled }: any) => {
 	const [open, setOpen] = useState(false);
+	const { compactFormat: githubStars, loading: loadingGithubStars } = useGithubStars();
 
 	return (
 		<>
@@ -160,12 +169,19 @@ const MobileNav = ({ navItems, isScrolled }: any) => {
 									className="flex items-center gap-1.5 rounded-lg px-3 py-2 hover:bg-gray-100 dark:hover:bg-neutral-800 transition-colors"
 								>
 									<IconBrandGithub className="h-5 w-5 text-neutral-600 dark:text-neutral-300" />
-									<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
-										9.5k
-									</span>
+									{loadingGithubStars ? (
+										<div className="w-6 h-5 dark:bg-neutral-800 animate-pulse"></div>
+									) : (
+										<span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">
+											{githubStars}
+										</span>
+									)}
 								</Link>
 							</div>
-							<button className="w-full rounded-lg bg-black px-8 py-2 font-medium text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black">
+							<button
+								type="button"
+								className="w-full rounded-lg bg-black px-8 py-2 font-medium text-white shadow-[0px_-2px_0px_0px_rgba(255,255,255,0.4)_inset] dark:bg-white dark:text-black"
+							>
 								Book a call
 							</button>
 						</motion.div>

surfsense_web/components/pricing.tsx

@@ -76,7 +76,10 @@ export function Pricing({
 			</div>
 
 			<div className="flex justify-center mb-10">
-				<label className="relative inline-flex items-center cursor-pointer">
+				<label
+					htmlFor="billing-toggle"
+					className="relative inline-flex items-center cursor-pointer"
+				>
 					<Label>
 						<Switch
 							ref={switchRef as any}

surfsense_web/hooks/use-github-stars.ts

@@ -0,0 +1,52 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export const useGithubStars = () => {
+	const [stars, setStars] = useState<number | null>(null);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+
+	useEffect(() => {
+		const abortController = new AbortController();
+		const getStars = async () => {
+			try {
+				setError(null);
+
+				const response = await fetch(`https://api.github.com/repos/MODSetter/SurfSense`, {
+					signal: abortController.signal,
+				});
+
+				if (!response.ok) {
+					throw new Error(`Failed to fetch stars: ${response.statusText}`);
+				}
+
+				const data = await response.json();
+
+				setStars(data?.stargazers_count);
+			} catch (err) {
+				if (err instanceof Error) {
+					console.error("Error fetching stars:", err);
+					setError(err.message);
+				}
+			} finally {
+				setLoading(false);
+			}
+		};
+
+		getStars();
+
+		return () => {
+			abortController.abort();
+		};
+	}, []);
+
+	return {
+		stars,
+		loading,
+		error,
+		compactFormat: Intl.NumberFormat("en-US", {
+			notation: "compact",
+		}).format(stars || 0),
+	};
+};