Build 2602261442: tidy users and invite layouts

frontend/app/users/page.tsx

@@ -82,6 +82,7 @@ export default function UsersPage() {
   const [users, setUsers] = useState<AdminUser[]>([])
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(true)
+  const [query, setQuery] = useState('')
   const [jellyseerrSyncStatus, setJellyseerrSyncStatus] = useState<string | null>(null)
   const [jellyseerrSyncBusy, setJellyseerrSyncBusy] = useState(false)
   const [jellyseerrResyncBusy, setJellyseerrResyncBusy] = useState(false)
@@ -135,44 +136,6 @@ export default function UsersPage() {
     }
   }
 
-  const toggleUserBlock = async (username: string, blocked: boolean) => {
-    try {
-      const baseUrl = getApiBase()
-      const response = await authFetch(
-        `${baseUrl}/admin/users/${encodeURIComponent(username)}/${blocked ? 'block' : 'unblock'}`,
-        { method: 'POST' }
-      )
-      if (!response.ok) {
-        throw new Error('Update failed')
-      }
-      await loadUsers()
-    } catch (err) {
-      console.error(err)
-      setError('Could not update user access.')
-    }
-  }
-
-  const updateUserRole = async (username: string, role: string) => {
-    try {
-      const baseUrl = getApiBase()
-      const response = await authFetch(
-        `${baseUrl}/admin/users/${encodeURIComponent(username)}/role`,
-        {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ role }),
-        }
-      )
-      if (!response.ok) {
-        throw new Error('Update failed')
-      }
-      await loadUsers()
-    } catch (err) {
-      console.error(err)
-      setError('Could not update user role.')
-    }
-  }
-
   const syncJellyseerrUsers = async () => {
     setJellyseerrSyncStatus(null)
     setJellyseerrSyncBusy(true)
@@ -268,13 +231,35 @@ export default function UsersPage() {
 
   const nonAdminUsers = users.filter((user) => user.role !== 'admin')
   const autoSearchEnabledCount = nonAdminUsers.filter((user) => user.autoSearchEnabled !== false).length
+  const blockedCount = users.filter((user) => user.isBlocked).length
+  const expiredCount = users.filter((user) => user.isExpired).length
+  const adminCount = users.filter((user) => user.role === 'admin').length
+  const normalizedQuery = query.trim().toLowerCase()
+  const filteredUsers = normalizedQuery
+    ? users.filter((user) => {
+        const fields = [
+          user.username,
+          user.role,
+          user.authProvider || '',
+          user.profileId != null ? String(user.profileId) : '',
+        ]
+        return fields.some((field) => field.toLowerCase().includes(normalizedQuery))
+      })
+    : users
+  const filteredCountLabel =
+    filteredUsers.length === users.length
+      ? `${users.length} users`
+      : `${filteredUsers.length} of ${users.length} users`
 
   return (
     <AdminShell
       title="Users"
-      subtitle="Manage who can use Magent."
+      subtitle="Directory, access status, and request activity."
       actions={
-        <>
+        <div className="admin-inline-actions">
+          <button type="button" className="ghost-button" onClick={() => router.push('/admin/invites')}>
+            Invite management
+          </button>
           <button type="button" onClick={loadUsers}>
             Reload list
           </button>
@@ -284,93 +269,156 @@ export default function UsersPage() {
           <button type="button" onClick={resyncJellyseerrUsers} disabled={jellyseerrResyncBusy}>
             {jellyseerrResyncBusy ? 'Resyncing Jellyseerr users...' : 'Resync Jellyseerr users'}
           </button>
-        </>
+        </div>
       }
     >
       <section className="admin-section">
         {error && <div className="error-banner">{error}</div>}
         {jellyseerrSyncStatus && <div className="status-banner">{jellyseerrSyncStatus}</div>}
-          <div className="user-bulk-toolbar">
-            <div className="user-bulk-summary">
-              <strong>Auto search/download</strong>
-              <span>
-                {autoSearchEnabledCount} of {nonAdminUsers.length} non-admin users enabled
-            </span>
+        <div className="admin-summary-grid user-summary-grid">
+          <div className="admin-summary-tile">
+            <span className="label">Total users</span>
+            <strong>{users.length}</strong>
+            <small>{adminCount} admin</small>
           </div>
-          <div className="user-bulk-actions">
-            <button
-              type="button"
-              onClick={() => bulkUpdateAutoSearch(true)}
-              disabled={bulkAutoSearchBusy}
-            >
-              {bulkAutoSearchBusy ? 'Working...' : 'Enable for all users'}
-            </button>
-            <button
-              type="button"
-              className="ghost-button"
-              onClick={() => bulkUpdateAutoSearch(false)}
-              disabled={bulkAutoSearchBusy}
-            >
-              {bulkAutoSearchBusy ? 'Working...' : 'Disable for all users'}
-            </button>
+          <div className="admin-summary-tile">
+            <span className="label">Auto search</span>
+            <strong>{autoSearchEnabledCount}</strong>
+            <small>of {nonAdminUsers.length} non-admin users</small>
+          </div>
+          <div className="admin-summary-tile">
+            <span className="label">Blocked</span>
+            <strong>{blockedCount}</strong>
+            <small>{blockedCount ? 'Needs review' : 'No blocked users'}</small>
+          </div>
+          <div className="admin-summary-tile">
+            <span className="label">Expired</span>
+            <strong>{expiredCount}</strong>
+            <small>{expiredCount ? 'Access expired' : 'No expiries'}</small>
           </div>
         </div>
-        {users.length === 0 ? (
+
+        <div className="user-directory-control-grid">
+          <div className="admin-panel user-directory-search-panel">
+            <div className="user-directory-panel-header">
+              <div>
+                <h2>Directory search</h2>
+                <p className="lede">
+                  Filter by username, role, login provider, or assigned profile.
+                </p>
+              </div>
+              <span className="small-pill">{filteredCountLabel}</span>
+            </div>
+            <div className="user-directory-toolbar">
+              <div className="user-directory-search">
+                <label>
+                  <span className="user-bulk-label">Search users</span>
+                  <input
+                    value={query}
+                    onChange={(event) => setQuery(event.target.value)}
+                    placeholder="Search username, login type, role, profile…"
+                  />
+                </label>
+              </div>
+            </div>
+          </div>
+          <div className="admin-panel user-directory-bulk-panel">
+            <div className="user-directory-panel-header">
+              <div>
+                <h2>Bulk controls</h2>
+                <p className="lede">
+                  Auto search/download can be enabled or disabled for all non-admin users.
+                </p>
+              </div>
+            </div>
+            <div className="user-bulk-toolbar">
+              <div className="user-bulk-summary">
+                <strong>Auto search/download</strong>
+                <span>
+                  {autoSearchEnabledCount} of {nonAdminUsers.length} non-admin users enabled
+                </span>
+              </div>
+              <div className="user-bulk-actions">
+                <button
+                  type="button"
+                  onClick={() => bulkUpdateAutoSearch(true)}
+                  disabled={bulkAutoSearchBusy}
+                >
+                  {bulkAutoSearchBusy ? 'Working...' : 'Enable for all users'}
+                </button>
+                <button
+                  type="button"
+                  className="ghost-button"
+                  onClick={() => bulkUpdateAutoSearch(false)}
+                  disabled={bulkAutoSearchBusy}
+                >
+                  {bulkAutoSearchBusy ? 'Working...' : 'Disable for all users'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+        {filteredUsers.length === 0 ? (
           <div className="status-banner">No users found yet.</div>
         ) : (
-          <div className="user-grid">
-            {users.map((user) => (
+          <div className="user-directory-list">
+            <div className="user-directory-header">
+              <span>User</span>
+              <span>Access</span>
+              <span>Requests</span>
+              <span>Activity</span>
+            </div>
+            {filteredUsers.map((user) => (
               <Link
                 key={user.username}
-                className="user-grid-card"
+                className="user-directory-row"
                 href={`/users/${user.id}`}
               >
-                <div className="user-grid-header">
-                  <div>
+                <div className="user-directory-cell user-directory-cell--identity">
+                  <div className="user-directory-title-row">
                     <strong>{user.username}</strong>
                     <span className="user-grid-meta">{user.role}</span>
                   </div>
-                  <span className={`user-grid-pill ${user.isBlocked ? 'is-blocked' : ''}`}>
-                    {user.isBlocked ? 'Blocked' : 'Active'}
-                  </span>
-                </div>
-                <div className="user-grid-subpills">
-                  <span className={`user-grid-pill ${user.autoSearchEnabled === false ? 'is-disabled' : ''}`}>
-                    Auto search {user.autoSearchEnabled === false ? 'Off' : 'On'}
-                  </span>
-                  <span className={`user-grid-pill ${user.isExpired ? 'is-blocked' : ''}`}>
-                    {user.expiresAt
-                      ? `Expiry ${user.isExpired ? 'expired' : formatExpiry(user.expiresAt)}`
-                      : 'Expiry Never'}
-                  </span>
-                  <span className="user-grid-pill">
-                    Profile {user.profileId ?? 'None'}
-                  </span>
-                </div>
-                <div className="user-grid-stats">
-                  <div>
-                    <span className="label">Total</span>
-                    <span className="value">{user.stats?.total ?? 0}</span>
-                  </div>
-                  <div>
-                    <span className="label">Ready</span>
-                    <span className="value">{user.stats?.ready ?? 0}</span>
-                  </div>
-                  <div>
-                    <span className="label">Pending</span>
-                    <span className="value">{user.stats?.pending ?? 0}</span>
-                  </div>
-                  <div>
-                    <span className="label">In progress</span>
-                    <span className="value">{user.stats?.in_progress ?? 0}</span>
+                  <div className="user-directory-subtext">
+                    Login: {user.authProvider || 'local'} • Profile: {user.profileId ?? 'None'}
                   </div>
                 </div>
-                <div className="user-grid-footer">
-                  <span className="meta">Login: {user.authProvider || 'local'}</span>
-                  <span className="meta">Last login: {formatLastLogin(user.lastLoginAt)}</span>
-                  <span className="meta">
+                <div className="user-directory-cell">
+                  <div className="user-directory-pill-row">
+                    <span className={`user-grid-pill ${user.isBlocked ? 'is-blocked' : ''}`}>
+                      {user.isBlocked ? 'Blocked' : 'Active'}
+                    </span>
+                    <span
+                      className={`user-grid-pill ${user.autoSearchEnabled === false ? 'is-disabled' : ''}`}
+                    >
+                      Auto {user.autoSearchEnabled === false ? 'Off' : 'On'}
+                    </span>
+                    <span className={`user-grid-pill ${user.isExpired ? 'is-blocked' : ''}`}>
+                      {user.expiresAt ? (user.isExpired ? 'Expired' : 'Expiry set') : 'No expiry'}
+                    </span>
+                  </div>
+                  <div className="user-directory-subtext">
+                    {user.expiresAt ? `Expires: ${formatExpiry(user.expiresAt)}` : 'No account expiry'}
+                  </div>
+                </div>
+                <div className="user-directory-cell">
+                  <div className="user-directory-stats-inline">
+                    <span><strong>{user.stats?.total ?? 0}</strong> total</span>
+                    <span><strong>{user.stats?.ready ?? 0}</strong> ready</span>
+                    <span><strong>{user.stats?.pending ?? 0}</strong> pending</span>
+                    <span><strong>{user.stats?.in_progress ?? 0}</strong> in progress</span>
+                  </div>
+                </div>
+                <div className="user-directory-cell">
+                  <div className="user-directory-subtext">
+                    Last login: {formatLastLogin(user.lastLoginAt)}
+                  </div>
+                  <div className="user-directory-subtext">
                     Last request: {formatLastRequest(user.stats?.last_request_at)}
-                  </span>
+                  </div>
+                </div>
+                <div className="user-directory-row-chevron" aria-hidden="true">
+                  Open
                 </div>
               </Link>
             ))}