From 255976f79587a2552889d0e5e71f571a579b8b78 Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Wed, 24 Dec 2025 16:08:56 +0530 Subject: [PATCH 1/3] feat: added a dynamic header for dragbar --- packages/spotlight/src/electron/main/index.ts | 18 ++++++++++++ .../src/ui/lib/useElectronFullscreen.ts | 29 +++++++++++++++++++ .../telemetry/components/TelemetrySidebar.tsx | 6 ++-- .../ui/telemetry/components/TelemetryView.tsx | 6 ++-- .../src/ui/ui/electronDragbarSpacer.tsx | 18 ++++++++++++ 5 files changed, 72 insertions(+), 5 deletions(-) create mode 100644 packages/spotlight/src/ui/lib/useElectronFullscreen.ts create mode 100644 packages/spotlight/src/ui/ui/electronDragbarSpacer.tsx diff --git a/packages/spotlight/src/electron/main/index.ts b/packages/spotlight/src/electron/main/index.ts index c65698f2..ad9a1ed1 100644 --- a/packages/spotlight/src/electron/main/index.ts +++ b/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 => { diff --git a/packages/spotlight/src/ui/lib/useElectronFullscreen.ts b/packages/spotlight/src/ui/lib/useElectronFullscreen.ts new file mode 100644 index 00000000..702a9a8d --- /dev/null +++ b/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) => { + setIsFullscreen(event.detail); + }; + + window.addEventListener("electron-fullscreen-change", handler as EventListener); + return () => window.removeEventListener("electron-fullscreen-change", handler as EventListener); + }, []); + + return isFullscreen; +} diff --git a/packages/spotlight/src/ui/telemetry/components/TelemetrySidebar.tsx b/packages/spotlight/src/ui/telemetry/components/TelemetrySidebar.tsx index d323f428..f51e3c26 100644 --- a/packages/spotlight/src/ui/telemetry/components/TelemetrySidebar.tsx +++ b/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 */} -
+ +
diff --git a/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx b/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx index 2d85a23b..d24d2708 100644 --- a/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx +++ b/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx @@ -2,6 +2,7 @@ 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 { useElectronFullscreen } from "@spotlight/ui/lib/useElectronFullscreen"; import { useEffect } from "react"; import { Route, Routes, useLocation } from "react-router-dom"; import useSentryStore from "../store"; @@ -21,6 +22,7 @@ export default function TelemetryView({ }) { const location = useLocation(); const store = useSentryStore(); + const isFullscreen = useElectronFullscreen(); useEffect(() => { try { @@ -43,8 +45,8 @@ export default function TelemetryView({ return (
- {/* pt-10 (40px) adds top padding in Electron to account for the 40px drag bar */} -
+ {/* pt-10 (40px) adds top padding in Electron to account for the 40px drag bar (hidden in fullscreen) */} +
Not Found - How'd you manage to get here?

} key="not-found" /> } key="traces" /> diff --git a/packages/spotlight/src/ui/ui/electronDragbarSpacer.tsx b/packages/spotlight/src/ui/ui/electronDragbarSpacer.tsx new file mode 100644 index 00000000..3ce839a4 --- /dev/null +++ b/packages/spotlight/src/ui/ui/electronDragbarSpacer.tsx @@ -0,0 +1,18 @@ +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. Only renders in Electron when NOT in fullscreen mode. + */ +export function ElectronDragbarSpacer({ className }: { className?: string }) { + const isFullscreen = useElectronFullscreen(); + + // Only render spacer in Electron when NOT fullscreen + if (!IS_ELECTRON || isFullscreen) { + return null; + } + + return
; +} From 1ec520248400fd8645930693486e53115779f469 Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Wed, 24 Dec 2025 16:09:53 +0530 Subject: [PATCH 2/3] chore: added changeset --- .changeset/chubby-donkeys-mate.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/chubby-donkeys-mate.md diff --git a/.changeset/chubby-donkeys-mate.md b/.changeset/chubby-donkeys-mate.md new file mode 100644 index 00000000..7000aead --- /dev/null +++ b/.changeset/chubby-donkeys-mate.md @@ -0,0 +1,5 @@ +--- +"@spotlightjs/spotlight": patch +--- + +removed the top spacing in fullscreen mode From e084d38eb44cd945e44f5df36dfc963fa7571587 Mon Sep 17 00:00:00 2001 From: mathuraditya724 Date: Fri, 26 Dec 2025 14:43:22 +0530 Subject: [PATCH 3/3] fix: added transition --- .../ui/telemetry/components/TelemetryView.tsx | 29 +++++++++---------- .../src/ui/ui/electronDragbarSpacer.tsx | 17 ++++++++--- 2 files changed, 27 insertions(+), 19 deletions(-) diff --git a/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx b/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx index d24d2708..b5e8c6b6 100644 --- a/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx +++ b/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx @@ -1,8 +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 { useElectronFullscreen } from "@spotlight/ui/lib/useElectronFullscreen"; +import { ElectronDragbarSpacer } from "@spotlight/ui/ui/electronDragbarSpacer"; import { useEffect } from "react"; import { Route, Routes, useLocation } from "react-router-dom"; import useSentryStore from "../store"; @@ -22,7 +20,6 @@ export default function TelemetryView({ }) { const location = useLocation(); const store = useSentryStore(); - const isFullscreen = useElectronFullscreen(); useEffect(() => { try { @@ -45,17 +42,19 @@ export default function TelemetryView({ return (
- {/* pt-10 (40px) adds top padding in Electron to account for the 40px drag bar (hidden in fullscreen) */} -
- - Not Found - How'd you manage to get here?

} key="not-found" /> - } key="traces" /> - } key="errors" /> - } key="logs" /> - } key="insights" /> - } key="default" /> - -
+
+ +
+ + Not Found - How'd you manage to get here?

} key="not-found" /> + } key="traces" /> + } key="errors" /> + } key="logs" /> + } key="insights" /> + } key="default" /> + +
+
); } diff --git a/packages/spotlight/src/ui/ui/electronDragbarSpacer.tsx b/packages/spotlight/src/ui/ui/electronDragbarSpacer.tsx index 3ce839a4..d0d4e254 100644 --- a/packages/spotlight/src/ui/ui/electronDragbarSpacer.tsx +++ b/packages/spotlight/src/ui/ui/electronDragbarSpacer.tsx @@ -4,15 +4,24 @@ import { useElectronFullscreen } from "@spotlight/ui/lib/useElectronFullscreen"; /** * A spacer component that adds 40px (h-10) height to account for the Electron - * drag bar. Only renders in Electron when NOT in fullscreen mode. + * drag bar. Animates to 0 height when in fullscreen mode. */ export function ElectronDragbarSpacer({ className }: { className?: string }) { const isFullscreen = useElectronFullscreen(); - // Only render spacer in Electron when NOT fullscreen - if (!IS_ELECTRON || isFullscreen) { + // Don't render at all outside Electron + if (!IS_ELECTRON) { return null; } - return
; + // Animate height transition in fullscreen + return ( +
+ ); }