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/Sidebar/components/HeaderButton.tsx

@@ -3,7 +3,7 @@ import * as React from "react";
 import styled from "styled-components";
 import Flex from "~/components/Flex";
 
-export type HeaderButtonProps = {
+export type HeaderButtonProps = React.ComponentProps<typeof Wrapper> & {
   title: React.ReactNode;
   image: React.ReactNode;
   minHeight?: number;

app/components/Sidebar/components/ResizeBorder.ts

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+import { undraggableOnDesktop } from "~/styles";
 
 const ResizeBorder = styled.div<{ dir?: "left" | "right" }>`
   position: absolute;
@@ -8,6 +9,7 @@ const ResizeBorder = styled.div<{ dir?: "left" | "right" }>`
   left: ${(props) => (props.dir === "right" ? "-1px" : "auto")};
   width: 2px;
   cursor: col-resize;
+  ${undraggableOnDesktop()}
 
   &:hover {
     transition-delay: 500ms;
@@ -22,6 +24,7 @@ const ResizeBorder = styled.div<{ dir?: "left" | "right" }>`
     bottom: 0;
     right: -4px;
     width: 10px;
+    ${undraggableOnDesktop()}
   }
 `;
 

app/components/Sidebar/components/SidebarLink.tsx

@@ -4,6 +4,7 @@ import styled, { useTheme, css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "~/components/EventBoundary";
 import NudeButton from "~/components/NudeButton";
+import { undraggableOnDesktop } from "~/styles";
 import { NavigationNode } from "~/types";
 import Disclosure from "./Disclosure";
 import NavLink, { Props as NavLinkProps } from "./NavLink";
@@ -181,6 +182,7 @@ const Link = styled(NavLink)<{
   font-size: 16px;
   cursor: var(--pointer);
   overflow: hidden;
+  ${undraggableOnDesktop()}
 
   ${(props) =>
     props.$disabled &&