refactor: use SplitPane and EntityList in Admin RBAC tabs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/pages/Admin/UserManagement/GroupsTab.tsx

@@ -11,8 +11,10 @@ import { InlineEdit } from '../../../design-system/primitives/InlineEdit/InlineE
 import { MultiSelect } from '../../../design-system/composites/MultiSelect/MultiSelect'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
 import { AlertDialog } from '../../../design-system/composites/AlertDialog/AlertDialog'
+import { SplitPane } from '../../../design-system/composites/SplitPane/SplitPane'
+import { EntityList } from '../../../design-system/composites/EntityList/EntityList'
 import { useToast } from '../../../design-system/composites/Toast/Toast'
-import { MOCK_GROUPS, MOCK_USERS, MOCK_ROLES, getChildGroups, type MockGroup } from './rbacMocks'
+import { MOCK_GROUPS, MOCK_USERS, MOCK_ROLES, type MockGroup } from './rbacMocks'
 import styles from './UserManagement.module.css'
 
 export function GroupsTab() {
@@ -83,21 +85,9 @@ export function GroupsTab() {
 
   return (
     <>
-      <div className={styles.splitPane}>
-        <div className={styles.listPane}>
-          <div className={styles.listHeader}>
-            <Input
-              placeholder="Search groups..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onClear={() => setSearch('')}
-              className={styles.listHeaderSearch}
-            />
-            <Button size="sm" variant="secondary" onClick={() => setCreating(true)}>
-              + Add group
-            </Button>
-          </div>
-
+      <SplitPane
+        list={
+          <>
             {creating && (
               <div className={styles.createForm}>
                 <Input placeholder="Group name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
@@ -114,21 +104,14 @@ export function GroupsTab() {
               </div>
             )}
 
-          <div className={styles.entityList} role="listbox" aria-label="Groups">
-            {filtered.map((group) => {
+            <EntityList
+              items={filtered}
+              renderItem={(group) => {
                 const groupChildren = groups.filter((g) => g.parentId === group.id)
                 const groupMembers = MOCK_USERS.filter((u) => u.directGroups.includes(group.id))
                 const groupParent = group.parentId ? groups.find((g) => g.id === group.parentId) : null
                 return (
-                <div
-                  key={group.id}
-                  className={`${styles.entityItem} ${selectedId === group.id ? styles.entityItemSelected : ''}`}
-                  onClick={() => setSelectedId(group.id)}
-                  role="option"
-                  tabIndex={0}
-                  aria-selected={selectedId === group.id}
-                  onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(group.id) } }}
-                >
+                  <>
                     <Avatar name={group.name} size="sm" />
                     <div className={styles.entityInfo}>
                       <div className={styles.entityName}>{group.name}</div>
@@ -140,17 +123,21 @@ export function GroupsTab() {
                         {group.directRoles.map((r) => <Badge key={r} label={r} color="warning" />)}
                       </div>
                     </div>
-                </div>
+                  </>
                 )
-            })}
-            {filtered.length === 0 && (
-              <div className={styles.emptySearch}>No groups match your search</div>
-            )}
-          </div>
-        </div>
-
-        <div className={styles.detailPane}>
-          {selected ? (
+              }}
+              getItemId={(group) => group.id}
+              selectedId={selectedId ?? undefined}
+              onSelect={setSelectedId}
+              searchPlaceholder="Search groups..."
+              onSearch={setSearch}
+              addLabel="+ Add group"
+              onAdd={() => setCreating(true)}
+              emptyMessage="No groups match your search"
+            />
+          </>
+        }
+        detail={selected ? (
           <>
             <div className={styles.detailHeader}>
               <Avatar name={selected.name} size="lg" />
@@ -279,11 +266,9 @@ export function GroupsTab() {
               />
             </div>
           </>
-          ) : (
-            <div className={styles.emptyDetail}>Select a group to view details</div>
-          )}
-        </div>
-      </div>
+        ) : null}
+        emptyMessage="Select a group to view details"
+      />
 
       <ConfirmDialog
         open={deleteTarget !== null}

src/pages/Admin/UserManagement/RolesTab.tsx

@@ -7,6 +7,8 @@ import { MonoText } from '../../../design-system/primitives/MonoText/MonoText'
 import { SectionHeader } from '../../../design-system/primitives/SectionHeader/SectionHeader'
 import { Tag } from '../../../design-system/primitives/Tag/Tag'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
+import { SplitPane } from '../../../design-system/composites/SplitPane/SplitPane'
+import { EntityList } from '../../../design-system/composites/EntityList/EntityList'
 import { useToast } from '../../../design-system/composites/Toast/Toast'
 import { MOCK_ROLES, MOCK_GROUPS, MOCK_USERS, getEffectiveRoles, type MockRole } from './rbacMocks'
 import styles from './UserManagement.module.css'
@@ -79,21 +81,9 @@ export function RolesTab() {
 
   return (
     <>
-      <div className={styles.splitPane}>
-        <div className={styles.listPane}>
-          <div className={styles.listHeader}>
-            <Input
-              placeholder="Search roles..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onClear={() => setSearch('')}
-              className={styles.listHeaderSearch}
-            />
-            <Button size="sm" variant="secondary" onClick={() => setCreating(true)}>
-              + Add role
-            </Button>
-          </div>
-
+      <SplitPane
+        list={
+          <>
             {creating && (
               <div className={styles.createForm}>
                 <Input placeholder="Role name *" value={newName} onChange={(e) => setNewName(e.target.value)} />
@@ -106,17 +96,10 @@ export function RolesTab() {
               </div>
             )}
 
-          <div className={styles.entityList} role="listbox" aria-label="Roles">
-            {filtered.map((role) => (
-              <div
-                key={role.id}
-                className={`${styles.entityItem} ${selectedId === role.id ? styles.entityItemSelected : ''}`}
-                onClick={() => setSelectedId(role.id)}
-                role="option"
-                tabIndex={0}
-                aria-selected={selectedId === role.id}
-                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(role.id) } }}
-              >
+            <EntityList
+              items={filtered}
+              renderItem={(role) => (
+                <>
                   <Avatar name={role.name} size="sm" />
                   <div className={styles.entityInfo}>
                     <div className={styles.entityName}>
@@ -133,16 +116,20 @@ export function RolesTab() {
                         .map((u) => <Badge key={u.id} label={u.username} color="auto" />)}
                     </div>
                   </div>
-              </div>
-            ))}
-            {filtered.length === 0 && (
-              <div className={styles.emptySearch}>No roles match your search</div>
+                </>
               )}
-          </div>
-        </div>
-
-        <div className={styles.detailPane}>
-          {selected ? (
+              getItemId={(role) => role.id}
+              selectedId={selectedId ?? undefined}
+              onSelect={setSelectedId}
+              searchPlaceholder="Search roles..."
+              onSearch={setSearch}
+              addLabel="+ Add role"
+              onAdd={() => setCreating(true)}
+              emptyMessage="No roles match your search"
+            />
+          </>
+        }
+        detail={selected ? (
           <>
             <div className={styles.detailHeader}>
               <Avatar name={selected.name} size="lg" />
@@ -209,11 +196,9 @@ export function RolesTab() {
               </span>
             )}
           </>
-          ) : (
-            <div className={styles.emptyDetail}>Select a role to view details</div>
-          )}
-        </div>
-      </div>
+        ) : null}
+        emptyMessage="Select a role to view details"
+      />
 
       <ConfirmDialog
         open={deleteTarget !== null}

src/pages/Admin/UserManagement/UserManagement.module.css

@@ -1,63 +1,3 @@
-.splitPane {
-  display: grid;
-  grid-template-columns: 52fr 48fr;
-  gap: 1px;
-  background: var(--border-subtle);
-  border: 1px solid var(--border-subtle);
-  border-radius: var(--radius-lg);
-  min-height: 500px;
-  box-shadow: var(--shadow-card);
-}
-
-.listPane {
-  background: var(--bg-surface);
-  display: flex;
-  flex-direction: column;
-  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
-}
-
-.detailPane {
-  background: var(--bg-surface);
-  overflow-y: auto;
-  padding: 20px;
-  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
-}
-
-.listHeader {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.listHeaderSearch {
-  flex: 1;
-}
-
-.entityList {
-  flex: 1;
-  overflow-y: auto;
-}
-
-.entityItem {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  padding: 10px 12px;
-  cursor: pointer;
-  transition: background 0.1s;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.entityItem:hover {
-  background: var(--bg-hover);
-}
-
-.entityItemSelected {
-  background: var(--bg-raised);
-}
-
 .entityInfo {
   flex: 1;
   min-width: 0;
@@ -140,16 +80,6 @@
   max-width: 240px;
 }
 
-.emptyDetail {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  color: var(--text-faint);
-  font-size: 13px;
-  font-family: var(--font-body);
-}
-
 .createForm {
   padding: 12px;
   border-bottom: 1px solid var(--border-subtle);
@@ -190,14 +120,6 @@
   margin-top: 16px;
 }
 
-.emptySearch {
-  padding: 32px;
-  text-align: center;
-  color: var(--text-faint);
-  font-size: 12px;
-  font-family: var(--font-body);
-}
-
 .securitySection {
   margin-top: 8px;
   margin-bottom: 8px;

src/pages/Admin/UserManagement/UsersTab.tsx

@@ -12,6 +12,8 @@ import { InfoCallout } from '../../../design-system/primitives/InfoCallout/InfoC
 import { MultiSelect } from '../../../design-system/composites/MultiSelect/MultiSelect'
 import { ConfirmDialog } from '../../../design-system/composites/ConfirmDialog/ConfirmDialog'
 import { AlertDialog } from '../../../design-system/composites/AlertDialog/AlertDialog'
+import { SplitPane } from '../../../design-system/composites/SplitPane/SplitPane'
+import { EntityList } from '../../../design-system/composites/EntityList/EntityList'
 import { useToast } from '../../../design-system/composites/Toast/Toast'
 import { MOCK_USERS, MOCK_GROUPS, MOCK_ROLES, getEffectiveRoles, type MockUser } from './rbacMocks'
 import styles from './UserManagement.module.css'
@@ -97,21 +99,9 @@ export function UsersTab() {
 
   return (
     <>
-      <div className={styles.splitPane}>
-        <div className={styles.listPane}>
-          <div className={styles.listHeader}>
-            <Input
-              placeholder="Search users..."
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              onClear={() => setSearch('')}
-              className={styles.listHeaderSearch}
-            />
-            <Button size="sm" variant="secondary" onClick={() => setCreating(true)}>
-              + Add user
-            </Button>
-          </div>
-
+      <SplitPane
+        list={
+          <>
             {creating && (
               <div className={styles.createForm}>
                 <RadioGroup name="provider" value={newProvider} onChange={(v) => setNewProvider(v as 'local' | 'oidc')} orientation="horizontal">
@@ -146,17 +136,10 @@ export function UsersTab() {
               </div>
             )}
 
-          <div className={styles.entityList} role="listbox" aria-label="Users">
-            {filtered.map((user) => (
-              <div
-                key={user.id}
-                className={`${styles.entityItem} ${selectedId === user.id ? styles.entityItemSelected : ''}`}
-                onClick={() => { setSelectedId(user.id); setResettingPassword(false) }}
-                role="option"
-                tabIndex={0}
-                aria-selected={selectedId === user.id}
-                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setSelectedId(user.id); setResettingPassword(false) } }}
-              >
+            <EntityList
+              items={filtered}
+              renderItem={(user) => (
+                <>
                   <Avatar name={user.displayName} size="sm" />
                   <div className={styles.entityInfo}>
                     <div className={styles.entityName}>
@@ -176,16 +159,20 @@ export function UsersTab() {
                       })}
                     </div>
                   </div>
-              </div>
-            ))}
-            {filtered.length === 0 && (
-              <div className={styles.emptySearch}>No users match your search</div>
+                </>
               )}
-          </div>
-        </div>
-
-        <div className={styles.detailPane}>
-          {selected ? (
+              getItemId={(user) => user.id}
+              selectedId={selectedId ?? undefined}
+              onSelect={(id) => { setSelectedId(id); setResettingPassword(false) }}
+              searchPlaceholder="Search users..."
+              onSearch={setSearch}
+              addLabel="+ Add user"
+              onAdd={() => setCreating(true)}
+              emptyMessage="No users match your search"
+            />
+          </>
+        }
+        detail={selected ? (
           <>
             <div className={styles.detailHeader}>
               <Avatar name={selected.displayName} size="lg" />
@@ -346,11 +333,9 @@ export function UsersTab() {
               </span>
             )}
           </>
-          ) : (
-            <div className={styles.emptyDetail}>Select a user to view details</div>
-          )}
-        </div>
-      </div>
+        ) : null}
+        emptyMessage="Select a user to view details"
+      />
 
       <ConfirmDialog
         open={deleteTarget !== null}