From 4f597ba580346f54e8024f3f2fd074de3fdc595c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= <thomas.obermueller@gmail.com>
Date: Thu, 28 Dec 2023 17:08:17 +0100
Subject: [PATCH 1/6] fix(3000): re-implement debug notice

---
 .../src/layout/navigation-3000/Navigation.tsx |  4 ++-
 .../navigation-3000/components/Navbar.tsx     |  2 ++
 .../components/NavbarButton.tsx               |  2 +-
 .../src/layout/navigation/SideBar/SideBar.tsx |  2 --
 frontend/src/lib/components/DebugNotice.tsx   | 36 ++++++++++++++++---
 5 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/Navigation.tsx b/frontend/src/layout/navigation-3000/Navigation.tsx
index 16b4e9fade648..c7a99096015ec 100644
--- a/frontend/src/layout/navigation-3000/Navigation.tsx
+++ b/frontend/src/layout/navigation-3000/Navigation.tsx
@@ -32,7 +32,9 @@ export function Navigation({
 
     useEffect(() => {
         // FIXME: Include debug notice in a non-obstructing way
-        document.getElementById('bottom-notice')?.remove()
+        if (mode !== 'minimal') {
+            document.getElementById('bottom-notice')?.remove()
+        }
     }, [])
 
     if (mode !== 'full') {
diff --git a/frontend/src/layout/navigation-3000/components/Navbar.tsx b/frontend/src/layout/navigation-3000/components/Navbar.tsx
index 6fbae5671a9c3..87dc6473e8a26 100644
--- a/frontend/src/layout/navigation-3000/components/Navbar.tsx
+++ b/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 />}
diff --git a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx b/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
index c12620170479e..b0dbb214bcf88 100644
--- a/frontend/src/layout/navigation-3000/components/NavbarButton.tsx
+++ b/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'
diff --git a/frontend/src/layout/navigation/SideBar/SideBar.tsx b/frontend/src/layout/navigation/SideBar/SideBar.tsx
index fff51346c0f18..416905002515c 100644
--- a/frontend/src/layout/navigation/SideBar/SideBar.tsx
+++ b/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>
diff --git a/frontend/src/lib/components/DebugNotice.tsx b/frontend/src/lib/components/DebugNotice.tsx
index 07757de7d0b20..859615f9c0894 100644
--- a/frontend/src/lib/components/DebugNotice.tsx
+++ b/frontend/src/lib/components/DebugNotice.tsx
@@ -1,10 +1,15 @@
-import { IconClose } from 'lib/lemon-ui/icons'
+import { useValues } from 'kea'
+import { IconBranch, IconClose } 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 { isNavCollapsedDesktop } = useValues(navigation3000Logic)
 
     useEffect(() => {
         const bottomNotice = document.getElementById('bottom-notice')
@@ -27,16 +32,39 @@ export function DebugNotice(): JSX.Element | null {
         return null
     }
 
+    if (isNavCollapsedDesktop) {
+        return (
+            <NavbarButton
+                identifier="debug-notice"
+                icon={<IconBranch color="var(--primary)" />}
+                title={
+                    <div>
+                        <p>DEBUG mode</p>{' '}
+                        <p>
+                            Branch: <b>{debugInfo.branch}</b>
+                        </p>
+                        <p className="mb-0">
+                            Revision: <b>{debugInfo.revision}</b>
+                        </p>
+                    </div>
+                }
+                onClick={() => setNoticeHidden(true)}
+            />
+        )
+    }
     return (
-        <div className="bg-bg-light cursor-pointer border-t" onClick={() => setNoticeHidden(true)}>
+        <div
+            className="cursor-pointer border rounded bg-bg-3000 overflow-hidden w-full"
+            onClick={() => setNoticeHidden(true)}
+        >
             <div className="p-2 border-l-4 border-primary 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">
+            <div className="p-2 border-l-4 border-primary text-primary-3000 truncate">
                 Branch: <b>{debugInfo.branch}</b>
             </div>
-            <div className="p-2 border-l-4 border-warning text-warning-dark truncate">
+            <div className="p-2 border-l-4 border-primary text-primary-3000 truncate">
                 Revision: <b>{debugInfo.revision}</b>
             </div>
         </div>

From 441e19f82989deb8ca1b116112ad7a670403f699 Mon Sep 17 00:00:00 2001
From: Michael Matloka <michal@matloka.com>
Date: Fri, 5 Jan 2024 18:21:47 +0100
Subject: [PATCH 2/6] Remove now-obsolete FIXME

---
 frontend/src/layout/navigation-3000/Navigation.tsx | 9 +--------
 1 file changed, 1 insertion(+), 8 deletions(-)

diff --git a/frontend/src/layout/navigation-3000/Navigation.tsx b/frontend/src/layout/navigation-3000/Navigation.tsx
index c7a99096015ec..9cfe7ed28d4a6 100644
--- a/frontend/src/layout/navigation-3000/Navigation.tsx
+++ b/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,13 +30,6 @@ export function Navigation({
     const { mobileLayout } = useValues(navigationLogic)
     const { activeNavbarItem, mode } = useValues(navigation3000Logic)
 
-    useEffect(() => {
-        // FIXME: Include debug notice in a non-obstructing way
-        if (mode !== 'minimal') {
-            document.getElementById('bottom-notice')?.remove()
-        }
-    }, [])
-
     if (mode !== 'full') {
         return (
             <div className="Navigation3000 flex-col">

From be39a4816c93fde79a64ef391eb959a70acc85bc Mon Sep 17 00:00:00 2001
From: Michael Matloka <michal@matloka.com>
Date: Fri, 5 Jan 2024 18:22:30 +0100
Subject: [PATCH 3/6] Fix the colors and order of the basic debug notice

---
 frontend/src/styles/global.scss |  6 +++---
 posthog/templates/overlays.html | 14 +++++++-------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
index 7b9724e08d4e3..f82ae02f29e74 100644
--- a/frontend/src/styles/global.scss
+++ b/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 {
diff --git a/posthog/templates/overlays.html b/posthog/templates/overlays.html
index 2d5be7a6110c4..6bcab0d64fe55 100644
--- a/posthog/templates/overlays.html
+++ b/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">

From 04d5eaa3d6cd976ee81c8cb4989830ef480ab503 Mon Sep 17 00:00:00 2001
From: Michael Matloka <michal@matloka.com>
Date: Fri, 5 Jan 2024 18:22:53 +0100
Subject: [PATCH 4/6] Align the look of the navbar notice with the basic one

---
 frontend/src/lib/components/DebugNotice.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/DebugNotice.tsx b/frontend/src/lib/components/DebugNotice.tsx
index 859615f9c0894..42d1818b815e4 100644
--- a/frontend/src/lib/components/DebugNotice.tsx
+++ b/frontend/src/lib/components/DebugNotice.tsx
@@ -1,5 +1,5 @@
 import { useValues } from 'kea'
-import { IconBranch, IconClose } from 'lib/lemon-ui/icons'
+import { IconBranch, IconClose, IconCode } from 'lib/lemon-ui/icons'
 import { LemonButton } from 'lib/lemon-ui/LemonButton'
 import { useEffect, useState } from 'react'
 
@@ -54,18 +54,21 @@ export function DebugNotice(): JSX.Element | null {
     }
     return (
         <div
-            className="cursor-pointer border rounded bg-bg-3000 overflow-hidden w-full"
-            onClick={() => setNoticeHidden(true)}
+            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-primary 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-primary text-primary-3000 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-primary text-primary-3000 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>
     )

From 8403a1400cfe10683734cdab1f1021067d06abbe Mon Sep 17 00:00:00 2001
From: Michael Matloka <michal@matloka.com>
Date: Fri, 5 Jan 2024 18:36:23 +0100
Subject: [PATCH 5/6] Improve rendering in mobile and collapsed modes

---
 frontend/src/lib/components/DebugNotice.tsx | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/lib/components/DebugNotice.tsx b/frontend/src/lib/components/DebugNotice.tsx
index 42d1818b815e4..b77b9b7f69007 100644
--- a/frontend/src/lib/components/DebugNotice.tsx
+++ b/frontend/src/lib/components/DebugNotice.tsx
@@ -9,7 +9,7 @@ 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 { isNavCollapsedDesktop } = useValues(navigation3000Logic)
+    const { isNavCollapsed } = useValues(navigation3000Logic)
 
     useEffect(() => {
         const bottomNotice = document.getElementById('bottom-notice')
@@ -32,20 +32,23 @@ export function DebugNotice(): JSX.Element | null {
         return null
     }
 
-    if (isNavCollapsedDesktop) {
+    if (isNavCollapsed) {
         return (
             <NavbarButton
                 identifier="debug-notice"
-                icon={<IconBranch color="var(--primary)" />}
+                icon={<IconBranch className="text-primary" />}
                 title={
-                    <div>
-                        <p>DEBUG mode</p>{' '}
-                        <p>
+                    <div className="font-mono">
+                        <div>
+                            <strong>DEBUG mode!</strong>
+                        </div>
+                        <div>
                             Branch: <b>{debugInfo.branch}</b>
-                        </p>
-                        <p className="mb-0">
+                        </div>
+                        <div>
                             Revision: <b>{debugInfo.revision}</b>
-                        </p>
+                        </div>
+                        <div className="italic">Click to hide</div>
                     </div>
                 }
                 onClick={() => setNoticeHidden(true)}

From c64ccede9c6973043564320c045f90d6cbb9e121 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Obermu=CC=88ller?= <thomas.obermueller@gmail.com>
Date: Tue, 9 Jan 2024 12:08:31 +0100
Subject: [PATCH 6/6] fix rebase conflict?

---
 frontend/src/lib/components/DebugNotice.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/DebugNotice.tsx b/frontend/src/lib/components/DebugNotice.tsx
index b77b9b7f69007..7192253889504 100644
--- a/frontend/src/lib/components/DebugNotice.tsx
+++ b/frontend/src/lib/components/DebugNotice.tsx
@@ -61,7 +61,7 @@ export function DebugNotice(): JSX.Element | null {
             // 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-primary text-primary-3000 truncate flex justify-between">
+            <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>