website refactor

apps/website/ui/ControlBar.tsx

@@ -4,28 +4,30 @@ import { Surface } from './primitives/Surface';
 
 export interface ControlBarProps {
   children: ReactNode;
-  actions?: ReactNode;
+  leftContent?: ReactNode;
+  variant?: 'default' | 'dark';
 }
 
 export const ControlBar = ({ 
   children, 
-  actions 
+  leftContent,
+  variant = 'default'
 }: ControlBarProps) => {
   return (
     <Surface 
-      variant="muted" 
+      variant={variant === 'dark' ? 'dark' : 'muted'} 
       padding={4} 
       style={{ borderBottom: '1px solid var(--ui-color-border-default)' }}
     >
-      <Box display="flex" alignItems="center" justifyContent="between">
-        <Box display="flex" alignItems="center" gap={4}>
-          {children}
-        </Box>
-        {actions && (
-          <Box display="flex" alignItems="center" gap={4}>
-            {actions}
+      <Box display="flex" alignItems="center" justifyContent="between" flexWrap="wrap" gap={4}>
+        {leftContent && (
+          <Box display="flex" alignItems="center" gap={4} flex={1}>
+            {leftContent}
           </Box>
         )}
+        <Box display="flex" alignItems="center" gap={4} justifyContent="end" flex={leftContent ? 0 : 1}>
+          {children}
+        </Box>
       </Box>
     </Surface>
   );