website refactor

apps/website/components/actions/ActionFiltersBar.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { useState } from 'react';
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Select } from '@/ui/Select';
 import { Input } from '@/ui/Input';
@@ -10,17 +10,17 @@ export function ActionFiltersBar() {
   const [filter, setFilter] = useState('all');
   
   return (
-    <Box 
+    <Stack 
+      direction="row"
       h="12" 
       borderBottom 
       borderColor="border-[#23272B]" 
-      display="flex" 
-      alignItems="center" 
+      align="center" 
       px={6} 
       bg="bg-[#0C0D0F]" 
       gap={6}
     >
-      <Box display="flex" alignItems="center" gap={2}>
+      <Stack direction="row" align="center" gap={2}>
         <Text size="xs" color="text-gray-500" weight="bold" uppercase>Filter:</Text>
         <Select 
           options={[
@@ -32,8 +32,8 @@ export function ActionFiltersBar() {
           onChange={(e) => setFilter(e.target.value)}
           fullWidth={false}
         />
-      </Box>
-      <Box display="flex" alignItems="center" gap={2}>
+      </Stack>
+      <Stack direction="row" align="center" gap={2}>
         <Text size="xs" color="text-gray-500" weight="bold" uppercase>Status:</Text>
         <Select 
           options={[
@@ -46,12 +46,12 @@ export function ActionFiltersBar() {
           onChange={() => {}}
           fullWidth={false}
         />
-      </Box>
-      <Box ml="auto">
+      </Stack>
+      <Stack className="ml-auto">
         <Input 
           placeholder="SEARCH_ID..." 
         />
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }

apps/website/components/actions/ActionStatusBadge.tsx

@@ -1,43 +1,26 @@
 'use client';
 
-import { Box } from '@/ui/Box';
-import { Text } from '@/ui/Text';
+import { Badge } from '@/ui/Badge';
 
 interface ActionStatusBadgeProps {
   status: 'PENDING' | 'COMPLETED' | 'FAILED' | 'IN_PROGRESS';
 }
 
 export function ActionStatusBadge({ status }: ActionStatusBadgeProps) {
-  const styles = {
-    PENDING: { bg: 'bg-amber-500/10', text: 'text-[#FFBE4D]', border: 'border-amber-500/20' },
-    COMPLETED: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', border: 'border-emerald-500/20' },
-    FAILED: { bg: 'bg-red-500/10', text: 'text-red-400', border: 'border-red-500/30' },
-    IN_PROGRESS: { bg: 'bg-blue-500/10', text: 'text-[#198CFF]', border: 'border-blue-500/20' },
+  const variants: Record<string, 'warning' | 'success' | 'danger' | 'info'> = {
+    PENDING: 'warning',
+    COMPLETED: 'success',
+    FAILED: 'danger',
+    IN_PROGRESS: 'info',
   };
 
-  const config = styles[status];
-
   return (
-    <Box 
-      as="span" 
-      px={2} 
-      py={0.5} 
-      rounded="sm" 
-      bg={config.bg} 
-      border 
-      borderColor={config.border}
-      display="inline-block"
+    <Badge 
+      variant={variants[status]} 
+      size="sm" 
+      rounded="sm"
     >
-      <Text 
-        size="xs" 
-        weight="bold" 
-        color={config.text} 
-        uppercase 
-        letterSpacing="tight"
-        fontSize="10px"
-      >
-        {status.replace('_', ' ')}
-      </Text>
-    </Box>
+      {status.replace('_', ' ')}
+    </Badge>
   );
 }

apps/website/components/actions/ActionsHeader.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
 import { Activity } from 'lucide-react';
 import { StatusIndicator } from '@/ui/StatusIndicator';
@@ -11,31 +11,31 @@ interface ActionsHeaderProps {
 
 export function ActionsHeader({ title }: ActionsHeaderProps) {
   return (
-    <Box 
+    <Stack 
       as="header" 
+      direction="row"
       h="16" 
       borderBottom 
       borderColor="border-[#23272B]" 
-      display="flex" 
-      alignItems="center" 
+      align="center" 
       px={6} 
       bg="bg-[#141619]"
     >
-      <Box display="flex" alignItems="center" gap={4}>
-        <Box 
+      <Stack direction="row" align="center" gap={4}>
+        <Stack 
           w="2" 
           h="6" 
           bg="bg-[#198CFF]" 
           rounded="sm" 
           shadow="shadow-[0_0_8px_rgba(25,140,255,0.5)]"
-        />
+        >{null}</Stack>
         <Text as="h1" size="xl" weight="medium" letterSpacing="tight" uppercase>
           {title}
         </Text>
-      </Box>
-      <Box ml="auto" display="flex" alignItems="center" gap={4}>
+      </Stack>
+      <Stack className="ml-auto" direction="row" align="center" gap={4}>
         <StatusIndicator icon={Activity} variant="info" label="SYSTEM_READY" />
-      </Box>
-    </Box>
+      </Stack>
+    </Stack>
   );
 }