[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

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
+};

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
+};

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
+};