feat(sidebar): hide unauthorized settings buttons in the sidebar for non-admins

echo/frontend/src/features/sidebar/views/workspace/WorkspaceHomeView.tsx

@@ -2,6 +2,7 @@ import { Trans } from "@lingui/react/macro";
 import { Gear, House, Plus, PushPin } from "@phosphor-icons/react";
 import { useMemo } from "react";
 import { useParams } from "react-router";
+import { isAdminRole } from "@/lib/roles";
 import { useWorkspace } from "@/hooks/useWorkspace";
 import { useWorkspaceProjects } from "@/hooks/useWorkspaceProjects";
 import { BackButton } from "../../primitives/BackButton";
@@ -29,6 +30,13 @@ export const WorkspaceHomeView = () => {
 	const backLabel = workspace?.org_name ?? "Home";
 	const isExternal = workspace?.role === "external";
 	const canCreateProject = !isExternal;
+	const isAdmin = isAdminRole(workspace?.role);
+	const isBilling = workspace?.role === "billing";
+	const settingsPath = isAdmin
+		? `${base}/settings/general`
+		: isBilling
+			? `${base}/settings/billing`
+			: `${base}/settings/members`;
 
 	return (
 		<nav className="flex h-full flex-col gap-0.5 p-1.5">
@@ -71,7 +79,7 @@ export const WorkspaceHomeView = () => {
 				<>
 					<div className="mt-auto" />
 					<NavItem
-						to={`${base}/settings/general`}
+						to={settingsPath}
 						label={<Trans>Settings</Trans>}
 						icon={Gear}
 						pushes

echo/frontend/src/features/sidebar/views/workspace/WorkspaceSettingsView.tsx

@@ -1,26 +1,34 @@
 import { Trans } from "@lingui/react/macro";
 import { CreditCard, Gear, Users, Warning } from "@phosphor-icons/react";
 import { useParams } from "react-router";
+import { useWorkspace } from "@/hooks/useWorkspace";
+import { isAdminRole } from "@/lib/roles";
 import { BackButton } from "../../primitives/BackButton";
 import { NavItem } from "../../primitives/NavItem";
 
 export const WorkspaceSettingsView = () => {
 	const { workspaceId } = useParams<{ workspaceId: string }>();
+	const { workspaces } = useWorkspace();
 
 	if (!workspaceId) return null;
 	const base = `/w/${workspaceId}/settings`;
 
+	const workspace = workspaces.find((w) => w.id === workspaceId);
+	const isAdmin = isAdminRole(workspace?.role);
+
 	return (
 		<nav className="flex h-full flex-col gap-0.5 p-1.5">
 			<BackButton
 				to={`/w/${workspaceId}/home`}
 				label={<Trans>Settings</Trans>}
 			/>
-			<NavItem
-				to={`${base}/general`}
-				label={<Trans>General</Trans>}
-				icon={Gear}
-			/>
+			{isAdmin && (
+				<NavItem
+					to={`${base}/general`}
+					label={<Trans>General</Trans>}
+					icon={Gear}
+				/>
+			)}
 			<NavItem
 				to={`${base}/members`}
 				label={<Trans>Members</Trans>}
@@ -31,11 +39,13 @@ export const WorkspaceSettingsView = () => {
 				label={<Trans>Usage and billing</Trans>}
 				icon={CreditCard}
 			/>
-			<NavItem
-				to={`${base}/danger`}
-				label={<Trans>Danger zone</Trans>}
-				icon={Warning}
-			/>
+			{isAdmin && (
+				<NavItem
+					to={`${base}/danger`}
+					label={<Trans>Danger zone</Trans>}
+					icon={Warning}
+				/>
+			)}
 		</nav>
 	);
 };

echo/frontend/src/routes/workspaces/WorkspaceSettingsRoute.tsx

@@ -464,8 +464,13 @@ export const WorkspaceSettingsRoute = () => {
 	// a second time with the role-correct default if the URL is bare.
 	const callerCanManage =
 		settings?.my_policies?.includes("member:manage") ?? false;
-	const defaultTab: TabValue =
-		settings?.my_role === "billing" && !callerCanManage ? "billing" : "general";
+	const canEditSettings =
+		settings?.my_policies?.includes("settings:manage") ?? false;
+	const defaultTab: TabValue = canEditSettings
+		? "general"
+		: settings?.my_role === "billing"
+			? "billing"
+			: "members";
 	const activeTab: TabValue = segmentIsValid
 		? (segment as TabValue)
 		: defaultTab;
@@ -599,8 +604,6 @@ export const WorkspaceSettingsRoute = () => {
 
 	const canManage = callerCanManage;
 	const myAppUserId = meV2?.id ?? null;
-	const canEditSettings =
-		settings.my_policies?.includes("settings:manage") ?? false;
 	const seesFinancials =
 		settings.my_policies?.includes("workspace:view_invoices") ?? false;