diff --git a/packages/web-console/src/components/PopperToggle/index.tsx b/packages/web-console/src/components/PopperToggle/index.tsx
index 5b7866962..bbbc53595 100644
--- a/packages/web-console/src/components/PopperToggle/index.tsx
+++ b/packages/web-console/src/components/PopperToggle/index.tsx
@@ -43,7 +43,7 @@ type Props = Readonly<{
placement: Placement
modifiers: Options["modifiers"]
onToggle?: (_active: boolean) => void
- trigger: ReactNode
+ trigger?: ReactNode
}>
export const PopperToggle = ({
diff --git a/packages/web-console/src/scenes/Editor/Menu/index.tsx b/packages/web-console/src/scenes/Editor/Menu/index.tsx
index c71fc8473..ba0c23fd6 100644
--- a/packages/web-console/src/scenes/Editor/Menu/index.tsx
+++ b/packages/web-console/src/scenes/Editor/Menu/index.tsx
@@ -35,9 +35,9 @@ import {
Notification2,
Play,
Stop,
+ Question,
} from "styled-icons/remix-line"
import { Menu as _MenuIcon } from "styled-icons/remix-fill"
-import { HelpCircle } from "styled-icons/boxicons-regular"
import { Slack } from "styled-icons/boxicons-logos"
import {
@@ -50,6 +50,7 @@ import {
PopperToggle,
SecondaryButton,
SuccessButton,
+ Text,
toast,
Tooltip,
TransitionDuration,
@@ -57,7 +58,7 @@ import {
useKeyPress,
useScreenSize,
} from "../../../components"
-import { FeedbackDialog } from "@questdb/react-components"
+import { Button, DropdownMenu, FeedbackDialog } from "@questdb/react-components"
import { actions, selectors } from "../../../store"
import { color } from "../../../utils"
@@ -138,35 +139,31 @@ const SideMenuMenuButton = styled(TransparentButton)`
}
`
-const MenuButton = styled(SecondaryButton)`
- margin-right: 1rem;
+const MenuItems = styled.div`
+ display: grid;
+ gap: 1rem;
+ grid-auto-flow: column;
+ align-items: center;
+`
+
+const DropdownMenuItem = styled(DropdownMenu.Item)`
+ color: ${({ theme }) => theme.color.foreground};
`
const MenuLink: React.FunctionComponent<{
href: string
- icon: React.ReactNode
- tooltipText: string
-}> = ({ href, icon, tooltipText }) => {
- const Trigger = (
-
-
- {icon}
-
-
- )
-
- return (
-
- {tooltipText}
-
- )
-}
+ text: string
+}> = ({ href, text }) => (
+
+ {text}
+
+)
const Menu = () => {
const dispatch = useDispatch()
@@ -175,6 +172,7 @@ const Menu = () => {
const [shortcutsPopperActive, setShortcutsPopperActive] = useState()
const [isFeedbackSubmitting, setIsFeedbackSubmitting] =
useState(false)
+ const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false)
const escPress = useKeyPress("Escape")
const { savedQueries } = useSelector(selectors.console.getConfig)
const running = useSelector(selectors.query.getRunning)
@@ -265,86 +263,100 @@ const Menu = () => {
- (
- setOpen(true)}>
-
- {!sm && Feedback}
-
- )}
- onSubmit={async ({
- email,
- message,
- }: {
- email: string
- message: string
- }) => {
- setIsFeedbackSubmitting(true)
- try {
- await quest.sendFeedback({
- email,
- message,
- telemetryConfig,
- })
- toast.success(
- "Thank you for your feedback! Our team will review it shortly.",
- )
- } catch (err) {
- toast.error("Something went wrong. Please try again later.")
- throw err
- } finally {
- setIsFeedbackSubmitting(false)
+
+
+
+
+
+ }>
+ Help
+
+
+
+ e.preventDefault()}>
+
+ (
+ setOpen(true)}>
+ Feedback
+
+ )}
+ onSubmit={async ({
+ email,
+ message,
+ }: {
+ email: string
+ message: string
+ }) => {
+ setIsFeedbackSubmitting(true)
+ try {
+ await quest.sendFeedback({
+ email,
+ message,
+ telemetryConfig,
+ })
+ toast.success(
+ "Thank you for your feedback! Our team will review it shortly.",
+ )
+ } catch (err) {
+ toast.error("Something went wrong. Please try again later.")
+ throw err
+ } finally {
+ setIsFeedbackSubmitting(false)
+ }
+ }}
+ />
+
+
+
+
+
+
+
+
+
+ handleShortcutsToggle(true)}>
+
+ Shortcuts
+
+
+
+
+ dispatch(actions.console.setActivePanel("news"))}
+ >
+
+
}
- }}
- />
-
- }
- tooltipText="Questions? Join our Slack"
- />
-
- }
- tooltipText="Go to Web Console help"
- />
+ placement="bottom"
+ tooltip="QuestDB News"
+ />
+
-
- {!sm && Shortcuts}
-
- }
- placement="bottom"
+ trigger={}
>
-
-
- dispatch(actions.console.setActivePanel("news"))}
- >
-
-
- }
- placement="bottom"
- tooltip="QuestDB News"
- />
-
{sm && (
theme.color.selection};
background: ${({ theme }) => theme.color.black40};
width: 100%;