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/button.tsx

@@ -21,12 +21,12 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: "h-10 px-4 py-2 has-[>svg]:px-3",
         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-        icon: "size-9",
+        lg: "h-12 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-10",
         "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        "icon-lg": "size-12",
       },
     },
     defaultVariants: {

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

components/ui/stack.tsx

@@ -0,0 +1,65 @@
+import { cn } from "@/lib/utils";
+
+type Gap = 8 | 16 | 24 | 32 | 40 | 48;
+type Direction = "vertical" | "horizontal";
+type Align = "start" | "center" | "end" | "stretch";
+type Justify = "start" | "center" | "end" | "between";
+
+interface StackProps extends React.ComponentProps<"div"> {
+  direction?: Direction;
+  gap?: Gap;
+  align?: Align;
+  justify?: Justify;
+}
+
+function gapToClass(gap?: Gap) {
+  switch (gap) {
+    case 8: return "gap-2";
+    case 16: return "gap-4";
+    case 24: return "gap-6";
+    case 32: return "gap-8";
+    case 40: return "gap-10";
+    case 48: return "gap-12";
+    default: return "gap-4";
+  }
+}
+
+function alignToClass(align?: Align) {
+  switch (align) {
+    case "start": return "items-start";
+    case "center": return "items-center";
+    case "end": return "items-end";
+    case "stretch": return "items-stretch";
+    default: return "items-start";
+  }
+}
+
+function justifyToClass(justify?: Justify) {
+  switch (justify) {
+    case "start": return "justify-start";
+    case "center": return "justify-center";
+    case "end": return "justify-end";
+    case "between": return "justify-between";
+    default: return "justify-start";
+  }
+}
+
+export function Stack({
+  direction = "vertical",
+  gap = 16,
+  align = "start",
+  justify = "start",
+  className,
+  children,
+  ...props
+}: StackProps) {
+  const dirClass = direction === "vertical" ? "flex flex-col" : "flex";
+  return (
+    <div
+      className={cn(dirClass, gapToClass(gap), alignToClass(align), justifyToClass(justify), className)}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}