feat: refactor UI components to utilize new Container, Section, and StatusBadge components for improved layout and styling consistency across the application

src/components/ui/status-badge.tsx

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+import { Badge, type BadgeProps } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import { cva, type VariantProps } from "class-variance-authority";
+
+const statusBadgeVariants = cva("flex items-center gap-1", {
+  variants: {
+    status: {
+      success: "bg-green-500/10 text-green-500 border-green-500/20",
+      warning: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
+      error: "bg-red-500/10 text-red-500 border-red-500/20",
+      info: "bg-blue-500/10 text-blue-500 border-blue-500/20",
+      reading: "bg-blue-500/10 text-blue-500 border-blue-500/20",
+      unread: "bg-yellow-500/10 text-yellow-500 border-yellow-500/20",
+    },
+  },
+  defaultVariants: {
+    status: "info",
+  },
+});
+
+export interface StatusBadgeProps
+  extends Omit<BadgeProps, "variant">,
+    VariantProps<typeof statusBadgeVariants> {
+  icon?: LucideIcon;
+  children: React.ReactNode;
+}
+
+const StatusBadge = ({ status, icon: Icon, children, className, ...props }: StatusBadgeProps) => {
+  return (
+    <Badge
+      variant="outline"
+      className={cn(statusBadgeVariants({ status }), className)}
+      {...props}
+    >
+      {Icon && <Icon className="w-4 h-4" />}
+      {children}
+    </Badge>
+  );
+};
+
+export { StatusBadge, statusBadgeVariants };
+