website refactor

apps/website/ui/Toolbar.tsx

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { Stack } from './Stack';
+
+interface ToolbarProps {
+  children: ReactNode;
+  minimized?: boolean;
+  bottom?: number | string;
+}
+
+export function Toolbar({ children, minimized = false, bottom = '2rem' }: ToolbarProps) {
+  if (minimized) {
+    return (
+      <Stack 
+        position="fixed" 
+        right={4} 
+        zIndex={1000}
+        style={{ bottom }}
+      >
+        {children}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack
+      position="fixed"
+      right={4}
+      zIndex={1000}
+      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={{
+        bottom,
+        boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
+        backdropFilter: 'blur(12px)',
+        WebkitBackdropFilter: 'blur(12px)',
+      }}
+      gap={4}
+    >
+      {children}
+    </Stack>
+  );
+}