Factor out collaboration code (#2313)

Co-authored-by: Lipis <lipiridis@gmail.com>
Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/CollabButton.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import clsx from "clsx";
+import { ToolButton } from "./ToolButton";
+import { t } from "../i18n";
+import useIsMobile from "../is-mobile";
+import { users } from "./icons";
+
+import "./CollabButton.scss";
+import { EVENT_DIALOG, trackEvent } from "../analytics";
+
+const CollabButton = ({
+  isCollaborating,
+  collaboratorCount,
+  onClick,
+}: {
+  isCollaborating: boolean;
+  collaboratorCount: number;
+  onClick: () => void;
+}) => {
+  return (
+    <>
+      <ToolButton
+        className={clsx("CollabButton", {
+          "is-collaborating": isCollaborating,
+        })}
+        onClick={() => {
+          trackEvent(EVENT_DIALOG, "collaboration");
+          onClick();
+        }}
+        icon={users}
+        type="button"
+        title={t("buttons.roomDialog")}
+        aria-label={t("buttons.roomDialog")}
+        showAriaLabel={useIsMobile()}
+      >
+        {collaboratorCount > 0 && (
+          <div className="CollabButton-collaborators">{collaboratorCount}</div>
+        )}
+      </ToolButton>
+    </>
+  );
+};
+
+export default CollabButton;