Added bubble to side of drafts in sidebar with count of pending drafts

Based on feedback that its not clear on initial use

app/components/Sidebar/Main.js

@@ -12,6 +12,7 @@ import Scrollable from 'components/Scrollable';
 import Collections from './components/Collections';
 import SidebarLink from './components/SidebarLink';
 import HeaderBlock from './components/HeaderBlock';
+import Bubble from './components/Bubble';
 
 import AuthStore from 'stores/AuthStore';
 import DocumentsStore from 'stores/DocumentsStore';
@@ -27,6 +28,10 @@ type Props = {
 
 @observer
 class MainSidebar extends React.Component<Props> {
+  componentDidMount() {
+    this.props.documents.fetchDrafts();
+  }
+
   handleCreateCollection = () => {
     this.props.ui.setActiveModal('collection-new');
   };
@@ -67,7 +72,7 @@ class MainSidebar extends React.Component<Props> {
                   documents.active ? !documents.active.publishedAt : undefined
                 }
               >
-                Drafts
+                Drafts <Bubble count={documents.drafts.length} />
               </SidebarLink>
             </Section>
             <Section>

app/components/Sidebar/components/Bubble.js

@@ -0,0 +1,31 @@
+// @flow
+import * as React from 'react';
+import styled from 'styled-components';
+import { fadeAndScaleIn } from 'shared/styles/animations';
+
+type Props = {
+  count: number,
+};
+
+const Bubble = ({ count }: Props) => {
+  return !!count && <Wrapper>{count}</Wrapper>;
+};
+
+const Wrapper = styled.div`
+  animation: ${fadeAndScaleIn} 200ms ease;
+
+  border-radius: 100%;
+  color: ${props => props.theme.white};
+  background: ${props => props.theme.slateDark};
+  display: inline-block;
+  min-width: 15px;
+  padding: 0 5px;
+  font-size: 10px;
+  position: relative;
+  top: -2px;
+  left: 2px;
+}
+
+`;
+
+export default Bubble;