New standalone Journey page.

src/components/common/Panel.tsx

@@ -1,6 +1,46 @@
-import { Box } from '@umami/react-zen';
-import type { BoxProps } from '@umami/react-zen/Box';
+import { useState } from 'react';
+import { Column, type ColumnProps, Row, Icon, Button } from '@umami/react-zen';
+import { Maximize, Close } from '@/components/icons';
 
-export function Panel(props: BoxProps) {
-  return <Box padding="6" border borderRadius="3" backgroundColor position="relative" {...props} />;
+export interface PanelProps extends ColumnProps {
+  allowFullscreen?: boolean;
+}
+
+const fullscreenStyles = {
+  position: 'fixed',
+  width: '100%',
+  height: '100%',
+  top: 0,
+  left: 0,
+  zIndex: 9999,
+} as any;
+
+export function Panel({ allowFullscreen, style, children, ...props }: PanelProps) {
+  const [isFullscreen, setIsFullscreen] = useState(false);
+
+  const handleFullscreen = () => {
+    setIsFullscreen(!isFullscreen);
+  };
+
+  return (
+    <Column
+      padding="6"
+      border
+      borderRadius="3"
+      backgroundColor
+      position="relative"
+      gap
+      {...props}
+      style={{ ...style, ...(isFullscreen ? fullscreenStyles : {}) }}
+    >
+      {allowFullscreen && (
+        <Row justifyContent="flex-end" alignItems="center">
+          <Button variant="quiet" onPress={handleFullscreen}>
+            <Icon>{isFullscreen ? <Close /> : <Maximize />}</Icon>
+          </Button>
+        </Row>
+      )}
+      {children}
+    </Column>
+  );
 }

src/components/icons.ts

@@ -18,7 +18,9 @@ export {
   ListFilter,
   LockKeyhole,
   LogOut,
+  Maximize,
   Menu,
+  Minimize,
   Moon,
   MoreHorizontal as More,
   PanelLeft,