feat: Toolbar 3000 changes

cypress/e2e/toolbar.cy.ts

@@ -11,7 +11,7 @@ describe('Toolbar', () => {
                 .then((href) => {
                     cy.visit(href)
                 })
-            cy.get('#__POSTHOG_TOOLBAR__').shadow().find('.floating-toolbar-button').should('exist')
+            cy.get('#__POSTHOG_TOOLBAR__').shadow().find('.Toolbar3000').should('exist')
         })
     })
 

frontend/src/layout/navigation-3000/themeLogic.ts

@@ -1,4 +1,4 @@
-import { actions, events, kea, path, reducers, selectors } from 'kea'
+import { actions, connect, events, kea, path, reducers, selectors } from 'kea'
 import { subscriptions } from 'kea-subscriptions'
 import { FEATURE_FLAGS } from 'lib/constants'
 import { featureFlagLogic } from 'lib/logic/featureFlagLogic'
@@ -8,6 +8,9 @@ import { sceneLogic } from 'scenes/sceneLogic'
 
 export const themeLogic = kea<themeLogicType>([
     path(['layout', 'navigation-3000', 'themeLogic']),
+    connect({
+        values: [featureFlagLogic, ['featureFlags']],
+    }),
     actions({
         toggleTheme: true,
         overrideTheme: (darkModePreference: boolean) => ({ darkModePreference }),
@@ -36,7 +39,7 @@ export const themeLogic = kea<themeLogicType>([
             (s) => [
                 s.darkModeSavedPreference,
                 s.darkModeSystemPreference,
-                featureFlagLogic.selectors.featureFlags,
+                s.featureFlags,
                 sceneLogic.selectors.sceneConfig,
             ],
             (darkModeSavedPreference, darkModeSystemPreference, featureFlags, sceneConfig) => {

frontend/src/lib/components/HedgehogBuddy/HedgehogBuddy.tsx

@@ -314,7 +314,10 @@ export class HedgehogActor {
             <div
                 className="HedgehogBuddy"
                 data-content={preloadContent}
-                onMouseDown={() => {
+                onMouseDown={(e) => {
+                    if (e.button !== 0) {
+                        return
+                    }
                     let moved = false
                     const onMouseMove = (e: any): void => {
                         moved = true

frontend/src/toolbar/ToolbarContainer.tsx

@@ -1,16 +1,28 @@
 import { useValues } from 'kea'
-import { Elements } from '~/toolbar/elements/Elements'
-import { DraggableButton } from '~/toolbar/button/DraggableButton'
-import { toolbarLogic } from '~/toolbar/toolbarLogic'
+import { toolbarLogic } from './toolbarLogic'
+import { Elements } from './elements/Elements'
 import { Fade } from 'lib/components/Fade/Fade'
+import { toolbarButtonLogic } from './button/toolbarButtonLogic'
+import { HedgehogButton } from './button/HedgehogButton'
+import { Toolbar3000 } from './button/Toolbar3000'
 
 export function ToolbarContainer(): JSX.Element {
     const { buttonVisible } = useValues(toolbarLogic)
+    const { theme } = useValues(toolbarButtonLogic)
+
+    // KLUDGE: if we put theme directly on the div then
+    // linting and typescript complain about it not being
+    // a valid attribute. So we put it in a variable and
+    // spread it in. 🤷‍
+    const themeProps = { theme }
 
     return (
         <Fade visible={buttonVisible} className="toolbar-global-fade-container ph-no-capture posthog-3000">
             <Elements />
-            <DraggableButton />
+            <div id="button-toolbar" className="ph-no-capture posthog-3000" {...themeProps}>
+                <Toolbar3000 />
+            </div>
+            <HedgehogButton />
         </Fade>
     )
 }