Fix header in fullscreen mode on Mac

src-web/components/SettingsDialog.tsx

@@ -40,7 +40,12 @@ export const SettingsDialog = () => {
       </HStack>
       <Separator className="my-4" />
 
-      <Heading size={2}>Workspace ({workspace.name})</Heading>
+      <Heading size={2}>
+        Workspace{' '}
+        <div className="inline-block ml-1 bg-gray-500 dark:bg-gray-300 px-2 py-0.5 !text-md rounded text-base text-white dark:text-gray-900">
+          {workspace.name}
+        </div>
+      </Heading>
       <VStack className="w-full" space={3}>
         <Input
           size="xs"

src-web/components/Workspace.tsx

@@ -1,3 +1,4 @@
+import { appWindow } from '@tauri-apps/api/window';
 import classNames from 'classnames';
 import { motion } from 'framer-motion';
 import type {
@@ -7,7 +8,8 @@ import type {
   ReactNode,
 } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useWindowSize } from 'react-use';
+import { useFullscreen, useWindowSize } from 'react-use';
+import { useIsFullscreen } from '../hooks/useIsFullscreen';
 import { useOsInfo } from '../hooks/useOsInfo';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { useSidebarWidth } from '../hooks/useSidebarWidth';
@@ -173,12 +175,14 @@ interface HeaderSizeProps extends HTMLAttributes<HTMLDivElement> {
 
 function HeaderSize({ className, ...props }: HeaderSizeProps) {
   const platform = useOsInfo();
+  const fullscreen = useIsFullscreen();
+  const stoplightsVisible = platform?.osType === 'Darwin' && !fullscreen;
   return (
     <div
       className={classNames(
         className,
         'h-md pt-[1px] flex items-center w-full border-b',
-        platform?.osType === 'Darwin' ? 'pl-20 pr-1' : 'pl-1',
+        stoplightsVisible ? 'pl-20 pr-1' : 'pl-1',
       )}
       {...props}
     />

src-web/hooks/useIsFullscreen.ts

@@ -0,0 +1,26 @@
+import { appWindow } from '@tauri-apps/api/window';
+import { useEffect, useState } from 'react';
+import { useWindowSize } from 'react-use';
+
+export function useIsFullscreen() {
+  const [isFullscreen, setIsFullscreen] = useState<boolean>(false);
+  const windowSize = useWindowSize();
+
+  useEffect(() => {
+    (async function () {
+      // Fullscreen state isn't updated right after resize event on Mac (needs to wait for animation) so
+      // we'll poll for 10 seconds to see if it changes. Hopefully Tauri eventually adds a way to listen
+      // for this.
+      for (let i = 0; i < 100; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        const newIsFullscreen = await appWindow.isFullscreen();
+        if (newIsFullscreen !== isFullscreen) {
+          setIsFullscreen(newIsFullscreen);
+          break;
+        }
+      }
+    })();
+  }, [windowSize, isFullscreen]);
+
+  return isFullscreen;
+}