fix(app): remove mac fullscreen toolbar gap

apps/desktop/src/components/layout/AppToolbar.vue

@@ -28,7 +28,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import WindowControls from "@/components/layout/WindowControls.vue";
-import { useWindowControls } from "@/composables/useWindowControls";
+import { shouldReserveMacTrafficLightInset, useWindowControls } from "@/composables/useWindowControls";
 import { currentLocale, setLocale, type Locale } from "@/i18n";
 import type { AppThemeMode } from "@/lib/appTheme";
 
@@ -68,7 +68,8 @@ const emit = defineEmits<{
 }>();
 
 const { t } = useI18n();
-const { isMac, isDesktop, showControls, isMaximized, minimize, toggleMaximize, close } = useWindowControls();
+const { isMac, isDesktop, showControls, isMaximized, isFullscreen, minimize, toggleMaximize, close } =
+  useWindowControls();
 
 function onToolbarDblClick(e: MouseEvent) {
   if (isDesktop) return;
@@ -81,7 +82,7 @@ function onToolbarDblClick(e: MouseEvent) {
 <template>
   <div
     class="h-10 flex items-center gap-1 px-2 border-b bg-muted/30 shrink-0"
-    :class="{ 'pl-17.5': isMac }"
+    :class="{ 'pl-17.5': shouldReserveMacTrafficLightInset(isMac, isFullscreen) }"
     data-tauri-drag-region
     @dblclick="onToolbarDblClick"
   >

apps/desktop/src/composables/useWindowControls.ts

@@ -2,18 +2,26 @@ import { ref, onMounted, onUnmounted } from "vue";
 import { isTauriRuntime } from "@/lib/tauriRuntime";
 import { isMacOS } from "@/lib/platform";
 
+export function shouldReserveMacTrafficLightInset(isMac: boolean, isFullscreen: boolean): boolean {
+  return isMac && !isFullscreen;
+}
+
 export function useWindowControls() {
   const isMaximized = ref(false);
+  const isFullscreen = ref(false);
   const isMac = isMacOS();
   const isDesktop = isTauriRuntime();
   const showControls = isDesktop && !isMac;
 
   let unlisten: (() => void) | null = null;
 
-  async function updateMaximizedState() {
+  async function updateWindowState() {
     if (!isDesktop) return;
     const { getCurrentWindow } = await import("@tauri-apps/api/window");
-    isMaximized.value = await getCurrentWindow().isMaximized();
+    const currentWindow = getCurrentWindow();
+    const [maximized, fullscreen] = await Promise.all([currentWindow.isMaximized(), currentWindow.isFullscreen()]);
+    isMaximized.value = maximized;
+    isFullscreen.value = fullscreen;
   }
 
   async function minimize() {
@@ -24,7 +32,7 @@ export function useWindowControls() {
   async function toggleMaximize() {
     const { getCurrentWindow } = await import("@tauri-apps/api/window");
     await getCurrentWindow().toggleMaximize();
-    setTimeout(updateMaximizedState, 50);
+    setTimeout(updateWindowState, 50);
   }
 
   async function close() {
@@ -34,10 +42,10 @@ export function useWindowControls() {
 
   onMounted(async () => {
     if (!isDesktop) return;
-    await updateMaximizedState();
+    await updateWindowState();
     const { getCurrentWindow } = await import("@tauri-apps/api/window");
     const unlistenFn = await getCurrentWindow().onResized(() => {
-      updateMaximizedState();
+      void updateWindowState();
     });
     unlisten = unlistenFn;
   });
@@ -51,6 +59,7 @@ export function useWindowControls() {
     isDesktop,
     showControls,
     isMaximized,
+    isFullscreen,
     minimize,
     toggleMaximize,
     close,

packages/app-tests/windowControlsFullscreenInset.test.ts

@@ -0,0 +1,10 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import * as windowControlsModule from "../../apps/desktop/src/composables/useWindowControls.ts";
+
+test("mac traffic-light inset is removed in fullscreen", () => {
+  assert.equal(typeof windowControlsModule.shouldReserveMacTrafficLightInset, "function");
+  assert.equal(windowControlsModule.shouldReserveMacTrafficLightInset(true, false), true);
+  assert.equal(windowControlsModule.shouldReserveMacTrafficLightInset(true, true), false);
+  assert.equal(windowControlsModule.shouldReserveMacTrafficLightInset(false, false), false);
+});