Add ai bot suggestions

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,8 +5,8 @@ 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";
-import { useGithubStarts } from "@/hooks/use-github-starts";
 
 export const Navbar = () => {
 	const [isScrolled, setIsScrolled] = useState(false);
@@ -37,7 +37,7 @@ export const Navbar = () => {
 
 const DesktopNav = ({ navItems, isScrolled }: any) => {
 	const [hovered, setHovered] = useState<number | null>(null);
-	const { compactFormat: githubStarts, loading: loadingGithubStarts } = useGithubStarts();
+	const { compactFormat: githubStars, loading: loadingGithubStars } = useGithubStars();
 	return (
 		<motion.div
 			onMouseLeave={() => {
@@ -88,11 +88,11 @@ 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" />
-					{loadingGithubStarts ? (
+					{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">
-							{githubStarts}
+							{githubStars}
 						</span>
 					)}
 				</Link>
@@ -110,7 +110,7 @@ const DesktopNav = ({ navItems, isScrolled }: any) => {
 
 const MobileNav = ({ navItems, isScrolled }: any) => {
 	const [open, setOpen] = useState(false);
-	const { compactFormat: githubStarts, loading: loadingGithubStarts } = useGithubStarts();
+	const { compactFormat: githubStars, loading: loadingGithubStars } = useGithubStars();
 
 	return (
 		<>
@@ -169,16 +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" />
-									{loadingGithubStarts ? (
+									{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">
-											{githubStarts}
+											{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

@@ -1,44 +1,49 @@
-import { useCallback, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
-export const useGithubStarts = () => {
+export const useGithubStars = () => {
 	const repo = process.env.NEXT_PUBLIC_GITHUB_REPO;
 	const owner = process.env.NEXT_PUBLIC_GITHUB_OWNER;
 
-	const [starts, setStarts] = useState<number | null>(null);
+	const [stars, setStars] = useState<number | null>(null);
 	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
 
 	useEffect(() => {
-		const getStarts = async () => {
+		const getStars = async () => {
 			try {
 				if (!repo || !owner) {
 					throw new Error("Missing GitHub credentials");
 				}
 
+				setError(null);
+
 				const response = await fetch(`https://api.github.com/repos/${owner}/${repo}`);
 
 				if (!response.ok) {
-					throw new Error(`Failed to fetch starts: ${response.statusText}`);
+					throw new Error(`Failed to fetch stars: ${response.statusText}`);
 				}
 
 				const data = await response.json();
 
-				setStarts(data?.stargazers_count);
+				setStars(data?.stargazers_count);
 			} catch (err) {
-				console.error("Error fetching starts:", err);
+				console.error("Error fetching stars:", err);
+				setError(err instanceof Error ? err.message : `Failed to fetch stars ${err}`);
 				throw err;
 			} finally {
 				setLoading(false);
 			}
 		};
 
-		getStarts();
+		getStars();
 	}, []);
 
 	return {
-		starts,
+		stars,
 		loading,
+		error,
 		compactFormat: Intl.NumberFormat("en-US", {
 			notation: "compact",
-		}).format(starts || 0),
+		}).format(stars || 0),
 	};
 };