feat: add Plausible tracking for search button clicks across all sites

- Create TrackedLargeSearchToggle and TrackedSearchToggle wrapper components
- Add SEARCH_OPEN tracking event to Web and Kit tracking configurations
- Update Web and Kit layouts to use tracked search components
- Ensures consistent search interaction tracking across the ecosystem
- Gallery already had custom search tracking implemented

Now all three sites (Web, Kit, Gallery) track when users open search

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: thedaviddias

apps/gallery/DISCLAIMER_USAGE.md

@@ -1,6 +1,11 @@
 import { DocsLayout } from "@ux-patterns/ui/components/custom/layout-notebook";
+import {
+	TrackedLargeSearchToggle,
+	TrackedSearchToggle,
+} from "@ux-patterns/ui/components/custom/tracked-search-toggle";
 import { baseOptions, linkItems } from "@/lib/layout.shared";
 import { source } from "@/lib/source";
+import { TRACKING_EVENTS } from "@/lib/tracking";
 
 export default function Layout({ children }: LayoutProps<"/docs">) {
 	const { nav, ...base } = baseOptions();
@@ -13,6 +18,19 @@ export default function Layout({ children }: LayoutProps<"/docs">) {
 			tree={source.pageTree}
 			links={linkItems}
 			themeSwitch={{ enabled: false }}
+			searchToggle={{
+				enabled: true,
+				components: {
+					lg: (
+						<TrackedLargeSearchToggle
+							trackingEvent={TRACKING_EVENTS.SEARCH_OPEN}
+						/>
+					),
+					sm: (
+						<TrackedSearchToggle trackingEvent={TRACKING_EVENTS.SEARCH_OPEN} />
+					),
+				},
+			}}
 		>
 			{children}
 		</DocsLayout>

apps/kit/app/docs/layout.tsx

@@ -28,6 +28,9 @@ export const TRACKING_EVENTS = {
 
 	// Documentation Events
 	COPY_CODE_BLOCK: "Copy Code Block",
+
+	// Search Events
+	SEARCH_OPEN: "Search Open",
 	VIEW_API_REFERENCE: "View API Reference",
 
 	GET_STARTED_CLICK: "Get Started Click",

apps/kit/lib/tracking.ts

@@ -1,7 +1,12 @@
 import { DocsLayout } from "@ux-patterns/ui/components/custom/layout-notebook";
+import {
+	TrackedLargeSearchToggle,
+	TrackedSearchToggle,
+} from "@ux-patterns/ui/components/custom/tracked-search-toggle";
 import type { ReactNode } from "react";
 import { baseOptions, linkItems } from "@/lib/layout.shared";
 import { source } from "@/lib/source";
+import { TRACKING_EVENTS } from "@/lib/tracking";
 
 export default function Layout({ children }: { children: ReactNode }) {
 	const { nav, ...base } = baseOptions();
@@ -14,6 +19,19 @@ export default function Layout({ children }: { children: ReactNode }) {
 			tree={source.pageTree}
 			links={linkItems}
 			themeSwitch={{ enabled: false }}
+			searchToggle={{
+				enabled: true,
+				components: {
+					lg: (
+						<TrackedLargeSearchToggle
+							trackingEvent={TRACKING_EVENTS.SEARCH_OPEN}
+						/>
+					),
+					sm: (
+						<TrackedSearchToggle trackingEvent={TRACKING_EVENTS.SEARCH_OPEN} />
+					),
+				},
+			}}
 		>
 			{children}
 		</DocsLayout>

apps/web/app/[...slug]/layout.tsx

@@ -28,6 +28,9 @@ export const TRACKING_EVENTS = {
 	// External Links
 	CANIUSE_LINK_CLICK: "CanIUse Link Click",
 
+	// Search Events
+	SEARCH_OPEN: "Search Open",
+
 	// Pattern Navigation
 	PATTERN_NEXT_CLICK: "Pattern Next Click",
 	PATTERN_PREV_CLICK: "Pattern Previous Click",

apps/web/lib/tracking.ts

@@ -0,0 +1,46 @@
+"use client";
+
+import {
+	LargeSearchToggle,
+	SearchToggle,
+} from "fumadocs-ui/components/layout/search-toggle";
+import { usePlausible } from "next-plausible";
+import type { ComponentProps } from "react";
+
+interface TrackedSearchProps {
+	trackingEvent?: string;
+}
+
+export function TrackedLargeSearchToggle({
+	trackingEvent = "Search Open",
+	...props
+}: ComponentProps<typeof LargeSearchToggle> & TrackedSearchProps) {
+	const plausible = usePlausible();
+
+	const handleClick = () => {
+		plausible(trackingEvent);
+	};
+
+	return (
+		<div onClick={handleClick}>
+			<LargeSearchToggle {...props} />
+		</div>
+	);
+}
+
+export function TrackedSearchToggle({
+	trackingEvent = "Search Open",
+	...props
+}: ComponentProps<typeof SearchToggle> & TrackedSearchProps) {
+	const plausible = usePlausible();
+
+	const handleClick = () => {
+		plausible(trackingEvent);
+	};
+
+	return (
+		<div onClick={handleClick}>
+			<SearchToggle {...props} />
+		</div>
+	);
+}