From 5dfe614d1594d9b4e0e4e32e6fe595cf9fca9ec7 Mon Sep 17 00:00:00 2001
From: Rephl3x <zak.bearman@amslabs.net>
Date: Thu, 26 Feb 2026 14:42:49 +1300
Subject: [PATCH] Build 2602261442: tidy users and invite layouts

---
 .build_number                       |   2 +-
 backend/app/build_info.py           |   2 +-
 frontend/app/admin/invites/page.tsx | 236 +++++++++++++-----
 frontend/app/globals.css            | 371 ++++++++++++++++++++++++++++
 frontend/app/users/[id]/page.tsx    | 310 +++++++++++++----------
 frontend/app/users/page.tsx         | 262 ++++++++++++--------
 6 files changed, 887 insertions(+), 296 deletions(-)

diff --git a/.build_number b/.build_number
index 29250bb..d617434 100644
--- a/.build_number
+++ b/.build_number
@@ -1 +1 @@
-2602261409
+2602261442
diff --git a/backend/app/build_info.py b/backend/app/build_info.py
index 08ed842..a558e8e 100644
--- a/backend/app/build_info.py
+++ b/backend/app/build_info.py
@@ -1,2 +1,2 @@
-BUILD_NUMBER = "2602261409"
+BUILD_NUMBER = "2602261442"
 CHANGELOG = '2026-01-22\\n- Initial commit\\n- Ignore build artifacts\\n- Update README\\n- Update README with Docker-first guide\\n\\n2026-01-23\\n- Fix cache titles via Jellyseerr media lookup\\n- Split search actions and improve download options\\n- Fallback manual grab to qBittorrent\\n- Hide header actions when signed out\\n- Add feedback form and webhook\\n- Fix cache titles and move feedback link\\n- Show available status on landing when in Jellyfin\\n- Add default branding assets when missing\\n- Use bundled branding assets\\n- Remove password fields from users page\\n- Add Docker Hub compose override\\n- Fix backend Dockerfile paths for root context\\n- Copy public assets into frontend image\\n- Use backend branding assets for logo and favicon\\n\\n2026-01-24\\n- Route grabs through Sonarr/Radarr only\\n- Document fix buttons in how-it-works\\n- Clarify how-it-works steps and fixes\\n- Map Prowlarr releases to Arr indexers for manual grab\\n- Improve request handling and qBittorrent categories\\n\\n2026-01-25\\n- Add site banner, build number, and changelog\\n- Automate build number tagging and sync\\n- Improve mobile header layout\\n- Move account actions into avatar menu\\n- Add user stats and activity tracking\\n- Add Jellyfin login cache and admin-only stats\\n- Tidy request sync controls\\n- Seed branding logo from bundled assets\\n- Serve bundled branding assets by default\\n- Harden request cache titles and cache-only reads\\n- Build 2501262041\\n\\n2026-01-26\\n- Fix cache title hydration\\n- Fix sync progress bar animation\\n\\n2026-01-27\\n- Add cache control artwork stats\\n- Improve cache stats performance (build 271261145)\\n- Fix backend cache stats import (build 271261149)\\n- Clarify request sync settings (build 271261159)\\n- Bump build number to 271261202\\n- Fix request titles in snapshots (build 271261219)\\n- Fix snapshot title fallback (build 271261228)\\n- Add cache load spinner (build 271261238)\\n- Bump build number (process 2) 271261322\\n- Add service test buttons (build 271261335)\\n- Fallback to TMDB when artwork cache fails (build 271261524)\\n- Hydrate missing artwork from Jellyseerr (build 271261539)\\n\\n2026-01-29\\n- release: 2901262036\\n- release: 2901262044\\n- release: 2901262102\\n- Hardcode build number in backend\\n- Bake build number and changelog\\n- Update full changelog\\n- Tidy full changelog\\n- Build 2901262240: cache users\n\n2026-01-30\n- Merge backend and frontend into one container'
diff --git a/frontend/app/admin/invites/page.tsx b/frontend/app/admin/invites/page.tsx
index 4732ade..98f5e2b 100644
--- a/frontend/app/admin/invites/page.tsx
+++ b/frontend/app/admin/invites/page.tsx
@@ -63,6 +63,8 @@ type ProfileForm = {
   is_active: boolean
 }
 
+type InviteManagementTab = 'bulk' | 'profiles' | 'invites'
+
 const defaultInviteForm = (): InviteForm => ({
   code: '',
   label: '',
@@ -113,6 +115,7 @@ export default function AdminInviteManagementPage() {
 
   const [bulkProfileId, setBulkProfileId] = useState('')
   const [bulkExpiryDays, setBulkExpiryDays] = useState('')
+  const [activeTab, setActiveTab] = useState<InviteManagementTab>('bulk')
 
   const signupBaseUrl = useMemo(() => {
     if (typeof window === 'undefined') return '/signup'
@@ -461,6 +464,9 @@ export default function AdminInviteManagementPage() {
   const nonAdminUsers = users.filter((user) => user.role !== 'admin')
   const profiledUsers = nonAdminUsers.filter((user) => user.profile_id != null).length
   const expiringUsers = nonAdminUsers.filter((user) => Boolean(user.expires_at)).length
+  const usableInvites = invites.filter((invite) => invite.is_usable !== false).length
+  const disabledInvites = invites.filter((invite) => invite.enabled === false).length
+  const activeProfiles = profiles.filter((profile) => profile.is_active !== false).length
 
   return (
     <AdminShell
@@ -471,10 +477,24 @@ export default function AdminInviteManagementPage() {
           <button type="button" onClick={loadData} disabled={loading}>
             {loading ? 'Loading…' : 'Reload'}
           </button>
-          <button type="button" className="ghost-button" onClick={resetInviteEditor}>
+          <button
+            type="button"
+            className="ghost-button"
+            onClick={() => {
+              resetInviteEditor()
+              setActiveTab('invites')
+            }}
+          >
             New invite
           </button>
-          <button type="button" className="ghost-button" onClick={resetProfileEditor}>
+          <button
+            type="button"
+            className="ghost-button"
+            onClick={() => {
+              resetProfileEditor()
+              setActiveTab('profiles')
+            }}
+          >
             New profile
           </button>
         </div>
@@ -484,63 +504,165 @@ export default function AdminInviteManagementPage() {
         {error && <div className="error-banner">{error}</div>}
         {status && <div className="status-banner">{status}</div>}
 
-        <div className="admin-panel">
-          <h2>Blanket controls</h2>
-          <p className="lede">
-            Apply invite profile defaults or expiry to all non-admin users. Individual users can still be edited from their user page.
-          </p>
-          <div className="admin-meta-row">
-            <span>Non-admin users: {nonAdminUsers.length}</span>
-            <span>Profile assigned: {profiledUsers}</span>
-            <span>Custom expiry set: {expiringUsers}</span>
+        <div className="invite-admin-summary-grid">
+          <div className="admin-summary-tile invite-admin-summary-tile">
+            <span className="label">Invites</span>
+            <strong>{invites.length}</strong>
+            <small>{usableInvites} usable • {disabledInvites} disabled</small>
           </div>
-          <div className="user-bulk-groups">
-            <div className="user-bulk-group">
-              <label className="admin-select">
-                <span>Profile</span>
-                <select
-                  value={bulkProfileId}
-                  onChange={(e) => setBulkProfileId(e.target.value)}
-                  disabled={bulkProfileBusy}
-                >
-                  <option value="">None / clear assignment</option>
-                  {profiles.map((profile) => (
-                    <option key={profile.id} value={profile.id}>
-                      {profile.name}{profile.is_active === false ? ' (disabled)' : ''}
-                    </option>
-                  ))}
-                </select>
-              </label>
-              <button type="button" onClick={bulkApplyProfile} disabled={bulkProfileBusy}>
-                {bulkProfileBusy ? 'Applying…' : 'Apply profile to all users'}
-              </button>
-            </div>
-            <div className="user-bulk-group">
-              <label>
-                <span className="user-bulk-label">Expiry days</span>
-                <input
-                  value={bulkExpiryDays}
-                  onChange={(e) => setBulkExpiryDays(e.target.value)}
-                  inputMode="numeric"
-                  placeholder="e.g. 30"
-                  disabled={bulkExpiryBusy}
-                />
-              </label>
-              <button type="button" onClick={bulkSetExpiryDays} disabled={bulkExpiryBusy}>
-                {bulkExpiryBusy ? 'Working…' : 'Set expiry for all users'}
-              </button>
-              <button
-                type="button"
-                className="ghost-button"
-                onClick={bulkClearExpiry}
-                disabled={bulkExpiryBusy}
-              >
-                {bulkExpiryBusy ? 'Working…' : 'Clear expiry for all users'}
-              </button>
-            </div>
+          <div className="admin-summary-tile invite-admin-summary-tile">
+            <span className="label">Profiles</span>
+            <strong>{profiles.length}</strong>
+            <small>{activeProfiles} active profiles</small>
+          </div>
+          <div className="admin-summary-tile invite-admin-summary-tile">
+            <span className="label">Non-admin users</span>
+            <strong>{nonAdminUsers.length}</strong>
+            <small>{profiledUsers} with profile</small>
+          </div>
+          <div className="admin-summary-tile invite-admin-summary-tile">
+            <span className="label">Expiry rules</span>
+            <strong>{expiringUsers}</strong>
+            <small>users with custom expiry</small>
           </div>
         </div>
 
+        <div className="admin-segmented" role="tablist" aria-label="Invite management sections">
+          <button
+            type="button"
+            role="tab"
+            aria-selected={activeTab === 'bulk'}
+            className={activeTab === 'bulk' ? 'is-active' : ''}
+            onClick={() => setActiveTab('bulk')}
+          >
+            Blanket controls
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={activeTab === 'profiles'}
+            className={activeTab === 'profiles' ? 'is-active' : ''}
+            onClick={() => setActiveTab('profiles')}
+          >
+            Profiles
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={activeTab === 'invites'}
+            className={activeTab === 'invites' ? 'is-active' : ''}
+            onClick={() => setActiveTab('invites')}
+          >
+            Invites
+          </button>
+        </div>
+
+        {activeTab === 'bulk' && (
+          <div className="admin-split-grid invite-admin-bulk-grid">
+            <div className="admin-panel">
+              <div className="user-directory-panel-header">
+                <div>
+                  <h2>Blanket controls</h2>
+                  <p className="lede">
+                    Apply invite profile defaults or expiry to all non-admin users. Individual users can still be edited from their user page.
+                  </p>
+                </div>
+              </div>
+              <div className="admin-meta-row">
+                <span>Non-admin users: {nonAdminUsers.length}</span>
+                <span>Profile assigned: {profiledUsers}</span>
+                <span>Custom expiry set: {expiringUsers}</span>
+              </div>
+              <div className="user-bulk-groups">
+                <div className="user-bulk-group">
+                  <label className="admin-select">
+                    <span>Profile</span>
+                    <select
+                      value={bulkProfileId}
+                      onChange={(e) => setBulkProfileId(e.target.value)}
+                      disabled={bulkProfileBusy}
+                    >
+                      <option value="">None / clear assignment</option>
+                      {profiles.map((profile) => (
+                        <option key={profile.id} value={profile.id}>
+                          {profile.name}{profile.is_active === false ? ' (disabled)' : ''}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                  <button type="button" onClick={bulkApplyProfile} disabled={bulkProfileBusy}>
+                    {bulkProfileBusy ? 'Applying…' : 'Apply profile to all users'}
+                  </button>
+                </div>
+                <div className="user-bulk-group">
+                  <label>
+                    <span className="user-bulk-label">Expiry days</span>
+                    <input
+                      value={bulkExpiryDays}
+                      onChange={(e) => setBulkExpiryDays(e.target.value)}
+                      inputMode="numeric"
+                      placeholder="e.g. 30"
+                      disabled={bulkExpiryBusy}
+                    />
+                  </label>
+                  <button type="button" onClick={bulkSetExpiryDays} disabled={bulkExpiryBusy}>
+                    {bulkExpiryBusy ? 'Working…' : 'Set expiry for all users'}
+                  </button>
+                  <button
+                    type="button"
+                    className="ghost-button"
+                    onClick={bulkClearExpiry}
+                    disabled={bulkExpiryBusy}
+                  >
+                    {bulkExpiryBusy ? 'Working…' : 'Clear expiry for all users'}
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div className="admin-panel">
+              <div className="user-directory-panel-header">
+                <div>
+                  <h2>How this page is organized</h2>
+                  <p className="lede">Use tabs to switch between blanket controls, reusable profiles, and invite links.</p>
+                </div>
+              </div>
+              <div className="admin-list">
+                <div className="admin-list-item">
+                  <div className="admin-list-item-main">
+                    <div className="admin-list-item-title-row">
+                      <strong>Profiles</strong>
+                    </div>
+                    <p className="admin-list-item-text">
+                      Create reusable account defaults and apply them to invite links or existing users.
+                    </p>
+                  </div>
+                  <div className="admin-inline-actions">
+                    <button type="button" className="ghost-button" onClick={() => setActiveTab('profiles')}>
+                      Open
+                    </button>
+                  </div>
+                </div>
+                <div className="admin-list-item">
+                  <div className="admin-list-item-main">
+                    <div className="admin-list-item-title-row">
+                      <strong>Invites</strong>
+                    </div>
+                    <p className="admin-list-item-text">
+                      Create and manage signup links, assign profiles, and copy shareable URLs.
+                    </p>
+                  </div>
+                  <div className="admin-inline-actions">
+                    <button type="button" className="ghost-button" onClick={() => setActiveTab('invites')}>
+                      Open
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {activeTab === 'profiles' && (
         <div className="admin-split-grid">
           <div className="admin-panel">
             <h2>{profileEditingId == null ? 'Create profile' : 'Edit profile'}</h2>
@@ -684,7 +806,9 @@ export default function AdminInviteManagementPage() {
             )}
           </div>
         </div>
+        )}
 
+        {activeTab === 'invites' && (
         <div className="admin-split-grid">
           <div className="admin-panel">
             <h2>{inviteEditingId == null ? 'Create invite' : 'Edit invite'}</h2>
@@ -856,8 +980,8 @@ export default function AdminInviteManagementPage() {
             )}
           </div>
         </div>
+        )}
       </section>
     </AdminShell>
   )
 }
-
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 62a4f8f..686c05d 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -4129,3 +4129,374 @@ button:hover:not(:disabled) {
     flex-basis: 100%;
   }
 }
+
+/* 1.3 UI layout cleanup: users + invite management */
+.user-directory-control-grid {
+  display: grid;
+  grid-template-columns: 1.2fr minmax(320px, 0.8fr);
+  gap: 12px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  align-items: start;
+}
+
+.user-directory-search-panel,
+.user-directory-bulk-panel {
+  display: grid;
+  gap: 10px;
+}
+
+.user-directory-panel-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+}
+
+.user-directory-panel-header h2 {
+  margin: 0;
+  font-size: 0.98rem;
+  letter-spacing: 0.01em;
+}
+
+.user-directory-panel-header .lede {
+  margin: 4px 0 0;
+  max-width: 46ch;
+}
+
+.user-directory-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 10px;
+  align-items: end;
+}
+
+.user-directory-search {
+  width: 100%;
+}
+
+.user-directory-search > label {
+  display: grid;
+  gap: 6px;
+}
+
+.user-directory-search input {
+  width: 100%;
+}
+
+.user-bulk-toolbar {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 12px;
+  align-items: center;
+}
+
+.user-bulk-summary {
+  display: grid;
+  gap: 4px;
+}
+
+.user-bulk-summary strong {
+  font-size: 0.92rem;
+}
+
+.user-bulk-summary span {
+  color: #9ea7b6;
+  font-size: 0.82rem;
+}
+
+.user-bulk-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.user-directory-list {
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.015);
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.user-directory-header {
+  display: grid;
+  grid-template-columns: 1.3fr 1.35fr 1fr 1.05fr auto;
+  gap: 10px;
+  padding: 12px 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+  color: #9ea7b6;
+  font-size: 0.72rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.user-directory-row {
+  display: grid;
+  grid-template-columns: 1.3fr 1.35fr 1fr 1.05fr auto;
+  gap: 10px;
+  align-items: center;
+  padding: 13px 14px;
+  border-top: 1px solid rgba(255, 255, 255, 0.04);
+  color: inherit;
+  text-decoration: none;
+  transition: background-color 120ms ease, border-color 120ms ease;
+}
+
+.user-directory-row:first-of-type {
+  border-top: 0;
+}
+
+.user-directory-row:hover {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+.user-directory-cell {
+  min-width: 0;
+  display: grid;
+  gap: 5px;
+}
+
+.user-directory-cell--identity .user-directory-title-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.user-directory-cell--identity strong {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.user-directory-subtext {
+  color: #98a1af;
+  font-size: 0.78rem;
+  line-height: 1.3;
+}
+
+.user-directory-pill-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.user-directory-stats-inline {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 6px 10px;
+  color: #b8c0cc;
+  font-size: 0.78rem;
+}
+
+.user-directory-stats-inline strong {
+  color: #eef2f7;
+  font-weight: 700;
+}
+
+.user-directory-row-chevron {
+  color: #a9b2c2;
+  font-size: 0.76rem;
+  border: 1px solid rgba(255, 255, 255, 0.07);
+  border-radius: 999px;
+  padding: 4px 10px;
+  white-space: nowrap;
+}
+
+.user-detail-page-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
+  gap: 14px;
+  align-items: start;
+}
+
+.user-detail-main-column,
+.user-detail-side-column {
+  display: grid;
+  gap: 14px;
+}
+
+.user-detail-panel {
+  display: grid;
+  gap: 12px;
+}
+
+.user-detail-panel-header {
+  display: grid;
+  gap: 6px;
+}
+
+.user-detail-panel-header h2 {
+  margin: 0;
+  font-size: 0.98rem;
+}
+
+.user-detail-panel-header .lede {
+  margin: 0;
+}
+
+.user-detail-meta-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.user-detail-meta-item {
+  display: grid;
+  gap: 4px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.015);
+  border-radius: 10px;
+  padding: 10px 11px;
+}
+
+.user-detail-meta-item .label {
+  color: #9ea7b6;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.user-detail-meta-item strong {
+  font-size: 0.9rem;
+  color: #e7ebf1;
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.user-detail-control-stack {
+  display: grid;
+  gap: 8px;
+}
+
+.user-detail-control-stack .toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.05);
+  background: rgba(255, 255, 255, 0.015);
+}
+
+.user-detail-control-stack > button {
+  justify-self: start;
+}
+
+.user-detail-grid {
+  gap: 10px;
+}
+
+.user-detail-stat {
+  border-radius: 10px;
+}
+
+.invite-admin-summary-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 10px;
+  margin-bottom: 12px;
+}
+
+.invite-admin-summary-tile {
+  min-height: 96px;
+}
+
+.admin-segmented {
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 5px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  background: rgba(255, 255, 255, 0.02);
+  border-radius: 12px;
+  margin-bottom: 12px;
+}
+
+.admin-segmented button {
+  border: 1px solid transparent;
+  background: transparent;
+  color: #b6bfcb;
+  padding: 8px 12px;
+  border-radius: 9px;
+  font-size: 0.84rem;
+  font-weight: 600;
+}
+
+.admin-segmented button:hover {
+  background: rgba(255, 255, 255, 0.03);
+  color: #e3e8ef;
+}
+
+.admin-segmented button.is-active {
+  background: rgba(96, 132, 179, 0.14);
+  border-color: rgba(96, 132, 179, 0.25);
+  color: #e7eef9;
+}
+
+.invite-admin-bulk-grid {
+  grid-template-columns: minmax(360px, 1.2fr) minmax(300px, 0.8fr);
+}
+
+.admin-panel > h2 + .lede {
+  margin-top: -2px;
+}
+
+@media (max-width: 1180px) {
+  .user-directory-control-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .user-detail-page-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .invite-admin-summary-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .invite-admin-bulk-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 980px) {
+  .user-bulk-toolbar {
+    grid-template-columns: 1fr;
+    align-items: stretch;
+  }
+
+  .user-bulk-actions {
+    justify-content: flex-start;
+  }
+
+  .user-directory-header {
+    display: none;
+  }
+
+  .user-directory-row {
+    grid-template-columns: 1fr;
+    gap: 8px;
+    align-items: start;
+  }
+
+  .user-directory-cell {
+    gap: 6px;
+  }
+
+  .user-directory-row-chevron {
+    justify-self: start;
+  }
+
+  .user-detail-meta-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .invite-admin-summary-grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/frontend/app/users/[id]/page.tsx b/frontend/app/users/[id]/page.tsx
index 8881be5..dfc9a72 100644
--- a/frontend/app/users/[id]/page.tsx
+++ b/frontend/app/users/[id]/page.tsx
@@ -344,114 +344,128 @@ export default function UserDetailPage() {
         {!user ? (
           <div className="status-banner">No user data found.</div>
         ) : (
-          <>
-            <div className="user-detail-card">
-              <div className="user-detail-layout">
-                <div className="user-detail-identity">
+          <div className="user-detail-page-grid">
+            <div className="user-detail-main-column">
+              <div className="admin-panel user-detail-panel">
+                <div className="user-detail-panel-header">
                   <div className="user-detail-title-row">
                     <strong className="user-detail-name">{user.username}</strong>
                     <span className={`user-grid-pill ${user.is_blocked ? 'is-blocked' : ''}`}>
                       {user.is_blocked ? 'Blocked' : 'Active'}
                     </span>
+                    <span className={`user-grid-pill ${user.is_expired ? 'is-blocked' : ''}`}>
+                      {user.is_expired ? 'Expired' : user.expires_at ? 'Expiry set' : 'No expiry'}
+                    </span>
                   </div>
-                  <div className="user-detail-meta-pills">
-                    <span className="user-detail-chip">
-                      Jellyseerr ID: {user.jellyseerr_user_id ?? user.id ?? 'Unknown'}
-                    </span>
-                    <span className="user-detail-chip">Role: {user.role}</span>
-                    <span className="user-detail-chip">Login type: {user.auth_provider || 'local'}</span>
-                    <span className="user-detail-chip">Profile: {user.profile_id ?? 'None'}</span>
-                    <span className={`user-detail-chip ${user.is_expired ? 'is-blocked' : ''}`}>
-                      Expiry: {user.expires_at ? formatDateTime(user.expires_at) : 'Never'}
-                    </span>
-                    <span className="user-detail-chip">Last login: {formatDateTime(user.last_login_at)}</span>
+                  <p className="lede">
+                    User identity, access state, and request history for this account.
+                  </p>
+                </div>
+                <div className="user-detail-meta-grid">
+                  <div className="user-detail-meta-item">
+                    <span className="label">Jellyseerr ID</span>
+                    <strong>{user.jellyseerr_user_id ?? user.id ?? 'Unknown'}</strong>
+                  </div>
+                  <div className="user-detail-meta-item">
+                    <span className="label">Role</span>
+                    <strong>{user.role}</strong>
+                  </div>
+                  <div className="user-detail-meta-item">
+                    <span className="label">Login type</span>
+                    <strong>{user.auth_provider || 'local'}</strong>
+                  </div>
+                  <div className="user-detail-meta-item">
+                    <span className="label">Assigned profile</span>
+                    <strong>{user.profile_id ?? 'None'}</strong>
+                  </div>
+                  <div className="user-detail-meta-item">
+                    <span className="label">Last login</span>
+                    <strong>{formatDateTime(user.last_login_at)}</strong>
+                  </div>
+                  <div className="user-detail-meta-item">
+                    <span className="label">Account expiry</span>
+                    <strong>{user.expires_at ? formatDateTime(user.expires_at) : 'Never'}</strong>
                   </div>
                 </div>
-                <div className="user-detail-controls">
-                  <div className="user-detail-controls-title">User controls</div>
-                  <div className="user-detail-actions">
-                    <label className="toggle">
-                      <input
-                        type="checkbox"
-                        checked={user.role === 'admin'}
-                        onChange={(event) => updateUserRole(event.target.checked ? 'admin' : 'user')}
-                      />
-                      <span>Make admin</span>
-                    </label>
-                    <label className="toggle">
-                      <input
-                        type="checkbox"
-                        checked={Boolean(user.auto_search_enabled ?? true)}
-                        disabled={user.role === 'admin'}
-                        onChange={(event) => updateAutoSearchEnabled(event.target.checked)}
-                      />
-                      <span>Allow auto search/download</span>
-                    </label>
-                    <button
-                      type="button"
-                      className="ghost-button"
-                      onClick={() => toggleUserBlock(!user.is_blocked)}
-                    >
-                      {user.is_blocked ? 'Allow access' : 'Block access'}
-                    </button>
+              </div>
+
+              <div className="admin-panel user-detail-panel">
+                <div className="user-detail-panel-header">
+                  <h2>Request statistics</h2>
+                  <p className="lede">Snapshot of request states and recent activity for this user.</p>
+                </div>
+                <div className="user-detail-grid">
+                  <div className="user-detail-stat">
+                    <span className="label">Total</span>
+                    <span className="value">{stats?.total ?? 0}</span>
                   </div>
-                  <div className="user-detail-actions user-detail-actions--stacked">
-                    <label className="admin-select">
-                      <span>Assigned profile</span>
-                      <select
-                        value={profileSelection}
-                        onChange={(event) => setProfileSelection(event.target.value)}
-                        disabled={savingProfile}
-                      >
-                        <option value="">None</option>
-                        {profiles.map((profile) => (
-                          <option key={profile.id} value={profile.id}>
-                            {profile.name}{profile.is_active === false ? ' (disabled)' : ''}
-                          </option>
-                        ))}
-                      </select>
-                    </label>
-                    <div className="admin-inline-actions">
-                      <button type="button" onClick={() => void applyProfileToUser()} disabled={savingProfile}>
-                        {savingProfile ? 'Applying...' : 'Apply profile defaults'}
-                      </button>
-                      <button
-                        type="button"
-                        className="ghost-button"
-                        onClick={() => {
-                          setProfileSelection('')
-                          void applyProfileToUser('')
-                        }}
-                        disabled={savingProfile}
-                      >
-                        Clear profile
-                      </button>
-                    </div>
+                  <div className="user-detail-stat">
+                    <span className="label">Ready</span>
+                    <span className="value">{stats?.ready ?? 0}</span>
                   </div>
-                  <div className="user-detail-actions user-detail-actions--stacked">
-                    <label>
-                      <span className="user-bulk-label">Account expiry</span>
-                      <input
-                        type="datetime-local"
-                        value={expiryInput}
-                        onChange={(event) => setExpiryInput(event.target.value)}
-                        disabled={savingExpiry}
-                      />
-                    </label>
-                    <div className="admin-inline-actions">
-                      <button type="button" onClick={saveUserExpiry} disabled={savingExpiry}>
-                        {savingExpiry ? 'Saving...' : 'Save expiry'}
-                      </button>
-                      <button
-                        type="button"
-                        className="ghost-button"
-                        onClick={clearUserExpiry}
-                        disabled={savingExpiry}
-                      >
-                        Clear expiry
-                      </button>
-                    </div>
+                  <div className="user-detail-stat">
+                    <span className="label">Pending</span>
+                    <span className="value">{stats?.pending ?? 0}</span>
                   </div>
+                  <div className="user-detail-stat">
+                    <span className="label">Approved</span>
+                    <span className="value">{stats?.approved ?? 0}</span>
+                  </div>
+                  <div className="user-detail-stat">
+                    <span className="label">Working</span>
+                    <span className="value">{stats?.working ?? 0}</span>
+                  </div>
+                  <div className="user-detail-stat">
+                    <span className="label">Partial</span>
+                    <span className="value">{stats?.partial ?? 0}</span>
+                  </div>
+                  <div className="user-detail-stat">
+                    <span className="label">Declined</span>
+                    <span className="value">{stats?.declined ?? 0}</span>
+                  </div>
+                  <div className="user-detail-stat">
+                    <span className="label">In progress</span>
+                    <span className="value">{stats?.in_progress ?? 0}</span>
+                  </div>
+                  <div className="user-detail-stat user-detail-stat--wide">
+                    <span className="label">Last request</span>
+                    <span className="value">{formatDateTime(stats?.last_request_at)}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <div className="user-detail-side-column">
+              <div className="admin-panel user-detail-panel">
+                <div className="user-detail-panel-header">
+                  <h2>Access controls</h2>
+                  <p className="lede">Role, login access, and auto-download behavior.</p>
+                </div>
+                <div className="user-detail-control-stack">
+                  <label className="toggle">
+                    <input
+                      type="checkbox"
+                      checked={user.role === 'admin'}
+                      onChange={(event) => updateUserRole(event.target.checked ? 'admin' : 'user')}
+                    />
+                    <span>Make admin</span>
+                  </label>
+                  <label className="toggle">
+                    <input
+                      type="checkbox"
+                      checked={Boolean(user.auto_search_enabled ?? true)}
+                      disabled={user.role === 'admin'}
+                      onChange={(event) => updateAutoSearchEnabled(event.target.checked)}
+                    />
+                    <span>Allow auto search/download</span>
+                  </label>
+                  <button
+                    type="button"
+                    className="ghost-button"
+                    onClick={() => toggleUserBlock(!user.is_blocked)}
+                  >
+                    {user.is_blocked ? 'Allow access' : 'Block access'}
+                  </button>
                   {user.role === 'admin' && (
                     <div className="user-detail-helper">
                       Admins always have auto search/download access.
@@ -459,46 +473,80 @@ export default function UserDetailPage() {
                   )}
                 </div>
               </div>
-              <div className="user-detail-grid">
-                <div className="user-detail-stat">
-                  <span className="label">Total</span>
-                  <span className="value">{stats?.total ?? 0}</span>
+
+              <div className="admin-panel user-detail-panel">
+                <div className="user-detail-panel-header">
+                  <h2>Profile defaults</h2>
+                  <p className="lede">Assign or clear an invite profile for this user.</p>
                 </div>
-                <div className="user-detail-stat">
-                  <span className="label">Ready</span>
-                  <span className="value">{stats?.ready ?? 0}</span>
+                <div className="user-detail-actions user-detail-actions--stacked">
+                  <label className="admin-select">
+                    <span>Assigned profile</span>
+                    <select
+                      value={profileSelection}
+                      onChange={(event) => setProfileSelection(event.target.value)}
+                      disabled={savingProfile}
+                    >
+                      <option value="">None</option>
+                      {profiles.map((profile) => (
+                        <option key={profile.id} value={profile.id}>
+                          {profile.name}
+                          {profile.is_active === false ? ' (disabled)' : ''}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                  <div className="admin-inline-actions">
+                    <button type="button" onClick={() => void applyProfileToUser()} disabled={savingProfile}>
+                      {savingProfile ? 'Applying...' : 'Apply profile defaults'}
+                    </button>
+                    <button
+                      type="button"
+                      className="ghost-button"
+                      onClick={() => {
+                        setProfileSelection('')
+                        void applyProfileToUser('')
+                      }}
+                      disabled={savingProfile}
+                    >
+                      Clear profile
+                    </button>
+                  </div>
                 </div>
-                <div className="user-detail-stat">
-                  <span className="label">Pending</span>
-                  <span className="value">{stats?.pending ?? 0}</span>
+              </div>
+
+              <div className="admin-panel user-detail-panel">
+                <div className="user-detail-panel-header">
+                  <h2>Account expiry</h2>
+                  <p className="lede">Set a specific expiry date/time for this user account.</p>
                 </div>
-                <div className="user-detail-stat">
-                  <span className="label">Approved</span>
-                  <span className="value">{stats?.approved ?? 0}</span>
-                </div>
-                <div className="user-detail-stat">
-                  <span className="label">Working</span>
-                  <span className="value">{stats?.working ?? 0}</span>
-                </div>
-                <div className="user-detail-stat">
-                  <span className="label">Partial</span>
-                  <span className="value">{stats?.partial ?? 0}</span>
-                </div>
-                <div className="user-detail-stat">
-                  <span className="label">Declined</span>
-                  <span className="value">{stats?.declined ?? 0}</span>
-                </div>
-                <div className="user-detail-stat">
-                  <span className="label">In progress</span>
-                  <span className="value">{stats?.in_progress ?? 0}</span>
-                </div>
-                <div className="user-detail-stat user-detail-stat--wide">
-                  <span className="label">Last request</span>
-                  <span className="value">{formatDateTime(stats?.last_request_at)}</span>
+                <div className="user-detail-actions user-detail-actions--stacked">
+                  <label>
+                    <span className="user-bulk-label">Account expiry</span>
+                    <input
+                      type="datetime-local"
+                      value={expiryInput}
+                      onChange={(event) => setExpiryInput(event.target.value)}
+                      disabled={savingExpiry}
+                    />
+                  </label>
+                  <div className="admin-inline-actions">
+                    <button type="button" onClick={saveUserExpiry} disabled={savingExpiry}>
+                      {savingExpiry ? 'Saving...' : 'Save expiry'}
+                    </button>
+                    <button
+                      type="button"
+                      className="ghost-button"
+                      onClick={clearUserExpiry}
+                      disabled={savingExpiry}
+                    >
+                      Clear expiry
+                    </button>
+                  </div>
                 </div>
               </div>
             </div>
-          </>
+          </div>
         )}
       </section>
     </AdminShell>
diff --git a/frontend/app/users/page.tsx b/frontend/app/users/page.tsx
index f3005b3..762179c 100644
--- a/frontend/app/users/page.tsx
+++ b/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>
             ))}