Add an Electron app drag handle to sign-in page (#3795)

* Add Electron app drag handle to sign-in page

* Don't assign drag regions in web from JSX, results in dev-only console errors about unsupported style values

src/App.tsx

@@ -122,11 +122,11 @@ export function App() {
         // Override the electron window draggable region behavior as well
         // when the button is down in the stream
         style={
-          {
-            '-webkit-app-region': context.store?.buttonDownInStream
-              ? 'no-drag'
-              : '',
-          } as React.CSSProperties
+          isDesktop() && context.store?.buttonDownInStream
+            ? ({
+                '-webkit-app-region': 'no-drag',
+              } as React.CSSProperties)
+            : {}
         }
         project={{ project, file }}
         enableMenu={true}

src/components/AppHeader.module.css

@@ -6,6 +6,9 @@
   grid-template-columns: 1fr auto 1fr;
   user-select: none;
   -webkit-user-select: none;
+}
+
+.header.desktopApp {
   /* Make the header act as a handle to drag the electron app window,
    * per the electron docs: https://www.electronjs.org/docs/latest/tutorial/window-customization#set-custom-draggable-region
    * all interactive elements opt-out of this behavior by default in src/index.css

src/components/AppHeader.tsx

@@ -6,6 +6,7 @@ import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
 import styles from './AppHeader.module.css'
 import { RefreshButton } from 'components/RefreshButton'
 import { CommandBarOpenButton } from './CommandBarOpenButton'
+import { isDesktop } from 'lib/isDesktop'
 
 interface AppHeaderProps extends React.PropsWithChildren {
   showToolbar?: boolean
@@ -32,7 +33,9 @@ export const AppHeader = ({
       className={
         'w-full grid ' +
         styles.header +
-        ' overlaid-panes sticky top-0 z-20 px-2 items-start ' +
+        ` ${
+          isDesktop() ? styles.desktopApp + ' ' : ''
+        }overlaid-panes sticky top-0 z-20 px-2 items-start ` +
         className
       }
       style={style}

src/routes/SignIn.tsx

@@ -58,7 +58,16 @@ const SignIn = () => {
   }
 
   return (
-    <main className="bg-primary h-screen grid place-items-stretch m-0 p-2">
+    <main
+      className="bg-primary h-screen grid place-items-stretch m-0 p-2"
+      style={
+        isDesktop()
+          ? ({
+              '-webkit-app-region': 'drag',
+            } as CSSProperties)
+          : {}
+      }
+    >
       <div
         style={
           {
@@ -68,6 +77,7 @@ const SignIn = () => {
             '--circle-size-mid': '15%',
             '--circle-size-end': '200%',
             '--circle-timing': 'cubic-bezier(0.25, 1, 0.4, 0.9)',
+            ...(isDesktop() ? { '-webkit-app-region': 'no-drag' } : {}),
           } as CSSProperties
         }
         className="in-circle-hesitate body-bg py-5 px-12 rounded-lg grid place-items-center overflow-y-auto"