From 79b0c35d0f71c6ddaed37e16219218b90b1b7041 Mon Sep 17 00:00:00 2001
From: Alex Hernandez <hola@puercito.net>
Date: Fri, 8 May 2026 10:46:44 +1000
Subject: [PATCH] :lipstick: stats hover in fullscreen mode

---
 src/renderer/App.tsx        | 12 ++++++++++++
 src/renderer/styles/app.css | 25 +++++++++++++++++++++++--
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 54b7084..dff8180 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -24,6 +24,17 @@ export default function App(): JSX.Element {
   )
   const [settingsOpen, setSettingsOpen] = useState(false)
   const [isFirstRun, setIsFirstRun] = useState(false)
+  const [focusPeek, setFocusPeek] = useState(false)
+
+  useEffect(() => {
+    if (!focusMode) {
+      setFocusPeek(false)
+      return
+    }
+    const onMove = (e: MouseEvent): void => setFocusPeek(e.clientY < 85)
+    window.addEventListener('mousemove', onMove)
+    return () => window.removeEventListener('mousemove', onMove)
+  }, [focusMode])
 
   const switchProject = async (newPath: string): Promise<void> => {
     await window.api.writeConfig({ projectPath: newPath })
@@ -111,6 +122,7 @@ export default function App(): JSX.Element {
       data-sidebar={sidebarOpen ? 'open' : 'closed'}
       data-chat={chatOpen ? 'open' : 'closed'}
       data-focus={focusMode ? 'on' : 'off'}
+      data-peek={focusPeek ? 'on' : 'off'}
     >
       <div className="app-titlebar">
         <span className="app-titlebar-title">Hohoff Editor</span>
diff --git a/src/renderer/styles/app.css b/src/renderer/styles/app.css
index 92d855e..62c5e3c 100644
--- a/src/renderer/styles/app.css
+++ b/src/renderer/styles/app.css
@@ -14,12 +14,33 @@
 }
 
 .app-layout[data-focus='on'] .app-titlebar {
-  overflow: hidden;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 38px;
+  overflow: visible;
   border: none;
+  border-bottom: 1px solid var(--border);
+  z-index: 200;
+  transform: translateY(-100%);
+  transition: transform 0.2s ease;
 }
 
 .app-layout[data-focus='on'] .toolbar {
-  display: none;
+  display: flex;
+  position: fixed;
+  top: 38px;
+  left: 0;
+  right: 0;
+  z-index: 199;
+  transform: translateY(-100%);
+  transition: transform 0.2s ease;
+}
+
+.app-layout[data-focus='on'][data-peek='on'] .app-titlebar,
+.app-layout[data-focus='on'][data-peek='on'] .toolbar {
+  transform: translateY(0);
 }
 
 .focus-exit-btn {