@prenta/admin 1.8.0 → 1.9.0

package/src/views/MediaBrowser.tsx

@@ -478,6 +478,9 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
       ]
     : []
 
+  const ariaSortFor = (key: MediaSortKey): 'ascending' | 'descending' | 'none' =>
+    sortConfig?.key === key ? (sortConfig.direction === 'asc' ? 'ascending' : 'descending') : 'none'
+
   function SortHeader({ label, sortKey }: { label: string; sortKey: MediaSortKey }) {
     const active = sortConfig?.key === sortKey
     return (
@@ -530,8 +533,9 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
             onClick={() => setSidebarOpen((prev) => !prev)}
             className="hover:bg-muted rounded-lg p-1.5 transition-colors"
             title={sidebarOpen ? 'Hide folders' : 'Show folders'}
+            aria-label={sidebarOpen ? 'Hide folders' : 'Show folders'}
           >
-            <FolderInput className="text-muted-foreground h-5 w-5" />
+            <FolderInput className="text-muted-foreground h-5 w-5" aria-hidden />
           </button>
           <div>
             <h1 className="text-foreground mb-1">Media Library</h1>
@@ -641,10 +645,14 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
               <div className="flex items-center justify-between p-3">
                 <div className="flex flex-1 items-center gap-3">
                   <div className="relative max-w-md flex-1">
-                    <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+                    <Search
+                      className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2"
+                      aria-hidden
+                    />
                     <input
-                      type="text"
+                      type="search"
                       placeholder="Search media..."
+                      aria-label="Search media"
                       value={searchQuery}
                       onChange={(e) => setSearchQuery(e.target.value)}
                       className="border-input focus:ring-ring w-full rounded-lg border py-2 pr-3 pl-9 text-sm focus:ring-2 focus:outline-none"
@@ -653,6 +661,7 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                   <select
                     value={filterType}
                     onChange={(e) => setFilterType(e.target.value)}
+                    aria-label="Filter by type"
                     className="border-input focus:ring-ring rounded-lg border px-3 py-2 text-sm focus:ring-2 focus:outline-none"
                   >
                     <option value="all">All Types</option>
@@ -661,18 +670,28 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                     <option value="document">Documents</option>
                   </select>
                 </div>
-                <div className="bg-muted flex items-center gap-1 rounded-lg p-1">
+                <div
+                  className="bg-muted flex items-center gap-1 rounded-lg p-1"
+                  role="group"
+                  aria-label="Media view"
+                >
                   <button
+                    type="button"
                     onClick={() => setViewMode('grid')}
+                    aria-label="Grid view"
+                    aria-pressed={viewMode === 'grid'}
                     className={`rounded p-1.5 transition-colors ${viewMode === 'grid' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
                   >
-                    <Grid3x3 className="h-4 w-4" />
+                    <Grid3x3 className="h-4 w-4" aria-hidden />
                   </button>
                   <button
+                    type="button"
                     onClick={() => setViewMode('list')}
+                    aria-label="List view"
+                    aria-pressed={viewMode === 'list'}
                     className={`rounded p-1.5 transition-colors ${viewMode === 'list' ? 'bg-card text-foreground shadow-sm' : 'text-muted-foreground hover:text-foreground'}`}
                   >
-                    <List className="h-4 w-4" />
+                    <List className="h-4 w-4" aria-hidden />
                   </button>
                 </div>
               </div>
@@ -838,16 +857,16 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                               />
                             </th>
                             <th className="w-6 px-1 py-2"></th>
-                            <th className="px-3 py-2 text-left">
+                            <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('name')}>
                               <SortHeader label="Name" sortKey="name" />
                             </th>
-                            <th className="px-3 py-2 text-left">
+                            <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('type')}>
                               <SortHeader label="Type" sortKey="type" />
                             </th>
-                            <th className="px-3 py-2 text-left">
+                            <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('size')}>
                               <SortHeader label="Size" sortKey="size" />
                             </th>
-                            <th className="px-3 py-2 text-left">
+                            <th className="px-3 py-2 text-left" aria-sort={ariaSortFor('date')}>
                               <SortHeader label="Uploaded" sortKey="date" />
                             </th>
                             <th className="text-foreground px-3 py-2 text-left text-xs font-medium">
@@ -1016,9 +1035,11 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                               {activeItem.url}
                             </code>
                             <button
+                              type="button"
                               onClick={handleCopyUrl}
                               className="hover:bg-muted shrink-0 rounded p-1.5 transition-colors"
                               title="Copy URL"
+                              aria-label="Copy URL"
                             >
                               <Copy className="text-muted-foreground h-3.5 w-3.5" />
                             </button>
@@ -1278,16 +1299,18 @@ export function MediaBrowser({ onNavigate, currentPath }: MediaBrowserProps) {
                         type="button"
                         className="hover:bg-muted rounded-lg p-2 transition-colors"
                         title="Download"
+                        aria-label="Download"
                       >
-                        <Download className="text-muted-foreground h-4 w-4" />
+                        <Download className="text-muted-foreground h-4 w-4" aria-hidden />
                       </button>
                       <button
                         type="button"
                         onClick={() => deleteMedia(activeItem.id)}
                         className="hover:bg-muted rounded-lg p-2 transition-colors"
                         title="Delete"
+                        aria-label="Delete"
                       >
-                        <Trash2 className="text-destructive h-4 w-4" />
+                        <Trash2 className="text-destructive h-4 w-4" aria-hidden />
                       </button>
                     </div>
                   </div>

package/src/views/Posts/PostsListView.tsx

@@ -176,6 +176,10 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
     [sortBy, dir],
   )
 
+  // `aria-sort` belongs on the column header cell (`<th>`), not the button.
+  const ariaSortFor = (field: SortBy): 'ascending' | 'descending' | 'none' =>
+    sortBy === field ? (dir === 'asc' ? 'ascending' : 'descending') : 'none'
+
   const clearFilters = () => {
     setSearch('')
     setStatus('all')
@@ -369,7 +373,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     className="border-border accent-primary rounded"
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('title')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="Title"
                     field="title"
@@ -378,7 +382,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('type')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="Type"
                     field="type"
@@ -387,7 +391,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('author')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="Author"
                     field="author"
@@ -396,7 +400,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('status')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="Status"
                     field="status"
@@ -405,7 +409,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('date')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="Date"
                     field="date"
@@ -414,7 +418,7 @@ export function PostsListView({ onNavigate }: PostsListViewProps) {
                     onSort={handleSort}
                   />
                 </th>
-                <th scope="col" className="px-3 py-2.5 text-left">
+                <th scope="col" aria-sort={ariaSortFor('seo')} className="px-3 py-2.5 text-left">
                   <SortHeader
                     label="SEO"
                     field="seo"
@@ -523,12 +527,10 @@ function SortHeader({
   onSort: (f: SortBy) => void
 }) {
   const active = current === field
-  const ariaSort = active ? (dir === 'asc' ? 'ascending' : 'descending') : 'none'
   return (
     <button
       type="button"
       onClick={() => onSort(field)}
-      aria-sort={ariaSort}
       className={`hover:text-foreground inline-flex items-center gap-1 text-xs font-medium tracking-wider uppercase transition-colors ${
         active ? 'text-foreground' : 'text-muted-foreground'
       }`}
@@ -599,14 +601,14 @@ function TabPill({
       onClick={onClick}
       className={`relative inline-flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors ${
         active
-          ? 'bg-primary/10 text-primary'
-          : 'text-muted-foreground hover:text-foreground hover:bg-accent'
+          ? 'bg-secondary text-primary'
+          : 'text-muted-foreground hover:bg-accent hover:text-foreground'
       }`}
     >
       <span>{label}</span>
       <span
         className={`rounded-full px-1.5 text-xs tabular-nums ${
-          active ? 'bg-primary/15 text-primary' : 'bg-muted text-muted-foreground'
+          active ? 'bg-card text-primary' : 'bg-muted text-muted-foreground'
         }`}
       >
         {count}

package/src/views/Redirects.tsx

@@ -100,6 +100,9 @@ export function Redirects({ onNavigate }: RedirectsProps) {
     }
   }
 
+  const ariaSortFor = (key: RedirectSortKey): 'ascending' | 'descending' | 'none' =>
+    sortConfig?.key === key ? (sortConfig.direction === 'asc' ? 'ascending' : 'descending') : 'none'
+
   function SortHeader({ label, sortKey }: { label: string; sortKey: RedirectSortKey }) {
     const active = sortConfig?.key === sortKey
     return (
@@ -200,19 +203,19 @@ export function Redirects({ onNavigate }: RedirectsProps) {
             <table className="w-full">
               <thead className="border-border bg-muted border-b">
                 <tr>
-                  <th className="px-4 py-2 text-left">
+                  <th className="px-4 py-2 text-left" aria-sort={ariaSortFor('from')}>
                     <SortHeader label="Source URL" sortKey="from" />
                   </th>
-                  <th className="px-4 py-2 text-left">
+                  <th className="px-4 py-2 text-left" aria-sort={ariaSortFor('to')}>
                     <SortHeader label="Destination URL" sortKey="to" />
                   </th>
-                  <th className="px-4 py-2 text-left">
+                  <th className="px-4 py-2 text-left" aria-sort={ariaSortFor('type')}>
                     <SortHeader label="Type" sortKey="type" />
                   </th>
-                  <th className="px-4 py-2 text-left">
+                  <th className="px-4 py-2 text-left" aria-sort={ariaSortFor('hits')}>
                     <SortHeader label="Hits" sortKey="hits" />
                   </th>
-                  <th className="px-4 py-2 text-left">
+                  <th className="px-4 py-2 text-left" aria-sort={ariaSortFor('active')}>
                     <SortHeader label="Status" sortKey="active" />
                   </th>
                   <th className="text-foreground px-4 py-2 text-left text-xs font-medium">

package/src/views/settings/SessionPolicyCard.tsx

@@ -38,6 +38,8 @@ export function SessionPolicyCard({
   const headingId = useId()
   const maxId = useId()
   const timeoutId = useId()
+  const thresholdId = useId()
+  const minutesId = useId()
   const [confirmRevoke, setConfirmRevoke] = useState(false)
 
   return (
@@ -101,6 +103,44 @@ export function SessionPolicyCard({
             ))}
           </select>
         </div>
+
+        <div className="flex items-center justify-between gap-4">
+          <label htmlFor={thresholdId} className="flex-1">
+            <span className="text-foreground text-base font-medium">Failed-login lockout</span>
+            <p className="text-muted-foreground mt-0.5 text-sm">
+              Lock the account after this many consecutive wrong passwords.
+            </p>
+          </label>
+          <input
+            id={thresholdId}
+            type="number"
+            min={3}
+            max={100}
+            value={form.lockoutThreshold}
+            disabled={!canEdit}
+            onChange={(e) => setField('lockoutThreshold', Number(e.target.value))}
+            className="border-border bg-input-background text-foreground focus-visible:ring-ring w-20 rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          />
+        </div>
+
+        <div className="flex items-center justify-between gap-4">
+          <label htmlFor={minutesId} className="flex-1">
+            <span className="text-foreground text-base font-medium">Lockout duration</span>
+            <p className="text-muted-foreground mt-0.5 text-sm">
+              Minutes the account stays locked before a correct password can unlock it.
+            </p>
+          </label>
+          <input
+            id={minutesId}
+            type="number"
+            min={1}
+            max={1440}
+            value={form.lockoutMinutes}
+            disabled={!canEdit}
+            onChange={(e) => setField('lockoutMinutes', Number(e.target.value))}
+            className="border-border bg-input-background text-foreground focus-visible:ring-ring w-20 rounded-md border px-3 py-2 text-sm focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+          />
+        </div>
       </div>
 
       <div className="border-border mt-4 space-y-2 border-t pt-4">

package/src/views/settings/useSecuritySettings.ts

@@ -19,6 +19,8 @@ export interface SecurityForm {
   /** Raw textarea contents — one IP/CIDR entry per line. */
   ipAllowlistText: string
   auditLoggingEnabled: boolean
+  lockoutThreshold: number
+  lockoutMinutes: number
 }
 
 type SaveState = 'idle' | 'saving' | 'success' | 'error'
@@ -31,6 +33,8 @@ const EMPTY_FORM: SecurityForm = {
   idleLogoutEnabled: false,
   ipAllowlistText: '',
   auditLoggingEnabled: true,
+  lockoutThreshold: 10,
+  lockoutMinutes: 15,
 }
 
 /** Split the textarea into trimmed, de-duplicated entries (one per line). */
@@ -52,6 +56,8 @@ function formFromSettings(s: SecuritySettings): SecurityForm {
     idleLogoutEnabled: s.session.idleLogoutEnabled ?? false,
     ipAllowlistText: (s.access?.ipAllowlist ?? []).join('\n'),
     auditLoggingEnabled: s.access?.auditLoggingEnabled ?? true,
+    lockoutThreshold: s.lockout?.threshold ?? 10,
+    lockoutMinutes: s.lockout?.minutes ?? 15,
   }
 }
 
@@ -67,6 +73,10 @@ function formToSettings(f: SecurityForm): SecuritySettings {
       ipAllowlist: parseAllowlistText(f.ipAllowlistText),
       auditLoggingEnabled: f.auditLoggingEnabled,
     },
+    lockout: {
+      threshold: f.lockoutThreshold,
+      minutes: f.lockoutMinutes,
+    },
   }
 }
 

package/src/views/users/UserDetailDrawer.tsx

@@ -72,6 +72,7 @@ interface UserDetail {
   invitedBy: { id: string; name: string; email: string } | null
   externalDomain: boolean
   contentOwnedCount: number
+  liveApiKeyCount: number
   isCurrentUser: boolean
 }
 
@@ -505,6 +506,18 @@ export function UserDetailDrawer({ userId, open, onOpenChange, onChanged }: User
                   label="Content owned"
                   value={`${u.contentOwnedCount} ${u.contentOwnedCount === 1 ? 'item' : 'items'}`}
                 />
+                <Fact
+                  label="Live API keys"
+                  value={
+                    u.liveApiKeyCount > 0 ? (
+                      <span className="text-warning">
+                        {u.liveApiKeyCount} {u.liveApiKeyCount === 1 ? 'key' : 'keys'}
+                      </span>
+                    ) : (
+                      'None'
+                    )
+                  }
+                />
                 <Fact
                   label="Email verified"
                   value={u.emailVerified ? 'Yes' : <span className="text-warning">No</span>}
@@ -541,7 +554,13 @@ export function UserDetailDrawer({ userId, open, onOpenChange, onChanged }: User
             {/* Security ----------------------------------------------------- */}
             <Tabs.Content value="security" tabIndex={-1} className="focus:outline-none">
               <SecurityRow
-                icon={u.mfaEnabled ? <ShieldCheck size={16} /> : <ShieldAlert size={16} />}
+                icon={
+                  u.mfaEnabled ? (
+                    <ShieldCheck size={16} aria-hidden />
+                  ) : (
+                    <ShieldAlert size={16} aria-hidden />
+                  )
+                }
                 title="Multi-factor authentication"
                 description={
                   u.mfaEnabled
@@ -600,7 +619,7 @@ export function UserDetailDrawer({ userId, open, onOpenChange, onChanged }: User
                 }
               />
               <SecurityRow
-                icon={<KeyRound size={16} />}
+                icon={<KeyRound size={16} aria-hidden />}
                 title="Password"
                 description={
                   u.ssoOnly
@@ -660,13 +679,19 @@ export function UserDetailDrawer({ userId, open, onOpenChange, onChanged }: User
                 }
               />
               <SecurityRow
-                icon={<ShieldAlert size={16} />}
+                icon={<ShieldAlert size={16} aria-hidden />}
                 title="Failed sign-ins"
                 description={`${u.failedLoginCount} failed ${u.failedLoginCount === 1 ? 'attempt' : 'attempts'} on record.`}
                 action={null}
               />
               <SecurityRow
-                icon={u.status === 'locked' ? <Lock size={16} /> : <Unlock size={16} />}
+                icon={
+                  u.status === 'locked' ? (
+                    <Lock size={16} aria-hidden />
+                  ) : (
+                    <Unlock size={16} aria-hidden />
+                  )
+                }
                 title="Account lock"
                 description={
                   u.status === 'locked' ? 'Locked by a security policy or an admin.' : 'Not locked.'
@@ -717,7 +742,7 @@ export function UserDetailDrawer({ userId, open, onOpenChange, onChanged }: User
                 }
               />
               <SecurityRow
-                icon={<Ban size={16} />}
+                icon={<Ban size={16} aria-hidden />}
                 title="Account access"
                 description={
                   u.status === 'suspended'
@@ -850,6 +875,7 @@ export function UserDetailDrawer({ userId, open, onOpenChange, onChanged }: User
                           <button
                             type="button"
                             disabled={pending === `revoke-${s.id}`}
+                            aria-label={`Revoke session on ${s.deviceLabel}`}
                             onClick={() =>
                               runAction(
                                 `revoke-${s.id}`,