Desktop support (#4484)

* Remove home link on desktop app

* Spellcheck, installation toasts, background styling, …

* Add email,slack, auth support

* More desktop style tweaks

* Move redirect to client

* cleanup

* Record desktop usage

* docs

* fix: Selection state in search input when double clicking header

app/components/Header.tsx

@@ -12,6 +12,8 @@ import Flex from "~/components/Flex";
 import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
+import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles";
+import Desktop from "~/utils/Desktop";
 import { supportsPassiveListener } from "~/utils/browser";
 
 type Props = {
@@ -26,6 +28,7 @@ function Header({ left, title, actions, hasSidebar }: Props) {
   const isMobile = useMobile();
 
   const hasMobileSidebar = hasSidebar && isMobile;
+  const sidebarCollapsed = ui.isEditing || ui.sidebarCollapsed;
 
   const passThrough = !actions && !left && !title;
 
@@ -50,7 +53,12 @@ function Header({ left, title, actions, hasSidebar }: Props) {
   }, []);
 
   return (
-    <Wrapper align="center" shrink={false} $passThrough={passThrough}>
+    <Wrapper
+      align="center"
+      shrink={false}
+      $passThrough={passThrough}
+      $insetTitleAdjust={sidebarCollapsed && Desktop.hasInsetTitlebar()}
+    >
       {left || hasMobileSidebar ? (
         <Breadcrumbs>
           {hasMobileSidebar && (
@@ -98,7 +106,12 @@ const Actions = styled(Flex)`
   `};
 `;
 
-const Wrapper = styled(Flex)<{ $passThrough?: boolean }>`
+type WrapperProps = {
+  $passThrough?: boolean;
+  $insetTitleAdjust?: boolean;
+};
+
+const Wrapper = styled(Flex)<WrapperProps>`
   top: 0;
   z-index: ${depths.header};
   position: sticky;
@@ -120,6 +133,8 @@ const Wrapper = styled(Flex)<{ $passThrough?: boolean }>`
   transform: translate3d(0, 0, 0);
   min-height: 64px;
   justify-content: flex-start;
+  ${draggableOnDesktop()}
+  ${fadeOnDesktopBackgrounded()}
 
   @supports (backdrop-filter: blur(20px)) {
     backdrop-filter: blur(20px);
@@ -133,7 +148,8 @@ const Wrapper = styled(Flex)<{ $passThrough?: boolean }>`
   ${breakpoint("tablet")`
     padding: 16px;
     justify-content: center;
-  `};
+    ${(props: WrapperProps) => props.$insetTitleAdjust && `padding-left: 64px;`}
+    `};
 `;
 
 const Title = styled("div")`