feat: Add "new doc" button on collections in sidebar (#3174)

* feat: Add new icon button on collections in sidebar, move sort into menu

* Remove unused menu, add warning when dragging in a-z collection

* fix: Add hover background to sidebar actions, add tooltip to new doc button

* Retain 'active' state on buttons when related context menu is open

* fix: Two more spots that deserve active background

app/menus/CollectionMenu.tsx

@@ -6,6 +6,8 @@ import {
   ImportIcon,
   ExportIcon,
   PadlockIcon,
+  AlphabeticalSortIcon,
+  ManualSortIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -124,6 +126,20 @@ function CollectionMenu({
     [history, showToast, collection.id, documents]
   );
 
+  const handleChangeSort = React.useCallback(
+    (field: string) => {
+      menu.hide();
+      return collection.save({
+        sort: {
+          field,
+          direction: "asc",
+        },
+      });
+    },
+    [collection, menu]
+  );
+
+  const alphabeticalSort = collection.sort.field === "title";
   const can = usePolicy(collection.id);
   const canUserInTeam = usePolicy(team.id);
   const items: MenuItem[] = React.useMemo(
@@ -145,6 +161,30 @@ function CollectionMenu({
       {
         type: "separator",
       },
+      {
+        type: "submenu",
+        title: t("Sort in sidebar"),
+        visible: can.update,
+        icon: alphabeticalSort ? (
+          <AlphabeticalSortIcon color="currentColor" />
+        ) : (
+          <ManualSortIcon color="currentColor" />
+        ),
+        items: [
+          {
+            type: "button",
+            title: t("Alphabetical sort"),
+            onClick: () => handleChangeSort("title"),
+            selected: alphabeticalSort,
+          },
+          {
+            type: "button",
+            title: t("Manual sort"),
+            onClick: () => handleChangeSort("index"),
+            selected: !alphabeticalSort,
+          },
+        ],
+      },
       {
         type: "button",
         title: `${t("Edit")}…`,
@@ -182,6 +222,8 @@ function CollectionMenu({
       t,
       can.update,
       can.delete,
+      alphabeticalSort,
+      handleChangeSort,
       handleNewDocument,
       handleImportDocument,
       collection,