From a6c9c2f93959c559b7aacc5e4697722a227f5a2f Mon Sep 17 00:00:00 2001
From: Lorenzo Corallo <lorenzo.corallo@outlook.it>
Date: Thu, 1 Oct 2026 00:02:42 +0200
Subject: [PATCH] feat: rename the Access section to eRBACo and tidy its layout

Show "eRBACo" in the header, the tab title, and as one heading above the
Roles/Permissions tabs. Drop the list pages' own headings, which repeated
the tab names, and let detail and "new" pages fill the width under the
tabs instead of sitting in a narrow centred column.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 src/components/app-header.tsx                 |  2 +-
 .../access/permissions/$permissionId.tsx      |  6 +--
 src/routes/access/permissions/index.tsx       |  5 +--
 src/routes/access/permissions/new.tsx         |  4 +-
 src/routes/access/roles/$roleId.tsx           |  4 +-
 src/routes/access/roles/index.tsx             |  5 +--
 src/routes/access/roles/new.tsx               |  4 +-
 src/routes/access/route.tsx                   | 45 ++++++++++---------
 8 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/src/components/app-header.tsx b/src/components/app-header.tsx
index 7dba047..7fab70d 100644
--- a/src/components/app-header.tsx
+++ b/src/components/app-header.tsx
@@ -28,7 +28,7 @@ export function AppHeader({ active, access }: { active: Section; access?: IdpAcc
     });
   // Straight to the tab they can actually read, rather than a page that would refuse them.
   const accessTab = firstAccessTab(can);
-  if (accessTab) links.push({ to: accessTab.to, label: "Access", section: "access" });
+  if (accessTab) links.push({ to: accessTab.to, label: "eRBACo", section: "access" });
   const nav = (className: string) =>
     session && links.length > 1 ? (
       <nav aria-label="Primary" className={className}>
diff --git a/src/routes/access/permissions/$permissionId.tsx b/src/routes/access/permissions/$permissionId.tsx
index 8dff4fa..81df0f5 100644
--- a/src/routes/access/permissions/$permissionId.tsx
+++ b/src/routes/access/permissions/$permissionId.tsx
@@ -101,7 +101,7 @@ function PermissionDetail() {
   }
 
   return (
-    <div className="mx-auto max-w-3xl space-y-8">
+    <div className="space-y-8">
       <div>
         <Button variant="ghost" size="sm" className="-ml-2 text-muted-foreground" asChild>
           <Link to="/access/permissions">
@@ -109,9 +109,9 @@ function PermissionDetail() {
             Permissions
           </Link>
         </Button>
-        <h1 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">
+        <h2 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">
           {permission.name}
-        </h1>
+        </h2>
         <p className="mt-3 text-sm leading-6 text-muted-foreground">
           <KeyChip>{permission.key}</KeyChip>
           {permission.managed && (
diff --git a/src/routes/access/permissions/index.tsx b/src/routes/access/permissions/index.tsx
index 410b81b..a78a1ef 100644
--- a/src/routes/access/permissions/index.tsx
+++ b/src/routes/access/permissions/index.tsx
@@ -66,10 +66,9 @@ function PermissionsIndex() {
 
   return (
     <div className="space-y-8">
-      <div className="flex flex-wrap items-end justify-between gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl">Permissions</h1>
-          <p className="mt-3 max-w-xl text-sm leading-6 text-muted-foreground">
+          <p className="max-w-xl text-sm leading-6 text-muted-foreground">
             The things an application can check for. They reach applications as the{" "}
             <code className="font-mono text-xs">polinetwork_permissions</code> claim; each
             application still enforces its own.
diff --git a/src/routes/access/permissions/new.tsx b/src/routes/access/permissions/new.tsx
index 256380e..0e784f1 100644
--- a/src/routes/access/permissions/new.tsx
+++ b/src/routes/access/permissions/new.tsx
@@ -40,7 +40,7 @@ function NewPermission() {
   }
 
   return (
-    <div className="mx-auto max-w-3xl space-y-8">
+    <div className="space-y-8">
       <div>
         <Button variant="ghost" size="sm" className="-ml-2 text-muted-foreground" asChild>
           <Link to="/access/permissions">
@@ -48,7 +48,7 @@ function NewPermission() {
             Permissions
           </Link>
         </Button>
-        <h1 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">New permission</h1>
+        <h2 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">New permission</h2>
         <p className="mt-3 max-w-xl text-sm leading-6 text-muted-foreground">
           Applications check for the key you choose here, so pick one you can live with.
         </p>
diff --git a/src/routes/access/roles/$roleId.tsx b/src/routes/access/roles/$roleId.tsx
index 7e4398b..222149f 100644
--- a/src/routes/access/roles/$roleId.tsx
+++ b/src/routes/access/roles/$roleId.tsx
@@ -94,7 +94,7 @@ function RoleDetail() {
   const effective = effectiveRolePermissions(catalog, role.key);
 
   return (
-    <div className="mx-auto max-w-3xl space-y-8">
+    <div className="space-y-8">
       <div>
         <Button variant="ghost" size="sm" className="-ml-2 text-muted-foreground" asChild>
           <Link to="/access/roles">
@@ -102,7 +102,7 @@ function RoleDetail() {
             Roles
           </Link>
         </Button>
-        <h1 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">{role.name}</h1>
+        <h2 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">{role.name}</h2>
         <p className="mt-3 text-sm leading-6 text-muted-foreground">
           <KeyChip>{role.key}</KeyChip>
           <span className="ml-2">
diff --git a/src/routes/access/roles/index.tsx b/src/routes/access/roles/index.tsx
index 20cac35..f1ff921 100644
--- a/src/routes/access/roles/index.tsx
+++ b/src/routes/access/roles/index.tsx
@@ -84,10 +84,9 @@ function RolesIndex() {
 
   return (
     <div className="space-y-8">
-      <div className="flex flex-wrap items-end justify-between gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-4">
         <div>
-          <h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl">Roles</h1>
-          <p className="mt-3 max-w-xl text-sm leading-6 text-muted-foreground">
+          <p className="max-w-xl text-sm leading-6 text-muted-foreground">
             A role is a named bundle of permissions. Applications read them from the{" "}
             <code className="font-mono text-xs">polinetwork:identity</code> scope.
           </p>
diff --git a/src/routes/access/roles/new.tsx b/src/routes/access/roles/new.tsx
index ad86c55..33e5fea 100644
--- a/src/routes/access/roles/new.tsx
+++ b/src/routes/access/roles/new.tsx
@@ -37,7 +37,7 @@ function NewRole() {
   }
 
   return (
-    <div className="mx-auto max-w-3xl space-y-8">
+    <div className="space-y-8">
       <div>
         <Button variant="ghost" size="sm" className="-ml-2 text-muted-foreground" asChild>
           <Link to="/access/roles">
@@ -45,7 +45,7 @@ function NewRole() {
             Roles
           </Link>
         </Button>
-        <h1 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">New role</h1>
+        <h2 className="mt-3 text-3xl font-extrabold tracking-tight sm:text-4xl">New role</h2>
         <p className="mt-3 max-w-xl text-sm leading-6 text-muted-foreground">
           Bundle permissions under one name, then give it to people from the role's page.
         </p>
diff --git a/src/routes/access/route.tsx b/src/routes/access/route.tsx
index 4356aa6..4cd139b 100644
--- a/src/routes/access/route.tsx
+++ b/src/routes/access/route.tsx
@@ -9,7 +9,7 @@ import { ACCESS_TABS } from "@/components/rbac/access-tabs";
 import { Button } from "@/components/ui/button";
 
 export const Route = createFileRoute("/access")({
-  head: () => ({ meta: [{ title: "Roles and permissions · PoliNetwork Auth" }] }),
+  head: () => ({ meta: [{ title: "eRBACo · PoliNetwork Auth" }] }),
   component: AccessLayout,
 });
 
@@ -75,26 +75,29 @@ function AccessLayout() {
       <main className="mx-auto max-w-6xl px-5 py-10 sm:px-8 sm:py-14">
         {access.status === "ready" && visibleTabs.length > 0 ? (
           <div className="space-y-8">
-            <nav aria-label="Access administration" className="flex gap-1 border-b">
-              {visibleTabs.map((tab) => {
-                const current = pathname.startsWith(tab.to);
-                return (
-                  <Link
-                    key={tab.to}
-                    to={tab.to}
-                    aria-current={current ? "page" : undefined}
-                    className={cn(
-                      "-mb-px border-b-2 px-4 py-2.5 text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                      current
-                        ? "border-primary text-foreground"
-                        : "border-transparent text-muted-foreground hover:text-foreground",
-                    )}
-                  >
-                    {tab.label}
-                  </Link>
-                );
-              })}
-            </nav>
+            <div className="space-y-6">
+              <h1 className="text-3xl font-extrabold tracking-tight sm:text-4xl">eRBACo</h1>
+              <nav aria-label="eRBACo administration" className="flex gap-1 border-b">
+                {visibleTabs.map((tab) => {
+                  const current = pathname.startsWith(tab.to);
+                  return (
+                    <Link
+                      key={tab.to}
+                      to={tab.to}
+                      aria-current={current ? "page" : undefined}
+                      className={cn(
+                        "-mb-px border-b-2 px-4 py-2.5 text-sm font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                        current
+                          ? "border-primary text-foreground"
+                          : "border-transparent text-muted-foreground hover:text-foreground",
+                      )}
+                    >
+                      {tab.label}
+                    </Link>
+                  );
+                })}
+              </nav>
+            </div>
             <IdpAccessProvider access={access}>
               <Outlet />
             </IdpAccessProvider>