feat: better custom events

Author: izadoesdev

apps/dashboard/app/(main)/websites/[id]/_components/filters-section.tsx

@@ -236,6 +236,9 @@ export function FiltersSection({
 						<div className="flex shrink-0 gap-2">
 							<Button
 								className="h-7 font-medium text-xs"
+								data-filter-id={editingFilter.id}
+								data-total-filters={selectedFilters.length}
+								data-track="filter_edit_completed"
 								disabled={isSaving || selectedFilters.length === 0}
 								onClick={handleSaveEdit}
 								size="sm"

apps/dashboard/components/layout/navigation/navigation-item.tsx

@@ -12,6 +12,7 @@ interface NavigationItemProps extends Omit<NavigationItemType, 'icon'> {
 	isRootLevel: boolean;
 	isExternal?: boolean;
 	currentWebsiteId?: string | null;
+	sectionName?: string;
 }
 
 export function NavigationItem({
@@ -26,6 +27,7 @@ export function NavigationItem({
 	currentWebsiteId,
 	domain,
 	disabled,
+	sectionName,
 }: NavigationItemProps) {
 	const pathname = usePathname();
 
@@ -115,11 +117,10 @@ export function NavigationItem({
 					? 'border-sidebar-ring border-r-2 bg-sidebar-accent font-medium text-sidebar-accent-foreground'
 					: 'text-sidebar-foreground/70'
 			)}
-			data-is-external={isExternal ? 'true' : 'false'}
-			data-nav-item={name.toLowerCase().replace(/\s+/g, '-')}
-			data-nav-section={isRootLevel ? 'main-nav' : 'website-nav'}
-			data-nav-type={isRootLevel ? 'main' : 'website'}
-			data-track="navigation-click"
+			data-nav-href={href}
+			data-nav-item={name}
+			data-nav-section={sectionName || 'main'}
+			data-track="navigation-item-click"
 			role="menuitem"
 		>
 			{content}

apps/dashboard/components/layout/navigation/navigation-section.tsx

@@ -133,6 +133,8 @@ export const NavigationSection = memo(function NavigationSectionComponent({
 		<div className="border-sidebar-border/30 border-b border-dotted last:border-b-0">
 			<button
 				className="flex w-full items-center gap-3 px-3 py-2.5 text-left font-medium text-sidebar-foreground text-sm transition-colors hover:bg-sidebar-accent/50 focus:outline-none"
+				data-section={title}
+				data-track="navigation-section-toggle"
 				onClick={() => toggleAccordion(title, true)}
 				type="button"
 			>
@@ -187,6 +189,7 @@ export const NavigationSection = memo(function NavigationSectionComponent({
 												isRootLevel={!!item.rootLevel}
 												name={item.name}
 												production={item.production}
+												sectionName={title}
 											/>
 										</div>
 									);

apps/dashboard/components/layout/sidebar.tsx

@@ -194,6 +194,7 @@ export function Sidebar() {
 					<div className="flex items-center gap-3">
 						<Button
 							aria-label="Toggle navigation menu"
+							data-track="sidebar-toggle"
 							onClick={toggleSidebar}
 							size="icon"
 							type="button"
@@ -204,6 +205,7 @@ export function Sidebar() {
 
 						<Link
 							className="flex items-center gap-2 transition-opacity hover:opacity-80"
+							data-track="logo-click"
 							href="/websites"
 						>
 							<div className="flex h-8 w-8 items-center justify-center">
@@ -259,6 +261,7 @@ export function Sidebar() {
 				<Button
 					aria-label="Close sidebar"
 					className="absolute top-3 right-3 z-50 h-8 w-8 p-0 md:hidden"
+					data-track="sidebar-close"
 					onClick={closeSidebar}
 					size="sm"
 					type="button"