feat: Document presence indicator (#1114)

* Update websockets to allow joining document-based rooms

* dynamic websocket joining

* emit user.join/leave events when entering and exiting document rooms

* presence storage

* feat: frontend presence store

* lint

* UI updates

* First pass editing state

* refactoring

* Timeout per user/doc
lint

* Document data loading refactor to keep Socket mounted

* restore: Mark as viewed functionality
Add display of 'you' to collaborators

* fix: Socket/document remount when document slug changes due to title change

* Revert unneccessary package update

* Move editing ping interval to a shared constant

* fix: Flash of sidebar when loading page directly on editing mode

* separate document and revision loading

* add comments for socket events

* fix: Socket events getting bound multiple times on reconnect

* fix: Clear client side presence state on disconnect

* fix: Don't ignore server side error
Improved documentation

* More comments / why comments

* rename Socket -> SocketPresence

* fix: Handle redis is down
remove unneccessary join

* fix: PR feedback

app/components/Avatar/Avatar.js

@@ -8,6 +8,7 @@ import placeholder from './placeholder.png';
 type Props = {
   src: string,
   size: number,
+  icon?: React.Node,
 };
 
 @observer
@@ -23,18 +24,37 @@ class Avatar extends React.Component<Props> {
   };
 
   render() {
-    const { src, ...rest } = this.props;
+    const { src, icon, ...rest } = this.props;
 
     return (
-      <CircleImg
-        onError={this.handleError}
-        src={this.error ? placeholder : src}
-        {...rest}
-      />
+      <AvatarWrapper>
+        <CircleImg
+          onError={this.handleError}
+          src={this.error ? placeholder : src}
+          {...rest}
+        />
+        {icon && <IconWrapper>{icon}</IconWrapper>}
+      </AvatarWrapper>
     );
   }
 }
 
+const AvatarWrapper = styled.span`
+  position: relative;
+`;
+
+const IconWrapper = styled.span`
+  display: flex;
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  background: ${props => props.theme.primary};
+  border: 2px solid ${props => props.theme.background};
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+`;
+
 const CircleImg = styled.img`
   width: ${props => props.size}px;
   height: ${props => props.size}px;