diff --git a/.changeset/chubby-donkeys-mate.md b/.changeset/chubby-donkeys-mate.md new file mode 100644 index 000000000..7000aead2 --- /dev/null +++ b/.changeset/chubby-donkeys-mate.md @@ -0,0 +1,5 @@ +--- +"@spotlightjs/spotlight": patch +--- + +removed the top spacing in fullscreen mode diff --git a/packages/spotlight/src/electron/main/index.ts b/packages/spotlight/src/electron/main/index.ts index c65698f2e..ad9a1ed1f 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 000000000..702a9a8d2 --- /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 d323f428e..f51e3c265 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 2d85a23b5..b5e8c6b6c 100644 --- a/packages/spotlight/src/ui/telemetry/components/TelemetryView.tsx +++ b/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 (
- {/* pt-10 (40px) adds top padding in Electron to account for the 40px drag bar */} -
- - 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 new file mode 100644 index 000000000..d0d4e2541 --- /dev/null +++ b/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 ( +
+ ); +}