From 55ddd3137d6aa90f965369cf4fcec0907c1d5371 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 23 Jun 2018 15:27:16 -0700
Subject: [PATCH] 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              |  7 ++++-
 app/components/Sidebar/components/Bubble.js | 31 +++++++++++++++++++++
 2 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 app/components/Sidebar/components/Bubble.js

diff --git a/app/components/Sidebar/Main.js b/app/components/Sidebar/Main.js
index 16fe19602..1b126e0b1 100644
--- a/app/components/Sidebar/Main.js
+++ b/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>
diff --git a/app/components/Sidebar/components/Bubble.js b/app/components/Sidebar/components/Bubble.js
new file mode 100644
index 000000000..03377d93d
--- /dev/null
+++ b/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;