💄 stats hover in fullscreen mode

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>

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 {