feat: Improve settings layout (#3234)

* Setup, and security settings

* Settings -> Details

* Settings -> Notifications

* Profile

* lint

* fix: Flash of loading on members screen

* align language input

* feat: Move share links management to sortable table

* Add account menu to sidebar on settings page

* Aesthetic tweaks, light borders between settings and slight column offset

app/scenes/Settings/Members.tsx

@@ -4,7 +4,6 @@ import { PlusIcon, UserIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
-import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled from "styled-components";
 import { PAGINATION_SYMBOL } from "~/stores/BaseStore";
 import User from "~/models/User";
@@ -26,7 +25,6 @@ import PeopleTable from "./components/PeopleTable";
 import UserStatusFilter from "./components/UserStatusFilter";
 
 function Members() {
-  const topRef = React.useRef();
   const location = useLocation();
   const history = useHistory();
   const [
@@ -46,9 +44,9 @@ function Members() {
   const query = params.get("query") || "";
   const filter = params.get("filter") || "";
   const sort = params.get("sort") || "name";
-  const direction =
-    params.get("direction")?.toUpperCase() === "ASC" ? "ASC" : "DESC";
-
+  const direction = (params.get("direction") || "asc").toUpperCase() as
+    | "ASC"
+    | "DESC";
   const page = parseInt(params.get("page") || "0", 10);
   const limit = 25;
 
@@ -141,52 +139,6 @@ function Members() {
     [params, history, location.pathname]
   );
 
-  const handleChangeSort = React.useCallback(
-    (sort, direction) => {
-      if (sort) {
-        params.set("sort", sort);
-      } else {
-        params.delete("sort");
-      }
-
-      if (direction === "DESC") {
-        params.set("direction", direction.toLowerCase());
-      } else {
-        params.delete("direction");
-      }
-
-      history.replace({
-        pathname: location.pathname,
-        search: params.toString(),
-      });
-    },
-    [params, history, location.pathname]
-  );
-
-  const handleChangePage = React.useCallback(
-    (page) => {
-      if (page) {
-        params.set("page", page.toString());
-      } else {
-        params.delete("page");
-      }
-
-      history.replace({
-        pathname: location.pathname,
-        search: params.toString(),
-      });
-
-      if (topRef.current) {
-        scrollIntoView(topRef.current, {
-          scrollMode: "if-needed",
-          behavior: "auto",
-          block: "start",
-        });
-      }
-    },
-    [params, history, location.pathname]
-  );
-
   return (
     <Scene
       title={t("Members")}
@@ -228,13 +180,11 @@ function Members() {
         <LargeUserStatusFilter activeKey={filter} onSelect={handleFilter} />
       </Flex>
       <PeopleTable
-        topRef={topRef}
         data={data}
         canManage={can.manage}
         isLoading={isLoading}
-        onChangeSort={handleChangeSort}
-        onChangePage={handleChangePage}
         page={page}
+        pageSize={limit}
         totalPages={totalPages}
         defaultSortDirection="ASC"
       />