feat(web): gate settings nav by workspace role (MS21-RBAC-001) (#579)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/layout/AppSidebar.tsx

@@ -1,9 +1,11 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import Image from "next/image";
 import { useAuth } from "@/lib/auth/auth-context";
+import { fetchUserWorkspaces } from "@/lib/api/workspaces";
 import { useSidebar } from "./SidebarContext";
 
 // ---------------------------------------------------------------------------
@@ -461,10 +463,26 @@ interface UserCardProps {
 
 function UserCard({ collapsed }: UserCardProps): React.JSX.Element {
   const { user } = useAuth();
+  const [roleLabel, setRoleLabel] = useState<string>("Member");
+
+  useEffect(() => {
+    if (user === null) return;
+    fetchUserWorkspaces()
+      .then((workspaces) => {
+        if (workspaces.length === 0) return;
+        const first = workspaces[0];
+        if (!first) return;
+        const role = first.role;
+        setRoleLabel(role.charAt(0) + role.slice(1).toLowerCase());
+      })
+      .catch(() => {
+        // keep default
+      });
+  }, [user]);
 
   const displayName = user?.name ?? "User";
   const initials = getInitials(displayName);
-  const role = "Member";
+  const role = roleLabel;
 
   return (
     <footer