Move star out of editor into documentpreview (#174)

* Move star out of editor into documentpreview

* 💚

frontend/components/DocumentPreview/DocumentPreview.js

@@ -1,10 +1,12 @@
 // @flow
 import React, { Component } from 'react';
+import { observer } from 'mobx-react';
 import { Link } from 'react-router-dom';
 import Document from 'models/Document';
 import styled from 'styled-components';
 import { color } from 'styles/constants';
 import PublishingInfo from 'components/PublishingInfo';
+import StarIcon from 'components/Icon/StarIcon';
 
 type Props = {
   document: Document,
@@ -13,10 +15,27 @@ type Props = {
   innerRef?: Function,
 };
 
+const StyledStar = styled(StarIcon)`
+  top: 2px;
+  position: relative;
+  margin-left: 4px;
+  opacity: ${props => (props.solid ? 1 : 0.25)};
+  transition: opacity 100ms ease-in-out;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  svg {
+    width: 1em;
+    height: 1em;
+  }
+`;
+
 const DocumentLink = styled(Link)`
   display: block;
   margin: 0 -16px;
-  padding: 16px;
+  padding: 10px 16px;
   border-radius: 8px;
   border: 2px solid transparent;
   max-height: 50vh;
@@ -37,18 +56,36 @@ const DocumentLink = styled(Link)`
 
   h3 {
     margin-top: 0;
+    margin-bottom: .25em;
   }
 `;
 
-class DocumentPreview extends Component {
+@observer class DocumentPreview extends Component {
   props: Props;
 
+  star = (ev: SyntheticEvent) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.props.document.star();
+  };
+
+  unstar = (ev: SyntheticEvent) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    this.props.document.unstar();
+  };
+
   render() {
     const { document, showCollection, innerRef, ...rest } = this.props;
 
     return (
       <DocumentLink to={document.url} innerRef={innerRef} {...rest}>
-        <h3>{document.title}</h3>
+        <h3>
+          {document.title}
+          {document.starred
+            ? <a onClick={this.unstar}><StyledStar solid /></a>
+            : <a onClick={this.star}><StyledStar /></a>}
+        </h3>
         <PublishingInfo
           document={document}
           collection={showCollection ? document.collection : undefined}