website refactor

apps/website/ui/ControlBar.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface ControlBarProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * ControlBar is the top-level header of the "Telemetry Workspace".
+ * It provides global controls, navigation, and status information.
+ * Aligned with "Precision Racing Minimal" theme.
+ */
+export function ControlBar({ children, className = '' }: ControlBarProps) {
+  return (
+    <header 
+      className={`sticky top-0 z-50 h-16 md:h-20 bg-[#0C0D0F]/80 backdrop-blur-md border-b border-[#23272B] flex items-center px-4 md:px-6 ${className}`}
+    >
+      {children}
+    </header>
+  );
+}