cleanup types and props

Author: izadoesdev

apps/dashboard/components/layout/category-sidebar.tsx

@@ -34,12 +34,12 @@ const HelpDialog = dynamic(
 );
 
 type CategorySidebarProps = {
-	onCategoryChange?: (categoryId: string) => void;
+	onCategoryChangeAction?: (categoryId: string) => void;
 	selectedCategory?: string;
 };
 
 export function CategorySidebar({
-	onCategoryChange,
+	onCategoryChangeAction,
 	selectedCategory,
 }: CategorySidebarProps) {
 	const pathname = usePathname();
@@ -104,7 +104,7 @@ export function CategorySidebar({
 										isActive &&
 											"bg-sidebar-accent text-sidebar-accent-foreground"
 									)}
-									onClick={() => onCategoryChange?.(category.id)}
+									onClick={() => onCategoryChangeAction?.(category.id)}
 									type="button"
 								>
 									<Icon
@@ -158,7 +158,7 @@ export function CategorySidebar({
 					</div>
 				</div>
 
-				<HelpDialog onOpenChange={setHelpOpen} open={helpOpen} />
+				<HelpDialog onOpenChangeAction={setHelpOpen} open={helpOpen} />
 			</div>
 		</div>
 	);

apps/dashboard/components/layout/help-dialog.tsx

@@ -11,7 +11,7 @@ import {
 
 type HelpDialogProps = {
 	open: boolean;
-	onOpenChange: (open: boolean) => void;
+	onOpenChangeAction: (open: boolean) => void;
 };
 
 const helpItems = [
@@ -38,9 +38,9 @@ const helpItems = [
 	},
 ] as const;
 
-export function HelpDialog({ open, onOpenChange }: HelpDialogProps) {
+export function HelpDialog({ open, onOpenChangeAction }: HelpDialogProps) {
 	return (
-		<Dialog onOpenChange={onOpenChange} open={open}>
+		<Dialog onOpenChange={onOpenChangeAction} open={open}>
 			<DialogContent className="sm:max-w-md">
 				<DialogHeader className="text-center">
 					<DialogTitle>Help & Resources</DialogTitle>

apps/dashboard/components/layout/navigation/mobile-category-selector.tsx

@@ -22,12 +22,12 @@ import {
 } from "./navigation-config";
 
 type MobileCategorySelectorProps = {
-	onCategoryChange?: (categoryId: string) => void;
+	onCategoryChangeAction?: (categoryId: string) => void;
 	selectedCategory?: string;
 };
 
 export function MobileCategorySelector({
-	onCategoryChange,
+	onCategoryChangeAction,
 	selectedCategory,
 }: MobileCategorySelectorProps) {
 	const pathname = usePathname();
@@ -78,7 +78,7 @@ export function MobileCategorySelector({
 						<CaretDownIcon className="h-4 w-4" weight="fill" />
 					</Button>
 				</DropdownMenuTrigger>
-				<DropdownMenuContent className="w-full min-w-[var(--radix-dropdown-menu-trigger-width)]">
+				<DropdownMenuContent className="w-full min-w-(--radix-dropdown-menu-trigger-width)">
 					{categories.map((category) => {
 						const Icon = category.icon;
 						const isActive = activeCategory === category.id;
@@ -89,7 +89,7 @@ export function MobileCategorySelector({
 									isActive && "bg-sidebar-accent text-sidebar-accent-foreground"
 								)}
 								key={category.id}
-								onClick={() => onCategoryChange?.(category.id)}
+								onClick={() => onCategoryChangeAction?.(category.id)}
 							>
 								<Icon
 									className={cn(

apps/dashboard/components/layout/sidebar.tsx

@@ -203,22 +203,22 @@ export function Sidebar() {
 			{/* Category Sidebar - Desktop only */}
 			<div className="hidden md:block">
 				<CategorySidebar
-					onCategoryChange={setSelectedCategory}
+					onCategoryChangeAction={setSelectedCategory}
 					selectedCategory={selectedCategory}
 				/>
 			</div>
 
 			{isMobileOpen && (
-				<div
+				<button
 					className="fixed inset-0 z-30 bg-black/20 md:hidden"
 					onClick={closeSidebar}
 					onKeyDown={(e) => {
 						if (e.key === "Escape") {
 							closeSidebar();
 						}
 					}}
-					role="button"
 					tabIndex={0}
+					type="button"
 				/>
 			)}
 
@@ -253,7 +253,7 @@ export function Sidebar() {
 
 						{/* Mobile Category Selector */}
 						<MobileCategorySelector
-							onCategoryChange={setSelectedCategory}
+							onCategoryChangeAction={setSelectedCategory}
 							selectedCategory={selectedCategory}
 						/>