website refactor

apps/website/components/dashboard/DashboardControlBar.tsx

@@ -1,5 +1,7 @@
+'use client';
+
 import { Heading } from '@/ui/Heading';
-import { Stack } from '@/ui/primitives/Stack';
+import { ControlBar } from '@/ui/ControlBar';
 import React from 'react';
 
 interface DashboardControlBarProps {
@@ -11,17 +13,17 @@ interface DashboardControlBarProps {
  * DashboardControlBar
  * 
  * The top header bar for page-level controls and context.
- * Uses UI primitives to comply with architectural constraints.
  */
 export function DashboardControlBar({ title, actions }: DashboardControlBarProps) {
   return (
-    <Stack direction="row" h="full" align="center" justify="between" px={6}>
-      <Heading level={6} weight="bold">
-        {title}
-      </Heading>
-      <Stack direction="row" align="center" gap={4}>
-        {actions}
-      </Stack>
-    </Stack>
+    <ControlBar
+      leftContent={
+        <Heading level={6} weight="bold">
+          {title}
+        </Heading>
+      }
+    >
+      {actions}
+    </ControlBar>
   );
 }