Added: Collection to starred view

Alphabetical sort to starred view

app/components/Sidebar/Main.js

@@ -62,7 +62,7 @@ class MainSidebar extends React.Component<Props> {
               <SidebarLink to="/search" icon={<SearchIcon />}>
                 Search
               </SidebarLink>
-              <SidebarLink to="/starred" icon={<StarredIcon />}>
+              <SidebarLink to="/starred" icon={<StarredIcon />} exact={false}>
                 Starred
               </SidebarLink>
               <SidebarLink

app/routes.js

@@ -42,6 +42,7 @@ export default function Routes() {
             <Route path="/dashboard/:tab" component={Dashboard} />
             <Route path="/dashboard" component={Dashboard} />
             <Route exact path="/starred" component={Starred} />
+            <Route exact path="/starred/:sort" component={Starred} />
             <Route exact path="/drafts" component={Drafts} />
             <Route exact path="/settings" component={Settings} />
             <Route exact path="/settings/details" component={Details} />

app/scenes/Starred.js

@@ -9,12 +9,15 @@ import Empty from 'components/Empty';
 import PageTitle from 'components/PageTitle';
 import Heading from 'components/Heading';
 import DocumentList from 'components/DocumentList';
+import Tabs from 'components/Tabs';
+import Tab from 'components/Tab';
 import NewDocumentMenu from 'menus/NewDocumentMenu';
 import Actions, { Action } from 'components/Actions';
 import DocumentsStore from 'stores/DocumentsStore';
 
 type Props = {
   documents: DocumentsStore,
+  match: Object,
 };
 
 @observer
@@ -24,7 +27,13 @@ class Starred extends React.Component<Props> {
   }
 
   render() {
-    const { isLoaded, isFetching, starred } = this.props.documents;
+    const {
+      isLoaded,
+      isFetching,
+      starred,
+      starredAlphabetical,
+    } = this.props.documents;
+    const { sort } = this.props.match.params;
     const showLoading = !isLoaded && isFetching;
     const showEmpty = isLoaded && !starred.length;
 
@@ -32,9 +41,27 @@ class Starred extends React.Component<Props> {
       <CenteredContent column auto>
         <PageTitle title="Starred" />
         <Heading>Starred</Heading>
+        {showEmpty ? (
+          <Empty>You’ve not starred any documents yet.</Empty>
+        ) : (
+          <React.Fragment>
+            <Tabs>
+              <Tab to="/starred" exact>
+                Recently Updated
+              </Tab>
+              <Tab to="/starred/alphabetical" exact>
+                Alphabetical
+              </Tab>
+            </Tabs>
+            <DocumentList
+              documents={
+                sort === 'alphabetical' ? starredAlphabetical : starred
+              }
+              showCollection
+            />
+          </React.Fragment>
+        )}
         {showLoading && <ListPlaceholder />}
-        {showEmpty && <Empty>You’ve not starred any documents yet.</Empty>}
-        <DocumentList documents={starred} />
         <Actions align="center" justify="flex-end">
           <Action>
             <NewDocumentMenu label={<NewDocumentIcon />} />

app/stores/DocumentsStore.js

@@ -1,7 +1,7 @@
 // @flow
 import { observable, action, computed, ObservableMap, runInAction } from 'mobx';
 import { client } from 'utils/ApiClient';
-import { map, find, orderBy, filter, uniq } from 'lodash';
+import { map, find, orderBy, filter, uniq, sortBy } from 'lodash';
 import invariant from 'invariant';
 
 import BaseStore from 'stores/BaseStore';
@@ -81,6 +81,11 @@ class DocumentsStore extends BaseStore {
     return filter(this.data.values(), 'starred');
   }
 
+  @computed
+  get starredAlphabetical(): Document[] {
+    return sortBy(this.starred, doc => doc.title.toLowerCase());
+  }
+
   @computed
   get drafts(): Document[] {
     return filter(