fix(3000): re-implement debug notice

frontend/src/layout/navigation-3000/Navigation.tsx

@@ -6,7 +6,7 @@ import { BillingAlertsV2 } from 'lib/components/BillingAlertsV2'
 import { CommandBar } from 'lib/components/CommandBar/CommandBar'
 import { FlaggedFeature } from 'lib/components/FlaggedFeature'
 import { FEATURE_FLAGS } from 'lib/constants'
-import { ReactNode, useEffect } from 'react'
+import { ReactNode } from 'react'
 import { SceneConfig } from 'scenes/sceneTypes'
 
 import { navigationLogic } from '../navigation/navigationLogic'
@@ -30,11 +30,6 @@ export function Navigation({
     const { mobileLayout } = useValues(navigationLogic)
     const { activeNavbarItem, mode } = useValues(navigation3000Logic)
 
-    useEffect(() => {
-        // FIXME: Include debug notice in a non-obstructing way
-        document.getElementById('bottom-notice')?.remove()
-    }, [])
-
     if (mode !== 'full') {
         return (
             <div className="Navigation3000 flex-col">

frontend/src/layout/navigation-3000/components/Navbar.tsx

@@ -2,6 +2,7 @@ import { IconGear, IconSearch, IconToolbar } from '@posthog/icons'
 import clsx from 'clsx'
 import { useActions, useValues } from 'kea'
 import { commandBarLogic } from 'lib/components/CommandBar/commandBarLogic'
+import { DebugNotice } from 'lib/components/DebugNotice'
 import { Resizer } from 'lib/components/Resizer/Resizer'
 import { ScrollableShadows } from 'lib/components/ScrollableShadows/ScrollableShadows'
 import { IconWarning } from 'lib/lemon-ui/icons'
@@ -70,6 +71,7 @@ export function Navbar(): JSX.Element {
                     </ScrollableShadows>
                     <div className="Navbar3000__bottom">
                         <ul>
+                            <DebugNotice />
                             <NavbarButton
                                 identifier="search-button"
                                 icon={<IconSearch />}

frontend/src/layout/navigation-3000/components/NavbarButton.tsx

@@ -18,7 +18,7 @@ import { KeyboardShortcut, KeyboardShortcutProps } from './KeyboardShortcut'
 export interface NavbarButtonProps extends Pick<LemonButtonProps, 'onClick' | 'icon' | 'sideIcon' | 'to' | 'active'> {
     identifier: string
     icon: ReactElement
-    title?: string
+    title?: string | ReactElement
     shortTitle?: string
     forceTooltipOnHover?: boolean
     tag?: 'alpha' | 'beta' | 'new'

frontend/src/layout/navigation/SideBar/SideBar.tsx

@@ -1,11 +1,9 @@
 import { ActivationSidebar } from 'lib/components/ActivationSidebar/ActivationSidebar'
-import { DebugNotice } from 'lib/components/DebugNotice'
 import { NotebookPopover } from 'scenes/notebooks/NotebookPanel/NotebookPopover'
 
 export function SideBar(): JSX.Element {
     return (
         <div>
-            <DebugNotice />
             <NotebookPopover />
             <ActivationSidebar />
         </div>

frontend/src/lib/components/DebugNotice.tsx

@@ -1,10 +1,15 @@
-import { IconClose } from 'lib/lemon-ui/icons'
+import { useValues } from 'kea'
+import { IconBranch, IconClose, IconCode } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { useEffect, useState } from 'react'
 
+import { NavbarButton } from '~/layout/navigation-3000/components/NavbarButton'
+import { navigation3000Logic } from '~/layout/navigation-3000/navigationLogic'
+
 export function DebugNotice(): JSX.Element | null {
     const [debugInfo, setDebugInfo] = useState<{ branch: string; revision: string } | undefined>()
     const [noticeHidden, setNoticeHidden] = useState(false)
+    const { isNavCollapsed } = useValues(navigation3000Logic)
 
     useEffect(() => {
         const bottomNotice = document.getElementById('bottom-notice')
@@ -27,17 +32,46 @@ export function DebugNotice(): JSX.Element | null {
         return null
     }
 
+    if (isNavCollapsed) {
+        return (
+            <NavbarButton
+                identifier="debug-notice"
+                icon={<IconBranch className="text-primary" />}
+                title={
+                    <div className="font-mono">
+                        <div>
+                            <strong>DEBUG mode!</strong>
+                        </div>
+                        <div>
+                            Branch: <b>{debugInfo.branch}</b>
+                        </div>
+                        <div>
+                            Revision: <b>{debugInfo.revision}</b>
+                        </div>
+                        <div className="italic">Click to hide</div>
+                    </div>
+                }
+                onClick={() => setNoticeHidden(true)}
+            />
+        )
+    }
     return (
-        <div className="bg-bg-light cursor-pointer border-t" onClick={() => setNoticeHidden(true)}>
-            <div className="p-2 border-l-4 border-primary text-primary-3000 truncate flex justify-between">
+        <div
+            className="border rounded-md bg-bg-3000 overflow-hidden mb-1.5 w-full font-mono"
+            // eslint-disable-next-line react/forbid-dom-props
+            style={{ fontSize: 13 }} // utility classes don't have a 13px variant
+        >
+            <div className="p-2 border-l-4 border-brand-blue text-primary-3000 truncate flex justify-between">
                 <b>DEBUG mode</b>
                 <LemonButton icon={<IconClose />} size="small" noPadding onClick={() => setNoticeHidden(true)} />
             </div>
-            <div className="p-2 border-l-4 border-danger text-danger-dark truncate">
-                Branch: <b>{debugInfo.branch}</b>
+            <div className="flex items-center gap-2 px-2 h-8 border-l-4 border-brand-red truncate" title="Branch">
+                <IconBranch className="text-lg" />
+                <b>{debugInfo.branch}</b>
             </div>
-            <div className="p-2 border-l-4 border-warning text-warning-dark truncate">
-                Revision: <b>{debugInfo.revision}</b>
+            <div className="flex items-center gap-2 px-2 h-8 border-l-4 border-brand-yellow truncate" title="Revision">
+                <IconCode className="text-lg" />
+                <b>{debugInfo.revision}</b>
             </div>
         </div>
     )

frontend/src/styles/global.scss

@@ -359,15 +359,15 @@ input::-ms-clear {
         cursor: pointer;
 
         div:nth-child(1) {
-            background: var(--primary-3000);
+            background: var(--brand-blue);
         }
 
         div:nth-child(2) {
-            background: var(--brand-blue);
+            background: var(--brand-red);
         }
 
         div:nth-child(3) {
-            background: var(--warning);
+            background: var(--brand-yellow);
         }
 
         span {

posthog/templates/overlays.html

@@ -1,22 +1,22 @@
 {% if debug %}
 <div id="bottom-notice" class="tricolor click-close" style="display: none">
+    <div>
+        <span
+            ><span>PostHog running in </span><b><code style="background: 0; color: white">DEBUG</code></b> mode!</span
+        >
+    </div>
     <div>
         <span>
             <span>Current branch: </span
             ><b><code id="bottom-notice-branch" style="background: 0; color: white">{{ git_branch|default:"unknown" }}</code></b
-            ><span>.</span>
+            ><span></span>
         </span>
     </div>
-    <div>
-        <span
-            ><span>PostHog running in </span><b><code style="background: 0; color: white">DEBUG</code></b> mode!</span
-        >
-    </div>
     <div>
         <span
             ><span>Current revision: </span
             ><b><code id="bottom-notice-revision" style="background: 0; color: white">{{ git_rev|default:"unknown" }}</code></b
-            ><span>.</span></span
+            ><span></span></span
         >
     </div>
     <button title="Close debug bar">