website refactor

apps/website/components/dev/DevToolbar.tsx

@@ -17,6 +17,7 @@ import { Icon } from '@/ui/Icon';
 import { IconButton } from '@/ui/IconButton';
 import { Text } from '@/ui/Text';
 import { Stack } from '@/ui/Stack';
+import { Toolbar } from '@/ui/Toolbar';
 import { APIStatusSection } from './sections/APIStatusSection';
 import { NotificationSendSection } from './sections/NotificationSendSection';
 import { NotificationTypeSection } from './sections/NotificationTypeSection';
@@ -229,9 +230,7 @@ export function DevToolbar() {
 
   if (isMinimized) {
     return (
-      <Stack 
-        style={{ position: 'fixed', right: '1rem', bottom: '6rem', zIndex: 1000 }}
-      >
+      <Toolbar minimized bottom="6rem">
         <IconButton
           icon={Wrench}
           onClick={() => setIsMinimized(false)}
@@ -239,31 +238,12 @@ export function DevToolbar() {
           title="Open Dev Toolbar"
           size="lg"
         />
-      </Stack>
+      </Toolbar>
     );
   }
 
   return (
-    <Stack
-      width="min(420px, calc(100vw - 2rem))"
-      maxHeight="calc(100vh - 2rem)"
-      overflow="auto"
-      border={true}
-      borderColor="var(--ui-color-border-default)"
-      rounded="xl"
-      bg="rgba(20, 22, 25, 0.92)"
-      padding={3}
-      style={{
-        position: 'fixed',
-        right: '1rem',
-        bottom: '6rem',
-        zIndex: 1000,
-        boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
-        backdropFilter: 'blur(12px)',
-        WebkitBackdropFilter: 'blur(12px)',
-      }}
-      gap={4}
-    >
+    <Toolbar bottom="6rem">
       {/* Header */}
       <Stack direction="row" align="center" justify="between" gap={4}>
         <Stack direction="row" align="center" gap={2}>
@@ -386,6 +366,6 @@ export function DevToolbar() {
           <Text size="xs" variant="low">Click ↑ to expand dev tools</Text>
         </Stack>
       )}
-    </Stack>
+    </Toolbar>
   );
 }