feat: add tailwind-merge utility and update SearchBar component for class merging

Author: dborysov

package-lock.json

@@ -33,6 +33,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.1",
     "superjson": "^2.2.2",
+    "tailwind-merge": "^3.3.1",
     "webextension-polyfill": "^0.12.0",
     "zod": "^4.0.17"
   },

package.json

@@ -1,4 +1,5 @@
 import { Search } from "lucide-react";
+import { cn } from "../../lib/cn";
 
 interface SearchBarProps {
   searchTerm: string;
@@ -14,7 +15,7 @@ export function SearchBar({
   className = "",
 }: SearchBarProps) {
   return (
-    <div className={`flex-1 enter-animation-scale ${className}`}>
+    <div className={cn("flex-1", "enter-animation-scale", className)}>
       <div className="relative">
         <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500" />
         <input

src/components/layout/SearchBar.tsx

@@ -0,0 +1,21 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Utility function that combines clsx and tailwind-merge for intelligent class merging.
+ *
+ * This function:
+ * 1. Uses clsx to handle conditional classes and merge class arrays/objects
+ * 2. Uses tailwind-merge to resolve CSS class conflicts intelligently
+ *
+ * @param inputs - Class values that can be strings, objects, arrays, or conditional
+ * @returns A merged string with conflicting classes resolved
+ *
+ * @example
+ * cn("px-2 py-1", "px-4") // "py-1 px-4" (px-2 is overridden)
+ * cn("text-red-500", condition && "text-blue-500") // Conditional classes
+ * cn({ "bg-blue-500": isActive, "bg-gray-500": !isActive }) // Object syntax
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}