diff --git a/src/app/tools/session/components/Menu.tsx b/src/app/tools/session/components/Menu.tsx index f7f9ad1f2..ed26bd10b 100644 --- a/src/app/tools/session/components/Menu.tsx +++ b/src/app/tools/session/components/Menu.tsx @@ -1,6 +1,14 @@ -import { ContextMenu, DropdownMenu, Flex } from '@radix-ui/themes'; +import { + Button, + ContextMenu, + Dialog, + DropdownMenu, + Flex, + Heading, + TextField, +} from '@radix-ui/themes'; import { createColors } from 'bepaint'; -import { useState } from 'react'; +import { useRef, useState } from 'react'; import { ACCENT_COLORS, AccentColor, @@ -19,70 +27,110 @@ interface ContextMenuProps { export function Menu({ Builder, reset }: ContextMenuProps) { const session = useSession(); const [showTitleEditor, setShowTitleEditor] = useState(false); + const titleInput = useRef(null); return ( - - - Accent color + <> + + + + Edit title - - - useSession.setState({ color: value as AccentColor | GrayColor }) - } - > - {[...ACCENT_COLORS, ...GRAY_COLORS].map((color) => ( - - -
- {`${color.charAt(0).toUpperCase()}${color.slice(1)}`} - - - ))} - - - + + + { + if (event.key === 'Enter' && titleInput.current) { + setShowTitleEditor(false); + useSession.setState({ title: titleInput.current!.value }); + } + }} + /> + - + + + + + + + - - - - + + + Accent color - + + + useSession.setState({ color: value as AccentColor | GrayColor }) + } + > + {[...ACCENT_COLORS, ...GRAY_COLORS].map((color) => ( + + +
+ {`${color.charAt(0).toUpperCase()}${color.slice(1)}`} + + + ))} + + + - - useSession.setState({ showTotal: checked }) - } - > - Show total - - - useSession.setState({ showCareer: checked }) - } - > - Show career - + - + setShowTitleEditor(true)}> + Edit title... + + + + + - - Reset - - + + + + useSession.setState({ showTotal: checked }) + } + > + Show total + + + useSession.setState({ showCareer: checked }) + } + > + Show career + + + + + + Reset + + + ); }