@percepta/create 3.5.1 → 3.6.0

package/templates/webapp/src/app/{(admin)/admin → (settings)/settings}/page.tsx

@@ -20,6 +20,7 @@ import {
 } from "@percepta/design";
 import type { Metadata } from "next";
 import { revalidatePath } from "next/cache";
+import Link from "next/link";
 import { notFound } from "next/navigation";
 import {
   accessManifest,
@@ -32,28 +33,34 @@ import {
 } from "../../../services/access/AppAccessControl";
 import {
   type AccessAppRole,
-  type AdminPermissions,
+  type SettingsPermissions,
   assignableRoles,
   readAssignableRole,
-  requireAnyAdminPermission,
-} from "./_lib/accessAdmin";
-import { AdminTabs, type AdminTab } from "./_components/AdminTabs";
+  requireAnySettingsPermission,
+} from "./_lib/accessSettings";
+import {
+  AccessControlTabs,
+  type AccessControlTab,
+} from "./_components/AccessControlTabs";
 
 export const metadata: Metadata = {
-  title: "RBAC - __APP_TITLE__",
-  description: "RBAC - __APP_TITLE__",
+  title: "Settings - __APP_TITLE__",
+  description: "Settings - __APP_TITLE__",
 };
 
 type ApplicationAccessRole = ApplicationGrant["relation"];
 
-interface AdminPageProps {
+interface SettingsPageProps {
   readonly searchParams?: Promise<{
+    readonly section?: string | string[];
     readonly tab?: string | string[];
   }>;
 }
 
+type SettingsSection = "access-control" | "audit-log";
+
 interface RoleDefinition extends AccessRoleDefinition {
-  readonly source: "Application access" | "App RBAC";
+  readonly source: "Application access" | "App roles";
 }
 
 interface PrincipalAssignmentOption extends PrincipalOption {
@@ -61,7 +68,7 @@ interface PrincipalAssignmentOption extends PrincipalOption {
   readonly subject: SubjectRef;
 }
 
-interface RbacRoleAssignmentRow {
+interface RoleAssignmentRow {
   readonly definition: RoleDefinition;
   readonly disabled: boolean;
   readonly disabledReason?: string;
@@ -120,48 +127,73 @@ const roleDefinitions = [
     (definition): RoleDefinition => ({
       ...definition,
       role: definition.role,
-      source: "App RBAC",
+      source: "App roles",
     }),
   ),
 ] as const;
 
 const appRoleDefinitionMap = new Map<AccessAppRole, RoleDefinition>(
   roleDefinitions
-    .filter((definition) => definition.source === "App RBAC")
+    .filter((definition) => definition.source === "App roles")
     .map((definition) => [definition.role as AccessAppRole, definition]),
 );
 
-export default async function AdminPage({ searchParams }: AdminPageProps) {
-  const permissions = await requireAnyAdminPermission();
+export default async function SettingsPage({ searchParams }: SettingsPageProps) {
+  const permissions = await requireAnySettingsPermission();
   const params = await searchParams;
-  const tab = readAdminTab(params?.tab);
+  const section = readSettingsSection(params?.section);
+  const tab = readAccessControlTab(params?.tab);
 
   return (
-    <div className="space-y-6">
-      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold text-foreground">RBAC</h1>
-          <p className="mt-1 text-sm text-muted-foreground">
-            {accessManifest.application.displayName}
-          </p>
-        </div>
-        <div className="rounded-md border border-border bg-muted px-3 py-2 text-sm">
-          <div className="font-medium text-foreground">
-            {accessManifest.application.displayName}
-          </div>
-          <div className="text-muted-foreground">
-            {accessManifest.appNamespace}
-          </div>
-        </div>
+    <div className="app-settings">
+      <aside className="app-settings-sidebar" aria-label="Settings navigation">
+        <div className="app-settings-sidebar-title">Settings</div>
+        <Link
+          className={getSettingsNavClassName(section === "access-control")}
+          href="/settings"
+        >
+          Access control
+        </Link>
+        <Link
+          className={getSettingsNavClassName(section === "audit-log")}
+          href="/settings?section=audit-log"
+        >
+          Audit log
+        </Link>
+      </aside>
+
+      <div className="app-settings-content">
+        {section === "access-control" ? (
+          <section className="app-settings-section">
+            <div className="app-settings-header">
+              <p className="app-kicker">Settings</p>
+              <h1 className="app-title">Access control</h1>
+              <p className="app-subtitle">
+                {accessManifest.application.displayName}
+              </p>
+            </div>
+
+            <AccessControlTabs activeTab={tab} />
+
+            {tab === "roles" ? (
+              <RolesTab />
+            ) : (
+              <AssignmentsTab permissions={permissions} />
+            )}
+          </section>
+        ) : (
+          <section className="app-settings-section app-settings-placeholder">
+            <div className="app-settings-header">
+              <p className="app-kicker">Settings</p>
+              <h1 className="app-title">Audit log</h1>
+              <p className="app-subtitle">
+                {accessManifest.application.displayName}
+              </p>
+            </div>
+            <p className="app-review-meta">Coming soon</p>
+          </section>
+        )}
       </div>
-
-      <AdminTabs activeTab={tab} />
-
-      {tab === "roles" ? (
-        <RolesTab />
-      ) : (
-        <AssignmentsTab permissions={permissions} />
-      )}
     </div>
   );
 }
@@ -210,9 +242,9 @@ function RolesTab() {
 async function AssignmentsTab({
   permissions,
 }: {
-  readonly permissions: AdminPermissions;
+  readonly permissions: SettingsPermissions;
 }) {
-  const rows = await listRbacRoleAssignmentRows(permissions);
+  const rows = await listRoleAssignmentRows(permissions);
 
   return (
     <div className="rounded-md border border-border">
@@ -276,7 +308,7 @@ async function updateAdminAssignments(formData: FormData) {
 async function updateAssignableRoleAssignments(formData: FormData) {
   "use server";
 
-  const permissions = await requireAnyAdminPermission();
+  const permissions = await requireAnySettingsPermission();
   const role = readAssignableRole(formData);
 
   if (!canEditAppRole(role, permissions)) {
@@ -299,14 +331,14 @@ async function updateAssignableRoleAssignments(formData: FormData) {
     permissions.canManageDefaultRoles ? undefined : { currentSubjects },
   );
 
-  revalidatePath("/admin");
+  revalidatePath("/settings");
 }
 
 async function updateApplicationAccessAssignments(
   formData: FormData,
   relation: ApplicationGrant["relation"],
 ) {
-  const permissions = await requireAnyAdminPermission();
+  const permissions = await requireAnySettingsPermission();
   if (!permissions.canManageDefaultRoles) {
     notFound();
   }
@@ -330,16 +362,16 @@ async function updateApplicationAccessAssignments(
     );
   }
 
-  revalidatePath("/admin");
+  revalidatePath("/settings");
 }
 
-async function listRbacRoleAssignmentRows(
-  permissions: AdminPermissions,
-): Promise<readonly RbacRoleAssignmentRow[]> {
+async function listRoleAssignmentRows(
+  permissions: SettingsPermissions,
+): Promise<readonly RoleAssignmentRow[]> {
   const principals = await listPrincipalAccessRows(permissions);
   const principalOptions = principals.map(toPrincipalOption);
 
-  const applicationRows: readonly RbacRoleAssignmentRow[] = [
+  const applicationRows: readonly RoleAssignmentRow[] = [
     {
       definition: getApplicationAccessRoleDefinition("user"),
       disabled: !permissions.canManageDefaultRoles,
@@ -372,7 +404,7 @@ async function listRbacRoleAssignmentRows(
     },
   ];
 
-  const appRoleRows = assignableRoles.map((role): RbacRoleAssignmentRow => {
+  const appRoleRows = assignableRoles.map((role): RoleAssignmentRow => {
     const canEditRole = canEditAppRole(role, permissions);
     const selectedSubjects = sortSubjectsByPrincipal(
       principals
@@ -407,7 +439,7 @@ async function listRbacRoleAssignmentRows(
 }
 
 async function listPrincipalAccessRows(
-  permissions: AdminPermissions,
+  permissions: SettingsPermissions,
 ): Promise<readonly PrincipalAccessRow[]> {
   const [principals, grants, roleSubjects] = await Promise.all([
     listPrincipals(),
@@ -484,7 +516,7 @@ function buildGrantMap(
 
 function canEditAppRole(
   role: AccessAppRole,
-  permissions: AdminPermissions,
+  permissions: SettingsPermissions,
 ): boolean {
   return (
     appRoleDefinitionMap.has(role) === true && permissions.canManageAppRoles
@@ -592,7 +624,22 @@ function sortSubjectsByPrincipal(
   );
 }
 
-function readAdminTab(tab: string | string[] | undefined): AdminTab {
+function readAccessControlTab(
+  tab: string | string[] | undefined,
+): AccessControlTab {
   const value = Array.isArray(tab) ? tab[0] : tab;
   return value === "assignments" ? "assignments" : "roles";
 }
+
+function readSettingsSection(
+  section: string | string[] | undefined,
+): SettingsSection {
+  const value = Array.isArray(section) ? section[0] : section;
+  return value === "audit-log" ? "audit-log" : "access-control";
+}
+
+function getSettingsNavClassName(active: boolean): string {
+  return active
+    ? "app-settings-nav-item app-settings-nav-active"
+    : "app-settings-nav-item";
+}

package/templates/webapp/src/app/layout.tsx

@@ -9,7 +9,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en">
+    <html lang="en" data-pcd-theme="__MOSAIC_DESIGN_THEME__">
       <body className="antialiased" suppressHydrationWarning={true}>
         <Providers>{children}</Providers>
       </body>

package/templates/webapp/src/components/Header.tsx

@@ -8,18 +8,20 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@percepta/design";
-import { LogOut } from "lucide-react";
+import { LogOut, Search } from "lucide-react";
 import Link from "next/link";
 import React, { useCallback } from "react";
 import { authClient } from "../lib/auth-client";
 
 export default function Header({
-  showAdminLink,
+  showSettingsLink,
 }: {
-  readonly showAdminLink: boolean;
+  readonly showSettingsLink: boolean;
 }) {
   const { data: session } = authClient.useSession();
   const user = session?.user;
+  const appTitle = "__APP_TITLE__";
+  const appInitial = appTitle.slice(0, 1).toUpperCase();
 
   const handleSignOut = useCallback(() => {
     void authClient.signOut({
@@ -36,36 +38,45 @@ export default function Header({
   }
 
   return (
-    <header className="sticky top-0 z-30 flex h-16 w-full items-center justify-between border-b border-border bg-card px-4 shadow-sm sm:px-6 lg:px-8">
-      <nav aria-label="Primary navigation" className="flex items-center gap-2">
+    <header className="app-header">
+      <nav aria-label="Primary navigation" className="app-header-nav">
         <Link
-          className="rounded-md px-3 py-2 text-sm font-medium text-foreground transition-colors hover:bg-muted"
+          className="app-header-brand"
           href="/"
         >
-          __APP_TITLE__
+          <span className="app-header-mark" aria-hidden={true}>
+            {appInitial}
+          </span>
+          <span>{appTitle}</span>
         </Link>
-        {showAdminLink ? (
-          <Link
-            className="rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            href="/admin"
-          >
-            Admin
+        {showSettingsLink ? (
+          <Link className="app-nav-link" href="/settings">
+            Settings
           </Link>
         ) : null}
       </nav>
+      <div className="app-header-search" aria-hidden={true}>
+        <div className="flex items-center justify-between gap-3">
+          <span className="inline-flex items-center gap-2">
+            <Search className="size-4" />
+            Search
+          </span>
+          <span className="text-xs">Cmd K</span>
+        </div>
+      </div>
       <DropdownMenu>
         <DropdownMenuTrigger asChild={true}>
           <button
-            className="-mx-2 flex items-center gap-3 rounded-lg px-2 py-1 transition-colors hover:bg-muted"
+            className="app-account-button"
             aria-label="Open account menu"
           >
-            <div className="hidden text-right sm:block">
+            <div className="app-account-text">
               <p className="text-sm font-medium text-foreground">
                 {user.name || "User"}
               </p>
               <p className="text-xs text-muted-foreground">{user.email}</p>
             </div>
-            <div className="flex h-9 w-9 items-center justify-center rounded-full border border-border bg-primary/10 text-sm font-semibold text-primary">
+            <div className="app-avatar">
               {(user.name || user.email || "U").slice(0, 1).toUpperCase()}
             </div>
           </button>