feat: add clsx and tailwind-merge dependencies, enhance Kanban components

- Added `clsx` and `tailwind-merge` to `package.json` and `package-lock.json` for improved class management and utility merging.
- Updated `Column` and `TaskCard` components to utilize new UI components (`Card`, `Badge`) for a more cohesive design.
- Refactored styles in `Header` and Kanban components to align with the new design system.
- Marked several tasks as completed in `TODO.md` reflecting progress on UI enhancements.

components/ui/Badge.tsx

@@ -0,0 +1,44 @@
+import { HTMLAttributes, forwardRef } from 'react';
+import { cn } from '@/lib/utils';
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'outline';
+  size?: 'sm' | 'md';
+}
+
+const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
+  ({ className, variant = 'default', size = 'md', ...props }, ref) => {
+    const baseStyles = 'inline-flex items-center font-mono font-medium transition-all duration-200';
+    
+    const variants = {
+      default: 'bg-slate-800/50 text-slate-300 border border-slate-600/50',
+      primary: 'bg-cyan-950/50 text-cyan-300 border border-cyan-500/30',
+      success: 'bg-emerald-950/50 text-emerald-300 border border-emerald-500/30',
+      warning: 'bg-yellow-950/50 text-yellow-300 border border-yellow-500/30',
+      danger: 'bg-red-950/50 text-red-300 border border-red-500/30',
+      outline: 'bg-transparent text-slate-400 border border-slate-600 hover:bg-slate-800/30 hover:text-slate-300'
+    };
+    
+    const sizes = {
+      sm: 'px-1.5 py-0.5 text-xs rounded',
+      md: 'px-2 py-1 text-xs rounded-md'
+    };
+    
+    return (
+      <span
+        className={cn(
+          baseStyles,
+          variants[variant],
+          sizes[size],
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+
+Badge.displayName = 'Badge';
+
+export { Badge };