feat: added a dynamic header for dragbar

.changeset/chubby-donkeys-mate.md

@@ -0,0 +1,5 @@
+---
+"@spotlightjs/spotlight": patch
+---
+
+removed the top spacing in fullscreen mode

packages/spotlight/src/electron/main/index.ts

@@ -166,6 +166,24 @@ const createWindow = () => {
     win = null;
   });
 
+  // Hide drag bar and notify renderer when entering fullscreen
+  win.on("enter-full-screen", () => {
+    win.webContents.executeJavaScript(`
+      window.__ELECTRON_IS_FULLSCREEN__ = true;
+      document.getElementById('electron-top-drag-bar')?.style.setProperty('display', 'none');
+      window.dispatchEvent(new CustomEvent('electron-fullscreen-change', { detail: true }));
+    `);
+  });
+
+  // Show drag bar and notify renderer when leaving fullscreen
+  win.on("leave-full-screen", () => {
+    win.webContents.executeJavaScript(`
+      window.__ELECTRON_IS_FULLSCREEN__ = false;
+      document.getElementById('electron-top-drag-bar')?.style.setProperty('display', 'block');
+      window.dispatchEvent(new CustomEvent('electron-fullscreen-change', { detail: false }));
+    `);
+  });
+
   // Open external links in the default browser
   win.webContents.setWindowOpenHandler(details => {
     shell.openExternal(details.url).catch(error => {

packages/spotlight/src/ui/lib/useElectronFullscreen.ts

@@ -0,0 +1,29 @@
+import { useEffect, useState } from "react";
+import { IS_ELECTRON } from "./isElectron";
+
+declare global {
+  interface Window {
+    __ELECTRON_IS_FULLSCREEN__?: boolean;
+  }
+}
+
+/**
+ * Hook to detect if the Electron app is in fullscreen mode.
+ * Returns false when not in Electron or when not fullscreen.
+ */
+export function useElectronFullscreen(): boolean {
+  const [isFullscreen, setIsFullscreen] = useState(IS_ELECTRON && window.__ELECTRON_IS_FULLSCREEN__ === true);
+
+  useEffect(() => {
+    if (!IS_ELECTRON) return;
+
+    const handler = (event: CustomEvent<boolean>) => {
+      setIsFullscreen(event.detail);
+    };
+
+    window.addEventListener("electron-fullscreen-change", handler as EventListener);
+    return () => window.removeEventListener("electron-fullscreen-change", handler as EventListener);
+  }, []);
+
+  return isFullscreen;
+}

packages/spotlight/src/ui/telemetry/components/TelemetrySidebar.tsx

@@ -1,10 +1,10 @@
 import { ReactComponent as DeleteIcon } from "@spotlight/ui/assets/deleteIcon.svg";
 import { ReactComponent as Logo } from "@spotlight/ui/assets/glyph.svg";
 import { cn } from "@spotlight/ui/lib/cn";
-import { IS_ELECTRON } from "@spotlight/ui/lib/isElectron";
 import { useSpotlightContext } from "@spotlight/ui/lib/useSpotlightContext";
 import type { NotificationCount } from "@spotlight/ui/types";
 import { Badge } from "@spotlight/ui/ui/badge";
+import { ElectronDragbarSpacer } from "@spotlight/ui/ui/electronDragbarSpacer";
 import { useCallback } from "react";
 import { Link, useLocation } from "react-router-dom";
 import useSentryStore from "../store";
@@ -81,8 +81,8 @@ export default function TelemetrySidebar({ errorCount, traceCount, logCount, isO
       style={{ width: "240px", minWidth: "240px" }}
       aria-label="Navigation"
     >
-      {/* mt-10 (40px) adds top margin in Electron to account for the 40px drag bar */}
-      <header className={cn("p-4", IS_ELECTRON && "mt-10")}>
+      <ElectronDragbarSpacer />
+      <header className="p-4">
         <div className="text-primary-200 flex flex-col gap-x-2">
           <div className="inline-flex items-center gap-x-2">
             <Logo height={24} width={24} />

packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx

@@ -1,7 +1,6 @@
-import { cn } from "@spotlight/ui/lib/cn";
-import { IS_ELECTRON } from "@spotlight/ui/lib/isElectron";
 import { log } from "@spotlight/ui/lib/logger";
 import { getRouteStorageKey } from "@spotlight/ui/lib/routePersistence";
+import { ElectronDragbarSpacer } from "@spotlight/ui/ui/electronDragbarSpacer";
 import { useEffect } from "react";
 import { Route, Routes, useLocation } from "react-router-dom";
 import useSentryStore from "../store";
@@ -43,17 +42,19 @@ export default function TelemetryView({
   return (
     <div className="from-primary-900 to-primary-950 flex h-full overflow-hidden bg-gradient-to-br from-0% to-20% font-sans text-white">
       <TelemetrySidebar errorCount={errorCount} traceCount={traceCount} logCount={logCount} isOnline={isOnline} />
-      {/* pt-10 (40px) adds top padding in Electron to account for the 40px drag bar */}
-      <div className={cn("flex-1 overflow-auto", IS_ELECTRON && "pt-10")}>
-        <Routes>
-          <Route path="not-found" element={<p>Not Found - How'd you manage to get here?</p>} key="not-found" />
-          <Route path="traces/*" element={<TracesTab />} key="traces" />
-          <Route path="errors/*" element={<ErrorsTab />} key="errors" />
-          <Route path="logs/*" element={<LogsTab />} key="logs" />
-          <Route path="insights/*" element={<InsightsTab />} key="insights" />
-          <Route path="" element={<TracesTab />} key="default" />
-        </Routes>
-      </div>
+      <main className="flex flex-1 flex-col">
+        <ElectronDragbarSpacer />
+        <div className="flex-1 overflow-auto">
+          <Routes>
+            <Route path="not-found" element={<p>Not Found - How'd you manage to get here?</p>} key="not-found" />
+            <Route path="traces/*" element={<TracesTab />} key="traces" />
+            <Route path="errors/*" element={<ErrorsTab />} key="errors" />
+            <Route path="logs/*" element={<LogsTab />} key="logs" />
+            <Route path="insights/*" element={<InsightsTab />} key="insights" />
+            <Route path="" element={<TracesTab />} key="default" />
+          </Routes>
+        </div>
+      </main>
     </div>
   );
 }

packages/spotlight/src/ui/ui/electronDragbarSpacer.tsx

@@ -0,0 +1,27 @@
+import { cn } from "@spotlight/ui/lib/cn";
+import { IS_ELECTRON } from "@spotlight/ui/lib/isElectron";
+import { useElectronFullscreen } from "@spotlight/ui/lib/useElectronFullscreen";
+
+/**
+ * A spacer component that adds 40px (h-10) height to account for the Electron
+ * drag bar. Animates to 0 height when in fullscreen mode.
+ */
+export function ElectronDragbarSpacer({ className }: { className?: string }) {
+  const isFullscreen = useElectronFullscreen();
+
+  // Don't render at all outside Electron
+  if (!IS_ELECTRON) {
+    return null;
+  }
+
+  // Animate height transition in fullscreen
+  return (
+    <div
+      className={cn(
+        "overflow-hidden w-full transition-all duration-200 ease-out",
+        isFullscreen ? "h-0" : "h-10",
+        className,
+      )}
+    />
+  );
+}