[frontend] Settings navigation design (#1652)

* change header image alignment

(cherry picked from commit df1bb339a5c597a2b668cedb3dafec5a390df120)

* big mess navigation refactor

* bit of cleanup

* minor css tweaks

* fix error rendering code for remote emoji

* refactor navigation structure code

* refactor styling

* fix className

* stash

* restructure navigation generation

* url wildcard formatting

* remove un-implemented User menu entry

* remove commented lines

* clarify permissions check

* invert permissions logic for clarity

4 files changed, 330 insertions, 102 deletions

diff --git a/web/source/settings/lib/get-views.js b/web/source/settings/lib/get-views.js
deleted file mode 100644
index 23f517e27..000000000
--- a/web/source/settings/lib/get-views.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
-	GoToSocial
-	Copyright (C) GoToSocial Authors admin@gotosocial.org
-	SPDX-License-Identifier: AGPL-3.0-or-later
-
-	This program is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-
-	This program is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-
-	You should have received a copy of the GNU Affero General Public License
-	along with this program.  If not, see <http://www.gnu.org/licenses/>.
-*/
-
-"use strict";
-
-const React = require("react");
-const { Link, Route, Redirect } = require("wouter");
-const { ErrorBoundary } = require("react-error-boundary");
-
-const { ErrorFallback } = require("../components/error");
-const NavButton = require("../components/nav-button");
-
-function urlSafe(str) {
-	return str.toLowerCase().replace(/\s+/g, "-");
-}
-
-module.exports = function getViews(struct) {
-	const sidebar = {
-		all: [],
-		admin: [],
-	};
-
-	const panelRouter = {
-		all: [],
-		admin: [],
-	};
-
-	Object.entries(struct).forEach(([name, entries]) => {
-		let sidebarEl = sidebar.all;
-		let panelRouterEl = panelRouter.all;
-
-		if (entries.adminOnly) {
-			sidebarEl = sidebar.admin;
-			panelRouterEl = panelRouter.admin;
-			delete entries.adminOnly;
-		}
-
-		let base = `/settings/${urlSafe(name)}`;
-
-		let links = [];
-
-		let firstRoute;
-
-		Object.entries(entries).forEach(([name, ViewComponent]) => {
-			let url = `${base}/${urlSafe(name)}`;
-
-			if (firstRoute == undefined) {
-				firstRoute = url;
-			}
-
-			panelRouterEl.push((
-				<Route path={`${url}/:page*`} key={url}>
-					<ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => { }}>
-						{/* FIXME: implement onReset */}
-						<ViewComponent />
-					</ErrorBoundary>
-				</Route>
-			));
-
-			links.push(
-				<NavButton key={url} href={url} name={name} />
-			);
-		});
-
-		panelRouterEl.push(
-			<Route key={base} path={base}>
-				<Redirect to={firstRoute} />
-			</Route>
-		);
-
-		sidebarEl.push(
-			<React.Fragment key={name}>
-				<Link href={firstRoute}>
-					<a>
-						<h2>{name}</h2>
-					</a>
-				</Link>
-				<nav>
-					{links}
-				</nav>
-			</React.Fragment>
-		);
-	});
-
-	return { sidebar, panelRouter };
-};
\ No newline at end of file
diff --git a/web/source/settings/lib/navigation/components.jsx b/web/source/settings/lib/navigation/components.jsx
new file mode 100644
index 000000000..18e0cd76c
--- /dev/null
+++ b/web/source/settings/lib/navigation/components.jsx
@@ -0,0 +1,141 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const { Link, Route, Redirect, Switch, useLocation, useRouter } = require("wouter");
+const { ErrorBoundary } = require("react-error-boundary");
+const syncpipe = require("syncpipe");
+
+const { ErrorFallback } = require("../../components/error");
+
+const {
+	RoleContext,
+	useHasPermission,
+	checkPermission,
+	BaseUrlContext
+} = require("./util");
+
+const ActiveRouteCtx = React.createContext();
+function useActiveRoute() {
+	return React.useContext(ActiveRouteCtx);
+}
+
+function Sidebar(menuTree, routing) {
+	const components = menuTree.map((m) => m.MenuEntry);
+
+	return function SidebarComponent() {
+		const router = useRouter();
+		const [location] = useLocation();
+
+		let activeRoute = routing.find((l) => {
+			let [match] = router.matcher(l.routingUrl, location);
+			return match;
+		})?.routingUrl;
+
+		return (
+			<nav className="menu-tree">
+				<ul className="top-level">
+					<ActiveRouteCtx.Provider value={activeRoute}>
+						{components}
+					</ActiveRouteCtx.Provider>
+				</ul>
+			</nav>
+		);
+	};
+}
+
+function ViewRouter(routing, defaultRoute) {
+	return function ViewRouterComponent() {
+		const permissions = React.useContext(RoleContext);
+
+		const filteredRoutes = React.useMemo(() => {
+			return syncpipe(routing, [
+				(_) => _.filter((route) => checkPermission(route.permissions, permissions)),
+				(_) => _.map((route) => {
+					return (
+						<Route path={route.routingUrl} key={route.key}>
+							<ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => { }}>
+								{/* FIXME: implement onReset */}
+								<BaseUrlContext.Provider value={route.url}>
+									{route.view}
+								</BaseUrlContext.Provider>
+							</ErrorBoundary>
+						</Route>
+					);
+				})
+			]);
+		}, [permissions]);
+
+		return (
+			<Switch>
+				{filteredRoutes}
+				<Redirect to={defaultRoute} />
+			</Switch>
+		);
+	};
+}
+
+function MenuComponent({ type, name, url, icon, permissions, links, level, children }) {
+	const activeRoute = useActiveRoute();
+
+	if (!useHasPermission(permissions)) {
+		return null;
+	}
+
+	const classes = [type];
+
+	if (level == 0) {
+		classes.push("top-level");
+	} else if (level == 1) {
+		classes.push("expanding");
+	} else {
+		classes.push("nested");
+	}
+
+	const isActive = links.includes(activeRoute);
+	if (isActive) {
+		classes.push("active");
+	}
+
+	const className = classes.join(" ");
+
+	return (
+		<li className={className}>
+			<Link href={url}>
+				<a tabIndex={level == 0 ? "-1" : null} className="title">
+					{icon && <i className={`icon fa fa-fw ${icon}`} aria-hidden="true" />}
+					{name}
+				</a>
+			</Link>
+			{(type == "category" && (level == 0 || isActive) && children?.length > 0) &&
+				<ul>
+					{children}
+				</ul>
+			}
+		</li>
+	);
+}
+
+module.exports = {
+	Sidebar,
+	ViewRouter,
+	MenuComponent
+};
\ No newline at end of file
diff --git a/web/source/settings/lib/navigation/index.js b/web/source/settings/lib/navigation/index.js
new file mode 100644
index 000000000..c1331d0ec
--- /dev/null
+++ b/web/source/settings/lib/navigation/index.js
@@ -0,0 +1,138 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const { nanoid } = require("nanoid");
+const { Redirect } = require("wouter");
+
+const { urlSafe } = require("./util");
+
+const {
+	Sidebar,
+	ViewRouter,
+	MenuComponent
+} = require("./components");
+
+function createNavigation(rootUrl, menus) {
+	const root = {
+		url: rootUrl,
+		links: [],
+	};
+
+	const routing = [];
+
+	const menuTree = menus.map((creatorFunc) =>
+		creatorFunc(root, routing)
+	);
+
+	return {
+		Sidebar: Sidebar(menuTree, routing),
+		ViewRouter: ViewRouter(routing, root.redirectUrl)
+	};
+}
+
+function MenuEntry(name, opts, contents) {
+	if (contents == undefined) { // opts argument is optional
+		contents = opts;
+		opts = {};
+	}
+
+	return function createMenuEntry(root, routing) {
+		const type = Array.isArray(contents) ? "category" : "view";
+
+		let urlParts = [root.url];
+		if (opts.url != "") {
+			urlParts.push(opts.url ?? urlSafe(name));
+		}
+
+		const url = urlParts.join("/");
+		let routingUrl = url;
+
+		if (opts.wildcard) {
+			routingUrl += "/:wildcard*";
+		}
+
+		const entry = {
+			name, type,
+			url, routingUrl,
+			key: nanoid(),
+			permissions: opts.permissions ?? false,
+			icon: opts.icon,
+			links: [routingUrl],
+			level: (root.level ?? -1) + 1,
+			redirectUrl: opts.defaultUrl
+		};
+
+		if (type == "category") {
+			let entries = contents.map((creatorFunc) => creatorFunc(entry, routing));
+			let routes = [];
+
+			entries.forEach((e) => {
+				// move empty wildcard routes to end of category, to prevent overlap
+				if (e.url == entry.url) {
+					routes.unshift(e);
+				} else {
+					routes.push(e);
+				}
+			});
+			routes.reverse();
+
+			routing.push(...routes);
+
+			if (opts.redirectUrl != entry.url) {
+				routing.push({
+					key: entry.key,
+					url: entry.url,
+					permissions: entry.permissions,
+					routingUrl: entry.redirectUrl + "/:fallback*",
+					view: React.createElement(Redirect, { to: entry.redirectUrl })
+				});
+				entry.url = entry.redirectUrl;
+			}
+
+			root.links.push(...entry.links);
+
+			entry.MenuEntry = React.createElement(
+				MenuComponent,
+				entry,
+				entries.map((e) => e.MenuEntry)
+			);
+		} else {
+			entry.links.push(routingUrl);
+			root.links.push(routingUrl);
+
+			entry.view = React.createElement(contents, { baseUrl: url });
+			entry.MenuEntry = React.createElement(MenuComponent, entry);
+		}
+
+		if (root.redirectUrl == undefined) {
+			root.redirectUrl = entry.url;
+		}
+
+		return entry;
+	};
+}
+
+module.exports = {
+	createNavigation,
+	Menu: MenuEntry,
+	Item: MenuEntry
+};
\ No newline at end of file
diff --git a/web/source/settings/lib/navigation/util.js b/web/source/settings/lib/navigation/util.js
new file mode 100644
index 000000000..f0b29d7a1
--- /dev/null
+++ b/web/source/settings/lib/navigation/util.js
@@ -0,0 +1,51 @@
+/*
+	GoToSocial
+	Copyright (C) GoToSocial Authors admin@gotosocial.org
+	SPDX-License-Identifier: AGPL-3.0-or-later
+
+	This program is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+
+	This program is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+"use strict";
+
+const React = require("react");
+const RoleContext = React.createContext([]);
+const BaseUrlContext = React.createContext(null);
+
+function urlSafe(str) {
+	return str.toLowerCase().replace(/[\s/]+/g, "-");
+}
+
+function useHasPermission(permissions) {
+	const roles = React.useContext(RoleContext);
+	return checkPermission(permissions, roles);
+}
+
+function checkPermission(requiredPermissisons, user) {
+	// requiredPermissions can be 'false', in which case there are no restrictions
+	if (requiredPermissisons === false) {
+		return true;
+	}
+
+	// or an array of roles, check if one of the user's roles is sufficient
+	return user.some((role) => requiredPermissisons.includes(role));
+}
+
+function useBaseUrl() {
+	return React.useContext(BaseUrlContext);
+}
+
+module.exports = {
+	urlSafe, RoleContext, useHasPermission, checkPermission, BaseUrlContext, useBaseUrl
+};
\ No newline at end of file