Collection Permissions (#829)

see https://github.com/outline/outline/issues/668

app/components/Sidebar/components/CollectionLink.js

@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
-import { CollectionIcon } from 'outline-icons';
+import { CollectionIcon, PrivateCollectionIcon } from 'outline-icons';
 import styled from 'styled-components';
 import Collection from 'models/Collection';
 import Document from 'models/Document';
@@ -45,7 +45,16 @@ class CollectionLink extends React.Component<Props> {
         <SidebarLink
           key={collection.id}
           to={collection.url}
-          icon={<CollectionIcon expanded={expanded} color={collection.color} />}
+          icon={
+            collection.private ? (
+              <PrivateCollectionIcon
+                expanded={expanded}
+                color={collection.color}
+              />
+            ) : (
+              <CollectionIcon expanded={expanded} color={collection.color} />
+            )
+          }
           iconColor={collection.color}
           expand={expanded}
           hideExpandToggle

app/components/Sidebar/components/Collections.js

@@ -8,6 +8,7 @@ import { PlusIcon } from 'outline-icons';
 import Header from './Header';
 import SidebarLink from './SidebarLink';
 import CollectionLink from './CollectionLink';
+import Fade from 'components/Fade';
 
 import CollectionsStore from 'stores/CollectionsStore';
 import UiStore from 'stores/UiStore';
@@ -32,29 +33,30 @@ class Collections extends React.Component<Props> {
     const { history, location, collections, ui, documents } = this.props;
 
     return (
-      <Flex column>
-        <Header>Collections</Header>
-        {collections.orderedData.map(collection => (
-          <CollectionLink
-            key={collection.id}
-            history={history}
-            location={location}
-            collection={collection}
-            activeDocument={documents.active}
-            prefetchDocument={documents.prefetchDocument}
-            ui={ui}
-          />
-        ))}
-
-        {collections.isLoaded && (
-          <SidebarLink
-            onClick={this.props.onCreateCollection}
-            icon={<PlusIcon />}
-          >
-            New collection…
-          </SidebarLink>
-        )}
-      </Flex>
+      collections.isLoaded && (
+        <Fade>
+          <Flex column>
+            <Header>Collections</Header>
+            {collections.orderedData.map(collection => (
+              <CollectionLink
+                key={collection.id}
+                history={history}
+                location={location}
+                collection={collection}
+                activeDocument={documents.active}
+                prefetchDocument={documents.prefetchDocument}
+                ui={ui}
+              />
+            ))}
+            <SidebarLink
+              onClick={this.props.onCreateCollection}
+              icon={<PlusIcon />}
+            >
+              New collection…
+            </SidebarLink>
+          </Flex>
+        </Fade>
+      )
     );
   }
 }