feat(ui): enhance chat UI with new components and styling

refactor(chat): improve message display and actions
feat(chat): add high contrast mode toggle
style(chat): update spacing and sizing for better readability
feat(chat): add new Section and Stack layout components
docs: add UI style guide documentation
fix(chat): improve browser connection handling in scraper
feat(settings): expand default sources and improve UI
refactor: consolidate chat page layout and components

components/ui/section.tsx

@@ -0,0 +1,29 @@
+import { cn } from "@/lib/utils";
+
+type Padding = "sm" | "md" | "lg";
+
+interface SectionProps extends React.ComponentProps<"section"> {
+  padding?: Padding;
+  fullWidth?: boolean;
+}
+
+function paddingToClass(padding?: Padding) {
+  switch (padding) {
+    case "sm": return "px-4 md:px-6 lg:px-8 py-4 md:py-6";
+    case "lg": return "px-4 md:px-6 lg:px-8 py-8 md:py-12";
+    case "md":
+    default:
+      return "px-4 md:px-6 lg:px-8 py-6 md:py-8";
+  }
+}
+
+export function Section({ padding = "md", fullWidth = false, className, children, ...props }: SectionProps) {
+  return (
+    <section
+      className={cn(paddingToClass(padding), fullWidth ? "w-full" : "w-full max-w-6xl mx-auto", className)}
+      {...props}
+    >
+      {children}
+    </section>
+  );
+}