From 5be04ceea60edca1e77ace8e88b6be74f95027da Mon Sep 17 00:00:00 2001
From: Gregory Schier <gschier1990@gmail.com>
Date: Wed, 17 Jan 2024 09:34:47 -0800
Subject: [PATCH] Fix header in fullscreen mode on Mac

---
 src-web/components/SettingsDialog.tsx |  7 ++++++-
 src-web/components/Workspace.tsx      |  8 ++++++--
 src-web/hooks/useIsFullscreen.ts      | 26 ++++++++++++++++++++++++++
 3 files changed, 38 insertions(+), 3 deletions(-)
 create mode 100644 src-web/hooks/useIsFullscreen.ts

diff --git a/src-web/components/SettingsDialog.tsx b/src-web/components/SettingsDialog.tsx
index 883c8493..3faff84f 100644
--- a/src-web/components/SettingsDialog.tsx
+++ b/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"
diff --git a/src-web/components/Workspace.tsx b/src-web/components/Workspace.tsx
index f50c65ec..5f69619b 100644
--- a/src-web/components/Workspace.tsx
+++ b/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}
     />
diff --git a/src-web/hooks/useIsFullscreen.ts b/src-web/hooks/useIsFullscreen.ts
new file mode 100644
index 00000000..1937e4ea
--- /dev/null
+++ b/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;
+}