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

src/components/ui/container.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/utils";
+
+const containerVariants = cva("mx-auto px-4 sm:px-6 lg:px-8", {
+  variants: {
+    size: {
+      default: "max-w-screen-2xl",
+      narrow: "max-w-4xl",
+      wide: "max-w-screen-3xl",
+      full: "max-w-full",
+    },
+    spacing: {
+      none: "",
+      sm: "py-4",
+      default: "py-8",
+      lg: "py-12",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+    spacing: "default",
+  },
+});
+
+export interface ContainerProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof containerVariants> {
+  as?: React.ElementType;
+}
+
+const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
+  ({ className, size, spacing, as: Component = "div", ...props }, ref) => {
+    return (
+      <Component
+        ref={ref}
+        className={cn(containerVariants({ size, spacing }), className)}
+        {...props}
+      />
+    );
+  }
+);
+
+Container.displayName = "Container";
+
+export { Container, containerVariants };
+

src/components/ui/icon-button.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+import { Button, type ButtonProps } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface IconButtonProps extends Omit<ButtonProps, "children"> {
+  icon: LucideIcon;
+  label?: string;
+  tooltip?: string;
+  iconClassName?: string;
+}
+
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  ({ icon: Icon, label, tooltip, iconClassName, className, ...props }, ref) => {
+    return (
+      <Button
+        ref={ref}
+        className={cn(label ? "" : "aspect-square", className)}
+        aria-label={tooltip || label}
+        title={tooltip}
+        {...props}
+      >
+        <Icon className={cn("h-4 w-4", label && "mr-2", iconClassName)} />
+        {label && <span>{label}</span>}
+      </Button>
+    );
+  }
+);
+
+IconButton.displayName = "IconButton";
+
+export { IconButton };
+

src/components/ui/nav-button.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface NavButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  icon: LucideIcon;
+  label: string;
+  active?: boolean;
+  count?: number;
+}
+
+const NavButton = React.forwardRef<HTMLButtonElement, NavButtonProps>(
+  ({ icon: Icon, label, active, count, className, ...props }, ref) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          "w-full flex items-center justify-between rounded-lg px-3 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground transition-colors",
+          active && "bg-accent",
+          className
+        )}
+        {...props}
+      >
+        <div className="flex items-center">
+          <Icon className="mr-2 h-4 w-4" />
+          <span className="truncate">{label}</span>
+        </div>
+        {count !== undefined && (
+          <span className="text-xs text-muted-foreground">{count}</span>
+        )}
+      </button>
+    );
+  }
+);
+
+NavButton.displayName = "NavButton";
+
+export { NavButton };
+

src/components/ui/scroll-container.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface ScrollContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+  showArrows?: boolean;
+  scrollAmount?: number;
+  arrowLeftLabel?: string;
+  arrowRightLabel?: string;
+}
+
+const ScrollContainer = React.forwardRef<HTMLDivElement, ScrollContainerProps>(
+  (
+    {
+      children,
+      className,
+      showArrows = true,
+      scrollAmount = 400,
+      arrowLeftLabel = "Scroll left",
+      arrowRightLabel = "Scroll right",
+      ...props
+    },
+    ref
+  ) => {
+    const scrollContainerRef = React.useRef<HTMLDivElement>(null);
+    const [showLeftArrow, setShowLeftArrow] = React.useState(false);
+    const [showRightArrow, setShowRightArrow] = React.useState(true);
+
+    const handleScroll = React.useCallback(() => {
+      if (!scrollContainerRef.current) return;
+
+      const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+      setShowLeftArrow(scrollLeft > 0);
+      setShowRightArrow(scrollLeft < scrollWidth - clientWidth - 10);
+    }, []);
+
+    const scroll = React.useCallback(
+      (direction: "left" | "right") => {
+        if (!scrollContainerRef.current) return;
+
+        const scrollValue = direction === "left" ? -scrollAmount : scrollAmount;
+        scrollContainerRef.current.scrollBy({ left: scrollValue, behavior: "smooth" });
+      },
+      [scrollAmount]
+    );
+
+    React.useEffect(() => {
+      const container = scrollContainerRef.current;
+      if (!container) return;
+
+      handleScroll();
+
+      const resizeObserver = new ResizeObserver(handleScroll);
+      resizeObserver.observe(container);
+
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }, [handleScroll]);
+
+    return (
+      <div className="relative" ref={ref}>
+        {showArrows && showLeftArrow && (
+          <button
+            onClick={() => scroll("left")}
+            className="absolute left-0 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/90 shadow-md border transition-opacity hover:bg-accent"
+            aria-label={arrowLeftLabel}
+          >
+            <ChevronLeft className="h-6 w-6" />
+          </button>
+        )}
+
+        <div
+          ref={scrollContainerRef}
+          onScroll={handleScroll}
+          className={cn(
+            "flex gap-4 overflow-x-auto scrollbar-hide scroll-smooth pb-4",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+
+        {showArrows && showRightArrow && (
+          <button
+            onClick={() => scroll("right")}
+            className="absolute right-0 top-1/2 -translate-y-1/2 z-10 p-2 rounded-full bg-background/90 shadow-md border transition-opacity hover:bg-accent"
+            aria-label={arrowRightLabel}
+          >
+            <ChevronRight className="h-6 w-6" />
+          </button>
+        )}
+      </div>
+    );
+  }
+);
+
+ScrollContainer.displayName = "ScrollContainer";
+
+export { ScrollContainer };
+

src/components/ui/section.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { type LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+  title?: string;
+  icon?: LucideIcon;
+  description?: string;
+  actions?: React.ReactNode;
+  headerClassName?: string;
+}
+
+const Section = React.forwardRef<HTMLElement, SectionProps>(
+  (
+    { title, icon: Icon, description, actions, children, className, headerClassName, ...props },
+    ref
+  ) => {
+    return (
+      <section ref={ref} className={cn("space-y-4", className)} {...props}>
+        {(title || actions) && (
+          <div className={cn("flex items-center justify-between", headerClassName)}>
+            {title && (
+              <div className="flex items-center gap-2">
+                {Icon && <Icon className="h-5 w-5 text-muted-foreground" />}
+                <div>
+                  <h2 className="text-2xl font-bold tracking-tight">{title}</h2>
+                  {description && (
+                    <p className="text-sm text-muted-foreground mt-1">{description}</p>
+                  )}
+                </div>
+              </div>
+            )}
+            {actions && <div className="flex items-center gap-2">{actions}</div>}
+          </div>
+        )}
+        {children}
+      </section>
+    );
+  }
+);
+
+Section.displayName = "Section";
+
+export { Section };
+

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 };
+