header changes and open new window for double click in finder macos (#3652)

* header changes and open new window for double click in finder macos

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* cleanup

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* add protocols

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* updates

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* extend with info.plist

Signed-off-by: Jess Frazelle <github@jessfraz.com>

* fixes

Signed-off-by: Jess Frazelle <github@jessfraz.com>

---------

Signed-off-by: Jess Frazelle <github@jessfraz.com>

src/components/AppHeader.module.css

@@ -4,4 +4,21 @@
  */
 .header {
   grid-template-columns: 1fr auto 1fr;
+  -webkit-app-region: drag; /* Make the header of the app draggable */
+}
+
+.header button {
+  -webkit-app-region: no-drag; /* Make the button not draggable */
+}
+
+.header a {
+  -webkit-app-region: no-drag; /* Make the link not draggable */
+}
+
+.header textarea {
+  -webkit-app-region: no-drag; /* Make the textarea not draggable */
+}
+
+.header input {
+  -webkit-app-region: no-drag; /* Make the input not draggable */
 }

src/components/ProjectSidebarMenu.tsx

@@ -25,8 +25,17 @@ const ProjectSidebarMenu = ({
   project?: IndexLoaderData['project']
   file?: IndexLoaderData['file']
 }) => {
+  // Make room for traffic lights on desktop left side.
+  // TODO: make sure this doesn't look like shit on Linux or Windows
+  const trafficLightsOffset =
+    isDesktop() && window.electron.os.isMac ? 'ml-20' : ''
   return (
-    <div className="!no-underline h-full mr-auto max-h-min min-h-12 min-w-max flex items-center gap-2">
+    <div
+      className={
+        '!no-underline h-full mr-auto max-h-min min-h-12 min-w-max flex items-center gap-2 ' +
+        trafficLightsOffset
+      }
+    >
       <AppLogoLink project={project} file={file} />
       {enableMenu ? (
         <ProjectMenuPopover project={project} file={file} />