chore: Standardized headers (#1883)

* feat: Collection to standard header feat: Sticky tabs * chore: Document to standard header * chore: Dashboard -> Home chore: Scene component * chore: Trash, Templates, Drafts * fix: Mobile improvements * fix: Content showing at sides and occassionally ontop of sticky headers
2021-02-14 13:18:33 -08:00 · 2021-02-14 13:18:33 -08:00 · 4b603460cb
parent 32a298054d
commit 4b603460cb
22 changed files with 711 additions and 610 deletions
--- a/app/components/CenteredContent.js
+++ b/app/components/CenteredContent.js
@ -3,17 +3,18 @@ import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";

-type Props = {
+type Props = {|
  children?: React.Node,
-};
+  withStickyHeader?: boolean,
+|};

 const Container = styled.div`
  width: 100%;
  max-width: 100vw;
-  padding: 60px 20px;
+  padding: ${(props) => (props.withStickyHeader ? "4px 20px" : "60px 20px")};

  ${breakpoint("tablet")`
-    padding: 60px;
+    padding: ${(props) => (props.withStickyHeader ? "4px 60px" : "60px")};
  `};
 `;

--- a/app/components/Collaborators.js
+++ b/app/components/Collaborators.js
@ -2,8 +2,9 @@
 import { sortBy, keyBy } from "lodash";
 import { observer, inject } from "mobx-react";
 import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import { MAX_AVATAR_DISPLAY } from "shared/constants";
-
 import DocumentPresenceStore from "stores/DocumentPresenceStore";
 import ViewsStore from "stores/ViewsStore";
 import Document from "models/Document";
@ -51,7 +52,7 @@ class Collaborators extends React.Component<Props> {
    const overflow = documentViews.length - mostRecentViewers.length;

    return (
-      <Facepile
+      <FacepileHiddenOnMobile
        users={mostRecentViewers.map((v) => v.user)}
        overflow={overflow}
        renderAvatar={(user) => {
@ -75,4 +76,10 @@ class Collaborators extends React.Component<Props> {
  }
 }

+const FacepileHiddenOnMobile = styled(Facepile)`
+  ${breakpoint("mobile", "tablet")`
+    display: none;
+  `};
+`;
+
 export default inject("views", "presence")(Collaborators);
--- a/app/components/Header.js
+++ b/app/components/Header.js
@ -0,0 +1,104 @@
+// @flow
+import { throttle } from "lodash";
+import { observer } from "mobx-react";
+import { transparentize } from "polished";
+import * as React from "react";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import Fade from "components/Fade";
+import Flex from "components/Flex";
+
+type Props = {|
+  breadcrumb?: React.Node,
+  title: React.Node,
+  actions?: React.Node,
+|};
+
+function Header({ breadcrumb, title, actions }: Props) {
+  const [isScrolled, setScrolled] = React.useState(false);
+
+  const handleScroll = React.useCallback(
+    throttle(() => setScrolled(window.scrollY > 75), 50),
+    []
+  );
+
+  React.useEffect(() => {
+    window.addEventListener("scroll", handleScroll);
+
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [handleScroll]);
+
+  const handleClickTitle = React.useCallback(() => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  }, []);
+
+  return (
+    <Wrapper
+      align="center"
+      justify="space-between"
+      isCompact={isScrolled}
+      shrink={false}
+    >
+      {breadcrumb}
+      {isScrolled ? (
+        <Title
+          align="center"
+          justify={breadcrumb ? "center" : "flex-start"}
+          onClick={handleClickTitle}
+        >
+          <Fade>
+            <Flex align="center">{title}</Flex>
+          </Fade>
+        </Title>
+      ) : (
+        <div />
+      )}
+      {actions && <Actions>{actions}</Actions>}
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled(Flex)`
+  position: sticky;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: 2;
+  background: ${(props) => transparentize(0.2, props.theme.background)};
+  padding: 12px;
+  transition: all 100ms ease-out;
+  transform: translate3d(0, 0, 0);
+  backdrop-filter: blur(20px);
+
+  @media print {
+    display: none;
+  }
+
+  ${breakpoint("tablet")`
+    padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
+  `};
+`;
+
+const Title = styled(Flex)`
+  font-size: 16px;
+  font-weight: 600;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  width: 0;
+
+  ${breakpoint("tablet")`	
+    flex-grow: 1;
+  `};
+`;
+
+const Actions = styled(Flex)`
+  align-self: flex-end;
+  height: 32px;
+`;
+
+export default observer(Header);
--- a/app/components/Input.js
+++ b/app/components/Input.js
@ -4,6 +4,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
 import Flex from "components/Flex";

 const RealTextarea = styled.textarea`
@ -33,6 +34,10 @@ const RealInput = styled.input`
  &::placeholder {
    color: ${(props) => props.theme.placeholder};
  }
+
+  ${breakpoint("mobile", "tablet")`
+    font-size: 16px;
+  `};
 `;

 const Wrapper = styled.div`
--- a/app/components/Scene.js
+++ b/app/components/Scene.js
@ -0,0 +1,50 @@
+// @flow
+import * as React from "react";
+import styled from "styled-components";
+import CenteredContent from "components/CenteredContent";
+import Header from "components/Header";
+import PageTitle from "components/PageTitle";
+
+type Props = {|
+  icon?: React.Node,
+  title: React.Node,
+  textTitle?: string,
+  children: React.Node,
+  breadcrumb?: React.Node,
+  actions?: React.Node,
+|};
+
+function Scene({
+  title,
+  icon,
+  textTitle,
+  actions,
+  breadcrumb,
+  children,
+}: Props) {
+  return (
+    <FillWidth>
+      <PageTitle title={textTitle || title} />
+      <Header
+        title={
+          icon ? (
+            <>
+              {icon}&nbsp;{title}
+            </>
+          ) : (
+            title
+          )
+        }
+        actions={actions}
+        breadcrumb={breadcrumb}
+      />
+      <CenteredContent withStickyHeader>{children}</CenteredContent>
+    </FillWidth>
+  );
+}
+
+const FillWidth = styled.div`
+  width: 100%;
+`;
+
+export default Scene;
--- a/app/components/Sidebar/Main.js
+++ b/app/components/Sidebar/Main.js
@ -22,9 +22,9 @@ import Modal from "components/Modal";
 import Scrollable from "components/Scrollable";
 import Sidebar from "./Sidebar";
 import Collections from "./components/Collections";
-import HeaderBlock from "./components/HeaderBlock";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
+import TeamButton from "./components/TeamButton";
 import useStores from "hooks/useStores";
 import AccountMenu from "menus/AccountMenu";

@ -72,7 +72,7 @@ function MainSidebar() {
    <Sidebar>
      <AccountMenu>
        {(props) => (
-          <HeaderBlock
+          <TeamButton
            {...props}
            subheading={user.name}
            teamName={team.name}
--- a/app/components/Sidebar/Settings.js
+++ b/app/components/Sidebar/Settings.js
@ -21,9 +21,9 @@ import Scrollable from "components/Scrollable";

 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
-import HeaderBlock from "./components/HeaderBlock";
 import Section from "./components/Section";
 import SidebarLink from "./components/SidebarLink";
+import TeamButton from "./components/TeamButton";
 import Version from "./components/Version";
 import SlackIcon from "./icons/Slack";
 import ZapierIcon from "./icons/Zapier";
@ -46,7 +46,7 @@ function SettingsSidebar() {

  return (
    <Sidebar>
-      <HeaderBlock
+      <TeamButton
        subheading={
          <ReturnToApp align="center">
            <BackIcon color="currentColor" /> {t("Return to App")}
--- a/app/components/Sidebar/components/HeaderBlock.js
+++ b/app/components/Sidebar/components/HeaderBlock.js
@ -13,7 +13,7 @@ type Props = {|
  logoUrl: string,
 |};

-const HeaderBlock = React.forwardRef<Props, any>(
+const TeamButton = React.forwardRef<Props, any>(
  ({ showDisclosure, teamName, subheading, logoUrl, ...rest }: Props, ref) => (
    <Wrapper>
      <Header justify="flex-start" align="center" ref={ref} {...rest}>
@ -25,8 +25,7 @@ const HeaderBlock = React.forwardRef<Props, any>(
        />
        <Flex align="flex-start" column>
          <TeamName showDisclosure>
-            {teamName}{" "}
-            {showDisclosure && <StyledExpandedIcon color="currentColor" />}
+            {teamName} {showDisclosure && <Disclosure color="currentColor" />}
          </TeamName>
          <Subheading>{subheading}</Subheading>
        </Flex>
@ -35,7 +34,7 @@ const HeaderBlock = React.forwardRef<Props, any>(
  )
 );

-const StyledExpandedIcon = styled(ExpandedIcon)`
+const Disclosure = styled(ExpandedIcon)`
  position: absolute;
  right: 0;
  top: 0;
@ -84,4 +83,4 @@ const Header = styled.button`
  }
 `;

-export default HeaderBlock;
+export default TeamButton;
--- a/app/components/Subheading.js
+++ b/app/components/Subheading.js
@ -2,19 +2,17 @@
 import * as React from "react";
 import styled from "styled-components";

-type Props = {
+type Props = {|
  children: React.Node,
-};
+|};

 const H3 = styled.h3`
  border-bottom: 1px solid ${(props) => props.theme.divider};
-  margin-top: 22px;
-  margin-bottom: 12px;
+  margin: 12px 0;
  line-height: 1;
-  position: relative;
 `;

-const Underline = styled("span")`
+const Underline = styled.div`
  margin-top: -1px;
  display: inline-block;
  font-weight: 500;
@ -22,14 +20,29 @@ const Underline = styled("span")`
  line-height: 1.5;
  color: ${(props) => props.theme.textSecondary};
  border-bottom: 3px solid ${(props) => props.theme.textSecondary};
+  padding-top: 7px;
  padding-bottom: 5px;
 `;

+// When sticky we need extra background coverage around the sides otherwise
+// items that scroll past can "stick out" the sides of the heading
+const Sticky = styled.div`
+  position: sticky;
+  top: 54px;
+  margin: 0 -8px;
+  padding: 0 8px;
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  z-index: ${(props) => props.theme.depths.stickyHeader};
+`;
+
 const Subheading = ({ children, ...rest }: Props) => {
  return (
-    <H3 {...rest}>
-      <Underline>{children}</Underline>
-    </H3>
+    <Sticky>
+      <H3 {...rest}>
+        <Underline>{children}</Underline>
+      </H3>
+    </Sticky>
  );
 };

--- a/app/components/Tab.js
+++ b/app/components/Tab.js
@ -8,7 +8,7 @@ type Props = {
  theme: Theme,
 };

-const StyledNavLink = styled(NavLink)`
+const TabLink = styled(NavLink)`
  position: relative;
  display: inline-flex;
  align-items: center;
@ -16,7 +16,7 @@ const StyledNavLink = styled(NavLink)`
  font-size: 14px;
  color: ${(props) => props.theme.textTertiary};
  margin-right: 24px;
-  padding-bottom: 8px;
+  padding: 6px 0;

  &:hover {
    color: ${(props) => props.theme.textSecondary};
@ -32,7 +32,7 @@ function Tab({ theme, ...rest }: Props) {
    color: theme.textSecondary,
  };

-  return <StyledNavLink {...rest} activeStyle={activeStyle} />;
+  return <TabLink {...rest} activeStyle={activeStyle} />;
 }

 export default withTheme(Tab);
--- a/app/components/Tabs.js
+++ b/app/components/Tabs.js
@ -1,16 +1,27 @@
 // @flow
+import * as React from "react";
 import styled from "styled-components";

-const Tabs = styled.nav`
-  position: relative;
+const Nav = styled.nav`
  border-bottom: 1px solid ${(props) => props.theme.divider};
-  margin-top: 22px;
-  margin-bottom: 12px;
+  margin: 12px 0;
  overflow-y: auto;
  white-space: nowrap;
  transition: opacity 250ms ease-out;
 `;

+// When sticky we need extra background coverage around the sides otherwise
+// items that scroll past can "stick out" the sides of the heading
+const Sticky = styled.div`
+  position: sticky;
+  top: 54px;
+  margin: 0 -8px;
+  padding: 0 8px;
+  background: ${(props) => props.theme.background};
+  transition: ${(props) => props.theme.backgroundTransition};
+  z-index: ${(props) => props.theme.depths.stickyHeader};
+`;
+
 export const Separator = styled.span`
  border-left: 1px solid ${(props) => props.theme.divider};
  position: relative;
@ -19,4 +30,12 @@ export const Separator = styled.span`
  margin-top: 6px;
 `;

+const Tabs = (props: {}) => {
+  return (
+    <Sticky>
+      <Nav {...props}></Nav>
+    </Sticky>
+  );
+};
+
 export default Tabs;
--- a/app/routes/authenticated.js
+++ b/app/routes/authenticated.js
@ -3,11 +3,11 @@ import * as React from "react";
 import { Switch, Redirect, type Match } from "react-router-dom";
 import Archive from "scenes/Archive";
 import Collection from "scenes/Collection";
-import Dashboard from "scenes/Dashboard";
 import KeyedDocument from "scenes/Document/KeyedDocument";
 import DocumentNew from "scenes/DocumentNew";
 import Drafts from "scenes/Drafts";
 import Error404 from "scenes/Error404";
+import Home from "scenes/Home";
 import Search from "scenes/Search";
 import Starred from "scenes/Starred";
 import Templates from "scenes/Templates";
@ -37,8 +37,8 @@ export default function AuthenticatedRoutes() {
      <Layout>
        <Switch>
          <Redirect from="/dashboard" to="/home" />
-          <Route path="/home/:tab" component={Dashboard} />
-          <Route path="/home" component={Dashboard} />
+          <Route path="/home/:tab" component={Home} />
+          <Route path="/home" component={Home} />
          <Route exact path="/starred" component={Starred} />
          <Route exact path="/starred/:sort" component={Starred} />
          <Route exact path="/templates" component={Templates} />
--- a/app/scenes/Archive.js
+++ b/app/scenes/Archive.js
@ -20,7 +20,7 @@ function Archive(props: Props) {
  const { documents } = props;

  return (
-    <CenteredContent column auto>
+    <CenteredContent>
      <PageTitle title={t("Archive")} />
      <Heading>{t("Archive")}</Heading>
      <PaginatedDocumentList
--- a/app/scenes/Collection.js
+++ b/app/scenes/Collection.js
@ -12,11 +12,10 @@ import DocumentsStore from "stores/DocumentsStore";
 import PoliciesStore from "stores/PoliciesStore";
 import UiStore from "stores/UiStore";
 import Collection from "models/Collection";
-
 import CollectionEdit from "scenes/CollectionEdit";
 import CollectionMembers from "scenes/CollectionMembers";
 import Search from "scenes/Search";
-import Actions, { Action, Separator } from "components/Actions";
+import { Action, Separator } from "components/Actions";
 import Button from "components/Button";
 import CenteredContent from "components/CenteredContent";
 import CollectionDescription from "components/CollectionDescription";
@ -29,8 +28,8 @@ import InputSearch from "components/InputSearch";
 import { ListPlaceholder } from "components/LoadingPlaceholder";
 import Mask from "components/Mask";
 import Modal from "components/Modal";
-import PageTitle from "components/PageTitle";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
+import Scene from "components/Scene";
 import Subheading from "components/Subheading";
 import Tab from "components/Tab";
 import Tabs from "components/Tabs";
@ -126,7 +125,7 @@ class CollectionScene extends React.Component<Props> {
    const can = policies.abilities(match.params.id || "");

    return (
-      <Actions align="center" justify="flex-end">
+      <>
        {can.update && (
          <>
            <Action>
@ -174,7 +173,7 @@ class CollectionScene extends React.Component<Props> {
            )}
          />
        </Action>
-      </Actions>
+      </>
    );
  }

@ -190,169 +189,170 @@ class CollectionScene extends React.Component<Props> {
    const collectionName = collection ? collection.name : "";
    const hasPinnedDocuments = !!pinnedDocuments.length;

-    return (
-      <CenteredContent>
-        {collection ? (
+    return collection ? (
+      <Scene
+        textTitle={collection.name}
+        title={
          <>
-            <PageTitle title={collection.name} />
-            {collection.isEmpty ? (
-              <Centered column>
-                <HelpText>
-                  <Trans
-                    defaults="<em>{{ collectionName }}</em> doesn’t contain any
-                    documents yet."
-                    values={{ collectionName }}
-                    components={{ em: <strong /> }}
-                  />
-                  <br />
-                  <Trans>Get started by creating a new one!</Trans>
-                </HelpText>
-                <Wrapper>
-                  <Link to={newDocumentUrl(collection.id)}>
-                    <Button icon={<NewDocumentIcon color="currentColor" />}>
-                      {t("Create a document")}
-                    </Button>
-                  </Link>
-                  &nbsp;&nbsp;
-                  {collection.private && (
-                    <Button onClick={this.onPermissions} neutral>
-                      {t("Manage members")}…
-                    </Button>
-                  )}
-                </Wrapper>
-                <Modal
-                  title={t("Collection members")}
-                  onRequestClose={this.handlePermissionsModalClose}
-                  isOpen={this.permissionsModalOpen}
-                >
-                  <CollectionMembers
-                    collection={this.collection}
-                    onSubmit={this.handlePermissionsModalClose}
-                    onEdit={this.handleEditModalOpen}
-                  />
-                </Modal>
-                <Modal
-                  title={t("Edit collection")}
-                  onRequestClose={this.handleEditModalClose}
-                  isOpen={this.editModalOpen}
-                >
-                  <CollectionEdit
-                    collection={this.collection}
-                    onSubmit={this.handleEditModalClose}
-                  />
-                </Modal>
-              </Centered>
-            ) : (
-              <>
-                <Heading>
-                  <CollectionIcon collection={collection} size={40} expanded />{" "}
-                  {collection.name}
-                </Heading>
-                <CollectionDescription collection={collection} />
-
-                {hasPinnedDocuments && (
-                  <>
-                    <Subheading>
-                      <TinyPinIcon size={18} /> {t("Pinned")}
-                    </Subheading>
-                    <DocumentList documents={pinnedDocuments} showPin />
-                  </>
-                )}
-
-                <Tabs>
-                  <Tab to={collectionUrl(collection.id)} exact>
-                    {t("Documents")}
-                  </Tab>
-                  <Tab to={collectionUrl(collection.id, "updated")} exact>
-                    {t("Recently updated")}
-                  </Tab>
-                  <Tab to={collectionUrl(collection.id, "published")} exact>
-                    {t("Recently published")}
-                  </Tab>
-                  <Tab to={collectionUrl(collection.id, "old")} exact>
-                    {t("Least recently updated")}
-                  </Tab>
-                  <Tab to={collectionUrl(collection.id, "alphabetical")} exact>
-                    {t("A–Z")}
-                  </Tab>
-                </Tabs>
-                <Switch>
-                  <Route path={collectionUrl(collection.id, "alphabetical")}>
-                    <PaginatedDocumentList
-                      key="alphabetical"
-                      documents={documents.alphabeticalInCollection(
-                        collection.id
-                      )}
-                      fetch={documents.fetchAlphabetical}
-                      options={{ collectionId: collection.id }}
-                      showPin
-                    />
-                  </Route>
-                  <Route path={collectionUrl(collection.id, "old")}>
-                    <PaginatedDocumentList
-                      key="old"
-                      documents={documents.leastRecentlyUpdatedInCollection(
-                        collection.id
-                      )}
-                      fetch={documents.fetchLeastRecentlyUpdated}
-                      options={{ collectionId: collection.id }}
-                      showPin
-                    />
-                  </Route>
-                  <Route path={collectionUrl(collection.id, "recent")}>
-                    <Redirect to={collectionUrl(collection.id, "published")} />
-                  </Route>
-                  <Route path={collectionUrl(collection.id, "published")}>
-                    <PaginatedDocumentList
-                      key="published"
-                      documents={documents.recentlyPublishedInCollection(
-                        collection.id
-                      )}
-                      fetch={documents.fetchRecentlyPublished}
-                      options={{ collectionId: collection.id }}
-                      showPublished
-                      showPin
-                    />
-                  </Route>
-                  <Route path={collectionUrl(collection.id, "updated")}>
-                    <PaginatedDocumentList
-                      key="updated"
-                      documents={documents.recentlyUpdatedInCollection(
-                        collection.id
-                      )}
-                      fetch={documents.fetchRecentlyUpdated}
-                      options={{ collectionId: collection.id }}
-                      showPin
-                    />
-                  </Route>
-                  <Route path={collectionUrl(collection.id)} exact>
-                    <PaginatedDocumentList
-                      documents={documents.rootInCollection(collection.id)}
-                      fetch={documents.fetchPage}
-                      options={{
-                        collectionId: collection.id,
-                        parentDocumentId: null,
-                        sort: collection.sort.field,
-                        direction: "ASC",
-                      }}
-                      showNestedDocuments
-                      showPin
-                    />
-                  </Route>
-                </Switch>
-              </>
-            )}
-
-            {this.renderActions()}
+            <CollectionIcon collection={collection} expanded />
+            &nbsp;
+            {collection.name}
          </>
+        }
+        actions={this.renderActions()}
+      >
+        {collection.isEmpty ? (
+          <Centered column>
+            <HelpText>
+              <Trans
+                defaults="<em>{{ collectionName }}</em> doesn’t contain any
+                    documents yet."
+                values={{ collectionName }}
+                components={{ em: <strong /> }}
+              />
+              <br />
+              <Trans>Get started by creating a new one!</Trans>
+            </HelpText>
+            <Empty>
+              <Link to={newDocumentUrl(collection.id)}>
+                <Button icon={<NewDocumentIcon color="currentColor" />}>
+                  {t("Create a document")}
+                </Button>
+              </Link>
+              &nbsp;&nbsp;
+              {collection.private && (
+                <Button onClick={this.onPermissions} neutral>
+                  {t("Manage members")}…
+                </Button>
+              )}
+            </Empty>
+            <Modal
+              title={t("Collection members")}
+              onRequestClose={this.handlePermissionsModalClose}
+              isOpen={this.permissionsModalOpen}
+            >
+              <CollectionMembers
+                collection={this.collection}
+                onSubmit={this.handlePermissionsModalClose}
+                onEdit={this.handleEditModalOpen}
+              />
+            </Modal>
+            <Modal
+              title={t("Edit collection")}
+              onRequestClose={this.handleEditModalClose}
+              isOpen={this.editModalOpen}
+            >
+              <CollectionEdit
+                collection={this.collection}
+                onSubmit={this.handleEditModalClose}
+              />
+            </Modal>
+          </Centered>
        ) : (
          <>
            <Heading>
-              <Mask height={35} />
+              <CollectionIcon collection={collection} size={40} expanded />{" "}
+              {collection.name}
            </Heading>
-            <ListPlaceholder count={5} />
+            <CollectionDescription collection={collection} />
+
+            {hasPinnedDocuments && (
+              <>
+                <Subheading>
+                  <TinyPinIcon size={18} /> {t("Pinned")}
+                </Subheading>
+                <DocumentList documents={pinnedDocuments} showPin />
+              </>
+            )}
+
+            <Tabs>
+              <Tab to={collectionUrl(collection.id)} exact>
+                {t("Documents")}
+              </Tab>
+              <Tab to={collectionUrl(collection.id, "updated")} exact>
+                {t("Recently updated")}
+              </Tab>
+              <Tab to={collectionUrl(collection.id, "published")} exact>
+                {t("Recently published")}
+              </Tab>
+              <Tab to={collectionUrl(collection.id, "old")} exact>
+                {t("Least recently updated")}
+              </Tab>
+              <Tab to={collectionUrl(collection.id, "alphabetical")} exact>
+                {t("A–Z")}
+              </Tab>
+            </Tabs>
+            <Switch>
+              <Route path={collectionUrl(collection.id, "alphabetical")}>
+                <PaginatedDocumentList
+                  key="alphabetical"
+                  documents={documents.alphabeticalInCollection(collection.id)}
+                  fetch={documents.fetchAlphabetical}
+                  options={{ collectionId: collection.id }}
+                  showPin
+                />
+              </Route>
+              <Route path={collectionUrl(collection.id, "old")}>
+                <PaginatedDocumentList
+                  key="old"
+                  documents={documents.leastRecentlyUpdatedInCollection(
+                    collection.id
+                  )}
+                  fetch={documents.fetchLeastRecentlyUpdated}
+                  options={{ collectionId: collection.id }}
+                  showPin
+                />
+              </Route>
+              <Route path={collectionUrl(collection.id, "recent")}>
+                <Redirect to={collectionUrl(collection.id, "published")} />
+              </Route>
+              <Route path={collectionUrl(collection.id, "published")}>
+                <PaginatedDocumentList
+                  key="published"
+                  documents={documents.recentlyPublishedInCollection(
+                    collection.id
+                  )}
+                  fetch={documents.fetchRecentlyPublished}
+                  options={{ collectionId: collection.id }}
+                  showPublished
+                  showPin
+                />
+              </Route>
+              <Route path={collectionUrl(collection.id, "updated")}>
+                <PaginatedDocumentList
+                  key="updated"
+                  documents={documents.recentlyUpdatedInCollection(
+                    collection.id
+                  )}
+                  fetch={documents.fetchRecentlyUpdated}
+                  options={{ collectionId: collection.id }}
+                  showPin
+                />
+              </Route>
+              <Route path={collectionUrl(collection.id)} exact>
+                <PaginatedDocumentList
+                  documents={documents.rootInCollection(collection.id)}
+                  fetch={documents.fetchPage}
+                  options={{
+                    collectionId: collection.id,
+                    parentDocumentId: null,
+                    sort: collection.sort.field,
+                    direction: "ASC",
+                  }}
+                  showNestedDocuments
+                  showPin
+                />
+              </Route>
+            </Switch>
          </>
        )}
+      </Scene>
+    ) : (
+      <CenteredContent>
+        <Heading>
+          <Mask height={35} />
+        </Heading>
+        <ListPlaceholder count={5} />
      </CenteredContent>
    );
  }
@ -371,7 +371,7 @@ const TinyPinIcon = styled(PinIcon)`
  opacity: 0.8;
 `;

-const Wrapper = styled(Flex)`
+const Empty = styled(Flex)`
  justify-content: center;
  margin: 10px 0;
 `;
--- a/app/scenes/Document/components/Header.js
+++ b/app/scenes/Document/components/Header.js
@ -1,7 +1,5 @@
 // @flow
-import { throttle } from "lodash";
-import { observable } from "mobx";
-import { observer, inject } from "mobx-react";
+import { observer } from "mobx-react";
 import {
  TableOfContentsIcon,
  EditIcon,
@ -9,18 +7,11 @@ import {
  PlusIcon,
  MoreIcon,
 } from "outline-icons";
-import { transparentize, darken } from "polished";
 import * as React from "react";
-import { withTranslation, Trans, type TFunction } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import AuthStore from "stores/AuthStore";
-import PoliciesStore from "stores/PoliciesStore";
-import SharesStore from "stores/SharesStore";
-import UiStore from "stores/UiStore";
 import Document from "models/Document";
-
 import DocumentShare from "scenes/DocumentShare";
 import { Action, Separator } from "components/Actions";
 import Badge from "components/Badge";
@ -28,20 +19,17 @@ import Breadcrumb, { Slash } from "components/Breadcrumb";
 import Button from "components/Button";
 import Collaborators from "components/Collaborators";
 import Fade from "components/Fade";
-import Flex from "components/Flex";
+import Header from "components/Header";
 import Modal from "components/Modal";
 import Tooltip from "components/Tooltip";
+import useStores from "hooks/useStores";
 import DocumentMenu from "menus/DocumentMenu";
 import NewChildDocumentMenu from "menus/NewChildDocumentMenu";
 import TemplatesMenu from "menus/TemplatesMenu";
 import { metaDisplay } from "utils/keyboard";
 import { newDocumentUrl, editDocumentUrl } from "utils/routeHelpers";

-type Props = {
-  auth: AuthStore,
-  ui: UiStore,
-  shares: SharesStore,
-  policies: PoliciesStore,
+type Props = {|
  document: Document,
  isDraft: boolean,
  isEditing: boolean,
@ -56,356 +44,263 @@ type Props = {
    publish?: boolean,
    autosave?: boolean,
  }) => void,
-  t: TFunction,
-};
+|};

-@observer
-class Header extends React.Component<Props> {
-  @observable isScrolled = false;
-  @observable showShareModal = false;
+function DocumentHeader({
+  document,
+  isEditing,
+  isDraft,
+  isPublishing,
+  isRevision,
+  isSaving,
+  savingIsDisabled,
+  publishingIsDisabled,
+  onSave,
+}: Props) {
+  const { t } = useTranslation();
+  const { auth, ui, shares, policies } = useStores();
+  const [showShareModal, setShowShareModal] = React.useState(false);

-  componentDidMount() {
-    window.addEventListener("scroll", this.handleScroll);
-  }
+  const handleSave = React.useCallback(() => {
+    onSave({ done: true });
+  }, [onSave]);

-  componentWillUnmount() {
-    window.removeEventListener("scroll", this.handleScroll);
-  }
+  const handlePublish = React.useCallback(() => {
+    onSave({ done: true, publish: true });
+  }, [onSave]);

-  updateIsScrolled = () => {
-    this.isScrolled = window.scrollY > 75;
-  };
+  const handleShareLink = React.useCallback(
+    async (ev: SyntheticEvent<>) => {
+      await document.share();

-  handleScroll = throttle(this.updateIsScrolled, 50);
+      setShowShareModal(true);
+    },
+    [document]
+  );

-  handleSave = () => {
-    this.props.onSave({ done: true });
-  };
+  const handleCloseShareModal = React.useCallback(() => {
+    setShowShareModal(false);
+  }, []);

-  handlePublish = () => {
-    this.props.onSave({ done: true, publish: true });
-  };
+  const share = shares.getByDocumentId(document.id);
+  const isPubliclyShared = share && share.published;
+  const isNew = document.isNew;
+  const isTemplate = document.isTemplate;
+  const can = policies.abilities(document.id);
+  const canShareDocument = auth.team && auth.team.sharing && can.share;
+  const canToggleEmbeds = auth.team && auth.team.documentEmbeds;
+  const canEdit = can.update && !isEditing;

-  handleShareLink = async (ev: SyntheticEvent<>) => {
-    const { document } = this.props;
-    await document.share();
-
-    this.showShareModal = true;
-  };
-
-  handleCloseShareModal = () => {
-    this.showShareModal = false;
-  };
-
-  handleClickTitle = () => {
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth",
-    });
-  };
-
-  render() {
-    const {
-      shares,
-      document,
-      policies,
-      isEditing,
-      isDraft,
-      isPublishing,
-      isRevision,
-      isSaving,
-      savingIsDisabled,
-      publishingIsDisabled,
-      ui,
-      auth,
-      t,
-    } = this.props;
-
-    const share = shares.getByDocumentId(document.id);
-    const isPubliclyShared = share && share.published;
-    const isNew = document.isNew;
-    const isTemplate = document.isTemplate;
-    const can = policies.abilities(document.id);
-    const canShareDocument = auth.team && auth.team.sharing && can.share;
-    const canToggleEmbeds = auth.team && auth.team.documentEmbeds;
-    const canEdit = can.update && !isEditing;
-
-    return (
-      <Actions
-        align="center"
-        justify="space-between"
-        isCompact={this.isScrolled}
-        shrink={false}
+  return (
+    <>
+      <Modal
+        isOpen={showShareModal}
+        onRequestClose={handleCloseShareModal}
+        title={t("Share document")}
      >
-        <Modal
-          isOpen={this.showShareModal}
-          onRequestClose={this.handleCloseShareModal}
-          title={t("Share document")}
-        >
-          <DocumentShare
-            document={document}
-            onSubmit={this.handleCloseShareModal}
-          />
-        </Modal>
-        <Breadcrumb document={document}>
-          {!isEditing && (
-            <>
-              <Slash />
-              <Tooltip
-                tooltip={
-                  ui.tocVisible ? t("Hide contents") : t("Show contents")
-                }
-                shortcut={`ctrl+${metaDisplay}+h`}
-                delay={250}
-                placement="bottom"
-              >
-                <Button
-                  onClick={
-                    ui.tocVisible
-                      ? ui.hideTableOfContents
-                      : ui.showTableOfContents
+        <DocumentShare document={document} onSubmit={handleCloseShareModal} />
+      </Modal>
+      <Header
+        breadcrumb={
+          <Breadcrumb document={document}>
+            {!isEditing && (
+              <>
+                <Slash />
+                <Tooltip
+                  tooltip={
+                    ui.tocVisible ? t("Hide contents") : t("Show contents")
                  }
-                  icon={<TableOfContentsIcon />}
-                  iconColor="currentColor"
-                  borderOnHover
-                  neutral
-                />
-              </Tooltip>
-            </>
-          )}
-        </Breadcrumb>
-        {this.isScrolled && (
-          <Title onClick={this.handleClickTitle}>
-            <Fade>
-              {document.title}{" "}
-              {document.isArchived && <Badge>{t("Archived")}</Badge>}
-            </Fade>
-          </Title>
-        )}
-        <Wrapper align="center" justify="flex-end">
-          {isSaving && !isPublishing && (
-            <Action>
-              <Status>{t("Saving")}…</Status>
-            </Action>
-          )}
-          &nbsp;
-          <Fade>
-            <Collaborators
-              document={document}
-              currentUserId={auth.user ? auth.user.id : undefined}
-            />
-          </Fade>
-          {isEditing && !isTemplate && isNew && (
-            <Action>
-              <TemplatesMenu document={document} />
-            </Action>
-          )}
-          {!isEditing && canShareDocument && (
-            <Action>
-              <Tooltip
-                tooltip={
-                  isPubliclyShared ? (
-                    <Trans>
-                      Anyone with the link <br />
-                      can view this document
-                    </Trans>
-                  ) : (
-                    ""
-                  )
-                }
-                delay={500}
-                placement="bottom"
-              >
-                <Button
-                  icon={isPubliclyShared ? <GlobeIcon /> : undefined}
-                  onClick={this.handleShareLink}
-                  neutral
+                  shortcut={`ctrl+${metaDisplay}+h`}
+                  delay={250}
+                  placement="bottom"
                >
-                  {t("Share")}
-                </Button>
-              </Tooltip>
-            </Action>
-          )}
-          {isEditing && (
-            <>
+                  <Button
+                    onClick={
+                      ui.tocVisible
+                        ? ui.hideTableOfContents
+                        : ui.showTableOfContents
+                    }
+                    icon={<TableOfContentsIcon />}
+                    iconColor="currentColor"
+                    borderOnHover
+                    neutral
+                  />
+                </Tooltip>
+              </>
+            )}
+          </Breadcrumb>
+        }
+        title={
+          <>
+            {document.title}{" "}
+            {document.isArchived && <Badge>{t("Archived")}</Badge>}
+          </>
+        }
+        actions={
+          <>
+            {isSaving && !isPublishing && (
+              <Action>
+                <Status>{t("Saving")}…</Status>
+              </Action>
+            )}
+            &nbsp;
+            <Fade>
+              <Collaborators
+                document={document}
+                currentUserId={auth.user ? auth.user.id : undefined}
+              />
+            </Fade>
+            {isEditing && !isTemplate && isNew && (
+              <Action>
+                <TemplatesMenu document={document} />
+              </Action>
+            )}
+            {!isEditing && canShareDocument && (
              <Action>
                <Tooltip
-                  tooltip={t("Save")}
-                  shortcut={`${metaDisplay}+enter`}
+                  tooltip={
+                    isPubliclyShared ? (
+                      <Trans>
+                        Anyone with the link <br />
+                        can view this document
+                      </Trans>
+                    ) : (
+                      ""
+                    )
+                  }
                  delay={500}
                  placement="bottom"
                >
                  <Button
-                    onClick={this.handleSave}
-                    disabled={savingIsDisabled}
-                    neutral={isDraft}
+                    icon={isPubliclyShared ? <GlobeIcon /> : undefined}
+                    onClick={handleShareLink}
+                    neutral
                  >
-                    {isDraft ? t("Save Draft") : t("Done Editing")}
+                    {t("Share")}
                  </Button>
                </Tooltip>
              </Action>
-            </>
-          )}
-          {canEdit && (
-            <Action>
-              <Tooltip
-                tooltip={t("Edit {{noun}}", { noun: document.noun })}
-                shortcut="e"
-                delay={500}
-                placement="bottom"
-              >
-                <Button
-                  as={Link}
-                  icon={<EditIcon />}
-                  to={editDocumentUrl(this.props.document)}
-                  neutral
-                >
-                  {t("Edit")}
-                </Button>
-              </Tooltip>
-            </Action>
-          )}
-          {canEdit && can.createChildDocument && (
-            <Action>
-              <NewChildDocumentMenu
-                document={document}
-                label={(props) => (
+            )}
+            {isEditing && (
+              <>
+                <Action>
                  <Tooltip
-                    tooltip={t("New document")}
-                    shortcut="n"
+                    tooltip={t("Save")}
+                    shortcut={`${metaDisplay}+enter`}
                    delay={500}
                    placement="bottom"
                  >
-                    <Button icon={<PlusIcon />} {...props} neutral>
-                      {t("New doc")}
+                    <Button
+                      onClick={handleSave}
+                      disabled={savingIsDisabled}
+                      neutral={isDraft}
+                    >
+                      {isDraft ? t("Save Draft") : t("Done Editing")}
                    </Button>
                  </Tooltip>
-                )}
-              />
-            </Action>
-          )}
-          {canEdit && isTemplate && !isDraft && !isRevision && (
-            <Action>
-              <Button
-                icon={<PlusIcon />}
-                as={Link}
-                to={newDocumentUrl(document.collectionId, {
-                  templateId: document.id,
-                })}
-                primary
-              >
-                {t("New from template")}
-              </Button>
-            </Action>
-          )}
-          {can.update && isDraft && !isRevision && (
-            <Action>
-              <Tooltip
-                tooltip={t("Publish")}
-                shortcut={`${metaDisplay}+shift+p`}
-                delay={500}
-                placement="bottom"
-              >
-                <Button
-                  onClick={this.handlePublish}
-                  disabled={publishingIsDisabled}
-                >
-                  {isPublishing ? `${t("Publishing")}…` : t("Publish")}
-                </Button>
-              </Tooltip>
-            </Action>
-          )}
-          {!isEditing && (
-            <>
-              <Separator />
+                </Action>
+              </>
+            )}
+            {canEdit && (
              <Action>
-                <DocumentMenu
+                <Tooltip
+                  tooltip={t("Edit {{noun}}", { noun: document.noun })}
+                  shortcut="e"
+                  delay={500}
+                  placement="bottom"
+                >
+                  <Button
+                    as={Link}
+                    icon={<EditIcon />}
+                    to={editDocumentUrl(document)}
+                    neutral
+                  >
+                    {t("Edit")}
+                  </Button>
+                </Tooltip>
+              </Action>
+            )}
+            {canEdit && can.createChildDocument && (
+              <Action>
+                <NewChildDocumentMenu
                  document={document}
-                  isRevision={isRevision}
                  label={(props) => (
-                    <Button
-                      icon={<MoreIcon />}
-                      iconColor="currentColor"
-                      {...props}
-                      borderOnHover
-                      neutral
-                    />
+                    <Tooltip
+                      tooltip={t("New document")}
+                      shortcut="n"
+                      delay={500}
+                      placement="bottom"
+                    >
+                      <Button icon={<PlusIcon />} {...props} neutral>
+                        {t("New doc")}
+                      </Button>
+                    </Tooltip>
                  )}
-                  showToggleEmbeds={canToggleEmbeds}
-                  showPrint
                />
              </Action>
-            </>
-          )}
-        </Wrapper>
-      </Actions>
-    );
-  }
+            )}
+            {canEdit && isTemplate && !isDraft && !isRevision && (
+              <Action>
+                <Button
+                  icon={<PlusIcon />}
+                  as={Link}
+                  to={newDocumentUrl(document.collectionId, {
+                    templateId: document.id,
+                  })}
+                  primary
+                >
+                  {t("New from template")}
+                </Button>
+              </Action>
+            )}
+            {can.update && isDraft && !isRevision && (
+              <Action>
+                <Tooltip
+                  tooltip={t("Publish")}
+                  shortcut={`${metaDisplay}+shift+p`}
+                  delay={500}
+                  placement="bottom"
+                >
+                  <Button
+                    onClick={handlePublish}
+                    disabled={publishingIsDisabled}
+                  >
+                    {isPublishing ? `${t("Publishing")}…` : t("Publish")}
+                  </Button>
+                </Tooltip>
+              </Action>
+            )}
+            {!isEditing && (
+              <>
+                <Separator />
+                <Action>
+                  <DocumentMenu
+                    document={document}
+                    isRevision={isRevision}
+                    label={(props) => (
+                      <Button
+                        icon={<MoreIcon />}
+                        iconColor="currentColor"
+                        {...props}
+                        borderOnHover
+                        neutral
+                      />
+                    )}
+                    showToggleEmbeds={canToggleEmbeds}
+                    showPrint
+                  />
+                </Action>
+              </>
+            )}
+          </>
+        }
+      />
+    </>
+  );
 }

 const Status = styled.div`
  color: ${(props) => props.theme.slate};
 `;

-const Wrapper = styled(Flex)`
-  width: 100%;
-  align-self: flex-end;
-  height: 32px;
-
-  ${breakpoint("tablet")`	
-    width: 33.3%;
-  `};
-`;
-
-const Actions = styled(Flex)`
-  position: sticky;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: 2;
-  background: ${(props) => transparentize(0.2, props.theme.background)};
-  box-shadow: 0 1px 0
-    ${(props) =>
-      props.isCompact
-        ? darken(0.05, props.theme.sidebarBackground)
-        : "transparent"};
-  padding: 12px;
-  transition: all 100ms ease-out;
-  transform: translate3d(0, 0, 0);
-  backdrop-filter: blur(20px);
-
-  @media print {
-    display: none;
-  }
-
-  ${breakpoint("tablet")`
-    padding: ${(props) => (props.isCompact ? "12px" : `24px 24px 0`)};
-
-    > div {
-      width: 33.3%;
-    }
-  `};
-`;
-
-const Title = styled.div`
-  font-size: 16px;
-  font-weight: 600;
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  cursor: pointer;
-  display: none;
-  width: 0;
-
-  ${breakpoint("tablet")`	
-    display: flex;
-    flex-grow: 1;
-  `};
-`;
-
-export default withTranslation()<Header>(
-  inject("auth", "ui", "policies", "shares")(Header)
-);
+export default observer(DocumentHeader);
--- a/app/scenes/Drafts.js
+++ b/app/scenes/Drafts.js
@ -1,6 +1,7 @@
 // @flow
 import { observable } from "mobx";
 import { inject, observer } from "mobx-react";
+import { EditIcon } from "outline-icons";
 import queryString from "query-string";
 import * as React from "react";
 import { withTranslation, type TFunction } from "react-i18next";
@ -9,15 +10,13 @@ import styled from "styled-components";
 import DocumentsStore from "stores/DocumentsStore";
 import CollectionFilter from "scenes/Search/components/CollectionFilter";
 import DateFilter from "scenes/Search/components/DateFilter";
-
-import Actions, { Action } from "components/Actions";
-import CenteredContent from "components/CenteredContent";
+import { Action } from "components/Actions";
 import Empty from "components/Empty";
 import Flex from "components/Flex";
 import Heading from "components/Heading";
 import InputSearch from "components/InputSearch";
-import PageTitle from "components/PageTitle";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
+import Scene from "components/Scene";
 import Subheading from "components/Subheading";
 import NewDocumentMenu from "menus/NewDocumentMenu";
 import { type LocationWithState } from "types";
@ -78,8 +77,24 @@ class Drafts extends React.Component<Props> {
    };

    return (
-      <CenteredContent column auto>
-        <PageTitle title={t("Drafts")} />
+      <Scene
+        icon={<EditIcon color="currentColor" />}
+        title={t("Drafts")}
+        actions={
+          <>
+            <Action>
+              <InputSearch
+                source="drafts"
+                label={t("Search documents")}
+                labelHidden
+              />
+            </Action>
+            <Action>
+              <NewDocumentMenu />
+            </Action>
+          </>
+        }
+      >
        <Heading>{t("Drafts")}</Heading>
        <Subheading>
          {t("Documents")}
@ -110,20 +125,7 @@ class Drafts extends React.Component<Props> {
          options={options}
          showCollection
        />
-
-        <Actions align="center" justify="flex-end">
-          <Action>
-            <InputSearch
-              source="drafts"
-              label={t("Search documents")}
-              labelHidden
-            />
-          </Action>
-          <Action>
-            <NewDocumentMenu />
-          </Action>
-        </Actions>
-      </CenteredContent>
+      </Scene>
    );
  }
 }
--- a/app/scenes/Dashboard.js
+++ b/app/scenes/Dashboard.js
@ -1,21 +1,21 @@
 // @flow
 import { observer } from "mobx-react";
+import { HomeIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Switch, Route } from "react-router-dom";
-
-import Actions, { Action } from "components/Actions";
-import CenteredContent from "components/CenteredContent";
+import { Action } from "components/Actions";
+import Heading from "components/Heading";
 import InputSearch from "components/InputSearch";
 import LanguagePrompt from "components/LanguagePrompt";
-import PageTitle from "components/PageTitle";
+import Scene from "components/Scene";
 import Tab from "components/Tab";
 import Tabs from "components/Tabs";
 import PaginatedDocumentList from "../components/PaginatedDocumentList";
 import useStores from "../hooks/useStores";
 import NewDocumentMenu from "menus/NewDocumentMenu";

-function Dashboard() {
+function Home() {
  const { documents, ui, auth } = useStores();
  const { t } = useTranslation();

@ -23,10 +23,26 @@ function Dashboard() {
  const user = auth.user.id;

  return (
-    <CenteredContent>
-      <PageTitle title={t("Home")} />
+    <Scene
+      icon={<HomeIcon color="currentColor" />}
+      title={t("Home")}
+      actions={
+        <>
+          <Action>
+            <InputSearch
+              source="dashboard"
+              label={t("Search documents")}
+              labelHidden
+            />
+          </Action>
+          <Action>
+            <NewDocumentMenu />
+          </Action>
+        </>
+      }
+    >
      {!ui.languagePromptDismissed && <LanguagePrompt />}
-      <h1>{t("Home")}</h1>
+      <Heading>{t("Home")}</Heading>
      <Tabs>
        <Tab to="/home" exact>
          {t("Recently updated")}
@ -62,20 +78,8 @@ function Dashboard() {
          />
        </Route>
      </Switch>
-      <Actions align="center" justify="flex-end">
-        <Action>
-          <InputSearch
-            source="dashboard"
-            label={t("Search documents")}
-            labelHidden
-          />
-        </Action>
-        <Action>
-          <NewDocumentMenu />
-        </Action>
-      </Actions>
-    </CenteredContent>
+    </Scene>
  );
 }

-export default observer(Dashboard);
+export default observer(Home);
--- a/app/scenes/Starred.js
+++ b/app/scenes/Starred.js
@ -1,15 +1,15 @@
 // @flow
 import { observer } from "mobx-react";
+import { StarredIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { type Match } from "react-router-dom";
-import Actions, { Action } from "components/Actions";
-import CenteredContent from "components/CenteredContent";
+import { Action } from "components/Actions";
 import Empty from "components/Empty";
 import Heading from "components/Heading";
 import InputSearch from "components/InputSearch";
-import PageTitle from "components/PageTitle";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
+import Scene from "components/Scene";
 import Tab from "components/Tab";
 import Tabs from "components/Tabs";
 import useStores from "hooks/useStores";
@ -26,8 +26,24 @@ function Starred(props: Props) {
  const { sort } = props.match.params;

  return (
-    <CenteredContent column auto>
-      <PageTitle title={t("Starred")} />
+    <Scene
+      icon={<StarredIcon color="currentColor" />}
+      title={t("Starred")}
+      actions={
+        <>
+          <Action>
+            <InputSearch
+              source="starred"
+              label={t("Search documents")}
+              labelHidden
+            />
+          </Action>
+          <Action>
+            <NewDocumentMenu />
+          </Action>
+        </>
+      }
+    >
      <Heading>{t("Starred")}</Heading>
      <PaginatedDocumentList
        heading={
@ -45,20 +61,7 @@ function Starred(props: Props) {
        documents={sort === "alphabetical" ? starredAlphabetical : starred}
        showCollection
      />
-
-      <Actions align="center" justify="flex-end">
-        <Action>
-          <InputSearch
-            source="starred"
-            label={t("Search documents")}
-            labelHidden
-          />
-        </Action>
-        <Action>
-          <NewDocumentMenu />
-        </Action>
-      </Actions>
-    </CenteredContent>
+    </Scene>
  );
 }

--- a/app/scenes/Templates.js
+++ b/app/scenes/Templates.js
@ -1,15 +1,14 @@
 // @flow
 import { observer } from "mobx-react";
+import { TemplateIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { type Match } from "react-router-dom";
-
-import Actions, { Action } from "components/Actions";
-import CenteredContent from "components/CenteredContent";
+import { Action } from "components/Actions";
 import Empty from "components/Empty";
 import Heading from "components/Heading";
-import PageTitle from "components/PageTitle";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
+import Scene from "components/Scene";
 import Tab from "components/Tab";
 import Tabs from "components/Tabs";
 import useStores from "hooks/useStores";
@ -26,8 +25,15 @@ function Templates(props: Props) {
  const { sort } = props.match.params;

  return (
-    <CenteredContent column auto>
-      <PageTitle title={t("Templates")} />
+    <Scene
+      icon={<TemplateIcon color="currentColor" />}
+      title={t("Templates")}
+      actions={
+        <Action>
+          <NewTemplateMenu />
+        </Action>
+      }
+    >
      <Heading>{t("Templates")}</Heading>
      <PaginatedDocumentList
        heading={
@ -52,13 +58,7 @@ function Templates(props: Props) {
        showCollection
        showDraft
      />
-
-      <Actions align="center" justify="flex-end">
-        <Action>
-          <NewTemplateMenu />
-        </Action>
-      </Actions>
-    </CenteredContent>
+    </Scene>
  );
 }

--- a/app/scenes/Trash.js
+++ b/app/scenes/Trash.js
@ -1,13 +1,12 @@
 // @flow
 import { observer } from "mobx-react";
+import { TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-
-import CenteredContent from "components/CenteredContent";
 import Empty from "components/Empty";
 import Heading from "components/Heading";
-import PageTitle from "components/PageTitle";
 import PaginatedDocumentList from "components/PaginatedDocumentList";
+import Scene from "components/Scene";
 import Subheading from "components/Subheading";
 import useStores from "hooks/useStores";

@ -16,8 +15,7 @@ function Trash() {
  const { documents } = useStores();

  return (
-    <CenteredContent column auto>
-      <PageTitle title={t("Trash")} />
+    <Scene icon={<TrashIcon color="currentColor" />} title={t("Trash")}>
      <Heading>{t("Trash")}</Heading>
      <PaginatedDocumentList
        documents={documents.deleted}
@ -27,7 +25,7 @@ function Trash() {
        showCollection
        showTemplate
      />
-    </CenteredContent>
+    </Scene>
  );
 }

--- a/shared/i18n/locales/en_US/translation.json
+++ b/shared/i18n/locales/en_US/translation.json
@ -240,9 +240,6 @@
  "Collections are for grouping your documents. They work best when organized around a topic or internal team — Product or Engineering for example.": "Collections are for grouping your documents. They work best when organized around a topic or internal team — Product or Engineering for example.",
  "Creating": "Creating",
  "Create": "Create",
-  "Recently viewed": "Recently viewed",
-  "Created by me": "Created by me",
-  "Search documents": "Search documents",
  "Hide contents": "Hide contents",
  "Show contents": "Show contents",
  "Archived": "Archived",
@ -260,6 +257,7 @@
  "Deleting": "Deleting",
  "I’m sure – Delete": "I’m sure – Delete",
  "Archiving": "Archiving",
+  "Search documents": "Search documents",
  "No documents found for your filters.": "No documents found for your filters.",
  "You’ve not got any drafts at the moment.": "You’ve not got any drafts at the moment.",
  "Not found": "Not found",
@ -275,6 +273,8 @@
  "Could not remove user": "Could not remove user",
  "Add people": "Add people",
  "This group has no members.": "This group has no members.",
+  "Recently viewed": "Recently viewed",
+  "Created by me": "Created by me",
  "Outline is designed to be fast and easy to use. All of your usual keyboard shortcuts work here, and there’s Markdown too.": "Outline is designed to be fast and easy to use. All of your usual keyboard shortcuts work here, and there’s Markdown too.",
  "Navigation": "Navigation",
  "New document in current collection": "New document in current collection",
--- a/shared/styles/theme.js
+++ b/shared/styles/theme.js
@ -108,6 +108,7 @@ export const base = {

  depths: {
    sidebar: 1000,
+    stickyHeader: 1500,
    modalOverlay: 2000,
    modal: 3000,
    menu: 4000,