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/styles/index.ts

@@ -1,3 +1,4 @@
+import Desktop from "~/utils/Desktop";
 import { isTouchDevice } from "~/utils/browser";
 
 /**
@@ -6,3 +7,34 @@ import { isTouchDevice } from "~/utils/browser";
  * using `&:hover {...}`.
  */
 export const hover = isTouchDevice() ? "active" : "hover";
+
+/**
+ * Mixin to make an element drag the window when rendered in the desktop app.
+ *
+ * @returns string of CSS
+ */
+export const draggableOnDesktop = () =>
+  Desktop.isElectron() ? "-webkit-app-region: drag;" : "";
+
+/**
+ * Mixin to make an element not drag the window when rendered in the desktop app.
+ *
+ * @returns string of CSS
+ */
+export const undraggableOnDesktop = () =>
+  Desktop.isElectron() ? "-webkit-app-region: no-drag;" : "";
+
+/**
+ * Mixin to make an element fade when the desktop app is backgrounded.
+ *
+ * @returns string of CSS
+ */
+export const fadeOnDesktopBackgrounded = () => {
+  if (!Desktop.isElectron()) {
+    return "";
+  }
+
+  return `
+    body.backgrounded & { opacity: 0.75; }
+  `;
+};