From 108e01241d0888d627f231fdb9afb979c7c45e93 Mon Sep 17 00:00:00 2001
From: Ben White <ben@posthog.com>
Date: Fri, 17 Nov 2023 09:14:43 +0000
Subject: [PATCH] Fixed up toolbar rendering

---
 cypress/e2e/toolbar.cy.ts                     |  2 +-
 frontend/src/toolbar/button/Toolbar3000.scss  | 42 +++++++++++--------
 frontend/src/toolbar/button/Toolbar3000.tsx   | 36 ++++++++--------
 .../src/toolbar/button/toolbarButtonLogic.ts  |  1 -
 4 files changed, 45 insertions(+), 36 deletions(-)

diff --git a/cypress/e2e/toolbar.cy.ts b/cypress/e2e/toolbar.cy.ts
index 0d7ad22fcd0c2..ed2cd208757f4 100644
--- a/cypress/e2e/toolbar.cy.ts
+++ b/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')
         })
     })
 
diff --git a/frontend/src/toolbar/button/Toolbar3000.scss b/frontend/src/toolbar/button/Toolbar3000.scss
index 00959b5bc3bfc..e9c1cc09119e3 100644
--- a/frontend/src/toolbar/button/Toolbar3000.scss
+++ b/frontend/src/toolbar/button/Toolbar3000.scss
@@ -86,6 +86,10 @@
 }
 
 .Toolbar3000 {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    z-index: 1;
     background-color: var(--bg-3000);
     color: var(--text-3000);
     transition-property: filter, width, transform;
@@ -94,34 +98,38 @@
     filter: drop-shadow(2px 10px 10px var(--trace-3000));
     border: 1px solid var(--border-bold-3000);
     border-radius: var(--radius);
+    overflow: hidden;
 
+    position: fixed;
     // fixed width so that animations work when changing width
-    width: 15.1rem;
-    transform: translate(50vh, 50vw); // This is immediately overwritten
+    width: 15.2rem;
 
-    &--dragging {
-        // Disable transform transition whilst dragging
-        transition-property: filter, width;
+    > :first-child {
+        border-right: 1px solid var(--border-bold-3000);
     }
 
-    &.Toolbar3000Bar {
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
+    > :last-child {
+        border-left: 1px solid var(--border-bold-3000);
+    }
 
-        > :first-child {
-            border-right: 1px solid var(--border-bold-3000);
-        }
+    --toolbar-button-x: 50vh;
+    --toolbar-button-y: 50vw;
+    --toolbar-translate: translate(var(--toolbar-button-x), var(--toolbar-button-y));
 
-        > :last-child {
-            border-left: 1px solid var(--border-bold-3000);
-        }
+    transform: var(--toolbar-translate);
 
-        z-index: 1;
+    &--dragging {
+        // Disable transform transition whilst dragging
+        transition-property: filter, width;
+        transform: var(--toolbar-translate) scale(1.2);
     }
 
-    &.Toolbar3000--minimized-width {
+    &--minimized {
         width: 2.5rem;
+
+        &.Toolbar3000--hedgehog-mode {
+            transform: var(--toolbar-translate) scale(0);
+        }
     }
 
     form {
diff --git a/frontend/src/toolbar/button/Toolbar3000.tsx b/frontend/src/toolbar/button/Toolbar3000.tsx
index aa2f04104c5aa..e9da64082e9ad 100644
--- a/frontend/src/toolbar/button/Toolbar3000.tsx
+++ b/frontend/src/toolbar/button/Toolbar3000.tsx
@@ -84,10 +84,16 @@ function MoreMenu(): JSX.Element {
 
 function ToolbarInfoMenu(): JSX.Element {
     const ref = useRef<HTMLDivElement | null>(null)
-    const { visibleMenu, isDragging, menuProperties } = useValues(toolbarButtonLogic)
+    const { visibleMenu, isDragging, menuProperties, minimized } = useValues(toolbarButtonLogic)
     const { setMenu } = useActions(toolbarButtonLogic)
 
-    const fullIsShowing = visibleMenu === 'heatmap' || visibleMenu === 'actions' || visibleMenu === 'flags'
+    const content = minimized ? null : visibleMenu === 'flags' ? (
+        <FlagsToolbarMenu />
+    ) : visibleMenu === 'heatmap' ? (
+        <HeatmapToolbarMenu />
+    ) : visibleMenu === 'actions' ? (
+        <ActionsToolbarMenu />
+    ) : null
 
     useEffect(() => {
         setMenu(ref.current)
@@ -98,7 +104,7 @@ function ToolbarInfoMenu(): JSX.Element {
         <div
             className={clsx(
                 'Toolbar3000Menu',
-                fullIsShowing && 'Toolbar3000Menu--visible',
+                !!content && 'Toolbar3000Menu--visible',
                 isDragging && 'Toolbar3000Menu--dragging',
                 menuProperties.isBelow && 'Toolbar3000Menu--below'
             )}
@@ -115,13 +121,7 @@ function ToolbarInfoMenu(): JSX.Element {
                     maxHeight: menuProperties.maxHeight,
                 }}
             >
-                {visibleMenu === 'flags' ? (
-                    <FlagsToolbarMenu />
-                ) : visibleMenu === 'heatmap' ? (
-                    <HeatmapToolbarMenu />
-                ) : visibleMenu === 'actions' ? (
-                    <ActionsToolbarMenu />
-                ) : null}
+                {content}
             </div>
         </div>
     )
@@ -151,17 +151,19 @@ export function Toolbar3000(): JSX.Element {
             <div
                 ref={ref}
                 className={clsx(
-                    'Toolbar3000 Toolbar3000Bar fixed h-10 rounded-lg flex flex-row items-center floating-toolbar-button overflow-hidden',
-                    minimized && 'Toolbar3000--minimized-width',
+                    'Toolbar3000',
+                    minimized && 'Toolbar3000--minimized',
+                    hedgehogMode && 'Toolbar3000--hedgehog-mode',
                     isDragging && 'Toolbar3000--dragging'
                 )}
                 onMouseDown={(e) => onMouseDown(e as any)}
                 // eslint-disable-next-line react/forbid-dom-props
-                style={{
-                    transform:
-                        `translate(${dragPosition.x}px, ${dragPosition.y}px)` +
-                        (hedgehogMode && minimized ? ' scale(0)' : ''),
-                }}
+                style={
+                    {
+                        '--toolbar-button-x': `${dragPosition.x}px`,
+                        '--toolbar-button-y': `${dragPosition.y}px`,
+                    } as any
+                }
             >
                 <Toolbar3000Button
                     icon={<IconLogomark />}
diff --git a/frontend/src/toolbar/button/toolbarButtonLogic.ts b/frontend/src/toolbar/button/toolbarButtonLogic.ts
index cad5ad48a44e7..47656b8200691 100644
--- a/frontend/src/toolbar/button/toolbarButtonLogic.ts
+++ b/frontend/src/toolbar/button/toolbarButtonLogic.ts
@@ -62,7 +62,6 @@ export const toolbarButtonLogic = kea<toolbarButtonLogicType>([
             'none' as MenuState,
             {
                 setVisibleMenu: (_, { visibleMenu }) => visibleMenu,
-                toggleMinimized: () => 'none',
             },
         ],
         minimized: [